@algorithm-shift/design-system 1.2.89 → 1.2.91

package/dist/index.js

@@ -27988,6 +27988,7 @@ function LazySelectDropdown({
         onMouseDown: (e) => e.stopPropagation(),
         className: "absolute z-[900] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
         style: {
+          zIndex: 900,
           width: dropdownRef.current?.offsetWidth,
           top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
           left: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().left + window.scrollX : 0
@@ -29953,6 +29954,7 @@ var import_link5 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
+  const [openIndex, setOpenIndex] = (0, import_react29.useState)(null);
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
     menus.forEach((menu) => {
@@ -30016,40 +30018,69 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
       router.push(pendingUrl);
     }
   };
+  let timeout;
   const renderDesktopTab = (tab, index) => {
     const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(DropdownMenu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
-          tab.header,
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          DropdownMenuContent,
-          {
-            align: "start",
-            sideOffset: 6,
-            className: "z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg",
-            children: tab.children.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              DropdownMenuItem,
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        DropdownMenu,
+        {
+          open: openIndex === index,
+          onOpenChange: (open) => setOpenIndex(open ? index : null),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+              DropdownMenuTrigger,
+              {
+                className: `${finalClasses} inline-flex items-center gap-1`,
+                onMouseEnter: () => {
+                  clearTimeout(timeout);
+                  setOpenIndex(index);
+                },
+                onMouseLeave: () => {
+                  timeout = setTimeout(() => setOpenIndex(null), 150);
+                },
+                children: [
+                  tab.header,
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              DropdownMenuContent,
               {
-                asChild: true,
-                className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  import_link5.default,
+                align: "start",
+                sideOffset: 6,
+                className: "z-50 min-w-[200px] max-h-80 rounded-md border border-gray-200 bg-white p-1 shadow-lg",
+                onMouseEnter: () => {
+                  clearTimeout(timeout);
+                  setOpenIndex(index);
+                },
+                onMouseLeave: () => {
+                  timeout = setTimeout(() => setOpenIndex(null), 150);
+                },
+                children: tab.children.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  DropdownMenuItem,
                   {
-                    href: item.url || "#",
-                    target: item.opens_in_new_tab ? "_blank" : "_self",
-                    onClick: (e) => handleBuilderExit(e, item.url || "#"),
-                    children: item.header
-                  }
-                )
-              },
-              item.id || index2
-            ))
-          }
-        )
-      ] }, index);
+                    asChild: true,
+                    className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                      import_link5.default,
+                      {
+                        href: item.url || "#",
+                        target: item.opens_in_new_tab ? "_blank" : "_self",
+                        onClick: (e) => handleBuilderExit(e, item.url || "#"),
+                        children: item.header
+                      }
+                    )
+                  },
+                  item.id || index2
+                ))
+              }
+            )
+          ]
+        },
+        index
+      );
     }
     return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       import_link5.default,
@@ -30107,7 +30138,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
   const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("min-h-10", className), style, children: [
       forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
       forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
     ] }),