@underverse-ui/underverse 0.2.28 → 0.2.30

package/dist/index.js

@@ -1120,9 +1120,21 @@ var TagInput = forwardRef4(
         e.preventDefault();
         if (e.ctrlKey || e.metaKey) {
           triggerSearch();
-        } else {
-          addTag(inputValue);
+          return;
+        }
+        if (e.shiftKey) {
+          const tagsToAdd = inputValue.split(/\s+/).map((t) => t.trim()).filter((t) => t.length > 0 && !value.includes(t));
+          if (tagsToAdd.length > 0) {
+            const availableSlots = maxTags !== void 0 ? maxTags - value.length : Infinity;
+            if (availableSlots > 0) {
+              const tagsToInsert = tagsToAdd.slice(0, availableSlots);
+              onChange([...value, ...tagsToInsert]);
+              setInputValue("");
+            }
+          }
+          return;
         }
+        addTag(inputValue);
       } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
         removeTag(value.length - 1);
       }
@@ -2370,6 +2382,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);
@@ -2409,74 +2423,90 @@ 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__ */ jsxs12("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
-    /* @__PURE__ */ jsx14(
-      "div",
-      {
-        className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs12(
-      "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__ */ jsxs12(
+    "div",
+    {
+      className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName),
+      onMouseDown: handleOverlayMouseDown,
+      onMouseUp: handleOverlayMouseUp,
+      children: [
+        /* @__PURE__ */ jsx14(
+          "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__ */ jsxs12("div", { className: "flex items-start justify-between p-6 pb-0", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5", children: [
-              title && /* @__PURE__ */ jsx14("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: description })
-            ] }),
-            showCloseButton && /* @__PURE__ */ jsx14(
-              "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__ */ jsx14(X4, { className: "h-4 w-4 cursor-pointer" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx14("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsxs12(
+          "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__ */ jsxs12("div", { className: "flex items-start justify-between p-6 pb-0", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5", children: [
+                  title && /* @__PURE__ */ jsx14("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+                  description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: description })
+                ] }),
+                showCloseButton && /* @__PURE__ */ jsx14(
+                  "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__ */ jsx14(X4, { className: "h-4 w-4 cursor-pointer" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
+            ]
+          }
+        )
+      ]
+    }
+  );
   return typeof window !== "undefined" ? createPortal(modalContent, document.body) : null;
 };
 var Modal_default = Modal;
 
 // ../../components/ui/Toast.tsx
-import { createContext, useContext, useState as useState9, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { createContext, useContext, useState as useState9, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef4 } from "react";
 import { X as X5, CheckCircle as CheckCircle2, AlertCircle as AlertCircle2, Info, AlertTriangle as AlertTriangle2 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var ToastContext = createContext(void 0);
@@ -2489,7 +2519,7 @@ var useToast = () => {
 };
 var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
   const [toasts, setToasts] = useState9([]);
-  const idRef = useRef3(0);
+  const idRef = useRef4(0);
   const removeToast = useCallback2((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
@@ -7750,7 +7780,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
 }
 
 // ../../components/ui/ImageUpload.tsx
-import { useState as useState26, useRef as useRef11, useCallback as useCallback9 } from "react";
+import { useState as useState26, useRef as useRef12, useCallback as useCallback9 } from "react";
 import { Upload, X as X10, Image as ImageIcon, Loader2 as Loader25, Check as Check7 } from "lucide-react";
 import { useTranslations as useTranslations6 } from "next-intl";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -7772,7 +7802,7 @@ function ImageUpload({
   const [isDragging, setIsDragging] = useState26(false);
   const [uploading, setUploading] = useState26(false);
   const [uploadedImages, setUploadedImages] = useState26([]);
-  const fileInputRef = useRef11(null);
+  const fileInputRef = useRef12(null);
   const { addToast } = useToast();
   const t = useTranslations6("OCR.imageUpload");
   const previewSizes = {
@@ -10911,7 +10941,7 @@ function AccessDenied({
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 import { Moon, Sun, Monitor } from "lucide-react";
-import { useEffect as useEffect20, useRef as useRef13, useState as useState33 } from "react";
+import { useEffect as useEffect20, useRef as useRef14, useState as useState33 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { Fragment as Fragment18, jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
@@ -10922,7 +10952,7 @@ function ThemeToggleHeadless({
 }) {
   const [isOpen, setIsOpen] = useState33(false);
   const [mounted, setMounted] = useState33(false);
-  const triggerRef = useRef13(null);
+  const triggerRef = useRef14(null);
   const [dropdownPosition, setDropdownPosition] = useState33(null);
   useEffect20(() => setMounted(true), []);
   const themes = [
@@ -11013,7 +11043,7 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-import { useRef as useRef14, useState as useState34 } from "react";
+import { useRef as useRef15, useState as useState34 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Globe } from "lucide-react";
 import { Fragment as Fragment19, jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
@@ -11026,7 +11056,7 @@ function LanguageSwitcherHeadless({
 }) {
   const [isOpen, setIsOpen] = useState34(false);
   const [dropdownPosition, setDropdownPosition] = useState34(null);
-  const triggerButtonRef = useRef14(null);
+  const triggerButtonRef = useRef15(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();