Merge pull request #4862 from Infisical/fix/toast-interaction-with-modal-and-drawer-open

[ENG-3456] fix: toast interaction with modal and drawer

frontend/src/components/notifications/Notifications.tsx

@@ -67,7 +67,8 @@ export const createNotification = (
     ...toastProps,
     autoClose: toastProps.autoClose || 15000,
     theme: "dark",
-    type: myProps?.type || "info"
+    type: myProps?.type || "info",
+    className: `pointer-events-auto ${toastProps.className}`
   });
 
 export const NotificationContainer = () => (

frontend/src/components/v2/Drawer/Drawer.tsx

@@ -55,6 +55,19 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         {...props}
         ref={forwardedRef}
         className={twMerge(drawerContentVariation({ direction, className }))}
+        onPointerDownOutside={(e) => {
+          const target = e.target as HTMLElement;
+          const toastElement = target.closest('[class*="Toastify"]');
+          if (toastElement) {
+            e.preventDefault();
+            return;
+          }
+
+          if (onClose) {
+            onClose();
+          }
+          props.onPointerDownOutside?.(e);
+        }}
       >
         <Card isRounded={false} className="dark h-full w-full">
           {title && (

frontend/src/components/v2/Modal/Modal.tsx

@@ -15,6 +15,7 @@ export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, "title"
   onClose?: () => void;
   overlayClassName?: string;
   showCloseButton?: boolean;
+  closeOnOutsideClick?: boolean;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
@@ -29,6 +30,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
       bodyClassName,
       onClose,
       showCloseButton = true,
+      closeOnOutsideClick = true,
       ...props
     },
     forwardedRef
@@ -38,7 +40,23 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         className={twMerge("animate-fade-in fixed inset-0 z-30 h-full w-full", overlayClassName)}
         style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
       />
-      <DialogPrimitive.Content {...props} ref={forwardedRef}>
+      <DialogPrimitive.Content
+        {...props}
+        ref={forwardedRef}
+        onPointerDownOutside={(e) => {
+          const target = e.target as HTMLElement;
+          const toastElement = target.closest('[class*="Toastify"]');
+          if (toastElement) {
+            e.preventDefault();
+            return;
+          }
+
+          if (closeOnOutsideClick && onClose) {
+            onClose();
+          }
+          props.onPointerDownOutside?.(e);
+        }}
+      >
         <Card
           isRounded
           className={twMerge(