@geomak/ui 7.3.1 → 7.3.3

package/dist/index.cjs

@@ -1286,8 +1286,7 @@ function TreeNodeItem({
   item,
   onNodeClick,
   defaultExpandAll,
-  defaultExpandedKeys,
-  depth = 0
+  defaultExpandedKeys
 }) {
   if (!isParent(item)) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1295,7 +1294,6 @@ function TreeNodeItem({
       {
         type: "button",
         className: "flex w-full items-center gap-2.5 cursor-pointer select-none group text-left rounded-md px-2 py-1.5 hover:bg-surface-raised transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-        style: { paddingLeft: depth * 12 + 8 },
         onClick: () => onNodeClick({
           isParent: false,
           key: item.key,
@@ -1311,62 +1309,53 @@ function TreeNodeItem({
     );
   }
   const initialOpen = defaultExpandAll || defaultExpandedKeys.includes(item.key) ? [item.key] : [];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionPrimitive__namespace.Root,
-    {
-      type: "multiple",
-      defaultValue: initialOpen,
-      style: { paddingLeft: depth * 12 },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionPrimitive__namespace.Item, { value: item.key, className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          AccordionPrimitive__namespace.Trigger,
-          {
-            onClick: () => onNodeClick({
-              isParent: true,
-              key: item.key,
-              label: item.label,
-              data: item.nodeData,
-              parentLabel: item.parentLabel
-            }),
-            className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-accent w-full text-left rounded-md hover:bg-surface-raised transition-colors duration-150",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { type: "multiple", defaultValue: initialOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionPrimitive__namespace.Item, { value: item.key, className: "border-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      AccordionPrimitive__namespace.Trigger,
+      {
+        onClick: () => onNodeClick({
+          isParent: true,
+          key: item.key,
+          label: item.label,
+          data: item.nodeData,
+          parentLabel: item.parentLabel
+        }),
+        className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-accent w-full text-left rounded-md hover:bg-surface-raised transition-colors duration-150",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2.5,
+              className: "h-3.5 w-3.5 flex-shrink-0 text-foreground-muted transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
                 {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2.5,
-                  className: "h-3.5 w-3.5 flex-shrink-0 text-foreground-muted transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M19 9l-7 7-7-7"
-                    }
-                  )
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M19 9l-7 7-7-7"
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground select-none", children: item.label })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3.5 border-l border-border py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-          TreeNodeItem,
-          {
-            item: child,
-            onNodeClick,
-            defaultExpandAll,
-            defaultExpandedKeys,
-            depth: depth + 1
-          },
-          child.key
-        )) }) })
-      ] })
-    }
-  );
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground select-none", children: item.label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3.5 border-l border-border py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      TreeNodeItem,
+      {
+        item: child,
+        onNodeClick,
+        defaultExpandAll,
+        defaultExpandedKeys
+      },
+      child.key
+    )) }) })
+  ] }) });
 }
 function Tree({
   nodes,
@@ -5915,6 +5904,49 @@ function FlyoutItems({ items }) {
     return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Item, { onSelect: () => child.onClick?.(), className: cls, children: label }, child.key);
   }) });
 }
+function CollapsedFlyout({ item, trigger }) {
+  const [open, setOpen] = React30.useState(false);
+  const closeTimer = React30__default.default.useRef(void 0);
+  const openNow = () => {
+    window.clearTimeout(closeTimer.current);
+    setOpen(true);
+  };
+  const closeSoon = () => {
+    window.clearTimeout(closeTimer.current);
+    closeTimer.current = window.setTimeout(() => setOpen(false), 150);
+  };
+  React30__default.default.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu2__namespace.Trigger,
+      {
+        asChild: true,
+        onPointerEnter: openNow,
+        onPointerLeave: closeSoon,
+        onPointerDown: (e) => {
+          if (e.pointerType === "mouse") e.preventDefault();
+        },
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu2__namespace.Content,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: FLYOUT_PANEL,
+        onPointerEnter: openNow,
+        onPointerLeave: closeSoon,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(FlyoutItems, { items: item.items })
+        ]
+      }
+    ) })
+  ] });
+}
 function NavItem({
   item,
   isExpanded,
@@ -5963,15 +5995,7 @@ function NavItem({
     }
   );
   if (!isExpanded) {
-    if (hasChildren) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: btn }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Content, { side: "right", align: "start", sideOffset: 8, collisionPadding: 8, className: FLYOUT_PANEL, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(FlyoutItems, { items: item.items })
-        ] }) })
-      ] });
-    }
+    if (hasChildren) return /* @__PURE__ */ jsxRuntime.jsx(CollapsedFlyout, { item, trigger: btn });
     return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
   }
   if (!hasChildren) return btn;