@underverse-ui/underverse 0.2.29 → 0.2.30

package/dist/index.cjs

@@ -2539,6 +2539,8 @@ var Modal = ({
   const [isMounted, setIsMounted] = React10.useState(false);
   const [isVisible, setIsVisible] = React10.useState(false);
   const [isAnimating, setIsAnimating] = React10.useState(true);
+  const mouseDownTarget = React10.useRef(null);
+  const modalContentRef = React10.useRef(null);
   React10.useEffect(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
@@ -2578,68 +2580,84 @@ var Modal = ({
       document.body.style.overflow = "unset";
     };
   }, [isOpen]);
-  const handleOverlayClick = (event) => {
-    if (closeOnOverlayClick) {
+  const handleOverlayMouseDown = (event) => {
+    mouseDownTarget.current = event.target;
+  };
+  const handleOverlayMouseUp = (event) => {
+    const modalContent2 = modalContentRef.current;
+    const mouseDownOutside = modalContent2 && !modalContent2.contains(mouseDownTarget.current);
+    const mouseUpOutside = modalContent2 && !modalContent2.contains(event.target);
+    if (closeOnOverlayClick && mouseDownOutside && mouseUpOutside) {
       onClose();
     }
+    mouseDownTarget.current = null;
   };
   if (!isMounted || !isOpen && !isVisible) {
     return null;
   }
   const maxWidthClass = width ? "max-w-none" : fullWidth ? "max-w-full" : sizeStyles3[size];
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "div",
-      {
-        className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      "div",
-      {
-        className: cn(
-          "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
-          "transition-all duration-200 ease-out",
-          maxWidthClass,
-          fullWidth && "mx-0",
-          className
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName),
+      onMouseDown: handleOverlayMouseDown,
+      onMouseUp: handleOverlayMouseUp,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0
+            }
+          }
         ),
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0,
-          transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
-          // Thêm dòng này để tạo hiệu ứng nảy
-          transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
-          width,
-          height
-        },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          (title || description || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between p-6 pb-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1.5", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
-            ] }),
-            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "button",
-              {
-                onClick: onClose,
-                className: cn(
-                  "rounded-sm opacity-70 ring-offset-background transition-opacity",
-                  "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                  "disabled:pointer-events-none "
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "h-4 w-4 cursor-pointer" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "div",
+          {
+            ref: modalContentRef,
+            className: cn(
+              "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
+              "transition-all duration-200 ease-out",
+              maxWidthClass,
+              fullWidth && "mx-0",
+              className
+            ),
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0,
+              transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
+              // Thêm dòng này để tạo hiệu ứng nảy
+              transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
+              width,
+              height
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              (title || description || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between p-6 pb-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1.5", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
+                ] }),
+                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: cn(
+                      "rounded-sm opacity-70 ring-offset-background transition-opacity",
+                      "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "disabled:pointer-events-none "
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "h-4 w-4 cursor-pointer" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
+            ]
+          }
+        )
+      ]
+    }
+  );
   return typeof window !== "undefined" ? (0, import_react_dom.createPortal)(modalContent, document.body) : null;
 };
 var Modal_default = Modal;