Remove dom purify to reduce bundle size (#439)

package.json

@@ -41,7 +41,6 @@
  "@types/dompurify": "^3.0.5",
  "@types/node": "^18.11.13",
  "@types/react": "^18.0.26",
- "dompurify": "^3.0.9",
  "prettier": "^2.8.4",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",

src/index.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import DOMPurify from 'dompurify';
 import { getAsset, Loader } from './assets';
 import { useIsDocumentHidden } from './hooks';
 import { toast, ToastState } from './state';
@@ -250,10 +249,6 @@ const Toast = (props: ToastProps) => {
  return <Loader visible={toastType === 'loading'} />;
  }
 
- function sanitizeHTML(html: string): { __html: string } {
- return { __html: DOMPurify.sanitize(html) };
- }
-
  return (
  <li
  aria-live={toast.important ? 'assertive' : 'polite'}
@@ -391,11 +386,9 @@ const Toast = (props: ToastProps) => {
  ) : null}
 
  <div data-content="" className={cn(classNames?.content, toast?.classNames?.content)}>
- <div
- data-title=""
- className={cn(classNames?.title, toast?.classNames?.title)}
- dangerouslySetInnerHTML={sanitizeHTML(toast.title as string)}
- ></div>
+ <div data-title="" className={cn(classNames?.title, toast?.classNames?.title)}>
+ {toast.title}
+ </div>
  {toast.description ? (
  <div
  data-description=""
@@ -404,12 +397,9 @@ const Toast = (props: ToastProps) => {
  toastDescriptionClassname,
  classNames?.description,
  toast?.classNames?.description,
- )}
- dangerouslySetInnerHTML={
- typeof toast.description === 'string' ? sanitizeHTML(toast.description as string) : undefined
- }
+ )}
  >
- {typeof toast.description === 'object' ? toast.description : null}
+ {toast.description}
  </div>
  ) : null}
  </div>
@@ -437,7 +427,7 @@ const Toast = (props: ToastProps) => {
  ) : toast.action && isAction(toast.action) ? (
  <button
  data-button
- data-action
+ data-action
  style={toast.actionButtonStyle || actionButtonStyle}
  onClick={(event) => {
  // We need to check twice because typescript