@geomak/ui 7.3.0 → 7.3.2

package/dist/index.cjs

@@ -6,7 +6,7 @@ var React30 = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
-var DropdownMenu = require('@radix-ui/react-dropdown-menu');
+var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
 var Dialog = require('@radix-ui/react-dialog');
 var framerMotion = require('framer-motion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
@@ -43,7 +43,7 @@ function _interopNamespace(e) {
 
 var React30__default = /*#__PURE__*/_interopDefault(React30);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
-var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
+var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
 var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
@@ -673,8 +673,8 @@ function MenuButton({
   side = "bottom",
   className = ""
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button_default,
       {
         variant,
@@ -688,8 +688,8 @@ function MenuButton({
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenu__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu2__namespace.Content,
       {
         align,
         side,
@@ -701,9 +701,9 @@ function MenuButton({
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
         children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
-          item.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Separator, { className: "my-1 h-px bg-border" }),
+          item.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            DropdownMenu__namespace.Item,
+            DropdownMenu2__namespace.Item,
             {
               disabled: item.disabled,
               onSelect: () => item.onSelect?.(),
@@ -1703,7 +1703,7 @@ function Stepper({
   const vertical = orientation === "vertical" || forcedVertical;
   const s = SIZES[size];
   const stateOf = (i) => i < current ? "completed" : i === current ? status : "pending";
-  const Label = ({ step, state, align }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
+  const Label2 = ({ step, state, align }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-medium leading-tight ${s.title} ${state === "pending" ? "text-foreground-muted" : "text-foreground"}`, children: step.title }),
     step.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mt-0.5 leading-snug text-foreground-muted ${s.desc}`, children: step.description })
   ] });
@@ -1718,7 +1718,7 @@ function Stepper({
           stepButton(i, /* @__PURE__ */ jsxRuntime.jsx(Indicator, { state, index: i, step, sizeKey: size })),
           !last && /* @__PURE__ */ jsxRuntime.jsx(VConnector, { filled: i < current, reduced })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsxRuntime.jsx(Label, { step, state, align: "left" })) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsxRuntime.jsx(Label2, { step, state, align: "left" })) })
       ] }, step.key);
     }) });
   }
@@ -1737,7 +1737,7 @@ function Stepper({
       ) }),
       stepButton(i, /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Indicator, { state, index: i, step, sizeKey: size }),
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { step, state, align: "center" })
+        /* @__PURE__ */ jsxRuntime.jsx(Label2, { step, state, align: "center" })
       ] }))
     ] }, step.key);
   }) });
@@ -5889,13 +5889,82 @@ function TopBar({
     }
   );
 }
+function hasActiveDescendant(item) {
+  return !!item.items?.some((c) => c.isActive || hasActiveDescendant(c));
+}
+var FLYOUT_PANEL = "z-[400] min-w-[11rem] rounded-lg border border-border bg-surface p-1 shadow-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95";
+function FlyoutItems({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child) => {
+    const cls = [
+      "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm outline-none cursor-pointer select-none transition-colors",
+      child.isActive ? "text-accent data-[highlighted]:bg-accent/10" : "text-foreground data-[highlighted]:bg-surface-raised"
+    ].join(" ");
+    const label = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: child.label }),
+      child.badge !== void 0 && child.badge > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-status-error px-1 text-[9px] font-bold leading-none text-white", children: child.badge > 99 ? "99+" : child.badge })
+    ] });
+    if (child.items?.length) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Sub, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.SubTrigger, { className: cls, children: [
+          label,
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-3.5 w-3.5 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.SubContent, { sideOffset: 6, collisionPadding: 8, className: FLYOUT_PANEL, children: /* @__PURE__ */ jsxRuntime.jsx(FlyoutItems, { items: child.items }) }) })
+      ] }, child.key);
+    }
+    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,
   depth = 0
 }) {
   const hasChildren = !!(item.items && item.items.length);
-  const [open, setOpen] = React30.useState(item.defaultOpen ?? (hasChildren && !!item.items?.some((c) => c.isActive)));
+  const [open, setOpen] = React30.useState(item.defaultOpen ?? (hasChildren && hasActiveDescendant(item)));
   const handleClick = () => {
     if (hasChildren && isExpanded) setOpen((o) => !o);
     item.onClick?.();
@@ -5905,13 +5974,14 @@ function NavItem({
     {
       type: "button",
       onClick: handleClick,
+      "aria-label": !isExpanded && typeof item.label === "string" ? item.label : void 0,
       "aria-expanded": hasChildren && isExpanded ? open : void 0,
       style: isExpanded && depth > 0 ? { paddingLeft: 10 + depth * 18 } : void 0,
       className: [
         "group relative flex w-full items-center gap-2.5 rounded-md",
         "px-2.5 py-2 transition-colors duration-100",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
-        item.isActive ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+        item.isActive || !isExpanded && hasActiveDescendant(item) ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
       ].join(" "),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center", children: [
@@ -5936,6 +6006,7 @@ function NavItem({
     }
   );
   if (!isExpanded) {
+    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;