@geomak/ui 7.3.0 → 7.3.2

package/dist/index.js

@@ -5,7 +5,7 @@ import React30, { createContext, useState, useEffect, useMemo, useId, useCallbac
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion, useScroll, useTransform } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -636,8 +636,8 @@ function MenuButton({
   side = "bottom",
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button_default,
       {
         variant,
@@ -651,8 +651,8 @@ function MenuButton({
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu.Content,
+    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu2.Content,
       {
         align,
         side,
@@ -664,9 +664,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__ */ jsxs(React30.Fragment, { children: [
-          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
+          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
-            DropdownMenu.Item,
+            DropdownMenu2.Item,
             {
               disabled: item.disabled,
               onSelect: () => item.onSelect?.(),
@@ -1666,7 +1666,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__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
+  const Label2 = ({ step, state, align }) => /* @__PURE__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
     /* @__PURE__ */ jsx("div", { className: `font-medium leading-tight ${s.title} ${state === "pending" ? "text-foreground-muted" : "text-foreground"}`, children: step.title }),
     step.description && /* @__PURE__ */ jsx("div", { className: `mt-0.5 leading-snug text-foreground-muted ${s.desc}`, children: step.description })
   ] });
@@ -1681,7 +1681,7 @@ function Stepper({
           stepButton(i, /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size })),
           !last && /* @__PURE__ */ jsx(VConnector, { filled: i < current, reduced })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label, { step, state, align: "left" })) })
+        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label2, { step, state, align: "left" })) })
       ] }, step.key);
     }) });
   }
@@ -1700,7 +1700,7 @@ function Stepper({
       ) }),
       stepButton(i, /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size }),
-        /* @__PURE__ */ jsx(Label, { step, state, align: "center" })
+        /* @__PURE__ */ jsx(Label2, { step, state, align: "center" })
       ] }))
     ] }, step.key);
   }) });
@@ -5852,13 +5852,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__ */ jsx(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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: child.label }),
+      child.badge !== void 0 && child.badge > 0 && /* @__PURE__ */ 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__ */ jsxs(DropdownMenu2.Sub, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenu2.SubTrigger, { className: cls, children: [
+          label,
+          /* @__PURE__ */ 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__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) })
+        ] }),
+        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu2.SubContent, { sideOffset: 6, collisionPadding: 8, className: FLYOUT_PANEL, children: /* @__PURE__ */ jsx(FlyoutItems, { items: child.items }) }) })
+      ] }, child.key);
+    }
+    return /* @__PURE__ */ jsx(DropdownMenu2.Item, { onSelect: () => child.onClick?.(), className: cls, children: label }, child.key);
+  }) });
+}
+function CollapsedFlyout({ item, trigger }) {
+  const [open, setOpen] = useState(false);
+  const closeTimer = React30.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.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
+  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenu2.Trigger,
+      {
+        asChild: true,
+        onPointerEnter: openNow,
+        onPointerLeave: closeSoon,
+        onPointerDown: (e) => {
+          if (e.pointerType === "mouse") e.preventDefault();
+        },
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu2.Content,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: FLYOUT_PANEL,
+        onPointerEnter: openNow,
+        onPointerLeave: closeSoon,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenu2.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
+          /* @__PURE__ */ jsx(FlyoutItems, { items: item.items })
+        ]
+      }
+    ) })
+  ] });
+}
 function NavItem({
   item,
   isExpanded,
   depth = 0
 }) {
   const hasChildren = !!(item.items && item.items.length);
-  const [open, setOpen] = useState(item.defaultOpen ?? (hasChildren && !!item.items?.some((c) => c.isActive)));
+  const [open, setOpen] = useState(item.defaultOpen ?? (hasChildren && hasActiveDescendant(item)));
   const handleClick = () => {
     if (hasChildren && isExpanded) setOpen((o) => !o);
     item.onClick?.();
@@ -5868,13 +5937,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__ */ jsxs("span", { className: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center", children: [
@@ -5899,6 +5969,7 @@ function NavItem({
     }
   );
   if (!isExpanded) {
+    if (hasChildren) return /* @__PURE__ */ jsx(CollapsedFlyout, { item, trigger: btn });
     return /* @__PURE__ */ jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
   }
   if (!hasChildren) return btn;