@octanejs/radix 0.1.32 → 0.1.34

package/dist/cjs/NavigationMenu.cjs

@@ -0,0 +1,942 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NavigationMenu_exports = {};
+__export(NavigationMenu_exports, {
+  Content: () => Content,
+  Indicator: () => Indicator,
+  Item: () => Item,
+  Link: () => Link,
+  List: () => List,
+  NavigationMenu: () => Root,
+  NavigationMenuContent: () => Content,
+  NavigationMenuIndicator: () => Indicator,
+  NavigationMenuItem: () => Item,
+  NavigationMenuLink: () => Link,
+  NavigationMenuList: () => List,
+  NavigationMenuSub: () => Sub,
+  NavigationMenuTrigger: () => Trigger,
+  NavigationMenuViewport: () => Viewport,
+  Root: () => Root,
+  Sub: () => Sub,
+  Trigger: () => Trigger,
+  Viewport: () => Viewport,
+  createNavigationMenuScope: () => createNavigationMenuScope
+});
+module.exports = __toCommonJS(NavigationMenu_exports);
+var import_octane = require("octane");
+var import_collection = require("./collection.cjs");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_direction = require("./direction.cjs");
+var import_DismissableLayer = require("./DismissableLayer.cjs");
+var import_internal = require("./internal.cjs");
+var import_use_effect_event = require("./use-effect-event.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_callback_ref = require("./use-callback-ref.cjs");
+var import_use_previous = require("./use-previous.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+var import_VisuallyHidden = require("./VisuallyHidden.cjs");
+const NAVIGATION_MENU_NAME = "NavigationMenu";
+const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(NAVIGATION_MENU_NAME);
+const [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = (0, import_collection.createCollection)(NAVIGATION_MENU_NAME + "FocusGroup");
+const [createNavigationMenuContext, createNavigationMenuScope] = (0, import_context.createContextScope)(
+  NAVIGATION_MENU_NAME,
+  [createCollectionScope, createFocusGroupCollectionScope]
+);
+const [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
+const [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.Root");
+  const {
+    __scopeNavigationMenu,
+    value: valueProp,
+    onValueChange,
+    defaultValue,
+    delayDuration = 200,
+    skipDelayDuration = 300,
+    orientation = "horizontal",
+    dir,
+    ref: forwardedRef,
+    ...navigationMenuProps
+  } = props ?? {};
+  const [navigationMenu, setNavigationMenu] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "nav")
+  );
+  const composedRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, setNavigationMenu, (0, import_internal.subSlot)(slot, "refs"));
+  const direction = (0, import_direction.useDirection)(dir);
+  const openTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "openTimer"));
+  const closeTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "closeTimer"));
+  const skipDelayTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "skipTimer"));
+  const [isOpenDelayed, setIsOpenDelayed] = (0, import_octane.useState)(true, (0, import_internal.subSlot)(slot, "delayed"));
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    {
+      prop: valueProp,
+      onChange: (value2) => {
+        const isOpen = value2 !== "";
+        const hasSkipDelayDuration = skipDelayDuration > 0;
+        if (isOpen) {
+          window.clearTimeout(skipDelayTimerRef.current);
+          if (hasSkipDelayDuration) setIsOpenDelayed(false);
+        } else {
+          window.clearTimeout(skipDelayTimerRef.current);
+          skipDelayTimerRef.current = window.setTimeout(
+            () => setIsOpenDelayed(true),
+            skipDelayDuration
+          );
+        }
+        onValueChange?.(value2);
+      },
+      defaultProp: defaultValue ?? ""
+    },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const startCloseTimer = (0, import_octane.useCallback)(
+    () => {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = window.setTimeout(() => setValue(""), 150);
+    },
+    [setValue],
+    (0, import_internal.subSlot)(slot, "closeTimerCb")
+  );
+  const handleOpen = (0, import_octane.useCallback)(
+    (itemValue) => {
+      window.clearTimeout(closeTimerRef.current);
+      setValue(itemValue);
+    },
+    [setValue],
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  const handleDelayedOpen = (0, import_octane.useCallback)(
+    (itemValue) => {
+      const isOpenItem = value === itemValue;
+      if (isOpenItem) {
+        window.clearTimeout(closeTimerRef.current);
+      } else {
+        openTimerRef.current = window.setTimeout(() => {
+          window.clearTimeout(closeTimerRef.current);
+          setValue(itemValue);
+        }, delayDuration);
+      }
+    },
+    [value, setValue, delayDuration],
+    (0, import_internal.subSlot)(slot, "delayedOpen")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      return () => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(closeTimerRef.current);
+        window.clearTimeout(skipDelayTimerRef.current);
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:timers")
+  );
+  return (0, import_octane.createElement)(NavigationMenuProvider, {
+    scope: __scopeNavigationMenu,
+    isRootMenu: true,
+    value,
+    dir: direction,
+    orientation,
+    rootNavigationMenu: navigationMenu,
+    onTriggerEnter: (itemValue) => {
+      window.clearTimeout(openTimerRef.current);
+      if (isOpenDelayed) handleDelayedOpen(itemValue);
+      else handleOpen(itemValue);
+    },
+    onTriggerLeave: () => {
+      window.clearTimeout(openTimerRef.current);
+      startCloseTimer();
+    },
+    onContentEnter: () => window.clearTimeout(closeTimerRef.current),
+    onContentLeave: startCloseTimer,
+    onItemSelect: (itemValue) => {
+      setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
+    },
+    onItemDismiss: () => setValue(""),
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.nav, {
+      "aria-label": "Main",
+      "data-orientation": orientation,
+      dir: direction,
+      ...navigationMenuProps,
+      ref: composedRef
+    })
+  });
+}
+const SUB_NAME = "NavigationMenuSub";
+function Sub(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.Sub");
+  const {
+    __scopeNavigationMenu,
+    value: valueProp,
+    onValueChange,
+    defaultValue,
+    orientation = "horizontal",
+    ref: forwardedRef,
+    ...subProps
+  } = props ?? {};
+  const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    {
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue ?? ""
+    },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  return (0, import_octane.createElement)(NavigationMenuProvider, {
+    scope: __scopeNavigationMenu,
+    isRootMenu: false,
+    value,
+    dir: context.dir,
+    orientation,
+    rootNavigationMenu: context.rootNavigationMenu,
+    onTriggerEnter: (itemValue) => setValue(itemValue),
+    onItemSelect: (itemValue) => setValue(itemValue),
+    onItemDismiss: () => setValue(""),
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      "data-orientation": orientation,
+      ...subProps,
+      ref: forwardedRef
+    })
+  });
+}
+function NavigationMenuProvider(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.Provider");
+  const {
+    scope,
+    isRootMenu,
+    rootNavigationMenu,
+    dir,
+    orientation,
+    children,
+    value,
+    onItemSelect,
+    onItemDismiss,
+    onTriggerEnter,
+    onTriggerLeave,
+    onContentEnter,
+    onContentLeave
+  } = props;
+  const [viewport, setViewport] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "viewport"));
+  const [viewportContent, setViewportContent] = (0, import_octane.useState)(
+    /* @__PURE__ */ new Map(),
+    (0, import_internal.subSlot)(slot, "content")
+  );
+  const [indicatorTrack, setIndicatorTrack] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "track")
+  );
+  return (0, import_octane.createElement)(NavigationMenuProviderImpl, {
+    scope,
+    isRootMenu,
+    rootNavigationMenu,
+    value,
+    previousValue: (0, import_use_previous.usePrevious)(value, (0, import_internal.subSlot)(slot, "prev")),
+    baseId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id")),
+    dir,
+    orientation,
+    viewport,
+    onViewportChange: setViewport,
+    indicatorTrack,
+    onIndicatorTrackChange: setIndicatorTrack,
+    onTriggerEnter: (0, import_use_callback_ref.useCallbackRef)(onTriggerEnter, (0, import_internal.subSlot)(slot, "triggerEnter")),
+    onTriggerLeave: (0, import_use_callback_ref.useCallbackRef)(onTriggerLeave, (0, import_internal.subSlot)(slot, "triggerLeave")),
+    onContentEnter: (0, import_use_callback_ref.useCallbackRef)(onContentEnter, (0, import_internal.subSlot)(slot, "contentEnter")),
+    onContentLeave: (0, import_use_callback_ref.useCallbackRef)(onContentLeave, (0, import_internal.subSlot)(slot, "contentLeave")),
+    onItemSelect: (0, import_use_callback_ref.useCallbackRef)(onItemSelect, (0, import_internal.subSlot)(slot, "itemSelect")),
+    onItemDismiss: (0, import_use_callback_ref.useCallbackRef)(onItemDismiss, (0, import_internal.subSlot)(slot, "itemDismiss")),
+    onViewportContentChange: (0, import_octane.useCallback)(
+      (contentValue, contentData) => {
+        setViewportContent((prevContent) => {
+          prevContent.set(contentValue, contentData);
+          return new Map(prevContent);
+        });
+      },
+      [],
+      (0, import_internal.subSlot)(slot, "vcChange")
+    ),
+    onViewportContentRemove: (0, import_octane.useCallback)(
+      (contentValue) => {
+        setViewportContent((prevContent) => {
+          if (!prevContent.has(contentValue)) return prevContent;
+          prevContent.delete(contentValue);
+          return new Map(prevContent);
+        });
+      },
+      [],
+      (0, import_internal.subSlot)(slot, "vcRemove")
+    ),
+    children: (0, import_octane.createElement)(Collection.Provider, {
+      scope,
+      children: (0, import_octane.createElement)(ViewportContentProvider, {
+        scope,
+        items: viewportContent,
+        // Identity-stable user children ride octane's implicit same-element
+        // bailout (React beginWork parity): provider-state re-renders skip
+        // them while consumers of the CHANGED context refresh lazily.
+        children
+      })
+    })
+  });
+}
+const LIST_NAME = "NavigationMenuList";
+function List(props) {
+  const { __scopeNavigationMenu, ref: forwardedRef, ...listProps } = props ?? {};
+  const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
+  const list = (0, import_octane.createElement)(import_Primitive.Primitive.ul, {
+    "data-orientation": context.orientation,
+    ...listProps,
+    ref: forwardedRef
+  });
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    style: { position: "relative" },
+    ref: context.onIndicatorTrackChange,
+    children: (0, import_octane.createElement)(Collection.Slot, {
+      scope: __scopeNavigationMenu,
+      children: context.isRootMenu ? (0, import_octane.createElement)(FocusGroup, { asChild: true, children: list }) : list
+    })
+  });
+}
+const ITEM_NAME = "NavigationMenuItem";
+const [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME);
+function Item(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.Item");
+  const { __scopeNavigationMenu, value: valueProp, ref: forwardedRef, ...itemProps } = props ?? {};
+  const autoValue = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
+  const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "content"));
+  const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "trigger"));
+  const focusProxyRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "proxy"));
+  const restoreContentTabOrderRef = (0, import_octane.useRef)(() => {
+  }, (0, import_internal.subSlot)(slot, "restore"));
+  const wasEscapeCloseRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "escape"));
+  const handleContentEntry = (0, import_octane.useCallback)(
+    (side = "start") => {
+      if (contentRef.current) {
+        restoreContentTabOrderRef.current();
+        const candidates = getTabbableCandidates(contentRef.current);
+        if (candidates.length) focusFirst(side === "start" ? candidates : candidates.reverse());
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "entry")
+  );
+  const handleContentExit = (0, import_octane.useCallback)(
+    () => {
+      if (contentRef.current) {
+        const candidates = getTabbableCandidates(contentRef.current);
+        if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "exit")
+  );
+  return (0, import_octane.createElement)(NavigationMenuItemContextProvider, {
+    scope: __scopeNavigationMenu,
+    value,
+    triggerRef,
+    contentRef,
+    focusProxyRef,
+    wasEscapeCloseRef,
+    onEntryKeyDown: handleContentEntry,
+    onFocusProxyEnter: handleContentEntry,
+    onRootContentClose: handleContentExit,
+    onContentFocusOutside: handleContentExit,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.li, { ...itemProps, ref: forwardedRef })
+  });
+}
+const TRIGGER_NAME = "NavigationMenuTrigger";
+function Trigger(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.Trigger");
+  const { __scopeNavigationMenu, disabled, ref: forwardedRef, ...triggerProps } = props ?? {};
+  const context = useNavigationMenuContext(TRIGGER_NAME, props?.__scopeNavigationMenu);
+  const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props?.__scopeNavigationMenu);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    ref,
+    itemContext.triggerRef,
+    forwardedRef,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const triggerId = makeTriggerId(context.baseId, itemContext.value);
+  const contentId = makeContentId(context.baseId, itemContext.value);
+  const hasPointerMoveOpenedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "moveOpened"));
+  const wasClickCloseRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "clickClose"));
+  const open = itemContext.value === context.value;
+  return [
+    (0, import_octane.createElement)(Collection.ItemSlot, {
+      key: "trigger",
+      scope: __scopeNavigationMenu,
+      value: itemContext.value,
+      children: (0, import_octane.createElement)(FocusGroupItem, {
+        asChild: true,
+        children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+          id: triggerId,
+          disabled,
+          "data-disabled": disabled ? "" : void 0,
+          "data-state": getOpenState(open),
+          "aria-expanded": open,
+          "aria-controls": open ? contentId : void 0,
+          ...triggerProps,
+          ref: composedRefs,
+          onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerEnter, () => {
+            wasClickCloseRef.current = false;
+            itemContext.wasEscapeCloseRef.current = false;
+          }),
+          onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(
+            props?.onPointerMove,
+            whenMouse(() => {
+              if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current)
+                return;
+              context.onTriggerEnter(itemContext.value);
+              hasPointerMoveOpenedRef.current = true;
+            })
+          ),
+          onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(
+            props?.onPointerLeave,
+            whenMouse(() => {
+              if (disabled) return;
+              context.onTriggerLeave();
+              hasPointerMoveOpenedRef.current = false;
+            })
+          ),
+          onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, () => {
+            context.onItemSelect(itemContext.value);
+            wasClickCloseRef.current = open;
+          }),
+          onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+            const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+            const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
+            if (open && event.key === entryKey) {
+              itemContext.onEntryKeyDown();
+              event.preventDefault();
+            }
+          })
+        })
+      })
+    }),
+    // Proxy tab order between trigger and content
+    open ? (0, import_octane.createElement)(import_VisuallyHidden.VisuallyHidden, {
+      key: "proxy",
+      "aria-hidden": true,
+      tabIndex: 0,
+      ref: itemContext.focusProxyRef,
+      onFocus: (event) => {
+        const content = itemContext.contentRef.current;
+        const prevFocusedElement = event.relatedTarget;
+        const wasTriggerFocused = prevFocusedElement === ref.current;
+        const wasFocusFromContent = content?.contains(prevFocusedElement);
+        if (wasTriggerFocused || !wasFocusFromContent) {
+          itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
+        }
+      }
+    }) : null,
+    // Restructure a11y tree to make content accessible to screen reader when using the viewport
+    open && context.viewport ? (0, import_octane.createElement)("span", { key: "owns", "aria-owns": contentId }) : null
+    // The conditional slots are dropped (not `null`-padded): every element is keyed, so
+    // octane reconciles by key and doesn't warn about unkeyed array holes.
+  ].filter(Boolean);
+}
+const LINK_SELECT = "navigationMenu.linkSelect";
+function Link(props) {
+  const { __scopeNavigationMenu, active, onSelect, ref: forwardedRef, ...linkProps } = props ?? {};
+  return (0, import_octane.createElement)(FocusGroupItem, {
+    asChild: true,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.a, {
+      "data-active": active ? "" : void 0,
+      "aria-current": active ? "page" : void 0,
+      ...linkProps,
+      ref: forwardedRef,
+      onClick: (0, import_compose_event_handlers.composeEventHandlers)(
+        props?.onClick,
+        (event) => {
+          const target = event.target;
+          const linkSelectEvent = new CustomEvent(LINK_SELECT, {
+            bubbles: true,
+            cancelable: true
+          });
+          target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true });
+          (0, import_Primitive.dispatchDiscreteCustomEvent)(target, linkSelectEvent);
+          if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
+            const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
+              bubbles: true,
+              cancelable: true
+            });
+            (0, import_Primitive.dispatchDiscreteCustomEvent)(target, rootContentDismissEvent);
+          }
+        },
+        { checkForDefaultPrevented: false }
+      )
+    })
+  });
+}
+const INDICATOR_NAME = "NavigationMenuIndicator";
+function Indicator(props) {
+  const { forceMount, ...indicatorProps } = props ?? {};
+  const context = useNavigationMenuContext(INDICATOR_NAME, props?.__scopeNavigationMenu);
+  const isVisible = Boolean(context.value);
+  return context.indicatorTrack ? (0, import_octane.createPortal)(
+    (0, import_octane.createElement)(import_Presence.Presence, {
+      present: forceMount || isVisible,
+      children: (0, import_octane.createElement)(NavigationMenuIndicatorImpl, { ...indicatorProps })
+    }),
+    context.indicatorTrack
+  ) : null;
+}
+function NavigationMenuIndicatorImpl(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.IndicatorImpl");
+  const { __scopeNavigationMenu, ref: forwardedRef, ...indicatorProps } = props ?? {};
+  const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);
+  const getItems = useCollection(__scopeNavigationMenu, (0, import_internal.subSlot)(slot, "items"));
+  const [activeTrigger, setActiveTrigger] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "active")
+  );
+  const [position, setPosition] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "position")
+  );
+  const isHorizontal = context.orientation === "horizontal";
+  const isVisible = Boolean(context.value);
+  (0, import_octane.useEffect)(
+    () => {
+      const items = getItems();
+      const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
+      if (triggerNode) setActiveTrigger(triggerNode);
+    },
+    [getItems, context.value],
+    (0, import_internal.subSlot)(slot, "e:active")
+  );
+  const handlePositionChange = () => {
+    if (activeTrigger) {
+      setPosition({
+        size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
+        offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
+      });
+    }
+  };
+  useResizeObserver(activeTrigger, handlePositionChange, (0, import_internal.subSlot)(slot, "ro:trigger"));
+  useResizeObserver(context.indicatorTrack, handlePositionChange, (0, import_internal.subSlot)(slot, "ro:track"));
+  return position ? (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "aria-hidden": true,
+    "data-state": isVisible ? "visible" : "hidden",
+    "data-orientation": context.orientation,
+    ...indicatorProps,
+    ref: forwardedRef,
+    style: {
+      position: "absolute",
+      ...isHorizontal ? {
+        left: 0,
+        width: position.size + "px",
+        transform: `translateX(${position.offset}px)`
+      } : {
+        top: 0,
+        height: position.size + "px",
+        transform: `translateY(${position.offset}px)`
+      },
+      ...indicatorProps.style
+    }
+  }) : null;
+}
+const CONTENT_NAME = "NavigationMenuContent";
+function Content(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.Content");
+  const { forceMount, ref: forwardedRef, ...contentProps } = props ?? {};
+  const context = useNavigationMenuContext(CONTENT_NAME, props?.__scopeNavigationMenu);
+  const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props?.__scopeNavigationMenu);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(itemContext.contentRef, forwardedRef, (0, import_internal.subSlot)(slot, "refs"));
+  const open = itemContext.value === context.value;
+  const commonProps = {
+    value: itemContext.value,
+    triggerRef: itemContext.triggerRef,
+    focusProxyRef: itemContext.focusProxyRef,
+    wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
+    onContentFocusOutside: itemContext.onContentFocusOutside,
+    onRootContentClose: itemContext.onRootContentClose,
+    ...contentProps
+  };
+  const inViewport = Boolean(context.viewport);
+  const { onViewportContentChange, onViewportContentRemove } = context;
+  const contentData = { forceMount, ...commonProps, ref: composedRefs };
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      return () => onViewportContentRemove(contentData.value);
+    },
+    [inViewport, contentData.value, onViewportContentRemove],
+    (0, import_internal.subSlot)(slot, "e:vcRemove")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (inViewport) onViewportContentChange(contentData.value, contentData);
+    },
+    [inViewport, contentData, onViewportContentChange],
+    (0, import_internal.subSlot)(slot, "e:vcChange")
+  );
+  if (!inViewport) {
+    return (0, import_octane.createElement)(import_Presence.Presence, {
+      present: forceMount || open,
+      children: (0, import_octane.createElement)(NavigationMenuContentImpl, {
+        "data-state": getOpenState(open),
+        ...commonProps,
+        ref: composedRefs,
+        onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerEnter, context.onContentEnter),
+        onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(
+          props?.onPointerLeave,
+          whenMouse(context.onContentLeave)
+        ),
+        style: {
+          // Prevent interaction when animating out
+          pointerEvents: !open && context.isRootMenu ? "none" : void 0,
+          ...commonProps.style
+        }
+      })
+    });
+  }
+  return null;
+}
+const ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
+function NavigationMenuContentImpl(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.ContentImpl");
+  const {
+    __scopeNavigationMenu,
+    value,
+    triggerRef,
+    focusProxyRef,
+    wasEscapeCloseRef,
+    onRootContentClose,
+    onContentFocusOutside,
+    ref: forwardedRef,
+    ...contentProps
+  } = props ?? {};
+  const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(ref, forwardedRef, (0, import_internal.subSlot)(slot, "refs"));
+  const triggerId = makeTriggerId(context.baseId, value);
+  const contentId = makeContentId(context.baseId, value);
+  const getItems = useCollection(__scopeNavigationMenu, (0, import_internal.subSlot)(slot, "items"));
+  const prevMotionAttributeRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "prevMotion"));
+  const { onItemDismiss } = context;
+  (0, import_octane.useEffect)(
+    () => {
+      const content = ref.current;
+      if (context.isRootMenu && content) {
+        const handleClose = () => {
+          onItemDismiss();
+          onRootContentClose();
+          if (content.contains(document.activeElement)) triggerRef.current?.focus();
+        };
+        content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
+        return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
+      }
+    },
+    [context.isRootMenu, value, triggerRef, onItemDismiss, onRootContentClose],
+    (0, import_internal.subSlot)(slot, "e:dismiss")
+  );
+  const motionAttribute = (0, import_octane.useMemo)(
+    () => {
+      const items = getItems();
+      const values = items.map((item) => item.value);
+      if (context.dir === "rtl") values.reverse();
+      const index = values.indexOf(context.value);
+      const prevIndex = values.indexOf(context.previousValue);
+      const isSelected = value === context.value;
+      const wasSelected = prevIndex === values.indexOf(value);
+      if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
+      const attribute = (() => {
+        if (index !== prevIndex) {
+          if (isSelected && prevIndex !== -1) return index > prevIndex ? "from-end" : "from-start";
+          if (wasSelected && index !== -1) return index > prevIndex ? "to-start" : "to-end";
+        }
+        return null;
+      })();
+      prevMotionAttributeRef.current = attribute;
+      return attribute;
+    },
+    [context.previousValue, context.value, context.dir, getItems, value],
+    (0, import_internal.subSlot)(slot, "m:motion")
+  );
+  return (0, import_octane.createElement)(FocusGroup, {
+    asChild: true,
+    children: (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-motion": motionAttribute,
+      "data-orientation": context.orientation,
+      ...contentProps,
+      ref: composedRefs,
+      disableOutsidePointerEvents: false,
+      onDismiss: () => {
+        const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {
+          bubbles: true,
+          cancelable: true
+        });
+        ref.current?.dispatchEvent(rootContentDismissEvent);
+      },
+      onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocusOutside, (event) => {
+        onContentFocusOutside();
+        const target = event.target;
+        if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
+      }),
+      onPointerDownOutside: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerDownOutside, (event) => {
+        const target = event.target;
+        const isTrigger = getItems().some((item) => item.ref.current?.contains(target));
+        const isRootViewport = context.isRootMenu && context.viewport?.contains(target);
+        if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
+      }),
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+        const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+        const isTabKey = event.key === "Tab" && !isMetaKey;
+        if (isTabKey) {
+          const candidates = getTabbableCandidates(event.currentTarget);
+          const focusedElement = document.activeElement;
+          const index = candidates.findIndex((candidate) => candidate === focusedElement);
+          const isMovingBackwards = event.shiftKey;
+          const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
+          if (focusFirst(nextCandidates)) {
+            event.preventDefault();
+          } else {
+            focusProxyRef.current?.focus();
+          }
+        }
+      }),
+      onEscapeKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onEscapeKeyDown, (_event) => {
+        wasEscapeCloseRef.current = true;
+      })
+    })
+  });
+}
+const VIEWPORT_NAME = "NavigationMenuViewport";
+function Viewport(props) {
+  const { forceMount, ...viewportProps } = props ?? {};
+  const context = useNavigationMenuContext(VIEWPORT_NAME, props?.__scopeNavigationMenu);
+  const open = Boolean(context.value);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || open,
+    children: (0, import_octane.createElement)(NavigationMenuViewportImpl, { ...viewportProps })
+  });
+}
+function NavigationMenuViewportImpl(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.ViewportImpl");
+  const { __scopeNavigationMenu, children, ref: forwardedRef, ...viewportImplProps } = props ?? {};
+  const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    context.onViewportChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const viewportContentContext = useViewportContentContext(
+    CONTENT_NAME,
+    props?.__scopeNavigationMenu
+  );
+  const [size, setSize] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "size")
+  );
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const viewportWidth = size ? size?.width + "px" : void 0;
+  const viewportHeight = size ? size?.height + "px" : void 0;
+  const open = Boolean(context.value);
+  const activeContentValue = open ? context.value : context.previousValue;
+  const handleSizeChange = () => {
+    if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
+  };
+  useResizeObserver(content, handleSizeChange, (0, import_internal.subSlot)(slot, "ro:content"));
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "data-state": getOpenState(open),
+    "data-orientation": context.orientation,
+    ...viewportImplProps,
+    ref: composedRefs,
+    style: {
+      // Prevent interaction when animating out
+      pointerEvents: !open && context.isRootMenu ? "none" : void 0,
+      "--radix-navigation-menu-viewport-width": viewportWidth,
+      "--radix-navigation-menu-viewport-height": viewportHeight,
+      ...viewportImplProps.style
+    },
+    onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerEnter, context.onContentEnter),
+    onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerLeave, whenMouse(context.onContentLeave)),
+    children: Array.from(viewportContentContext.items).map(
+      ([value, { ref, forceMount, ...props2 }]) => {
+        const isActive = activeContentValue === value;
+        return (0, import_octane.createElement)(import_Presence.Presence, {
+          key: value,
+          present: forceMount || isActive,
+          children: (0, import_octane.createElement)(NavigationMenuViewportItem, {
+            ...props2,
+            contentRef: ref,
+            isActive,
+            onActiveContentChange: setContent
+          })
+        });
+      }
+    )
+  });
+}
+function NavigationMenuViewportItem(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.ViewportItem");
+  const { contentRef, isActive, onActiveContentChange, ...itemProps } = props ?? {};
+  const handleContentChange = (0, import_octane.useCallback)(
+    (node) => {
+      if (isActive && node) {
+        onActiveContentChange(node);
+      }
+    },
+    [isActive, onActiveContentChange],
+    (0, import_internal.subSlot)(slot, "change")
+  );
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(contentRef, handleContentChange, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)(NavigationMenuContentImpl, { ...itemProps, ref: composedRefs });
+}
+const FOCUS_GROUP_NAME = "FocusGroup";
+function FocusGroup(props) {
+  const { __scopeNavigationMenu, ...groupProps } = props ?? {};
+  const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
+  return (0, import_octane.createElement)(FocusGroupCollection.Provider, {
+    scope: __scopeNavigationMenu,
+    children: (0, import_octane.createElement)(FocusGroupCollection.Slot, {
+      scope: __scopeNavigationMenu,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, { dir: context.dir, ...groupProps })
+    })
+  });
+}
+const ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
+const FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
+function FocusGroupItem(props) {
+  const slot = (0, import_internal.S)("NavigationMenu.FocusGroupItem");
+  const { __scopeNavigationMenu, ...groupProps } = props ?? {};
+  const getItems = useFocusGroupCollection(__scopeNavigationMenu, (0, import_internal.subSlot)(slot, "items"));
+  const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
+  return (0, import_octane.createElement)(FocusGroupCollection.ItemSlot, {
+    scope: __scopeNavigationMenu,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+      ...groupProps,
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+        const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
+        if (isFocusNavigationKey) {
+          let candidateNodes = getItems().map((item) => item.ref.current);
+          const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+          const prevKeys = [prevItemKey, "ArrowUp", "End"];
+          if (prevKeys.includes(event.key)) candidateNodes.reverse();
+          if (ARROW_KEYS.includes(event.key)) {
+            const currentIndex = candidateNodes.indexOf(event.currentTarget);
+            candidateNodes = candidateNodes.slice(currentIndex + 1);
+          }
+          setTimeout(() => focusFirst(candidateNodes));
+          event.preventDefault();
+        }
+      })
+    })
+  });
+}
+function getTabbableCandidates(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}
+function focusFirst(candidates) {
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some((candidate) => {
+    if (candidate === previouslyFocusedElement) return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+function removeFromTabOrder(candidates) {
+  candidates.forEach((candidate) => {
+    candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
+    candidate.setAttribute("tabindex", "-1");
+  });
+  return () => {
+    candidates.forEach((candidate) => {
+      const prevTabIndex = candidate.dataset.tabindex;
+      candidate.setAttribute("tabindex", prevTabIndex);
+    });
+  };
+}
+function useResizeObserver(element, onResize, slot) {
+  const handleResize = (0, import_use_effect_event.useEffectEvent)(onResize, (0, import_internal.subSlot)(slot, "cb"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      let rAF = 0;
+      if (element) {
+        if (typeof ResizeObserver === "undefined") {
+          const timer = window.setTimeout(handleResize, 0);
+          return () => window.clearTimeout(timer);
+        }
+        const resizeObserver = new ResizeObserver(() => {
+          cancelAnimationFrame(rAF);
+          rAF = window.requestAnimationFrame(handleResize);
+        });
+        resizeObserver.observe(element);
+        return () => {
+          window.cancelAnimationFrame(rAF);
+          resizeObserver.unobserve(element);
+        };
+      }
+    },
+    [element, handleResize],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+}
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+function whenMouse(handler) {
+  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Content,
+  Indicator,
+  Item,
+  Link,
+  List,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuSub,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  Root,
+  Sub,
+  Trigger,
+  Viewport,
+  createNavigationMenuScope
+});