@aviala-design/spiral 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -110,6 +110,10 @@ __export(index_exports, {
   NavigationGroup: () => NavigationGroup,
   NavigationItem: () => NavigationItem,
   NavigationItemGroup: () => NavigationItemGroup,
+  NavigationItemMenu: () => NavigationItemMenu,
+  NavigationItemMenuContent: () => NavigationItemMenuContent,
+  NavigationItemMenuItem: () => NavigationItemMenuItem,
+  NavigationItemMenuTrigger: () => NavigationItemMenuTrigger,
   NavigationSection: () => NavigationSection,
   PALETTE_HUE_FAMILIES: () => import_tokens2.PALETTE_HUE_FAMILIES,
   Pagehead: () => Pagehead,
@@ -7005,6 +7009,7 @@ var ListItem = (0, import_react45.forwardRef)(
 ListItem.displayName = "ListItem";
 
 // src/components/navigation.tsx
+var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_react46 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -7117,6 +7122,9 @@ function measureIndicatorFromElement(indicatorEl, groupEl) {
     visible: indicatorEl.dataset.visible === "true"
   };
 }
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
 function metricsApproxEqual2(a, b, epsilon = 0.5) {
   return Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon && Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon && a.visible === b.visible;
 }
@@ -7202,73 +7210,63 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     isAnimatingRef.current = false;
     syncIndicator(metrics, true);
   }, [measureIndicator, syncIndicator]);
