@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/Menu.cjs

@@ -0,0 +1,925 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Menu_exports = {};
+__export(Menu_exports, {
+  Anchor: () => Anchor,
+  Arrow: () => Arrow,
+  CheckboxItem: () => CheckboxItem,
+  Content: () => Content,
+  Group: () => Group,
+  Item: () => Item,
+  ItemIndicator: () => ItemIndicator,
+  Label: () => Label,
+  Menu: () => Root,
+  MenuAnchor: () => Anchor,
+  MenuContent: () => Content,
+  MenuItem: () => Item,
+  Portal: () => Portal,
+  RadioGroup: () => RadioGroup,
+  RadioItem: () => RadioItem,
+  Root: () => Root,
+  Separator: () => Separator,
+  Sub: () => Sub,
+  SubContent: () => SubContent,
+  SubTrigger: () => SubTrigger,
+  createMenuScope: () => createMenuScope
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_octane = require("octane");
+var import_aria_hidden = require("aria-hidden");
+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_FocusScope = require("./FocusScope.cjs");
+var import_focus_guards = require("./focus-guards.cjs");
+var import_internal = require("./internal.cjs");
+var PopperPrimitive = __toESM(require("./Popper.cjs"), 1);
+var import_Popper = require("./Popper.cjs");
+var import_Portal = require("./Portal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var import_scroll_lock = require("./scroll-lock.cjs");
+var import_use_callback_ref = require("./use-callback-ref.cjs");
+var import_useId = require("./useId.cjs");
+const SELECTION_KEYS = ["Enter", " "];
+const FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
+const LAST_KEYS = ["ArrowUp", "PageDown", "End"];
+const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+const SUB_OPEN_KEYS = {
+  ltr: [...SELECTION_KEYS, "ArrowRight"],
+  rtl: [...SELECTION_KEYS, "ArrowLeft"]
+};
+const SUB_CLOSE_KEYS = {
+  ltr: ["ArrowLeft"],
+  rtl: ["ArrowRight"]
+};
+const MENU_NAME = "Menu";
+const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(MENU_NAME);
+const [createMenuContext, createMenuScope] = (0, import_context.createContextScope)(MENU_NAME, [
+  createCollectionScope,
+  import_Popper.createPopperScope,
+  import_RovingFocusGroup.createRovingFocusGroupScope
+]);
+const usePopperScope = (0, import_Popper.createPopperScope)();
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
+const [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("Menu.Root");
+  const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props ?? {};
+  const popperScope = usePopperScope(__scopeMenu, (0, import_internal.subSlot)(slot, "popper"));
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const isUsingKeyboardRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "keyboard"));
+  const handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange, (0, import_internal.subSlot)(slot, "openChange"));
+  const direction = (0, import_direction.useDirection)(dir);
+  (0, import_octane.useEffect)(
+    () => {
+      const handleKeyDown = () => {
+        isUsingKeyboardRef.current = true;
+        document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
+        document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
+      };
+      const handlePointer = () => isUsingKeyboardRef.current = false;
+      document.addEventListener("keydown", handleKeyDown, { capture: true });
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown, { capture: true });
+        document.removeEventListener("pointerdown", handlePointer, { capture: true });
+        document.removeEventListener("pointermove", handlePointer, { capture: true });
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:keyboard")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!open) return;
+      const handleBlur = () => handleOpenChange(false);
+      window.addEventListener("blur", handleBlur);
+      return () => window.removeEventListener("blur", handleBlur);
+    },
+    [open, handleOpenChange],
+    (0, import_internal.subSlot)(slot, "e:blur")
+  );
+  return (0, import_octane.createElement)(PopperPrimitive.Root, {
+    ...popperScope,
+    children: (0, import_octane.createElement)(MenuProvider, {
+      scope: __scopeMenu,
+      open,
+      onOpenChange: handleOpenChange,
+      content,
+      onContentChange: setContent,
+      children: (0, import_octane.createElement)(MenuRootProvider, {
+        scope: __scopeMenu,
+        onClose: (0, import_octane.useCallback)(
+          () => handleOpenChange(false),
+          [handleOpenChange],
+          (0, import_internal.subSlot)(slot, "close")
+        ),
+        isUsingKeyboardRef,
+        dir: direction,
+        modal,
+        children
+      })
+    })
+  });
+}
+function Anchor(props) {
+  const slot = (0, import_internal.S)("Menu.Anchor");
+  const { __scopeMenu, ...anchorProps } = props ?? {};
+  const popperScope = usePopperScope(__scopeMenu, (0, import_internal.subSlot)(slot, "popper"));
+  return (0, import_octane.createElement)(PopperPrimitive.Anchor, { ...popperScope, ...anchorProps });
+}
+const [PortalProvider, usePortalContext] = createMenuContext(
+  "MenuPortal",
+  { forceMount: void 0 }
+);
+function Portal(props) {
+  const { __scopeMenu, forceMount, children, container } = props ?? {};
+  const context = useMenuContext("MenuPortal", __scopeMenu);
+  return (0, import_octane.createElement)(PortalProvider, {
+    scope: __scopeMenu,
+    forceMount,
+    children: (0, import_octane.createElement)(import_Presence.Presence, {
+      present: forceMount || context.open,
+      children: (0, import_octane.createElement)(import_Portal.Portal, {
+        asChild: typeof children !== "function",
+        container,
+        children
+      })
+    })
+  });
+}
+const CONTENT_NAME = "MenuContent";
+const [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME);
+function Content(props) {
+  const portalContext = usePortalContext(CONTENT_NAME, props?.__scopeMenu);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props ?? {};
+  const context = useMenuContext(CONTENT_NAME, props?.__scopeMenu);
+  const rootContext = useMenuRootContext(CONTENT_NAME, props?.__scopeMenu);
+  return (0, import_octane.createElement)(Collection.Provider, {
+    scope: props?.__scopeMenu,
+    children: (0, import_octane.createElement)(import_Presence.Presence, {
+      present: forceMount || context.open,
+      children: (0, import_octane.createElement)(Collection.Slot, {
+        scope: props?.__scopeMenu,
+        children: rootContext.modal ? (0, import_octane.createElement)(MenuRootContentModal, contentProps) : (0, import_octane.createElement)(MenuRootContentNonModal, contentProps)
+      })
+    })
+  });
+}
+function MenuRootContentModal(props) {
+  const slot = (0, import_internal.S)("Menu.RootContentModal");
+  const { ref: forwardedRef, ...rest } = props;
+  const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  (0, import_octane.useEffect)(
+    () => {
+      const content = ref.current;
+      if (content) return (0, import_aria_hidden.hideOthers)(content);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:hide")
+  );
+  return (0, import_octane.createElement)(MenuContentImpl, {
+    ...rest,
+    __scopeMenu: props.__scopeMenu,
+    ref: composedRefs,
+    // we make sure we're not trapping once it's been closed
+    // (closed !== unmounted when animating out)
+    trapFocus: context.open,
+    // make sure to only disable pointer events when open
+    // this avoids blocking interactions while animating out
+    disableOutsidePointerEvents: context.open,
+    disableOutsideScroll: true,
+    // When focus is trapped, a `focusout` event may still happen.
+    // We make sure we don't trigger our `onDismiss` in such case.
+    onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(
+      props.onFocusOutside,
+      (event) => event.preventDefault(),
+      { checkForDefaultPrevented: false }
+    ),
+    onDismiss: () => context.onOpenChange(false)
+  });
+}
+function MenuRootContentNonModal(props) {
+  const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
+  return (0, import_octane.createElement)(MenuContentImpl, {
+    ...props,
+    trapFocus: false,
+    disableOutsidePointerEvents: false,
+    disableOutsideScroll: false,
+    onDismiss: () => context.onOpenChange(false)
+  });
+}
+function MenuContentImpl(props) {
+  const slot = (0, import_internal.S)("Menu.ContentImpl");
+  const {
+    __scopeMenu,
+    ref: forwardedRef,
+    loop = false,
+    trapFocus,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    disableOutsidePointerEvents,
+    onEntryFocus,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss,
+    disableOutsideScroll,
+    ...contentProps
+  } = props;
+  const context = useMenuContext(CONTENT_NAME, __scopeMenu);
+  const rootContext = useMenuRootContext(CONTENT_NAME, __scopeMenu);
+  const popperScope = usePopperScope(__scopeMenu, (0, import_internal.subSlot)(slot, "popper"));
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu, (0, import_internal.subSlot)(slot, "rfs"));
+  const getItems = useCollection(__scopeMenu, (0, import_internal.subSlot)(slot, "items"));
+  const [currentItemId, setCurrentItemId] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "item"));
+  const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "content"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    contentRef,
+    context.onContentChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const timerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
+  const searchRef = (0, import_octane.useRef)("", (0, import_internal.subSlot)(slot, "search"));
+  const pointerGraceTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "graceTimer"));
+  const pointerGraceIntentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "graceIntent"));
+  const pointerDirRef = (0, import_octane.useRef)("right", (0, import_internal.subSlot)(slot, "pointerDir"));
+  const lastPointerXRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "lastX"));
+  (0, import_scroll_lock.useScrollLock)(!!disableOutsideScroll, (0, import_internal.subSlot)(slot, "lock"));
+  const handleTypeaheadSearch = (key) => {
+    const search = searchRef.current + key;
+    const items = getItems().filter((item) => !item.disabled);
+    const currentItem = document.activeElement;
+    const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
+    const values = items.map((item) => item.textValue);
+    const nextMatch = getNextMatch(values, search, currentMatch);
+    const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
+    (function updateSearch(value) {
+      searchRef.current = value;
+      window.clearTimeout(timerRef.current);
+      if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
+    })(search);
+    if (newItem) {
+      setTimeout(() => newItem.focus());
+    }
+  };
+  (0, import_octane.useEffect)(
+    () => {
+      return () => window.clearTimeout(timerRef.current);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:timer")
+  );
+  (0, import_focus_guards.useFocusGuards)((0, import_internal.subSlot)(slot, "guards"));
+  const isPointerMovingToSubmenu = (0, import_octane.useCallback)(
+    (event) => {
+      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
+      return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "movingToSub")
+  );
+  return (0, import_octane.createElement)(MenuContentProvider, {
+    scope: __scopeMenu,
+    searchRef,
+    onItemEnter: (0, import_octane.useCallback)(
+      (event) => {
+        if (isPointerMovingToSubmenu(event)) event.preventDefault();
+      },
+      [isPointerMovingToSubmenu],
+      (0, import_internal.subSlot)(slot, "itemEnter")
+    ),
+    onItemLeave: (0, import_octane.useCallback)(
+      (event) => {
+        if (isPointerMovingToSubmenu(event)) return;
+        contentRef.current?.focus();
+        setCurrentItemId(null);
+      },
+      [isPointerMovingToSubmenu],
+      (0, import_internal.subSlot)(slot, "itemLeave")
+    ),
+    onTriggerLeave: (0, import_octane.useCallback)(
+      (event) => {
+        if (isPointerMovingToSubmenu(event)) event.preventDefault();
+      },
+      [isPointerMovingToSubmenu],
+      (0, import_internal.subSlot)(slot, "triggerLeave")
+    ),
+    pointerGraceTimerRef,
+    onPointerGraceIntentChange: (0, import_octane.useCallback)(
+      (intent) => {
+        pointerGraceIntentRef.current = intent;
+      },
+      [],
+      (0, import_internal.subSlot)(slot, "graceChange")
+    ),
+    children: (0, import_octane.createElement)(import_FocusScope.FocusScope, {
+      asChild: true,
+      trapped: trapFocus,
+      onMountAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(onOpenAutoFocus, (event) => {
+        event.preventDefault();
+        contentRef.current?.focus({ preventScroll: true });
+      }),
+      onUnmountAutoFocus: onCloseAutoFocus,
+      children: (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
+        asChild: true,
+        disableOutsidePointerEvents,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside,
+        onInteractOutside,
+        onDismiss,
+        children: (0, import_octane.createElement)(RovingFocusGroup.Root, {
+          asChild: true,
+          ...rovingFocusGroupScope,
+          dir: rootContext.dir,
+          orientation: "vertical",
+          loop,
+          currentTabStopId: currentItemId,
+          onCurrentTabStopIdChange: setCurrentItemId,
+          onEntryFocus: (0, import_compose_event_handlers.composeEventHandlers)(onEntryFocus, (event) => {
+            if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
+          }),
+          preventScrollOnEntryFocus: true,
+          children: (0, import_octane.createElement)(PopperPrimitive.Content, {
+            role: "menu",
+            "aria-orientation": "vertical",
+            "data-state": getOpenState(context.open),
+            "data-radix-menu-content": "",
+            dir: rootContext.dir,
+            ...popperScope,
+            ...contentProps,
+            ref: composedRefs,
+            style: { outline: "none", ...contentProps.style },
+            onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(contentProps.onKeyDown, (event) => {
+              const target = event.target;
+              const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
+              const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+              const isCharacterKey = event.key.length === 1;
+              if (isKeyDownInside) {
+                if (event.key === "Tab") event.preventDefault();
+                if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+              }
+              const content = contentRef.current;
+              if (event.target !== content) return;
+              if (!FIRST_LAST_KEYS.includes(event.key)) return;
+              event.preventDefault();
+              const items = getItems().filter((item) => !item.disabled);
+              const candidateNodes = items.map((item) => item.ref.current);
+              if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+              focusFirst(candidateNodes);
+            }),
+            onBlur: (0, import_compose_event_handlers.composeEventHandlers)(props.onBlur, (event) => {
+              if (!event.currentTarget.contains(event.target)) {
+                window.clearTimeout(timerRef.current);
+                searchRef.current = "";
+              }
+            }),
+            onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(
+              props.onPointerMove,
+              whenMouse((event) => {
+                const target = event.target;
+                const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+                if (event.currentTarget.contains(target) && pointerXHasChanged) {
+                  const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+                  pointerDirRef.current = newDir;
+                  lastPointerXRef.current = event.clientX;
+                }
+              })
+            )
+          })
+        })
+      })
+    })
+  });
+}
+function Group(props) {
+  const { __scopeMenu, ...groupProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { role: "group", ...groupProps });
+}
+function Label(props) {
+  const { __scopeMenu, ...labelProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { ...labelProps });
+}
+const ITEM_NAME = "MenuItem";
+const ITEM_SELECT = "menu.itemSelect";
+function Item(props) {
+  const slot = (0, import_internal.S)("Menu.Item");
+  const { disabled = false, onSelect, ref: forwardedRef, ...itemProps } = props ?? {};
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const rootContext = useMenuRootContext(ITEM_NAME, props?.__scopeMenu);
+  const contentContext = useMenuContentContext(ITEM_NAME, props?.__scopeMenu);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const isPointerDownRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pointerDown"));
+  const handleSelect = () => {
+    const menuItem = ref.current;
+    if (!disabled && menuItem) {
+      const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
+      menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
+      (0, import_Primitive.dispatchDiscreteCustomEvent)(menuItem, itemSelectEvent);
+      if (itemSelectEvent.defaultPrevented) {
+        isPointerDownRef.current = false;
+      } else {
+        rootContext.onClose();
+      }
+    }
+  };
+  return (0, import_octane.createElement)(MenuItemImpl, {
+    ...itemProps,
+    __scopeMenu: props?.__scopeMenu,
+    ref: composedRefs,
+    disabled,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, handleSelect),
+    onPointerDown: (event) => {
+      props?.onPointerDown?.(event);
+      isPointerDownRef.current = true;
+    },
+    onPointerUp: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerUp, (event) => {
+      if (!isPointerDownRef.current) event.currentTarget?.click();
+    }),
+    onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+      const isTypingAhead = contentContext.searchRef.current !== "";
+      if (disabled || isTypingAhead && event.key === " ") return;
+      if (SELECTION_KEYS.includes(event.key)) {
+        event.currentTarget.click();
+        event.preventDefault();
+      }
+    })
+  });
+}
+function MenuItemImpl(props) {
+  const slot = (0, import_internal.S)("Menu.ItemImpl");
+  const { __scopeMenu, disabled = false, textValue, ref: forwardedRef, ...itemProps } = props;
+  const contentContext = useMenuContentContext(ITEM_NAME, __scopeMenu);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu, (0, import_internal.subSlot)(slot, "rfs"));
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const [isFocused, setIsFocused] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "focused"));
+  const [textContent, setTextContent] = (0, import_octane.useState)("", (0, import_internal.subSlot)(slot, "text"));
+  (0, import_octane.useEffect)(
+    () => {
+      const menuItem = ref.current;
+      if (menuItem) {
+        setTextContent((menuItem.textContent ?? "").trim());
+      }
+    },
+    [itemProps.children],
+    (0, import_internal.subSlot)(slot, "e:text")
+  );
+  return (0, import_octane.createElement)(Collection.ItemSlot, {
+    scope: __scopeMenu,
+    disabled,
+    textValue: textValue ?? textContent,
+    children: (0, import_octane.createElement)(RovingFocusGroup.Item, {
+      asChild: true,
+      ...rovingFocusGroupScope,
+      focusable: !disabled,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        role: "menuitem",
+        "data-highlighted": isFocused ? "" : void 0,
+        "aria-disabled": disabled || void 0,
+        "data-disabled": disabled ? "" : void 0,
+        ...itemProps,
+        ref: composedRefs,
+        /**
+         * We focus items on `pointerMove` to achieve the following:
+         *
+         * - Mouse over an item (it focuses)
+         * - Leave mouse where it is and use keyboard to focus a different item
+         * - Wiggle mouse without it leaving previously focused item
+         * - Previously focused item should re-focus
+         *
+         * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse
+         * wiggles. This is to match native menu implementation.
+         */
+        onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(
+          props.onPointerMove,
+          whenMouse((event) => {
+            if (disabled) {
+              contentContext.onItemLeave(event);
+            } else {
+              contentContext.onItemEnter(event);
+              if (!event.defaultPrevented) {
+                const item = event.currentTarget;
+                item.focus({ preventScroll: true });
+              }
+            }
+          })
+        ),
+        onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(
+          props.onPointerLeave,
+          whenMouse((event) => contentContext.onItemLeave(event))
+        ),
+        onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props.onFocus, () => setIsFocused(true)),
+        onBlur: (0, import_compose_event_handlers.composeEventHandlers)(props.onBlur, () => setIsFocused(false))
+      })
+    })
+  });
+}
+function CheckboxItem(props) {
+  const { checked = false, onCheckedChange, ...checkboxItemProps } = props ?? {};
+  return (0, import_octane.createElement)(ItemIndicatorProvider, {
+    scope: props?.__scopeMenu,
+    checked,
+    children: (0, import_octane.createElement)(Item, {
+      role: "menuitemcheckbox",
+      "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+      ...checkboxItemProps,
+      "data-state": getCheckedState(checked),
+      onSelect: (0, import_compose_event_handlers.composeEventHandlers)(
+        checkboxItemProps.onSelect,
+        () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),
+        { checkForDefaultPrevented: false }
+      )
+    })
+  });
+}
+const [RadioGroupProvider, useRadioGroupContext] = createMenuContext("MenuRadioGroup", { value: void 0, onValueChange: () => {
+} });
+function RadioGroup(props) {
+  const slot = (0, import_internal.S)("Menu.RadioGroup");
+  const { value, onValueChange, ...groupProps } = props ?? {};
+  const handleValueChange = (0, import_use_callback_ref.useCallbackRef)(onValueChange, (0, import_internal.subSlot)(slot, "change"));
+  return (0, import_octane.createElement)(RadioGroupProvider, {
+    scope: props?.__scopeMenu,
+    value,
+    onValueChange: handleValueChange,
+    children: (0, import_octane.createElement)(Group, groupProps)
+  });
+}
+function RadioItem(props) {
+  const { value, ...radioItemProps } = props ?? {};
+  const context = useRadioGroupContext("MenuRadioItem", props?.__scopeMenu);
+  const checked = value === context.value;
+  return (0, import_octane.createElement)(ItemIndicatorProvider, {
+    scope: props?.__scopeMenu,
+    checked,
+    children: (0, import_octane.createElement)(Item, {
+      role: "menuitemradio",
+      "aria-checked": checked,
+      ...radioItemProps,
+      "data-state": getCheckedState(checked),
+      onSelect: (0, import_compose_event_handlers.composeEventHandlers)(
+        radioItemProps.onSelect,
+        () => context.onValueChange?.(value),
+        { checkForDefaultPrevented: false }
+      )
+    })
+  });
+}
+const [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext("MenuItemIndicator", { checked: false });
+function ItemIndicator(props) {
+  const { __scopeMenu, forceMount, ...itemIndicatorProps } = props ?? {};
+  const indicatorContext = useItemIndicatorContext("MenuItemIndicator", __scopeMenu);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+      ...itemIndicatorProps,
+      "data-state": getCheckedState(indicatorContext.checked)
+    })
+  });
+}
+function Separator(props) {
+  const { __scopeMenu, ...separatorProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    role: "separator",
+    "aria-orientation": "horizontal",
+    ...separatorProps
+  });
+}
+function Arrow(props) {
+  const slot = (0, import_internal.S)("Menu.Arrow");
+  const { __scopeMenu, ...arrowProps } = props ?? {};
+  const popperScope = usePopperScope(__scopeMenu, (0, import_internal.subSlot)(slot, "popper"));
+  return (0, import_octane.createElement)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps });
+}
+const SUB_NAME = "MenuSub";
+const [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
+function Sub(props) {
+  const slot = (0, import_internal.S)("Menu.Sub");
+  const { __scopeMenu, children, open = false, onOpenChange } = props ?? {};
+  const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
+  const popperScope = usePopperScope(__scopeMenu, (0, import_internal.subSlot)(slot, "popper"));
+  const [trigger, setTrigger] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "trigger"));
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const handleOpenChange = (0, import_use_callback_ref.useCallbackRef)(onOpenChange, (0, import_internal.subSlot)(slot, "openChange"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (parentMenuContext.open === false) handleOpenChange(false);
+      return () => handleOpenChange(false);
+    },
+    [parentMenuContext.open, handleOpenChange],
+    (0, import_internal.subSlot)(slot, "e:parent")
+  );
+  return (0, import_octane.createElement)(PopperPrimitive.Root, {
+    ...popperScope,
+    children: (0, import_octane.createElement)(MenuProvider, {
+      scope: __scopeMenu,
+      open,
+      onOpenChange: handleOpenChange,
+      content,
+      onContentChange: setContent,
+      children: (0, import_octane.createElement)(MenuSubProvider, {
+        scope: __scopeMenu,
+        contentId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "contentId")),
+        triggerId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "triggerId")),
+        trigger,
+        onTriggerChange: setTrigger,
+        children
+      })
+    })
+  });
+}
+const SUB_TRIGGER_NAME = "MenuSubTrigger";
+function SubTrigger(props) {
+  const slot = (0, import_internal.S)("Menu.SubTrigger");
+  const context = useMenuContext(SUB_TRIGGER_NAME, props?.__scopeMenu);
+  const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props?.__scopeMenu);
+  const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props?.__scopeMenu);
+  const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props?.__scopeMenu);
+  const openTimerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "openTimer"));
+  const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+  const scope = { __scopeMenu: props?.__scopeMenu };
+  const clearOpenTimer = (0, import_octane.useCallback)(
+    () => {
+      if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "clear")
+  );
+  (0, import_octane.useEffect)(() => clearOpenTimer, [clearOpenTimer], (0, import_internal.subSlot)(slot, "e:clear"));
+  (0, import_octane.useEffect)(
+    () => {
+      const pointerGraceTimer = pointerGraceTimerRef.current;
+      return () => {
+        window.clearTimeout(pointerGraceTimer);
+        onPointerGraceIntentChange(null);
+      };
+    },
+    [pointerGraceTimerRef, onPointerGraceIntentChange],
+    (0, import_internal.subSlot)(slot, "e:grace")
+  );
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    props?.ref,
+    subContext.onTriggerChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  return (0, import_octane.createElement)(Anchor, {
+    asChild: true,
+    ...scope,
+    children: (0, import_octane.createElement)(MenuItemImpl, {
+      id: subContext.triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": context.open,
+      "aria-controls": context.open ? subContext.contentId : void 0,
+      "data-state": getOpenState(context.open),
+      ...props,
+      ref: composedRefs,
+      // This is redundant for mouse users but we cannot determine pointer type from
+      // click event and we cannot use pointerup event (see git history for reasons why)
+      onClick: (event) => {
+        props?.onClick?.(event);
+        if (props?.disabled || event.defaultPrevented) return;
+        event.currentTarget.focus();
+        if (!context.open) context.onOpenChange(true);
+      },
+      onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(
+        props?.onPointerMove,
+        whenMouse((event) => {
+          contentContext.onItemEnter(event);
+          if (event.defaultPrevented) return;
+          if (!props?.disabled && !context.open && !openTimerRef.current) {
+            contentContext.onPointerGraceIntentChange(null);
+            openTimerRef.current = window.setTimeout(() => {
+              context.onOpenChange(true);
+              clearOpenTimer();
+            }, 100);
+          }
+        })
+      ),
+      onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(
+        props?.onPointerLeave,
+        whenMouse((event) => {
+          clearOpenTimer();
+          const contentRect = context.content?.getBoundingClientRect();
+          if (contentRect) {
+            const side = context.content?.dataset.side ?? "right";
+            const rightSide = side === "right";
+            const bleed = rightSide ? -5 : 5;
+            const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+            const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+            contentContext.onPointerGraceIntentChange({
+              area: [
+                // Apply a bleed on clientX to ensure that our exit point is
+                // consistently within polygon bounds
+                { x: event.clientX + bleed, y: event.clientY },
+                { x: contentNearEdge, y: contentRect.top },
+                { x: contentFarEdge, y: contentRect.top },
+                { x: contentFarEdge, y: contentRect.bottom },
+                { x: contentNearEdge, y: contentRect.bottom }
+              ],
+              side
+            });
+            window.clearTimeout(pointerGraceTimerRef.current);
+            pointerGraceTimerRef.current = window.setTimeout(
+              () => contentContext.onPointerGraceIntentChange(null),
+              300
+            );
+          } else {
+            contentContext.onTriggerLeave(event);
+            if (event.defaultPrevented) return;
+            contentContext.onPointerGraceIntentChange(null);
+          }
+        })
+      ),
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+        const isTypingAhead = contentContext.searchRef.current !== "";
+        if (props?.disabled || isTypingAhead && event.key === " ") return;
+        if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+          context.onOpenChange(true);
+          context.content?.focus();
+          event.preventDefault();
+        }
+      })
+    })
+  });
+}
+const SUB_CONTENT_NAME = "MenuSubContent";
+function SubContent(props) {
+  const slot = (0, import_internal.S)("Menu.SubContent");
+  const portalContext = usePortalContext(CONTENT_NAME, props?.__scopeMenu);
+  const {
+    forceMount = portalContext.forceMount,
+    align = "start",
+    ref: forwardedRef,
+    ...subContentProps
+  } = props ?? {};
+  const context = useMenuContext(CONTENT_NAME, props?.__scopeMenu);
+  const rootContext = useMenuRootContext(CONTENT_NAME, props?.__scopeMenu);
+  const subContext = useMenuSubContext(SUB_CONTENT_NAME, props?.__scopeMenu);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)(Collection.Provider, {
+    scope: props?.__scopeMenu,
+    children: (0, import_octane.createElement)(import_Presence.Presence, {
+      present: forceMount || context.open,
+      children: (0, import_octane.createElement)(Collection.Slot, {
+        scope: props?.__scopeMenu,
+        children: (0, import_octane.createElement)(MenuContentImpl, {
+          id: subContext.contentId,
+          "aria-labelledby": subContext.triggerId,
+          ...subContentProps,
+          __scopeMenu: props?.__scopeMenu,
+          ref: composedRefs,
+          align,
+          side: rootContext.dir === "rtl" ? "left" : "right",
+          disableOutsidePointerEvents: false,
+          disableOutsideScroll: false,
+          trapFocus: false,
+          onOpenAutoFocus: (event) => {
+            if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
+            event.preventDefault();
+          },
+          // The menu might close because of focusing another menu item in the parent
+          // menu. We don't want it to refocus the trigger in that case so we handle
+          // trigger focus ourselves.
+          onCloseAutoFocus: (event) => event.preventDefault(),
+          onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocusOutside, (event) => {
+            if (event.target !== subContext.trigger) context.onOpenChange(false);
+          }),
+          onEscapeKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onEscapeKeyDown, (event) => {
+            rootContext.onClose();
+            event.preventDefault();
+          }),
+          onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+            const isKeyDownInside = event.currentTarget.contains(
+              event.target
+            );
+            const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
+            if (isKeyDownInside && isCloseKey) {
+              context.onOpenChange(false);
+              subContext.trigger?.focus();
+              event.preventDefault();
+            }
+          })
+        })
+      })
+    })
+  });
+}
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getCheckedState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function focusFirst(candidates) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus();
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getNextMatch(values, search, currentMatch) {
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const normalizedSearch = isRepeated ? search[0] : search;
+  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+  const excludeCurrentMatch = normalizedSearch.length === 1;
+  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+  const nextMatch = wrappedValues.find(
+    (value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+  );
+  return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const ii = polygon[i];
+    const jj = polygon[j];
+    const xi = ii.x;
+    const yi = ii.y;
+    const xj = jj.x;
+    const yj = jj.y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function isPointerInGraceArea(event, area) {
+  if (!area) return false;
+  const cursorPos = { x: event.clientX, y: event.clientY };
+  return isPointInPolygon(cursorPos, area);
+}
+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 = {
+  Anchor,
+  Arrow,
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Menu,
+  MenuAnchor,
+  MenuContent,
+  MenuItem,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  createMenuScope
+});