warqadui 0.0.60 → 0.0.61

package/dist/index.js

@@ -4763,6 +4763,7 @@ var import_react23 = require("react");
 
 // src/components/Dropdown.tsx
 var import_react22 = require("react");
+var import_react_dom3 = require("react-dom");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Dropdown = ({
   children,
@@ -4775,20 +4776,45 @@ var Dropdown = ({
   onOpenChange
 }) => {
   const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
-  const dropdownRef = (0, import_react22.useRef)(null);
+  const triggerRef = (0, import_react22.useRef)(null);
+  const [coords, setCoords] = (0, import_react22.useState)({ top: 0, left: 0, right: 0 });
   const [loadingItems, setLoadingItems] = (0, import_react22.useState)({});
+  const updateCoords = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCoords({
+        top: rect.bottom,
+        left: rect.left,
+        right: rect.right
+      });
+    }
+  };
+  (0, import_react22.useLayoutEffect)(() => {
+    if (isOpen) {
+      updateCoords();
+    }
+  }, [isOpen]);
   (0, import_react22.useEffect)(() => {
     onOpenChange?.(isOpen);
+    const handleScrollAndResize = () => {
+      if (isOpen) {
+        updateCoords();
+      }
+    };
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (triggerRef.current && !triggerRef.current.contains(event.target) && !event.target.closest(".dropdown-portal-menu")) {
         setIsOpen(false);
       }
     };
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("scroll", handleScrollAndResize, true);
+      window.addEventListener("resize", handleScrollAndResize);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", handleScrollAndResize, true);
+      window.removeEventListener("resize", handleScrollAndResize);
     };
   }, [isOpen, onOpenChange]);
   const toggleDropdown = () => setIsOpen(!isOpen);
@@ -4816,7 +4842,7 @@ var Dropdown = ({
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
-      ref: dropdownRef,
+      ref: triggerRef,
       className: cn("relative inline-block text-left", className),
       onMouseEnter: openDropdown,
       onMouseLeave: closeDropdown,
@@ -4837,46 +4863,53 @@ var Dropdown = ({
             children
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          "div",
-          {
-            className: cn(
-              "absolute top-full pt-2 z-[9999] origin-top animate-in fade-in zoom-in-95 duration-200",
-              align === "right" ? "right-0" : "left-0",
-              width,
-              menuClassName
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "py-2", children: items.map((item, index) => {
-              const isLoading = loadingItems[index];
-              const isDanger = item.variant === "danger";
-              return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-                "button",
-                {
-                  onClick: () => handleItemClick(item, index),
-                  disabled: item.disabled || isLoading,
-                  className: cn(
-                    "flex w-full items-center gap-3 px-4 py-3 text-sm transition-all duration-150",
-                    isDanger ? "text-red-600 dark:text-red-400" : "text-gray-700 dark:text-gray-200",
-                    !item.disabled && !isLoading ? isDanger ? "hover:bg-red-50 dark:hover:bg-red-900/10 active:bg-red-100 dark:active:bg-red-900/20" : "hover:bg-blue-50/50 dark:hover:bg-blue-900/10 active:bg-blue-100 dark:active:bg-blue-900/20" : "opacity-40 cursor-not-allowed grayscale",
-                    item.className
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                      LoadingSpin,
-                      {
-                        size: "sm",
-                        className: cn(
-                          isDanger ? "text-red-500" : "text-blue-500"
-                        )
-                      }
-                    ) : item.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-grow text-left font-medium", children: item.label })
-                  ]
-                },
-                index
-              );
-            }) }) })
-          }
+        isOpen && (0, import_react_dom3.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "div",
+            {
+              className: cn(
+                "dropdown-portal-menu fixed z-[10000] pt-2 origin-top",
+                width,
+                menuClassName
+              ),
+              style: {
+                top: `${coords.top}px`,
+                left: align === "right" ? `${coords.right}px` : `${coords.left}px`,
+                transform: align === "right" ? "translateX(-100%)" : "none"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "py-2", children: items.map((item, index) => {
+                const isLoading = loadingItems[index];
+                const isDanger = item.variant === "danger";
+                return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                  "button",
+                  {
+                    onClick: () => handleItemClick(item, index),
+                    disabled: item.disabled || isLoading,
+                    className: cn(
+                      "flex w-full items-center gap-3 px-4 py-3 text-sm transition-all duration-150",
+                      isDanger ? "text-red-600 dark:text-red-400" : "text-gray-700 dark:text-gray-200",
+                      !item.disabled && !isLoading ? isDanger ? "hover:bg-red-50 dark:hover:bg-red-900/10 active:bg-red-100 dark:active:bg-red-900/20" : "hover:bg-blue-50/50 dark:hover:bg-blue-900/10 active:bg-blue-100 dark:active:bg-blue-900/20" : "opacity-40 cursor-not-allowed grayscale",
+                      item.className
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                        LoadingSpin,
+                        {
+                          size: "sm",
+                          className: cn(
+                            isDanger ? "text-red-500" : "text-blue-500"
+                          )
+                        }
+                      ) : item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-grow text-left font-medium", children: item.label })
+                    ]
+                  },
+                  index
+                );
+              }) }) })
+            }
+          ),
+          document.body
         )
       ]
     }