-  const startExpandCollapseTracking = (0, import_react46.useCallback)(
-    (expanded) => {
-      const group = groupRef.current;
-      const el = indicatorRef.current;
-      if (!group || !el) return;
-      cancelLayoutTracking();
-      animationRef.current?.cancel();
-      animationRef.current = null;
-      isAnimatingRef.current = false;
-      const prefersReducedMotion2 = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      if (prefersReducedMotion2) {
-        const metrics = measureIndicator();
-        if (metrics) syncIndicator(metrics, true);
-        return;
-      }
-      const { durationMs, easing } = getNavigationAnimationTiming(group);
-      const startMetrics = measureIndicatorFromElement(el, group);
-      if (!expanded) {
-        const next = measureIndicator();
-        if (!next?.visible) {
-          syncIndicator(next ?? startMetrics, true);
-          return;
-        }
-        const generation = ++animationGenerationRef.current;
-        isLayoutTrackingRef.current = true;
-        runIndicatorAnimation(
-          el,
-          group,
-          startMetrics,
-          next,
-          durationMs,
-          easing,
-          generation,
-          animationGenerationRef,
-          animationRef,
-          isAnimatingRef,
-          syncIndicator
-        );
-        window.setTimeout(() => {
-          if (!isLayoutTrackingRef.current) return;
-          isLayoutTrackingRef.current = false;
-          const final = measureIndicator();
-          if (final) syncIndicator(final, true);
-        }, durationMs);
+  const startExpandCollapseTracking = (0, import_react46.useCallback)(() => {
+    const group = groupRef.current;
+    const el = indicatorRef.current;
+    if (!group || !el) return;
+    cancelLayoutTracking();
+    animationRef.current?.cancel();
+    animationRef.current = null;
+    isAnimatingRef.current = false;
+    const prefersReducedMotion2 = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion2) {
+      const metrics = measureIndicator();
+      if (metrics) syncIndicator(metrics, true);
+      return;
+    }
+    const { durationMs } = getNavigationAnimationTiming(group);
+    const startRect = el.getBoundingClientRect();
+    const startVisible = el.dataset.visible === "true";
+    const startTime = performance.now();
+    isLayoutTrackingRef.current = true;
+    const finish = () => {
+      layoutTrackingFrameRef.current = null;
+      isLayoutTrackingRef.current = false;
+      const final = measureIndicator();
+      if (final) syncIndicator(final, true);
+    };
+    const tick = (now) => {
+      if (!isLayoutTrackingRef.current) return;
+      const progress = Math.min(1, (now - startTime) / durationMs);
+      if (progress >= 1) {
+        finish();
         return;
       }
-      isLayoutTrackingRef.current = true;
-      applyIndicatorMetrics(el, startMetrics, true);
-      metricsRef.current = startMetrics;
-      const deadline = performance.now() + durationMs;
-      const tick = () => {
-        if (!isLayoutTrackingRef.current) return;
-        const metrics = measureIndicator();
-        if (metrics) syncIndicator(metrics, true);
-        if (performance.now() < deadline) {
-          layoutTrackingFrameRef.current = requestAnimationFrame(tick);
+      const target = measureIndicator();
+      if (target) {
+        if (!startVisible || !target.visible) {
+          syncIndicator(target, true);
         } else {
-          layoutTrackingFrameRef.current = null;
-          isLayoutTrackingRef.current = false;
-          const final = measureIndicator();
-          if (final) syncIndicator(final, true);
+          const eased = easeOutCubic(progress);
+          const groupRect = group.getBoundingClientRect();
+          const targetAbsX = groupRect.left + target.x;
+          const targetAbsY = groupRect.top + target.y;
+          syncIndicator(
+            {
+              x: startRect.left + (targetAbsX - startRect.left) * eased - groupRect.left,
+              y: startRect.top + (targetAbsY - startRect.top) * eased - groupRect.top,
+              width: startRect.width + (target.width - startRect.width) * eased,
+              height: startRect.height + (target.height - startRect.height) * eased,
+              visible: true
+            },
+            true
+          );
         }
-      };
+      }
       layoutTrackingFrameRef.current = requestAnimationFrame(tick);
-    },
-    [cancelLayoutTracking, groupRef, measureIndicator, syncIndicator]
-  );
+    };
+    layoutTrackingFrameRef.current = requestAnimationFrame(tick);
+  }, [cancelLayoutTracking, groupRef, measureIndicator, syncIndicator]);
   const onIndicatorRef = (0, import_react46.useCallback)((node) => {
     indicatorRef.current = node;
     if (node && metricsRef.current && isInitialMount.current) {
@@ -7328,14 +7326,11 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     const group = groupRef.current;
     if (!group) return;
     const observer = new MutationObserver((mutations) => {
-      let expandCollapseChange = null;
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "data-expanded" && mutation.target instanceof HTMLElement) {
-          expandCollapseChange = mutation.target.getAttribute("data-expanded") === "true";
-        }
-      }
-      if (expandCollapseChange !== null) {
-        startExpandCollapseTracking(expandCollapseChange);
+      const expandCollapseChanged = mutations.some(
+        (mutation) => mutation.type === "attributes" && mutation.attributeName === "data-expanded" && mutation.target instanceof HTMLElement
+      );
+      if (expandCollapseChanged) {
+        startExpandCollapseTracking();
       }
       setActiveRevision((revision) => revision + 1);
     });
@@ -7355,7 +7350,9 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
       resizeObserver.observe(inner);
     });
     const onTransitionEnd = (event) => {
-      if (event.propertyName !== "grid-template-rows") return;
+      if (event.propertyName !== "grid-template-rows" && event.propertyName !== "width") {
+        return;
+      }
       if (!(event.target instanceof HTMLElement)) return;
       if (!event.target.classList.contains("aviala-navigation-item-group")) {
         return;
@@ -7586,6 +7583,225 @@ var NavigationActionsSlot = (0, import_react46.forwardRef)(({ className, ...prop
   }
 ));
 NavigationActionsSlot.displayName = "NavigationActionsSlot";
+var NAVIGATION_MENU_CLOSE_DELAY_MS = 150;
+var NavigationItemMenuContext = (0, import_react46.createContext)(null);
+function useNavigationItemMenuContext(component) {
+  const context = (0, import_react46.useContext)(NavigationItemMenuContext);
+  if (!context) {
+    throw new Error(`${component} must be used within <NavigationItemMenu>`);
+  }
+  return context;
+}
+function NavigationItemMenu({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  onOpenChange,
+  children
+}) {
+  const [internalValue, setInternalValue] = (0, import_react46.useState)(defaultValue);
+  const isValueControlled = valueProp !== void 0;
+  const value = isValueControlled ? valueProp : internalValue;
+  const [internalOpen, setInternalOpen] = (0, import_react46.useState)(false);
+  const isOpenControlled = openProp !== void 0;
+  const open = isOpenControlled ? openProp : internalOpen;
+  const closeTimerRef = (0, import_react46.useRef)(null);
+  const openedByHoverRef = (0, import_react46.useRef)(false);
+  const setOpen = (0, import_react46.useCallback)(
+    (nextOpen) => {
+      if (!isOpenControlled) setInternalOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+  const cancelClose = (0, import_react46.useCallback)(() => {
+    if (closeTimerRef.current != null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const openMenu = (0, import_react46.useCallback)(
+    (viaHover) => {
+      cancelClose();
+      openedByHoverRef.current = viaHover;
+      setOpen(true);
+    },
+    [cancelClose, setOpen]
+  );
+  const scheduleClose = (0, import_react46.useCallback)(() => {
+    cancelClose();
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      setOpen(false);
+    }, NAVIGATION_MENU_CLOSE_DELAY_MS);
+  }, [cancelClose, setOpen]);
+  const select = (0, import_react46.useCallback)(
+    (nextValue) => {
+      if (!isValueControlled) setInternalValue(nextValue);
+      onValueChange?.(nextValue);
+      cancelClose();
+      setOpen(false);
+    },
+    [cancelClose, isValueControlled, onValueChange, setOpen]
+  );
+  (0, import_react46.useEffect)(() => cancelClose, [cancelClose]);
+  const contextValue = (0, import_react46.useMemo)(
+    () => ({
+      value,
+      hasSelection: value != null && value !== "",
+      select,
+      openMenu,
+      scheduleClose,
+      cancelClose,
+      openedByHoverRef
+    }),
+    [cancelClose, openMenu, scheduleClose, select, value]
+  );
+  const handleOpenChange = (0, import_react46.useCallback)(
+    (nextOpen) => {
+      if (nextOpen) openedByHoverRef.current = false;
+      cancelClose();
+      setOpen(nextOpen);
+    },
+    [cancelClose, setOpen]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
+}
+var NavigationItemMenuTrigger = (0, import_react46.forwardRef)(
+  ({
+    className,
+    active,
+    leftIcon,
+    rightIcon,
+    children,
+    ...props
+  }, ref) => {
+    const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
+    const isActive = active ?? menu.hasSelection;
+    const mode = navigationItemButtonMode(isActive);
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "span",
+      {
+        className: cn("aviala-navigation-item", className),
+        "data-item-type": "default",
+        "data-active": isActive ? "true" : "false",
+        onMouseEnter: () => menu.openMenu(true),
+        onMouseLeave: menu.scheduleClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          "button",
+          {
+            ref,
+            type: "button",
+            className: cn(
+              buttonVariants({ mode }),
+              "aviala-navigation-item__control whitespace-normal"
+            ),
+            "data-size": "regular",
+            ...props,
+            children: [
+              renderItemIcon3(leftIcon),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                Typography,
+                {
+                  level: "text",
+                  as: "span",
+                  className: "aviala-navigation-item__label",
+                  children
+                }
+              ),
+              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+NavigationItemMenuTrigger.displayName = "NavigationItemMenuTrigger";
+var NavigationItemMenuContent = (0, import_react46.forwardRef)(
+  ({
+    className,
+    side,
+    align = "start",
+    sideOffset = 6,
+    collisionPadding = 8,
+    onOpenAutoFocus,
+    ...props
+  }, ref) => {
+    const direction = useNavigationDirection();
+    const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      PopoverPrimitive7.Content,
+      {
+        ref,
+        side: side ?? (direction === "vertical" ? "right" : "bottom"),
+        align,
+        sideOffset,
+        collisionPadding,
+        className: cn("aviala-navigation-menu", className),
+        onMouseEnter: menu.cancelClose,
+        onMouseLeave: menu.scheduleClose,
+        onOpenAutoFocus: (event) => {
+          if (menu.openedByHoverRef.current) event.preventDefault();
+          onOpenAutoFocus?.(event);
+        },
+        ...props
+      }
+    ) });
+  }
+);
+NavigationItemMenuContent.displayName = "NavigationItemMenuContent";
+var NavigationItemMenuItem = (0, import_react46.forwardRef)(
+  ({
+    className,
+    value,
+    selected,
+    leftIcon,
+    rightIcon,
+    disabled,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const menu = useNavigationItemMenuContext("NavigationItemMenuItem");
+    const isSelected = selected ?? menu.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(
+          "aviala-navigation-menu-item aviala-focus-ring",
+          className
+        ),
+        "data-selected": isSelected ? "true" : "false",
+        "data-disabled": disabled ? "" : void 0,
+        "aria-current": isSelected ? "true" : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) menu.select(value);
+        },
+        ...props,
+        children: [
+          renderItemIcon3(leftIcon),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            Typography,
+            {
+              level: "text",
+              as: "span",
+              className: "aviala-navigation-menu-item__label",
+              children
+            }
+          ),
+          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+        ]
+      }
+    );
+  }
+);
+NavigationItemMenuItem.displayName = "NavigationItemMenuItem";
 
 // src/components/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
@@ -8852,6 +9068,10 @@ function initKeyboardFocus() {
   NavigationGroup,
   NavigationItem,
   NavigationItemGroup,
+  NavigationItemMenu,
+  NavigationItemMenuContent,
+  NavigationItemMenuItem,
+  NavigationItemMenuTrigger,
   NavigationSection,
   PALETTE_HUE_FAMILIES,
   Pagehead,