@pactor-app/ui 1.3.0 → 1.7.0

package/dist/{chunk-EVGIS2ZE.js → chunk-ZM3WJZZ7.js}

@@ -1,4 +1,7 @@
 import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
@@ -488,17 +491,51 @@ function SidebarInner({
 }
 
 // src/components/components/Menu/index.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function collectAncestors(items, target, into, trail = []) {
+  for (const item of items) {
+    if (item.key === target) {
+      for (const key of trail) into.add(key);
+      return true;
+    }
+    if (item.children?.length && collectAncestors(item.children, target, into, [...trail, item.key])) {
+      return true;
+    }
+  }
+  return false;
+}
 function Menu2({
   items = [],
   mode = "inline",
   selectedKey,
+  collapsible = false,
+  defaultExpandedKeys,
   onSelect,
   className,
   style
 }) {
   const drawer = useSidebarDrawer();
   const collapsed = mode === "inline" && drawer?.collapsed === true;
+  const collapsibleOn = collapsible && mode === "inline" && !collapsed;
+  const [expandedKeys, setExpandedKeys] = useState(() => {
+    const initial = new Set(defaultExpandedKeys ?? []);
+    if (selectedKey !== void 0) {
+      collectAncestors(items, selectedKey, initial);
+    }
+    return initial;
+  });
+  const toggleExpanded = (key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
   let previousGroup;
   return /* @__PURE__ */ jsx4(
     "nav",
@@ -534,7 +571,10 @@ function Menu2({
               depth: 0,
               selectedKey,
               onSelect,
-              collapsed
+              collapsed,
+              collapsible: collapsibleOn,
+              expandedKeys,
+              onToggle: toggleExpanded
             }
           )
         ] }, item.key);
@@ -548,15 +588,34 @@ function MenuEntry({
   depth,
   selectedKey,
   onSelect,
-  collapsed = false
+  collapsed = false,
+  collapsible = false,
+  expandedKeys,
+  onToggle
 }) {
   const selected = item.key === selectedKey;
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const isDirectory = collapsible && hasChildren;
+  const expanded = isDirectory && expandedKeys?.has(item.key) === true;
+  const railDirectory = collapsed && hasChildren;
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  const flyoutTimer = useRef2(void 0);
+  const flyoutOpenNow = () => {
+    window.clearTimeout(flyoutTimer.current);
+    setFlyoutOpen(true);
+  };
+  const flyoutCloseLater = () => {
+    window.clearTimeout(flyoutTimer.current);
+    flyoutTimer.current = window.setTimeout(() => setFlyoutOpen(false), 200);
+  };
+  useEffect2(() => () => window.clearTimeout(flyoutTimer.current), []);
   const button = /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
       "data-slot": "menu-item",
       "aria-current": selected ? "page" : void 0,
+      "aria-expanded": isDirectory ? expanded : railDirectory ? flyoutOpen : void 0,
       disabled: item.disabled,
       className: cn(
         "flex w-full items-center gap-2 rounded-md text-sm transition-colors",
@@ -566,8 +625,14 @@ function MenuEntry({
         item.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-muted-foreground"
       ),
       style: mode === "inline" && depth > 0 && !collapsed ? { paddingLeft: 12 + depth * 16 } : void 0,
+      onMouseEnter: railDirectory ? flyoutOpenNow : void 0,
+      onMouseLeave: railDirectory ? flyoutCloseLater : void 0,
       onClick: () => {
-        if (!item.disabled) {
+        if (item.disabled) return;
+        if (railDirectory) return;
+        if (isDirectory) {
+          onToggle?.(item.key);
+        } else {
           onSelect?.(item.key);
         }
       },
@@ -582,13 +647,58 @@ function MenuEntry({
             className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
             children: item.badge
           }
+        ) : null,
+        isDirectory ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-slot": "menu-item-chevron",
+            className: cn(
+              "shrink-0 transition-transform",
+              expanded && "rotate-180"
+            ),
+            children: /* @__PURE__ */ jsx4(Icon, { name: "chevron-down", size: "sm" })
+          }
         ) : null
       ]
     }
   );
   return /* @__PURE__ */ jsxs3("div", { "data-slot": "menu-entry", "data-key": item.key, children: [
-    collapsed ? /* @__PURE__ */ jsx4(RailTooltip, { label: item.label, children: button }) : button,
-    item.children?.map((child) => /* @__PURE__ */ jsx4(
+    railDirectory ? /* @__PURE__ */ jsxs3(Popover, { open: flyoutOpen, onOpenChange: setFlyoutOpen, children: [
+      /* @__PURE__ */ jsx4(PopoverTrigger, { render: button }),
+      /* @__PURE__ */ jsxs3(
+        PopoverContent,
+        {
+          "data-slot": "menu-flyout",
+          side: "right",
+          align: "start",
+          sideOffset: 8,
+          className: "max-h-[70vh] w-48 overflow-auto p-1",
+          initialFocus: false,
+          onMouseEnter: flyoutOpenNow,
+          onMouseLeave: flyoutCloseLater,
+          onClick: (event) => {
+            if (event.target.closest("[data-slot=menu-item]")) {
+              setFlyoutOpen(false);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-3 pt-2 pb-1 text-xs font-semibold text-muted-foreground", children: item.label }),
+            item.children?.map((child) => /* @__PURE__ */ jsx4(
+              MenuEntry,
+              {
+                item: child,
+                mode: "inline",
+                depth: 0,
+                selectedKey,
+                onSelect
+              },
+              child.key
+            ))
+          ]
+        }
+      )
+    ] }) : collapsed ? /* @__PURE__ */ jsx4(RailTooltip, { label: item.label, children: button }) : button,
+    railDirectory || isDirectory && !expanded ? null : item.children?.map((child) => /* @__PURE__ */ jsx4(
       MenuEntry,
       {
         item: child,
@@ -596,7 +706,10 @@ function MenuEntry({
         depth: depth + 1,
         selectedKey,
         onSelect,
-        collapsed
+        collapsed,
+        collapsible,
+        expandedKeys,
+        onToggle
       },
       child.key
     ))