package/dist/index.mjs

@@ -4731,7 +4731,8 @@ var useLogin = (props) => {
 import { useState as useState18 } from "react";
 
 // src/components/Dropdown.tsx
-import { useState as useState17, useRef as useRef6, useEffect as useEffect11 } from "react";
+import { useState as useState17, useRef as useRef6, useEffect as useEffect11, useLayoutEffect } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 var Dropdown = ({
   children,
@@ -4744,20 +4745,45 @@ var Dropdown = ({
   onOpenChange
 }) => {
   const [isOpen, setIsOpen] = useState17(false);
-  const dropdownRef = useRef6(null);
+  const triggerRef = useRef6(null);
+  const [coords, setCoords] = useState17({ top: 0, left: 0, right: 0 });
   const [loadingItems, setLoadingItems] = useState17({});
+  const updateCoords = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCoords({
+        top: rect.bottom,
+        left: rect.left,
+        right: rect.right
+      });
+    }
+  };
+  useLayoutEffect(() => {
+    if (isOpen) {
+      updateCoords();
+    }
+  }, [isOpen]);
   useEffect11(() => {
     onOpenChange?.(isOpen);
+    const handleScrollAndResize = () => {
+      if (isOpen) {
+        updateCoords();
+      }
+    };
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (triggerRef.current && !triggerRef.current.contains(event.target) && !event.target.closest(".dropdown-portal-menu")) {
         setIsOpen(false);
       }
     };
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("scroll", handleScrollAndResize, true);
+      window.addEventListener("resize", handleScrollAndResize);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", handleScrollAndResize, true);
+      window.removeEventListener("resize", handleScrollAndResize);
     };
   }, [isOpen, onOpenChange]);
   const toggleDropdown = () => setIsOpen(!isOpen);
