fix: Toast is removed using onClick (#9832)

* toaster is removed using onclick

* Apply suggestions from code review

* Update showToast.tsx

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/ui/components/toast/showToast.tsx

@@ -6,14 +6,16 @@ import { Check, Info } from "../icon";
 type IToast = {
   message: string;
   toastVisible: boolean;
+  onClose: () => void;
 };
 
-export const SuccessToast = ({ message, toastVisible }: IToast) => (
+export const SuccessToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
+      toastVisible && "animate-fade-in-up cursor-pointer"
-    )}>
+    )}
+    onClick={onClose}>
     <span>
       <Check className="h-4 w-4" />
     </span>
@@ -21,12 +23,13 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
   </div>
 );
 
-export const ErrorToast = ({ message, toastVisible }: IToast) => (
+export const ErrorToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
+      toastVisible && "animate-fade-in-up cursor-pointer"
-    )}>
+    )}
+    onClick={onClose}>
     <span>
       <Info className="h-4 w-4" />
     </span>
@@ -34,12 +37,13 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
   </div>
 );
 
-export const WarningToast = ({ message, toastVisible }: IToast) => (
+export const WarningToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "animate-fade-in-up bg-brand-default text-brand mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
+      toastVisible && "animate-fade-in-up cursor-pointer"
-    )}>
+    )}
+    onClick={onClose}>
     <span>
       <Info className="h-4 w-4" />
     </span>
@@ -47,12 +51,13 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
   </div>
 );
 
-export const DefaultToast = ({ message, toastVisible }: IToast) => (
+export const DefaultToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
+      toastVisible && "animate-fade-in-up cursor-pointer"
-    )}>
+    )}
+    onClick={onClose}>
     <span>
       <Check className="h-4 w-4" />
     </span>
@@ -67,14 +72,29 @@ export function showToast(
   variant: "success" | "warning" | "error",
   duration = TOAST_VISIBLE_DURATION
 ) {
+  const onClose = () => {
+    toast.dismiss();
+  };
   switch (variant) {
     case "success":
-      return toast.custom((t) => <SuccessToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
     case "error":
-      return toast.custom((t) => <ErrorToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
     case "warning":
-      return toast.custom((t) => <WarningToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
     default:
-      return toast.custom((t) => <DefaultToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
   }
 }