@algorithm-shift/design-system 1.2.90 → 1.2.91

package/dist/index.mjs

@@ -29863,6 +29863,7 @@ import Link5 from "next/link";
 import { useRouter } from "next/navigation";
 import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
+  const [openIndex, setOpenIndex] = useState8(null);
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
     menus.forEach((menu) => {
@@ -29926,40 +29927,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__ */ jsxs34(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs34(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
-          tab.header,
-          /* @__PURE__ */ jsx57(ChevronDown, { className: "h-4 w-4 opacity-80" })
-        ] }),
-        /* @__PURE__ */ jsx57(
-          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__ */ jsx57(
-              DropdownMenuItem,
+      return /* @__PURE__ */ jsxs34(
+        DropdownMenu,
+        {
+          open: openIndex === index,
+          onOpenChange: (open) => setOpenIndex(open ? index : null),
+          children: [
+            /* @__PURE__ */ jsxs34(
+              DropdownMenuTrigger,
+              {
+                className: `${finalClasses} inline-flex items-center gap-1`,
+                onMouseEnter: () => {
+                  clearTimeout(timeout);
+                  setOpenIndex(index);
+                },
+                onMouseLeave: () => {
+                  timeout = setTimeout(() => setOpenIndex(null), 150);
+                },
+                children: [
+                  tab.header,
+                  /* @__PURE__ */ jsx57(ChevronDown, { className: "h-4 w-4 opacity-80" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx57(
+              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__ */ jsx57(
-                  Link5,
+                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__ */ jsx57(
+                  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__ */ jsx57(
+                      Link5,
+                      {
+                        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__ */ jsx57(
       Link5,
@@ -30017,7 +30047,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__ */ jsxs34(Fragment21, { children: [
-    /* @__PURE__ */ jsxs34("div", { className, style, children: [
+    /* @__PURE__ */ jsxs34("div", { className: cn("min-h-10", className), style, children: [
       forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx57("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx57("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx57("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx57("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
       forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx57("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx57("div", { className: "flex md:hidden", children: renderMobileMenu() })
     ] }),