@@ -4785,7 +4811,7 @@ var Dropdown = ({
   return /* @__PURE__ */ jsxs23(
     "div",
     {
-      ref: dropdownRef,
+      ref: triggerRef,
       className: cn("relative inline-block text-left", className),
       onMouseEnter: openDropdown,
       onMouseLeave: closeDropdown,
@@ -4806,46 +4832,53 @@ var Dropdown = ({
             children
           }
         ),
-        isOpen && /* @__PURE__ */ jsx32(
-          "div",
-          {
-            className: cn(
-              "absolute top-full pt-2 z-[9999] origin-top animate-in fade-in zoom-in-95 duration-200",
-              align === "right" ? "right-0" : "left-0",
-              width,
-              menuClassName
-            ),
-            children: /* @__PURE__ */ jsx32("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ jsx32("div", { className: "py-2", children: items.map((item, index) => {
-              const isLoading = loadingItems[index];
-              const isDanger = item.variant === "danger";
-              return /* @__PURE__ */ jsxs23(
-                "button",
-                {
-                  onClick: () => handleItemClick(item, index),
-                  disabled: item.disabled || isLoading,
-                  className: cn(
-                    "flex w-full items-center gap-3 px-4 py-3 text-sm transition-all duration-150",
-                    isDanger ? "text-red-600 dark:text-red-400" : "text-gray-700 dark:text-gray-200",
-                    !item.disabled && !isLoading ? isDanger ? "hover:bg-red-50 dark:hover:bg-red-900/10 active:bg-red-100 dark:active:bg-red-900/20" : "hover:bg-blue-50/50 dark:hover:bg-blue-900/10 active:bg-blue-100 dark:active:bg-blue-900/20" : "opacity-40 cursor-not-allowed grayscale",
-                    item.className
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx32("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ jsx32(
-                      LoadingSpin,
-                      {
-                        size: "sm",
-                        className: cn(
-                          isDanger ? "text-red-500" : "text-blue-500"
-                        )
-                      }
-                    ) : item.icon }),
-                    /* @__PURE__ */ jsx32("span", { className: "flex-grow text-left font-medium", children: item.label })
-                  ]
-                },
-                index
-              );
-            }) }) })
-          }
+        isOpen && createPortal3(
+          /* @__PURE__ */ jsx32(
+            "div",
+            {
+              className: cn(
+                "dropdown-portal-menu fixed z-[10000] pt-2 origin-top",
+                width,
+                menuClassName
+              ),
+              style: {
+                top: `${coords.top}px`,
+                left: align === "right" ? `${coords.right}px` : `${coords.left}px`,
+                transform: align === "right" ? "translateX(-100%)" : "none"
+              },
+              children: /* @__PURE__ */ jsx32("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ jsx32("div", { className: "py-2", children: items.map((item, index) => {
+                const isLoading = loadingItems[index];
+                const isDanger = item.variant === "danger";
+                return /* @__PURE__ */ jsxs23(
+                  "button",
+                  {
+                    onClick: () => handleItemClick(item, index),
+                    disabled: item.disabled || isLoading,
+                    className: cn(
+                      "flex w-full items-center gap-3 px-4 py-3 text-sm transition-all duration-150",
+                      isDanger ? "text-red-600 dark:text-red-400" : "text-gray-700 dark:text-gray-200",
+                      !item.disabled && !isLoading ? isDanger ? "hover:bg-red-50 dark:hover:bg-red-900/10 active:bg-red-100 dark:active:bg-red-900/20" : "hover:bg-blue-50/50 dark:hover:bg-blue-900/10 active:bg-blue-100 dark:active:bg-blue-900/20" : "opacity-40 cursor-not-allowed grayscale",
+                      item.className
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx32("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ jsx32(
+                        LoadingSpin,
+                        {
+                          size: "sm",
+                          className: cn(
+                            isDanger ? "text-red-500" : "text-blue-500"
+                          )
+                        }
+                      ) : item.icon }),
+                      /* @__PURE__ */ jsx32("span", { className: "flex-grow text-left font-medium", children: item.label })
+                    ]
+                  },
+                  index
+                );
+              }) }) })
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -7573,7 +7606,7 @@ var Views = {
 var Views_default = Views;
 
 // src/components/Guard.tsx
-import { useEffect as useEffect16, useLayoutEffect } from "react";
+import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect2 } from "react";
 import { Navigate, Outlet, useLocation as useLocation2 } from "react-router-dom";
 import { message as message3 } from "antd";
 
@@ -7672,7 +7705,7 @@ var Guard = () => {
   const { get } = useApis_default();
   const location = useLocation2();
   const { login, setIsLoggedIn, setIsFetched, isFetched } = useAuth();
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const fetchProfile = async () => {
       try {
         const res = await get({

package/dist/styles.js

@@ -523,8 +523,8 @@ select:-webkit-autofill:focus {
 .z-50 {
   z-index: 50;
 }
-.z-\\[9999\\] {
-  z-index: 9999;
+.z-\\[10000\\] {
+  z-index: 10000;
 }
 .mx-0\\.5 {
   margin-left: 0.125rem;

package/dist/styles.mjs

@@ -521,8 +521,8 @@ select:-webkit-autofill:focus {
 .z-50 {
   z-index: 50;
 }
-.z-\\[9999\\] {
-  z-index: 9999;
+.z-\\[10000\\] {
+  z-index: 10000;
 }
 .mx-0\\.5 {
   margin-left: 0.125rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "warqadui",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",