@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/menu.cjs

@@ -0,0 +1,2420 @@
+"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 menu_exports = {};
+__export(menu_exports, {
+  Menu: () => Menu,
+  MenuHandle: () => MenuHandle,
+  MenuRootContext: () => MenuRootContext,
+  MenuStore: () => MenuStore,
+  MenuSubmenuRootContext: () => MenuSubmenuRootContext,
+  MenuViewportCssVars: () => MenuViewportCssVars,
+  REGULAR_ITEM: () => REGULAR_ITEM,
+  createMenuHandle: () => createMenuHandle,
+  itemMapping: () => itemMapping,
+  useMenuCheckboxItemContext: () => useMenuCheckboxItemContext,
+  useMenuGroupRootContext: () => useMenuGroupRootContext,
+  useMenuItem: () => useMenuItem,
+  useMenuItemCommonProps: () => useMenuItemCommonProps,
+  useMenuPortalContext: () => useMenuPortalContext,
+  useMenuPositionerContext: () => useMenuPositionerContext,
+  useMenuRadioGroupContext: () => useMenuRadioGroupContext,
+  useMenuRadioItemContext: () => useMenuRadioItemContext,
+  useMenuRootContext: () => useMenuRootContext,
+  useMenuSubmenuRootContext: () => useMenuSubmenuRootContext
+});
+module.exports = __toCommonJS(menu_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_separator = require("./separator.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_mergeProps = require("./utils/mergeProps.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useRefWithInit = require("./utils/useRefWithInit.cjs");
+var import_useTimeout = require("./utils/useTimeout.cjs");
+var import_composeRefs = require("./utils/composeRefs.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_usePopupViewport = require("./utils/usePopupViewport.cjs");
+var import_useCompositeListItem = require("./utils/composite/useCompositeListItem.cjs");
+var import_platform = require("./utils/platform.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_empty = require("./utils/empty.cjs");
+var import_ReactStore = require("./utils/store/ReactStore.cjs");
+var import_createSelector = require("./utils/store/createSelector.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_contains = require("./utils/contains.cjs");
+var import_inertValue = require("./utils/inertValue.cjs");
+var import_getPseudoElementBounds = require("./utils/getPseudoElementBounds.cjs");
+var import_getDisabledMountTransitionStyles = require("./utils/getDisabledMountTransitionStyles.cjs");
+var import_useMixedToggleClickHandler = require("./utils/useMixedToggleClickHandler.cjs");
+var import_useOpenInteractionType = require("./utils/useOpenInteractionType.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_useAnimationsFinished = require("./utils/useAnimationsFinished.cjs");
+var import_useAnchoredPopupScrollLock = require("./utils/useAnchoredPopupScrollLock.cjs");
+var import_usePositioner = require("./utils/usePositioner.cjs");
+var import_InternalBackdrop = require("./utils/InternalBackdrop.cjs");
+var import_adaptiveOriginMiddleware = require("./utils/adaptiveOriginMiddleware.cjs");
+var import_findRootOwnerId = require("./utils/findRootOwnerId.cjs");
+var import_DirectionContext = require("./utils/DirectionContext.cjs");
+var import_constants = require("./utils/constants.cjs");
+var import_popupStateMapping = require("./utils/popupStateMapping.cjs");
+var import_useTransitionStatus2 = require("./utils/useTransitionStatus.cjs");
+var import_keys = require("./utils/composite/keys.cjs");
+var import_CompositeList = require("./utils/composite/CompositeList.cjs");
+var import_CompositeItem = require("./utils/composite/CompositeItem.cjs");
+var import_CompositeRootContext = require("./utils/CompositeRootContext.cjs");
+var import_useAnchorPositioning = require("./utils/useAnchorPositioning.cjs");
+var import_useClick = require("./utils/floating/useClick.cjs");
+var import_useFocus = require("./utils/floating/useFocus.cjs");
+var import_useDismiss = require("./utils/floating/useDismiss.cjs");
+var import_useListNavigation = require("./utils/floating/useListNavigation.cjs");
+var import_useTypeahead = require("./utils/floating/useTypeahead.cjs");
+var import_useHoverReferenceInteraction = require("./utils/floating/useHoverReferenceInteraction.cjs");
+var import_useHoverFloatingInteraction = require("./utils/floating/useHoverFloatingInteraction.cjs");
+var import_useSyncedFloatingRootContext = require("./utils/floating/useSyncedFloatingRootContext.cjs");
+var import_FloatingFocusManager = require("./utils/floating/FloatingFocusManager.cjs");
+var import_FloatingPortal = require("./utils/floating/FloatingPortal.cjs");
+var import_FocusGuard = require("./utils/floating/FocusGuard.cjs");
+var import_FloatingTree = require("./utils/floating/FloatingTree.cjs");
+var import_MenubarContext = require("./utils/MenubarContext.cjs");
+var import_ContextMenuRootContext = require("./utils/ContextMenuRootContext.cjs");
+var import_popups = require("./utils/popups/index.cjs");
+var import_useTriggerFocusGuards = require("./utils/popups/useTriggerFocusGuards.cjs");
+const BOUNDARY_OFFSET = 2;
+const menuSelectors = {
+  ...import_popups.popupStoreSelectors,
+  disabled: (0, import_createSelector.createSelector)(
+    (state) => state.parent.type === "menubar" ? state.parent.context.disabled || state.disabled : state.disabled
+  ),
+  modal: (0, import_createSelector.createSelector)(
+    (state) => (state.parent.type === void 0 || state.parent.type === "context-menu") && (state.modal ?? true)
+  ),
+  openMethod: (0, import_createSelector.createSelector)((state) => state.openMethod),
+  allowMouseEnter: (0, import_createSelector.createSelector)((state) => state.allowMouseEnter),
+  highlightItemOnHover: (0, import_createSelector.createSelector)((state) => state.highlightItemOnHover),
+  stickIfOpen: (0, import_createSelector.createSelector)((state) => state.stickIfOpen),
+  parent: (0, import_createSelector.createSelector)((state) => state.parent),
+  rootId: (0, import_createSelector.createSelector)((state) => {
+    if (state.parent.type === "menu") {
+      return state.parent.store.select("rootId");
+    }
+    return state.parent.type !== void 0 ? state.parent.context.rootId : state.rootId;
+  }),
+  activeIndex: (0, import_createSelector.createSelector)((state) => state.activeIndex),
+  isActive: (0, import_createSelector.createSelector)(
+    (state, itemIndex) => state.activeIndex === itemIndex
+  ),
+  hoverEnabled: (0, import_createSelector.createSelector)((state) => state.hoverEnabled),
+  instantType: (0, import_createSelector.createSelector)((state) => state.instantType),
+  lastOpenChangeReason: (0, import_createSelector.createSelector)((state) => state.openChangeReason),
+  floatingTreeRoot: (0, import_createSelector.createSelector)((state) => {
+    if (state.parent.type === "menu") {
+      return state.parent.store.select("floatingTreeRoot");
+    }
+    return state.floatingTreeRoot;
+  }),
+  floatingNodeId: (0, import_createSelector.createSelector)((state) => state.floatingNodeId),
+  floatingParentNodeId: (0, import_createSelector.createSelector)((state) => state.floatingParentNodeId),
+  itemProps: (0, import_createSelector.createSelector)((state) => state.itemProps),
+  closeDelay: (0, import_createSelector.createSelector)((state) => state.closeDelay),
+  hasViewport: (0, import_createSelector.createSelector)((state) => state.hasViewport),
+  keyboardEventRelay: (0, import_createSelector.createSelector)(
+    (state) => {
+      if (state.keyboardEventRelay) {
+        return state.keyboardEventRelay;
+      }
+      if (state.parent.type === "menu") {
+        return state.parent.store.select("keyboardEventRelay");
+      }
+      return void 0;
+    }
+  )
+};
+function createInitialMenuState() {
+  return {
+    ...(0, import_popups.createInitialPopupStoreState)(),
+    disabled: false,
+    modal: true,
+    openMethod: null,
+    allowMouseEnter: false,
+    highlightItemOnHover: true,
+    stickIfOpen: true,
+    parent: {
+      type: void 0
+    },
+    rootId: void 0,
+    activeIndex: null,
+    hoverEnabled: true,
+    instantType: void 0,
+    openChangeReason: null,
+    floatingTreeRoot: new import_FloatingTree.FloatingTreeStore(),
+    floatingNodeId: void 0,
+    floatingParentNodeId: null,
+    itemProps: import_empty.EMPTY_OBJECT,
+    keyboardEventRelay: void 0,
+    closeDelay: 0,
+    hasViewport: false
+  };
+}
+class MenuStore extends import_ReactStore.ReactStore {
+  unsubscribeParentListener = null;
+  constructor(initialState) {
+    super(
+      { ...createInitialMenuState(), ...initialState },
+      {
+        positionerRef: { current: null },
+        popupRef: { current: null },
+        typingRef: { current: false },
+        itemDomElements: { current: [] },
+        itemLabels: { current: [] },
+        allowMouseUpTriggerRef: { current: false },
+        triggerFocusTargetRef: { current: null },
+        beforeContentFocusGuardRef: { current: null },
+        onOpenChangeComplete: void 0,
+        triggerElements: new import_popups.PopupTriggerMap()
+      },
+      menuSelectors
+    );
+    this.unsubscribeParentListener = this.observe("parent", (parent) => {
+      this.unsubscribeParentListener?.();
+      if (parent.type === "menu") {
+        let rootId = parent.store.select("rootId");
+        let floatingTreeRoot = parent.store.select("floatingTreeRoot");
+        let keyboardEventRelay = parent.store.select("keyboardEventRelay");
+        this.unsubscribeParentListener = parent.store.subscribe(() => {
+          const nextRootId = parent.store.select("rootId");
+          const nextFloatingTreeRoot = parent.store.select("floatingTreeRoot");
+          const nextKeyboardEventRelay = parent.store.select("keyboardEventRelay");
+          if (rootId === nextRootId && floatingTreeRoot === nextFloatingTreeRoot && keyboardEventRelay === nextKeyboardEventRelay) {
+            return;
+          }
+          rootId = nextRootId;
+          floatingTreeRoot = nextFloatingTreeRoot;
+          keyboardEventRelay = nextKeyboardEventRelay;
+          this.notifyAll();
+        });
+        this.context.allowMouseUpTriggerRef = parent.store.context.allowMouseUpTriggerRef;
+        return;
+      }
+      if (parent.type !== void 0) {
+        this.context.allowMouseUpTriggerRef = parent.context.allowMouseUpTriggerRef;
+      }
+      this.unsubscribeParentListener = null;
+    });
+  }
+  // Routed through the floating root context's event bus rather than applied directly, so that
+  // `Menu.Root` owns the one `setOpen` implementation even when the caller is a DETACHED trigger
+  // (or `MenuHandle`) that only holds the store.
+  setOpen(open, eventDetails) {
+    this.state.floatingRootContext.context.events.emit("setOpen", { open, eventDetails });
+  }
+  static useStore(externalStore, initialState, slot) {
+    const internalStore = (0, import_useRefWithInit.useRefWithInit)(
+      () => new MenuStore(initialState),
+      (0, import_internal.subSlot)(slot, "ref")
+    ).current;
+    return externalStore ?? internalStore;
+  }
+}
+class MenuHandle {
+  /** Internal store holding the menu's state. */
+  store;
+  constructor() {
+    this.store = new MenuStore();
+  }
+  /**
+   * Opens the menu and associates it with the trigger with the given id. The trigger must be a
+   * `Menu.Trigger` with this handle passed as a prop.
+   */
+  open(triggerId) {
+    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : void 0;
+    if (triggerId && !triggerElement) {
+      throw new Error(`Base UI: MenuHandle.open: No trigger found with id "${triggerId}".`);
+    }
+    this.store.setOpen(
+      true,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, triggerElement)
+    );
+  }
+  /** Closes the menu. */
+  close() {
+    this.store.setOpen(
+      false,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, void 0)
+    );
+  }
+  /** Indicates whether the menu is currently open. */
+  get isOpen() {
+    return this.store.select("open");
+  }
+}
+function createMenuHandle() {
+  return new MenuHandle();
+}
+const MenuRootContext = (0, import_octane.createContext)(void 0);
+function useMenuRootContext(optional) {
+  const context = (0, import_octane.useContext)(MenuRootContext);
+  if (context === void 0 && !optional) {
+    throw new Error(
+      "Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>."
+    );
+  }
+  return context;
+}
+const MenuSubmenuRootContext = (0, import_octane.createContext)(
+  void 0
+);
+function useMenuSubmenuRootContext() {
+  return (0, import_octane.useContext)(MenuSubmenuRootContext);
+}
+const MenuPortalContext = (0, import_octane.createContext)(void 0);
+function useMenuPortalContext() {
+  const value = (0, import_octane.useContext)(MenuPortalContext);
+  if (value === void 0) {
+    throw new Error("Base UI: <Menu.Portal> is missing.");
+  }
+  return value;
+}
+const MenuPositionerContext = (0, import_octane.createContext)(void 0);
+function useMenuPositionerContext(optional) {
+  const context = (0, import_octane.useContext)(MenuPositionerContext);
+  if (!context && !optional) {
+    throw new Error(
+      "Base UI: MenuPositionerContext is missing. Menu parts must be placed within <Menu.Positioner>."
+    );
+  }
+  return context;
+}
+function MenuRoot(props) {
+  const slot = (0, import_internal.S)("MenuRoot");
+  const {
+    children,
+    open: openProp,
+    onOpenChange,
+    onOpenChangeComplete,
+    defaultOpen = false,
+    disabled: disabledProp = false,
+    modal: modalProp,
+    loopFocus = true,
+    orientation = "vertical",
+    actionsRef,
+    closeParentOnEsc = false,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null,
+    highlightItemOnHover = true
+  } = props;
+  const contextMenuContext = (0, import_ContextMenuRootContext.useContextMenuRootContext)(true);
+  const parentMenuRootContext = useMenuRootContext(true);
+  const menubarContext = (0, import_MenubarContext.useMenubarContext)(true);
+  const isSubmenu = useMenuSubmenuRootContext();
+  const parentFromContext = (0, import_octane.useMemo)(
+    () => {
+      if (isSubmenu && parentMenuRootContext) {
+        return {
+          type: "menu",
+          store: parentMenuRootContext.store
+        };
+      }
+      if (menubarContext) {
+        return {
+          type: "menubar",
+          context: menubarContext
+        };
+      }
+      if (contextMenuContext && !parentMenuRootContext) {
+        return {
+          type: "context-menu",
+          context: contextMenuContext
+        };
+      }
+      return {
+        type: void 0
+      };
+    },
+    [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu],
+    (0, import_internal.subSlot)(slot, "parent")
+  );
+  const store = MenuStore.useStore(
+    handle?.store,
+    {
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
+      parent: parentFromContext
+    },
+    (0, import_internal.subSlot)(slot, "store")
+  );
+  (0, import_popups.useInitialOpenSync)(
+    store,
+    openProp,
+    defaultOpen,
+    defaultTriggerIdProp,
+    (0, import_internal.subSlot)(slot, "ios")
+  );
+  store.useControlledProp("openProp", openProp, (0, import_internal.subSlot)(slot, "cp-open"));
+  store.useControlledProp("triggerIdProp", triggerIdProp, (0, import_internal.subSlot)(slot, "cp-tid"));
+  store.useContextCallback("onOpenChangeComplete", onOpenChangeComplete, (0, import_internal.subSlot)(slot, "cc"));
+  const rootId = (0, import_octane.useId)((0, import_internal.subSlot)(slot, "rootId"));
+  const floatingId = (0, import_octane.useId)((0, import_internal.subSlot)(slot, "floatingId"));
+  const floatingTreeRoot = store.useState("floatingTreeRoot", (0, import_internal.subSlot)(slot, "ftr"));
+  const floatingNodeIdFromContext = (0, import_FloatingTree.useFloatingNodeId)(floatingTreeRoot, (0, import_internal.subSlot)(slot, "nodeId"));
+  const floatingParentNodeIdFromContext = (0, import_FloatingTree.useFloatingParentNodeId)();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const activeTriggerElement = store.useState("activeTriggerElement", (0, import_internal.subSlot)(slot, "ate"));
+  const positionerElement = store.useState("positionerElement", (0, import_internal.subSlot)(slot, "posEl"));
+  const hoverEnabled = store.useState("hoverEnabled", (0, import_internal.subSlot)(slot, "he"));
+  const disabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "disabled"));
+  const lastOpenChangeReason = store.useState("lastOpenChangeReason", (0, import_internal.subSlot)(slot, "locr"));
+  const parent = store.useState("parent", (0, import_internal.subSlot)(slot, "p"));
+  const activeIndex = store.useState("activeIndex", (0, import_internal.subSlot)(slot, "ai"));
+  const payload = store.useState("payload", (0, import_internal.subSlot)(slot, "payload"));
+  const floatingParentNodeId = store.useState("floatingParentNodeId", (0, import_internal.subSlot)(slot, "fpni"));
+  const openEventRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "oer"));
+  const allowOutsidePressDismissalRef = (0, import_octane.useRef)(
+    parent.type !== "context-menu",
+    (0, import_internal.subSlot)(slot, "aopdr")
+  );
+  const allowOutsidePressDismissalTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "aopdt"));
+  const allowTouchToCloseRef = (0, import_octane.useRef)(true, (0, import_internal.subSlot)(slot, "attcr"));
+  const allowTouchToCloseTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "attct"));
+  const nested = floatingParentNodeId != null;
+  const { openMethod, triggerProps: interactionTypeProps } = (0, import_useOpenInteractionType.useOpenInteractionType)(
+    open,
+    (0, import_internal.subSlot)(slot, "oit")
+  );
+  store.useSyncedValues(
+    {
+      disabled: disabledProp,
+      highlightItemOnHover,
+      modal: parent.type === void 0 ? modalProp : void 0,
+      openMethod,
+      rootId
+    },
+    (0, import_internal.subSlot)(slot, "sv")
+  );
+  (0, import_popups.useImplicitActiveTrigger)(store, {}, (0, import_internal.subSlot)(slot, "iat"));
+  const { forceUnmount } = (0, import_popups.useOpenStateTransitions)(
+    open,
+    store,
+    () => {
+      store.update({ allowMouseEnter: false, stickIfOpen: true });
+    },
+    (0, import_internal.subSlot)(slot, "ost")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (contextMenuContext && !parentMenuRootContext) {
+        store.update({
+          parent: {
+            type: "context-menu",
+            context: contextMenuContext
+          },
+          floatingNodeId: floatingNodeIdFromContext,
+          floatingParentNodeId: floatingParentNodeIdFromContext
+        });
+      } else if (parentMenuRootContext) {
+        store.update({
+          floatingNodeId: floatingNodeIdFromContext,
+          floatingParentNodeId: floatingParentNodeIdFromContext
+        });
+      }
+    },
+    [
+      contextMenuContext,
+      parentMenuRootContext,
+      floatingNodeIdFromContext,
+      floatingParentNodeIdFromContext,
+      store
+    ],
+    (0, import_internal.subSlot)(slot, "e:parentSync")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!open) {
+        openEventRef.current = null;
+      }
+      if (parent.type !== "context-menu") {
+        return;
+      }
+      if (!open) {
+        allowOutsidePressDismissalTimeout.clear();
+        allowOutsidePressDismissalRef.current = false;
+        return;
+      }
+      allowOutsidePressDismissalTimeout.start(500, () => {
+        allowOutsidePressDismissalRef.current = true;
+      });
+    },
+    [allowOutsidePressDismissalTimeout, open, parent.type],
+    (0, import_internal.subSlot)(slot, "e:outsidePress")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!open && !hoverEnabled) {
+        store.set("hoverEnabled", true);
+      }
+    },
+    [open, hoverEnabled, store],
+    (0, import_internal.subSlot)(slot, "e:hover")
+  );
+  const setOpen = (0, import_useStableCallback.useStableCallback)(
+    (nextOpen, eventDetails) => {
+      const reason = eventDetails.reason;
+      if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
+        return;
+      }
+      const shouldPreventUnmountOnClose = (0, import_popups.attachPreventUnmountOnClose)(eventDetails);
+      if (!nextOpen && eventDetails.trigger == null) {
+        eventDetails.trigger = activeTriggerElement ?? void 0;
+      }
+      onOpenChange?.(nextOpen, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      store.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
+      const nativeEvent = eventDetails.event;
+      if (nextOpen === false && nativeEvent?.type === "click" && nativeEvent.pointerType === "touch" && !allowTouchToCloseRef.current) {
+        return;
+      }
+      if (nextOpen && reason === import_createChangeEventDetails.REASONS.triggerFocus) {
+        allowTouchToCloseRef.current = false;
+        allowTouchToCloseTimeout.start(300, () => {
+          allowTouchToCloseRef.current = true;
+        });
+      } else {
+        allowTouchToCloseRef.current = true;
+        allowTouchToCloseTimeout.clear();
+      }
+      const isKeyboardClick = (reason === import_createChangeEventDetails.REASONS.triggerPress || reason === import_createChangeEventDetails.REASONS.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
+      const isDismissClose = !nextOpen && (reason === import_createChangeEventDetails.REASONS.escapeKey || reason == null);
+      const updatedState = {
+        open: nextOpen,
+        openChangeReason: reason
+      };
+      openEventRef.current = eventDetails.event ?? null;
+      (0, import_popups.setPopupOpenState)(
+        updatedState,
+        nextOpen,
+        eventDetails.trigger,
+        shouldPreventUnmountOnClose()
+      );
+      store.update(updatedState);
+      if (parent.type === "menubar" && (reason === import_createChangeEventDetails.REASONS.triggerFocus || reason === import_createChangeEventDetails.REASONS.focusOut || reason === import_createChangeEventDetails.REASONS.triggerHover || reason === import_createChangeEventDetails.REASONS.listNavigation || reason === import_createChangeEventDetails.REASONS.siblingOpen)) {
+        store.set("instantType", "group");
+      } else if (isKeyboardClick || isDismissClose) {
+        store.set("instantType", isKeyboardClick ? "click" : "dismiss");
+      } else {
+        store.set("instantType", void 0);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "setOpen")
+  );
+  const floatingRootContext = (0, import_useSyncedFloatingRootContext.useSyncedFloatingRootContext)(
+    {
+      popupStore: store,
+      floatingId,
+      nested: floatingParentNodeIdFromContext != null,
+      onOpenChange: setOpen
+    },
+    (0, import_internal.subSlot)(slot, "sfrc")
+  );
+  const floatingEvents = floatingRootContext.context.events;
+  (0, import_octane.useEffect)(
+    () => {
+      const handleSetOpenEvent = ({
+        open: nextOpen,
+        eventDetails
+      }) => setOpen(nextOpen, eventDetails);
+      floatingEvents.on("setOpen", handleSetOpenEvent);
+      return () => {
+        floatingEvents?.off("setOpen", handleSetOpenEvent);
+      };
+    },
+    [floatingEvents, setOpen],
+    (0, import_internal.subSlot)(slot, "e:setOpen")
+  );
+  const handleImperativeClose = (0, import_octane.useCallback)(
+    () => {
+      store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction));
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "close")
+  );
+  (0, import_octane.useImperativeHandle)(
+    actionsRef,
+    () => ({ unmount: forceUnmount, close: handleImperativeClose }),
+    [forceUnmount, handleImperativeClose],
+    (0, import_internal.subSlot)(slot, "imp")
+  );
+  let ctx;
+  if (parent.type === "context-menu") {
+    ctx = parent.context;
+  }
+  (0, import_octane.useImperativeHandle)(
+    ctx?.positionerRef,
+    () => positionerElement,
+    [positionerElement],
+    (0, import_internal.subSlot)(slot, "imp-pos")
+  );
+  (0, import_octane.useImperativeHandle)(ctx?.actionsRef, () => ({ setOpen }), [setOpen], (0, import_internal.subSlot)(slot, "imp-act"));
+  const dismiss = (0, import_useDismiss.useDismiss)(
+    floatingRootContext,
+    {
+      enabled: !disabled,
+      bubbles: { escapeKey: closeParentOnEsc && parent.type === "menu" },
+      outsidePress() {
+        if (parent.type !== "context-menu" || openEventRef.current?.type === "contextmenu") {
+          return true;
+        }
+        return allowOutsidePressDismissalRef.current;
+      },
+      externalTree: nested ? floatingTreeRoot : void 0
+    },
+    (0, import_internal.subSlot)(slot, "dismiss")
+  );
+  const direction = (0, import_DirectionContext.useDirection)();
+  const setActiveIndex = (0, import_octane.useCallback)(
+    (index) => {
+      if (store.select("activeIndex") === index) {
+        return;
+      }
+      store.set("activeIndex", index);
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "sai")
+  );
+  const listNavigation = (0, import_useListNavigation.useListNavigation)(
+    floatingRootContext,
+    {
+      enabled: !disabled,
+      listRef: store.context.itemDomElements,
+      activeIndex,
+      nested: parent.type !== void 0,
+      loopFocus,
+      orientation,
+      parentOrientation: parent.type === "menubar" ? parent.context.orientation : void 0,
+      rtl: direction === "rtl",
+      disabledIndices: import_empty.EMPTY_ARRAY,
+      onNavigate: setActiveIndex,
+      openOnArrowKeyDown: parent.type !== "context-menu",
+      externalTree: nested ? floatingTreeRoot : void 0,
+      focusItemOnHover: highlightItemOnHover
+    },
+    (0, import_internal.subSlot)(slot, "listNav")
+  );
+  const onTyping = (0, import_octane.useCallback)(
+    (nextTyping) => {
+      store.context.typingRef.current = nextTyping;
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "onTyping")
+  );
+  const typeahead = (0, import_useTypeahead.useTypeahead)(
+    floatingRootContext,
+    {
+      enabled: !disabled,
+      listRef: store.context.itemLabels,
+      elementsRef: store.context.itemDomElements,
+      activeIndex,
+      resetMs: import_constants.TYPEAHEAD_RESET_MS,
+      onMatch: (index) => {
+        if (open && index !== activeIndex) {
+          store.set("activeIndex", index);
+        }
+      },
+      onTyping
+    },
+    (0, import_internal.subSlot)(slot, "typeahead")
+  );
+  const activeTriggerProps = (0, import_octane.useMemo)(
+    () => {
+      const mergedProps = (0, import_mergeProps.mergeProps)(
+        typeahead.reference,
+        listNavigation.reference,
+        dismiss.reference,
+        {
+          onMouseMove() {
+            store.set("allowMouseEnter", true);
+          }
+        },
+        interactionTypeProps
+      );
+      mergedProps["aria-haspopup"] = "menu";
+      mergedProps["aria-expanded"] = open;
+      return mergedProps;
+    },
+    [
+      store,
+      typeahead.reference,
+      listNavigation.reference,
+      dismiss.reference,
+      interactionTypeProps,
+      open
+    ],
+    (0, import_internal.subSlot)(slot, "atp")
+  );
+  const inactiveTriggerProps = (0, import_octane.useMemo)(
+    () => {
+      const mergedProps = (0, import_mergeProps.mergeProps)(listNavigation.trigger, dismiss.trigger, interactionTypeProps);
+      mergedProps["aria-haspopup"] = "menu";
+      mergedProps["aria-expanded"] = false;
+      return mergedProps;
+    },
+    [listNavigation.trigger, dismiss.trigger, interactionTypeProps],
+    (0, import_internal.subSlot)(slot, "itp")
+  );
+  const popupProps = (0, import_octane.useMemo)(
+    () => (0, import_mergeProps.mergeProps)(
+      import_popups.FOCUSABLE_POPUP_PROPS,
+      {
+        id: floatingId,
+        role: "menu",
+        "aria-labelledby": activeTriggerElement?.id,
+        onMouseMove() {
+          store.set("allowMouseEnter", true);
+          if (parent.type === "menu") {
+            store.set("hoverEnabled", false);
+          }
+        },
+        onClick() {
+          if (store.select("hoverEnabled")) {
+            store.set("hoverEnabled", false);
+          }
+        },
+        onKeyDown(event) {
+          const relay = store.select("keyboardEventRelay");
+          if (relay && !event.cancelBubble) {
+            relay(event);
+          }
+        }
+      },
+      typeahead.floating,
+      listNavigation.floating,
+      dismiss.floating
+    ),
+    [
+      activeTriggerElement,
+      floatingId,
+      parent.type,
+      store,
+      typeahead.floating,
+      listNavigation.floating,
+      dismiss.floating
+    ],
+    (0, import_internal.subSlot)(slot, "pp")
+  );
+  const itemProps = listNavigation.item ?? import_empty.EMPTY_OBJECT;
+  (0, import_popups.usePopupInteractionProps)(
+    store,
+    {
+      floatingRootContext,
+      activeTriggerProps,
+      inactiveTriggerProps,
+      popupProps,
+      itemProps
+    },
+    (0, import_internal.subSlot)(slot, "pip")
+  );
+  const context = (0, import_octane.useMemo)(
+    () => ({
+      store,
+      parent: parentFromContext
+    }),
+    [store, parentFromContext],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const resolvedChildren = typeof children === "function" && !(0, import_octane.isChildrenBlock)(children) ? children({ payload }) : children;
+  const content = (0, import_octane.createElement)(MenuRootContext.Provider, {
+    value: context,
+    children: resolvedChildren
+  });
+  if (parent.type === void 0 || parent.type === "context-menu") {
+    return (0, import_octane.createElement)(import_FloatingTree.FloatingTree, { externalTree: floatingTreeRoot, children: content });
+  }
+  return content;
+}
+function useMenuParent(slot) {
+  const contextMenuContext = (0, import_ContextMenuRootContext.useContextMenuRootContext)(true);
+  const parentContext = useMenuRootContext(true);
+  const menubarContext = (0, import_MenubarContext.useMenubarContext)(true);
+  return (0, import_octane.useMemo)(
+    () => {
+      if (menubarContext) {
+        return {
+          type: "menubar",
+          context: menubarContext
+        };
+      }
+      if (contextMenuContext && !parentContext) {
+        return {
+          type: "context-menu",
+          context: contextMenuContext
+        };
+      }
+      return {
+        type: void 0
+      };
+    },
+    [contextMenuContext, parentContext, menubarContext],
+    (0, import_internal.subSlot)(slot, "parent")
+  );
+}
+function useStickIfOpen(open, openReason, slot) {
+  const stickIfOpenTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "to"));
+  const [stickIfOpen, setStickIfOpen] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "s"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (open && openReason === import_createChangeEventDetails.REASONS.triggerHover) {
+        setStickIfOpen(true);
+        stickIfOpenTimeout.start(import_constants.PATIENT_CLICK_THRESHOLD, () => {
+          setStickIfOpen(false);
+        });
+      } else if (!open) {
+        stickIfOpenTimeout.clear();
+        setStickIfOpen(false);
+      }
+    },
+    [open, openReason, stickIfOpenTimeout],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+  return stickIfOpen;
+}
+function MenuTrigger(componentProps) {
+  const slot = (0, import_internal.S)("MenuTrigger");
+  const {
+    render,
+    className,
+    style,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    id: idProp,
+    openOnHover: openOnHoverProp,
+    delay = 100,
+    closeDelay = 0,
+    handle,
+    payload,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const rootContext = useMenuRootContext(true);
+  const store = handle?.store ?? rootContext?.store;
+  if (!store) {
+    throw new Error(
+      "Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle."
+    );
+  }
+  const thisTriggerId = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const isTriggerActive = store.useState("isTriggerActive", (0, import_internal.subSlot)(slot, "ita"), thisTriggerId);
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const isOpenedByThisTrigger = store.useState(
+    "isOpenedByTrigger",
+    (0, import_internal.subSlot)(slot, "obt"),
+    thisTriggerId
+  );
+  const popupId = store.useState("triggerPopupId", (0, import_internal.subSlot)(slot, "tpid"), thisTriggerId);
+  const triggerElementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ter"));
+  const parent = useMenuParent((0, import_internal.subSlot)(slot, "mp"));
+  const compositeRootContext = (0, import_CompositeRootContext.useCompositeRootContext)(true);
+  const floatingTreeRootFromContext = (0, import_FloatingTree.useFloatingTree)();
+  const floatingTreeRoot = (0, import_octane.useMemo)(
+    () => floatingTreeRootFromContext ?? new import_FloatingTree.FloatingTreeStore(),
+    [floatingTreeRootFromContext],
+    (0, import_internal.subSlot)(slot, "ftr")
+  );
+  const floatingNodeId = (0, import_FloatingTree.useFloatingNodeId)(floatingTreeRoot, (0, import_internal.subSlot)(slot, "nodeId"));
+  const floatingParentNodeId = (0, import_FloatingTree.useFloatingParentNodeId)();
+  const { registerTrigger, isMountedByThisTrigger } = (0, import_popups.useTriggerDataForwarding)(
+    thisTriggerId,
+    triggerElementRef,
+    store,
+    {
+      payload,
+      closeDelay,
+      parent,
+      floatingTreeRoot,
+      floatingNodeId,
+      floatingParentNodeId,
+      keyboardEventRelay: compositeRootContext?.relayKeyboardEvent
+    },
+    (0, import_internal.subSlot)(slot, "tdf")
+  );
+  const isInMenubar = parent.type === "menubar";
+  const rootDisabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "rd"));
+  const disabled = disabledProp || rootDisabled || isInMenubar && parent.context.disabled;
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!isOpenedByThisTrigger && parent.type === void 0) {
+        store.context.allowMouseUpTriggerRef.current = false;
+      }
+    },
+    [store, isOpenedByThisTrigger, parent.type],
+    (0, import_internal.subSlot)(slot, "e:allowMouseUp")
+  );
+  const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "tr"));
+  const allowMouseUpTriggerTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "amutt"));
+  const handleDocumentMouseUp = (0, import_useStableCallback.useStableCallback)(
+    (mouseEvent) => {
+      if (!triggerRef.current) {
+        return;
+      }
+      allowMouseUpTriggerTimeout.clear();
+      store.context.allowMouseUpTriggerRef.current = false;
+      const mouseUpTarget = mouseEvent.target;
+      if ((0, import_contains.contains)(triggerRef.current, mouseUpTarget) || (0, import_contains.contains)(store.select("positionerElement"), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+        return;
+      }
+      if (mouseUpTarget != null && (0, import_findRootOwnerId.findRootOwnerId)(mouseUpTarget) === store.select("rootId")) {
+        return;
+      }
+      const bounds = (0, import_getPseudoElementBounds.getPseudoElementBounds)(triggerRef.current);
+      if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+        return;
+      }
+      floatingTreeRoot.events.emit("close", {
+        domEvent: mouseEvent,
+        reason: import_createChangeEventDetails.REASONS.cancelOpen
+      });
+    },
+    (0, import_internal.subSlot)(slot, "hdmu")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (isOpenedByThisTrigger && store.select("lastOpenChangeReason") === import_createChangeEventDetails.REASONS.triggerHover) {
+        const doc = (0, import_owner.ownerDocument)(triggerRef.current);
+        doc.addEventListener("mouseup", handleDocumentMouseUp, { once: true });
+      }
+    },
+    [isOpenedByThisTrigger, handleDocumentMouseUp, store],
+    (0, import_internal.subSlot)(slot, "e:mouseup")
+  );
+  const parentMenubarHasSubmenuOpen = isInMenubar && parent.context.hasSubmenuOpen;
+  const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen;
+  const hoverProps = (0, import_useHoverReferenceInteraction.useHoverReferenceInteraction)(
+    floatingRootContext,
+    {
+      enabled: openOnHover && !disabled && parent.type !== "context-menu" && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+      handleClose: (0, import_useHoverReferenceInteraction.safePolygon)({ blockPointerEvents: !isInMenubar }),
+      mouseOnly: true,
+      move: false,
+      restMs: parent.type === void 0 ? delay : void 0,
+      delay: { close: closeDelay },
+      triggerElementRef,
+      externalTree: floatingTreeRoot,
+      isActiveTrigger: isTriggerActive,
+      isClosing: () => store.select("transitionStatus") === "ending"
+    },
+    (0, import_internal.subSlot)(slot, "hover")
+  );
+  const stickIfOpen = useStickIfOpen(
+    isOpenedByThisTrigger,
+    store.select("lastOpenChangeReason"),
+    (0, import_internal.subSlot)(slot, "sio")
+  );
+  const click = (0, import_useClick.useClick)(
+    floatingRootContext,
+    {
+      enabled: !disabled && parent.type !== "context-menu",
+      event: isOpenedByThisTrigger && isInMenubar ? "click" : "mousedown",
+      toggle: true,
+      ignoreMouse: false,
+      stickIfOpen: parent.type === void 0 ? stickIfOpen : false
+    },
+    (0, import_internal.subSlot)(slot, "click")
+  );
+  const focus = (0, import_useFocus.useFocus)(
+    floatingRootContext,
+    { enabled: !disabled && parentMenubarHasSubmenuOpen },
+    (0, import_internal.subSlot)(slot, "focus")
+  );
+  const mixedToggleHandlers = (0, import_useMixedToggleClickHandler.useMixedToggleClickHandler)(
+    {
+      open: isOpenedByThisTrigger,
+      enabled: isInMenubar,
+      mouseDownAction: "open"
+    },
+    (0, import_internal.subSlot)(slot, "mixed")
+  );
+  const localInteractionProps = (0, import_octane.useMemo)(
+    () => (0, import_mergeProps.mergeProps)(focus.reference, click.reference),
+    [focus.reference, click.reference],
+    (0, import_internal.subSlot)(slot, "lip")
+  );
+  const rootTriggerProps = store.useState(
+    "triggerProps",
+    (0, import_internal.subSlot)(slot, "tp"),
+    isMountedByThisTrigger
+  );
+  const { preFocusGuardRef, handlePreFocusGuardFocus, handleFocusTargetFocus } = (0, import_useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef, (0, import_internal.subSlot)(slot, "tfg"));
+  const state = {
+    disabled,
+    open: isOpenedByThisTrigger
+  };
+  const refs = [triggerRef, forwardedRef, buttonRef, registerTrigger, triggerElementRef];
+  const props = [
+    localInteractionProps,
+    hoverProps ?? import_empty.EMPTY_OBJECT,
+    rootTriggerProps,
+    {
+      "aria-haspopup": "menu",
+      "aria-controls": popupId,
+      id: thisTriggerId,
+      onMouseDown: (event) => {
+        if (store.select("open")) {
+          return;
+        }
+        allowMouseUpTriggerTimeout.start(200, () => {
+          store.context.allowMouseUpTriggerRef.current = true;
+        });
+        const doc = (0, import_owner.ownerDocument)(event.currentTarget);
+        doc.addEventListener("mouseup", handleDocumentMouseUp, { once: true });
+      }
+    },
+    isInMenubar ? { role: "menuitem" } : {},
+    mixedToggleHandlers,
+    elementProps,
+    getButtonProps
+  ];
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "button",
+    componentProps,
+    {
+      enabled: !isInMenubar,
+      stateAttributesMapping: import_popupStateMapping.pressableTriggerOpenStateMapping,
+      state,
+      ref: refs,
+      props
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (isInMenubar) {
+    return (0, import_octane.createElement)(import_CompositeItem.CompositeItem, {
+      tag: "button",
+      render,
+      className,
+      style,
+      state,
+      refs,
+      props,
+      stateAttributesMapping: import_popupStateMapping.pressableTriggerOpenStateMapping
+    });
+  }
+  const keyedElement = (0, import_octane.createElement)(import_octane.Fragment, { key: thisTriggerId, children: element });
+  if (isOpenedByThisTrigger) {
+    return [
+      (0, import_octane.createElement)(import_FocusGuard.FocusGuard, {
+        key: `${thisTriggerId}-pre-focus-guard`,
+        ref: preFocusGuardRef,
+        onFocus: handlePreFocusGuardFocus
+      }),
+      keyedElement,
+      (0, import_octane.createElement)(import_FocusGuard.FocusGuard, {
+        key: `${thisTriggerId}-post-focus-guard`,
+        ref: store.context.triggerFocusTargetRef,
+        onFocus: handleFocusTargetFocus
+      })
+    ];
+  }
+  return keyedElement;
+}
+function MenuPortal(props) {
+  const slot = (0, import_internal.S)("MenuPortal");
+  const { keepMounted = false, ref, ...portalProps } = props;
+  const { store } = useMenuRootContext();
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return (0, import_octane.createElement)(MenuPortalContext.Provider, {
+    value: keepMounted,
+    children: (0, import_octane.createElement)(import_FloatingPortal.FloatingPortal, { ref, ...portalProps })
+  });
+}
+function MenuPositioner(componentProps) {
+  const slot = (0, import_internal.S)("MenuPositioner");
+  const {
+    anchor: anchorProp,
+    positionMethod: positionMethodProp = "absolute",
+    className,
+    render,
+    side,
+    align: alignProp,
+    sideOffset: sideOffsetProp = 0,
+    alignOffset: alignOffsetProp = 0,
+    collisionBoundary = "clipping-ancestors",
+    collisionPadding = 5,
+    arrowPadding = 5,
+    sticky = false,
+    disableAnchorTracking = false,
+    collisionAvoidance: collisionAvoidanceProp = import_constants.DROPDOWN_COLLISION_AVOIDANCE,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const { store } = useMenuRootContext();
+  const keepMounted = useMenuPortalContext();
+  const contextMenuContext = (0, import_ContextMenuRootContext.useContextMenuRootContext)(true);
+  const parent = store.useState("parent", (0, import_internal.subSlot)(slot, "parent"));
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const floatingTreeRoot = store.useState("floatingTreeRoot", (0, import_internal.subSlot)(slot, "ftr"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const modal = store.useState("modal", (0, import_internal.subSlot)(slot, "modal"));
+  const openMethod = store.useState("openMethod", (0, import_internal.subSlot)(slot, "method"));
+  const triggerElement = store.useState("activeTriggerElement", (0, import_internal.subSlot)(slot, "trigger"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const positionerElement = store.useState("positionerElement", (0, import_internal.subSlot)(slot, "posEl"));
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const hasViewport = store.useState("hasViewport", (0, import_internal.subSlot)(slot, "viewport"));
+  const lastOpenChangeReason = store.useState("lastOpenChangeReason", (0, import_internal.subSlot)(slot, "locr"));
+  const floatingNodeId = store.useState("floatingNodeId", (0, import_internal.subSlot)(slot, "nodeId"));
+  const floatingParentNodeId = store.useState("floatingParentNodeId", (0, import_internal.subSlot)(slot, "parentId"));
+  const domReference = floatingRootContext.useState("domReferenceElement", (0, import_internal.subSlot)(slot, "domRef"));
+  const previousTriggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "prevTrigger"));
+  const runOnceAnimationsFinish = (0, import_useAnimationsFinished.useAnimationsFinished)(
+    positionerElement,
+    false,
+    false,
+    (0, import_internal.subSlot)(slot, "anim")
+  );
+  let anchor = anchorProp;
+  let sideOffset = sideOffsetProp;
+  let alignOffset = alignOffsetProp;
+  let align = alignProp;
+  let collisionAvoidance = collisionAvoidanceProp;
+  if (parent.type === "context-menu") {
+    anchor = anchorProp ?? parent.context?.anchor;
+    align = align ?? "start";
+    if (!side && align !== "center") {
+      alignOffset = componentProps.alignOffset ?? 2;
+      sideOffset = componentProps.sideOffset ?? -5;
+    }
+  }
+  let computedSide = side;
+  let computedAlign = align;
+  if (parent.type === "menu") {
+    computedSide = computedSide ?? "inline-end";
+    computedAlign = computedAlign ?? "start";
+    collisionAvoidance = componentProps.collisionAvoidance ?? import_constants.POPUP_COLLISION_AVOIDANCE;
+  } else if (parent.type === "menubar") {
+    computedSide = computedSide ?? (parent.context.orientation === "vertical" ? "inline-end" : "bottom");
+    computedAlign = computedAlign ?? "start";
+  }
+  const contextMenu = parent.type === "context-menu";
+  const positioner = (0, import_useAnchorPositioning.useAnchorPositioning)(
+    {
+      anchor,
+      floatingRootContext,
+      positionMethod: contextMenuContext ? "fixed" : positionMethodProp,
+      mounted,
+      side: computedSide,
+      sideOffset,
+      align: computedAlign,
+      alignOffset,
+      arrowPadding: contextMenu ? 0 : arrowPadding,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      nodeId: floatingNodeId,
+      keepMounted,
+      disableAnchorTracking,
+      collisionAvoidance,
+      shiftCrossAxis: contextMenu && !("side" in collisionAvoidance && collisionAvoidance.side === "flip"),
+      externalTree: floatingTreeRoot,
+      adaptiveOrigin: hasViewport ? import_adaptiveOriginMiddleware.adaptiveOrigin : void 0
+    },
+    (0, import_internal.subSlot)(slot, "positioning")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      function onMenuOpenChange(details) {
+        if (details.open) {
+          if (details.parentNodeId === floatingNodeId) {
+            store.set("hoverEnabled", false);
+          }
+          if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select("floatingParentNodeId")) {
+            store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.siblingOpen));
+          }
+        }
+      }
+      floatingTreeRoot.events.on("menuopenchange", onMenuOpenChange);
+      return () => {
+        floatingTreeRoot.events.off("menuopenchange", onMenuOpenChange);
+      };
+    },
+    [store, floatingTreeRoot.events, floatingNodeId],
+    (0, import_internal.subSlot)(slot, "e:openChange")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (store.select("floatingParentNodeId") == null) {
+        return void 0;
+      }
+      function onParentClose(details) {
+        if (details.open || details.nodeId !== store.select("floatingParentNodeId")) {
+          return;
+        }
+        const reason = details.reason ?? import_createChangeEventDetails.REASONS.siblingOpen;
+        store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(reason));
+      }
+      floatingTreeRoot.events.on("menuopenchange", onParentClose);
+      return () => {
+        floatingTreeRoot.events.off("menuopenchange", onParentClose);
+      };
+    },
+    [floatingTreeRoot.events, store],
+    (0, import_internal.subSlot)(slot, "e:parentClose")
+  );
+  const closeTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "closeTimeout"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!open) {
+        closeTimeout.clear();
+      }
+    },
+    [open, closeTimeout],
+    (0, import_internal.subSlot)(slot, "e:clearClose")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      function onItemHover(event) {
+        if (!open || event.nodeId !== store.select("floatingParentNodeId")) {
+          return;
+        }
+        if (event.target && triggerElement && triggerElement !== event.target) {
+          const delay = store.select("closeDelay");
+          if (delay > 0) {
+            if (!closeTimeout.isStarted()) {
+              closeTimeout.start(delay, () => {
+                store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.siblingOpen));
+              });
+            }
+          } else {
+            store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.siblingOpen));
+          }
+        } else {
+          closeTimeout.clear();
+        }
+      }
+      floatingTreeRoot.events.on("itemhover", onItemHover);
+      return () => {
+        floatingTreeRoot.events.off("itemhover", onItemHover);
+      };
+    },
+    [floatingTreeRoot.events, open, triggerElement, store, closeTimeout],
+    (0, import_internal.subSlot)(slot, "e:itemHover")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const eventDetails = {
+        open,
+        nodeId: floatingNodeId,
+        parentNodeId: floatingParentNodeId,
+        reason: store.select("lastOpenChangeReason")
+      };
+      floatingTreeRoot.events.emit("menuopenchange", eventDetails);
+    },
+    [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId],
+    (0, import_internal.subSlot)(slot, "e:emit")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const currentTrigger = domReference;
+      const previousTrigger = previousTriggerRef.current;
+      if (currentTrigger) {
+        previousTriggerRef.current = currentTrigger;
+      }
+      if (previousTrigger && currentTrigger && currentTrigger !== previousTrigger) {
+        store.set("instantType", void 0);
+        const abortController = new AbortController();
+        runOnceAnimationsFinish(() => {
+          store.set("instantType", "trigger-change");
+        }, abortController.signal);
+        return () => {
+          abortController.abort();
+        };
+      }
+      return void 0;
+    },
+    [domReference, runOnceAnimationsFinish, store],
+    (0, import_internal.subSlot)(slot, "e:triggerChange")
+  );
+  const state = {
+    open,
+    side: positioner.side,
+    align: positioner.align,
+    anchorHidden: positioner.anchorHidden,
+    nested: parent.type === "menu",
+    instant: instantType
+  };
+  const menubarModal = parent.type === "menubar" && parent.context.modal;
+  const popupModal = modal && lastOpenChangeReason !== import_createChangeEventDetails.REASONS.triggerHover;
+  (0, import_useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(
+    open && (menubarModal || popupModal),
+    openMethod === "touch",
+    positionerElement,
+    triggerElement
+  );
+  const setPositionerElement = store.useStateSetter("positionerElement", (0, import_internal.subSlot)(slot, "setPosEl"));
+  const element = (0, import_usePositioner.usePositioner)(
+    componentProps,
+    state,
+    {
+      styles: positioner.positionerStyles,
+      transitionStatus,
+      props: elementProps,
+      refs: [forwardedRef, setPositionerElement],
+      hidden: !mounted,
+      inert: !open
+    },
+    (0, import_internal.subSlot)(slot, "positioner")
+  );
+  const shouldRenderBackdrop = mounted && parent.type !== "menu" && (parent.type !== "menubar" && modal && lastOpenChangeReason !== import_createChangeEventDetails.REASONS.triggerHover || parent.type === "menubar" && parent.context.modal);
+  let backdropCutout = null;
+  if (parent.type === "menubar") {
+    backdropCutout = parent.context.contentElement;
+  } else if (parent.type === void 0) {
+    backdropCutout = triggerElement;
+  }
+  return (0, import_octane.createElement)(MenuPositionerContext.Provider, {
+    value: positioner,
+    children: [
+      shouldRenderBackdrop ? (0, import_octane.createElement)(import_InternalBackdrop.InternalBackdrop, {
+        key: "backdrop",
+        ref: parent.type === "context-menu" || parent.type === "nested-context-menu" ? parent.context.internalBackdropRef : null,
+        inert: (0, import_inertValue.inertValue)(!open),
+        cutout: backdropCutout
+      }) : null,
+      (0, import_octane.createElement)(import_FloatingTree.FloatingNode, {
+        key: "node",
+        id: floatingNodeId,
+        children: (0, import_octane.createElement)(import_CompositeList.CompositeList, {
+          elementsRef: store.context.itemDomElements,
+          labelsRef: store.context.itemLabels,
+          children: element
+        })
+      })
+    ]
+  });
+}
+const menuPopupStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus2.transitionStatusMapping
+};
+function MenuPopup(componentProps) {
+  const slot = (0, import_internal.S)("MenuPopup");
+  const {
+    render,
+    className,
+    style,
+    finalFocus,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const { store } = useMenuRootContext();
+  const { side, align } = useMenuPositionerContext();
+  const insideToolbar = false;
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const popupProps = store.useState("popupProps", (0, import_internal.subSlot)(slot, "popupProps"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const triggerElement = store.useState("activeTriggerElement", (0, import_internal.subSlot)(slot, "trigger"));
+  const parent = store.useState("parent", (0, import_internal.subSlot)(slot, "parent"));
+  const lastOpenChangeReason = store.useState("lastOpenChangeReason", (0, import_internal.subSlot)(slot, "locr"));
+  const rootId = store.useState("rootId", (0, import_internal.subSlot)(slot, "rootId"));
+  const floatingContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const floatingTreeRoot = store.useState("floatingTreeRoot", (0, import_internal.subSlot)(slot, "ftr"));
+  const closeDelay = store.useState("closeDelay", (0, import_internal.subSlot)(slot, "closeDelay"));
+  const hoverEnabled = store.useState("hoverEnabled", (0, import_internal.subSlot)(slot, "hover"));
+  const disabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "disabled"));
+  const openMethod = store.useState("openMethod", (0, import_internal.subSlot)(slot, "method"));
+  const isContextMenu = parent.type === "context-menu";
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open,
+      ref: store.context.popupRef,
+      onComplete() {
+        if (open) {
+          store.context.onOpenChangeComplete?.(true);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      function handleClose(event) {
+        store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(event.reason, event.domEvent));
+      }
+      floatingTreeRoot.events.on("close", handleClose);
+      return () => {
+        floatingTreeRoot.events.off("close", handleClose);
+      };
+    },
+    [floatingTreeRoot.events, store],
+    (0, import_internal.subSlot)(slot, "e:close")
+  );
+  (0, import_useHoverFloatingInteraction.useHoverFloatingInteraction)(
+    floatingContext,
+    {
+      enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== "menubar",
+      closeDelay
+    },
+    (0, import_internal.subSlot)(slot, "hoverInteraction")
+  );
+  const setPopupElement = store.useStateSetter("popupElement", (0, import_internal.subSlot)(slot, "setPopupEl"));
+  const state = {
+    transitionStatus,
+    side,
+    align,
+    open,
+    nested: parent.type === "menu",
+    instant: instantType
+  };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: [forwardedRef, store.context.popupRef, setPopupElement],
+      stateAttributesMapping: menuPopupStateAttributesMapping,
+      props: [
+        popupProps,
+        {
+          onKeyDown(event) {
+            if (insideToolbar && import_keys.COMPOSITE_KEYS.has(event.key)) {
+              event.stopPropagation();
+            }
+          }
+        },
+        (0, import_getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus),
+        elementProps,
+        { "data-rootownerid": rootId }
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  let returnFocus = parent.type === void 0 || isContextMenu;
+  if (triggerElement || parent.type === "menubar" && lastOpenChangeReason !== import_createChangeEventDetails.REASONS.outsidePress) {
+    returnFocus = true;
+  }
+  return (0, import_octane.createElement)(import_FloatingFocusManager.FloatingFocusManager, {
+    context: floatingContext,
+    openInteractionType: openMethod,
+    modal: isContextMenu,
+    disabled: !mounted,
+    returnFocus: finalFocus === void 0 ? returnFocus : finalFocus,
+    initialFocus: parent.type !== "menu",
+    restoreFocus: true,
+    externalTree: parent.type !== "menubar" ? floatingTreeRoot : void 0,
+    previousFocusableElement: triggerElement,
+    nextFocusableElement: parent.type === void 0 ? store.context.triggerFocusTargetRef : void 0,
+    beforeContentFocusGuardRef: parent.type === void 0 ? store.context.beforeContentFocusGuardRef : void 0,
+    children: element
+  });
+}
+const itemMapping = {
+  checked(value) {
+    if (value) {
+      return { "data-checked": "" };
+    }
+    return { "data-unchecked": "" };
+  },
+  ...import_useTransitionStatus2.transitionStatusMapping
+};
+const REGULAR_ITEM = {
+  type: "regular-item"
+};
+function useMenuItemCommonProps(params, slot) {
+  const { closeOnClick, highlighted, id, nodeId, store, typingRef, itemRef, itemMetadata } = params;
+  const { events: menuEvents } = store.useState("floatingTreeRoot", (0, import_internal.subSlot)(slot, "ftr"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const contextMenuContext = (0, import_ContextMenuRootContext.useContextMenuRootContext)(true);
+  const isContextMenu = contextMenuContext !== void 0;
+  return (0, import_octane.useMemo)(
+    () => ({
+      id,
+      role: "menuitem",
+      tabIndex: open && highlighted ? 0 : -1,
+      onKeyDown(event) {
+        if (event.key === " " && typingRef?.current) {
+          event.preventDefault();
+        }
+      },
+      onMouseMove(event) {
+        if (!nodeId) {
+          return;
+        }
+        menuEvents.emit("itemhover", {
+          nodeId,
+          target: event.currentTarget
+        });
+      },
+      onClick(event) {
+        if (closeOnClick) {
+          menuEvents.emit("close", { domEvent: event, reason: import_createChangeEventDetails.REASONS.itemPress });
+        }
+      },
+      onMouseUp(event) {
+        if (contextMenuContext) {
+          const initialCursorPoint = contextMenuContext.initialCursorPointRef.current;
+          contextMenuContext.initialCursorPointRef.current = null;
+          if (isContextMenu && initialCursorPoint && Math.abs(event.clientX - initialCursorPoint.x) <= 1 && Math.abs(event.clientY - initialCursorPoint.y) <= 1) {
+            return;
+          }
+          if (isContextMenu && !import_platform.platform.os.mac && event.button === 2) {
+            return;
+          }
+        }
+        if (itemRef.current && store.context.allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
+          if (!itemMetadata || itemMetadata.type === "regular-item") {
+            itemRef.current.click();
+          }
+        }
+      }
+    }),
+    [
+      closeOnClick,
+      highlighted,
+      id,
+      menuEvents,
+      nodeId,
+      open,
+      store,
+      typingRef,
+      itemRef,
+      contextMenuContext,
+      isContextMenu,
+      itemMetadata
+    ],
+    (0, import_internal.subSlot)(slot, "m")
+  );
+}
+function useMenuItem(params, slot) {
+  const {
+    closeOnClick,
+    disabled: disabledProp = false,
+    highlighted,
+    id,
+    store,
+    typingRef = store.context.typingRef,
+    nativeButton,
+    itemMetadata,
+    nodeId
+  } = params;
+  const rootDisabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "rd"));
+  const disabled = disabledProp || rootDisabled;
+  const itemRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    {
+      disabled,
+      focusableWhenDisabled: true,
+      native: nativeButton,
+      composite: true
+    },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const commonProps = useMenuItemCommonProps(
+    {
+      closeOnClick,
+      highlighted,
+      id,
+      nodeId,
+      store,
+      typingRef,
+      itemRef,
+      itemMetadata
+    },
+    (0, import_internal.subSlot)(slot, "common")
+  );
+  const getItemProps = (0, import_octane.useCallback)(
+    (externalProps) => {
+      return (0, import_mergeProps.mergeProps)(
+        commonProps,
+        {
+          onMouseEnter() {
+            if (itemMetadata.type !== "submenu-trigger") {
+              return;
+            }
+            itemMetadata.setActive();
+          }
+        },
+        externalProps,
+        getButtonProps
+      );
+    },
+    [commonProps, getButtonProps, itemMetadata],
+    (0, import_internal.subSlot)(slot, "gip")
+  );
+  const mergedRef = (0, import_composeRefs.useComposedRefs)(itemRef, buttonRef, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.useMemo)(
+    () => ({
+      getItemProps,
+      itemRef: mergedRef
+    }),
+    [getItemProps, mergedRef],
+    (0, import_internal.subSlot)(slot, "ret")
+  );
+}
+function MenuItem(componentProps) {
+  const slot = (0, import_internal.S)("MenuItem");
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    nativeButton = false,
+    disabled = false,
+    closeOnClick = true,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const listItem = (0, import_useCompositeListItem.useCompositeListItem)({ label }, (0, import_internal.subSlot)(slot, "li"));
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const { store } = useMenuRootContext();
+  const highlighted = store.useState("isActive", (0, import_internal.subSlot)(slot, "hl"), listItem.index);
+  const itemProps = store.useState("itemProps", (0, import_internal.subSlot)(slot, "ip"));
+  const { getItemProps, itemRef } = useMenuItem(
+    {
+      closeOnClick,
+      disabled,
+      highlighted,
+      id,
+      store,
+      nativeButton,
+      nodeId: menuPositionerContext?.context.nodeId,
+      itemMetadata: REGULAR_ITEM
+    },
+    (0, import_internal.subSlot)(slot, "item")
+  );
+  const state = {
+    disabled,
+    highlighted
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      props: [itemProps, elementProps, getItemProps],
+      ref: [itemRef, forwardedRef, listItem.ref]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function MenuLinkItem(componentProps) {
+  const slot = (0, import_internal.S)("MenuLinkItem");
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    closeOnClick = false,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const linkRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "link"));
+  const listItem = (0, import_useCompositeListItem.useCompositeListItem)({ label }, (0, import_internal.subSlot)(slot, "li"));
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const nodeId = menuPositionerContext?.context.nodeId;
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const { store } = useMenuRootContext();
+  const highlighted = store.useState("isActive", (0, import_internal.subSlot)(slot, "hl"), listItem.index);
+  const itemProps = store.useState("itemProps", (0, import_internal.subSlot)(slot, "ip"));
+  const typingRef = store.context.typingRef;
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { native: false, composite: true },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const commonProps = useMenuItemCommonProps(
+    {
+      closeOnClick,
+      highlighted,
+      id,
+      nodeId,
+      store,
+      typingRef,
+      itemRef: linkRef
+    },
+    (0, import_internal.subSlot)(slot, "common")
+  );
+  function getItemProps(externalProps) {
+    return (0, import_mergeProps.mergeProps)(commonProps, externalProps, getButtonProps);
+  }
+  const state = { highlighted };
+  return (0, import_useRenderElement.useRenderElement)(
+    "a",
+    componentProps,
+    {
+      state,
+      props: [itemProps, elementProps, getItemProps],
+      ref: [linkRef, buttonRef, forwardedRef, listItem.ref]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const MenuCheckboxItemContext = (0, import_octane.createContext)(void 0);
+function useMenuCheckboxItemContext() {
+  const context = (0, import_octane.useContext)(MenuCheckboxItemContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: MenuCheckboxItemContext is missing. MenuCheckboxItem parts must be placed within <Menu.CheckboxItem>."
+    );
+  }
+  return context;
+}
+function MenuCheckboxItem(componentProps) {
+  const slot = (0, import_internal.S)("MenuCheckboxItem");
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    nativeButton = false,
+    disabled = false,
+    closeOnClick = false,
+    checked: checkedProp,
+    defaultChecked,
+    onCheckedChange,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const listItem = (0, import_useCompositeListItem.useCompositeListItem)({ label }, (0, import_internal.subSlot)(slot, "li"));
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const { store } = useMenuRootContext();
+  const highlighted = store.useState("isActive", (0, import_internal.subSlot)(slot, "hl"), listItem.index);
+  const itemProps = store.useState("itemProps", (0, import_internal.subSlot)(slot, "ip"));
+  const [checked, setChecked] = (0, import_useControlled.useControlled)(
+    {
+      controlled: checkedProp,
+      default: defaultChecked ?? false
+    },
+    (0, import_internal.subSlot)(slot, "ctrl")
+  );
+  const { getItemProps, itemRef } = useMenuItem(
+    {
+      closeOnClick,
+      disabled,
+      highlighted,
+      id,
+      store,
+      nativeButton,
+      nodeId: menuPositionerContext?.context.nodeId,
+      itemMetadata: REGULAR_ITEM
+    },
+    (0, import_internal.subSlot)(slot, "item")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      disabled,
+      highlighted,
+      checked
+    }),
+    [disabled, highlighted, checked],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  function handleClick(event) {
+    const details = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.itemPress, event, void 0, {
+      preventUnmountOnClose() {
+      }
+    });
+    onCheckedChange?.(!checked, details);
+    if (details.isCanceled) {
+      return;
+    }
+    setChecked((currentlyChecked) => !currentlyChecked);
+  }
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      stateAttributesMapping: itemMapping,
+      props: [
+        itemProps,
+        {
+          role: "menuitemcheckbox",
+          "aria-checked": checked,
+          onClick: handleClick
+        },
+        elementProps,
+        getItemProps
+      ],
+      ref: [itemRef, forwardedRef, listItem.ref]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(MenuCheckboxItemContext.Provider, { value: state, children: element });
+}
+function MenuCheckboxItemIndicator(componentProps) {
+  const slot = (0, import_internal.S)("MenuCheckboxItemIndicator");
+  const {
+    render,
+    className,
+    style,
+    keepMounted = false,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const item = useMenuCheckboxItemContext();
+  const indicatorRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const { transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    item.checked,
+    void 0,
+    void 0,
+    (0, import_internal.subSlot)(slot, "ts")
+  );
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: item.checked,
+      ref: indicatorRef,
+      onComplete() {
+        if (!item.checked) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const state = {
+    checked: item.checked,
+    disabled: item.disabled,
+    highlighted: item.highlighted,
+    transitionStatus
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    componentProps,
+    {
+      state,
+      ref: [forwardedRef, indicatorRef],
+      stateAttributesMapping: itemMapping,
+      props: {
+        "aria-hidden": true,
+        ...elementProps
+      },
+      enabled: keepMounted || item.checked
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const MenuGroupContext = (0, import_octane.createContext)(void 0);
+function useMenuGroupRootContext() {
+  const context = (0, import_octane.useContext)(MenuGroupContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: MenuGroupContext is missing. Menu group parts must be used within <Menu.Group> or <Menu.RadioGroup>."
+    );
+  }
+  return context;
+}
+function MenuGroup(componentProps) {
+  const slot = (0, import_internal.S)("MenuGroup");
+  const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
+  const [labelId, setLabelId] = (0, import_octane.useState)(void 0, (0, import_internal.subSlot)(slot, "label"));
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: forwardedRef,
+      props: {
+        role: "group",
+        "aria-labelledby": labelId,
+        ...elementProps
+      }
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(MenuGroupContext.Provider, { value: setLabelId, children: element });
+}
+function MenuGroupLabel(componentProps) {
+  const slot = (0, import_internal.S)("MenuGroupLabel");
+  const {
+    render,
+    className,
+    style,
+    id: idProp,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const setLabelId = useMenuGroupRootContext();
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      setLabelId(id);
+      return () => {
+        setLabelId(void 0);
+      };
+    },
+    [setLabelId, id],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: forwardedRef,
+      props: {
+        id,
+        role: "presentation",
+        ...elementProps
+      }
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const MenuRadioGroupContext = (0, import_octane.createContext)(void 0);
+function useMenuRadioGroupContext() {
+  const context = (0, import_octane.useContext)(MenuRadioGroupContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: MenuRadioGroupContext is missing. MenuRadioGroup parts must be placed within <Menu.RadioGroup>."
+    );
+  }
+  return context;
+}
+function MenuRadioGroup(componentProps) {
+  const slot = (0, import_internal.S)("MenuRadioGroup");
+  const {
+    render,
+    className,
+    value: valueProp,
+    defaultValue,
+    onValueChange: onValueChangeProp,
+    disabled = false,
+    style,
+    "aria-labelledby": ariaLabelledByProp,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const [labelId, setLabelId] = (0, import_octane.useState)(void 0, (0, import_internal.subSlot)(slot, "label"));
+  const [value, setValueUnwrapped] = (0, import_useControlled.useControlled)(
+    {
+      controlled: valueProp,
+      default: defaultValue
+    },
+    (0, import_internal.subSlot)(slot, "ctrl")
+  );
+  const setValue = (0, import_useStableCallback.useStableCallback)(
+    (newValue, eventDetails) => {
+      onValueChangeProp?.(newValue, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      setValueUnwrapped(newValue);
+    },
+    (0, import_internal.subSlot)(slot, "setValue")
+  );
+  const state = { disabled };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: forwardedRef,
+      props: {
+        role: "group",
+        "aria-labelledby": ariaLabelledByProp ?? labelId,
+        "aria-disabled": disabled || void 0,
+        ...elementProps
+      }
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const context = (0, import_octane.useMemo)(
+    () => ({
+      value,
+      setValue,
+      disabled
+    }),
+    [value, setValue, disabled],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(MenuGroupContext.Provider, {
+    value: setLabelId,
+    children: (0, import_octane.createElement)(MenuRadioGroupContext.Provider, { value: context, children: element })
+  });
+}
+const MenuRadioItemContext = (0, import_octane.createContext)(void 0);
+function useMenuRadioItemContext() {
+  const context = (0, import_octane.useContext)(MenuRadioItemContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: MenuRadioItemContext is missing. MenuRadioItem parts must be placed within <Menu.RadioItem>."
+    );
+  }
+  return context;
+}
+function MenuRadioItem(componentProps) {
+  const slot = (0, import_internal.S)("MenuRadioItem");
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    nativeButton = false,
+    disabled: disabledProp = false,
+    closeOnClick = false,
+    value,
+    style,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const listItem = (0, import_useCompositeListItem.useCompositeListItem)({ label }, (0, import_internal.subSlot)(slot, "li"));
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const { store } = useMenuRootContext();
+  const highlighted = store.useState("isActive", (0, import_internal.subSlot)(slot, "hl"), listItem.index);
+  const itemProps = store.useState("itemProps", (0, import_internal.subSlot)(slot, "ip"));
+  const {
+    value: selectedValue,
+    setValue: setSelectedValue,
+    disabled: groupDisabled
+  } = useMenuRadioGroupContext();
+  const disabled = groupDisabled || disabledProp;
+  const checked = selectedValue === value;
+  const { getItemProps, itemRef } = useMenuItem(
+    {
+      closeOnClick,
+      disabled,
+      highlighted,
+      id,
+      store,
+      nativeButton,
+      nodeId: menuPositionerContext?.context.nodeId,
+      itemMetadata: REGULAR_ITEM
+    },
+    (0, import_internal.subSlot)(slot, "item")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      disabled,
+      highlighted,
+      checked
+    }),
+    [disabled, highlighted, checked],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  function handleClick(event) {
+    const details = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.itemPress, event, void 0, {
+      preventUnmountOnClose() {
+      }
+    });
+    setSelectedValue(value, details);
+  }
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      stateAttributesMapping: itemMapping,
+      props: [
+        itemProps,
+        {
+          role: "menuitemradio",
+          "aria-checked": checked,
+          onClick: handleClick
+        },
+        elementProps,
+        getItemProps
+      ],
+      ref: [itemRef, forwardedRef, listItem.ref]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(MenuRadioItemContext.Provider, { value: state, children: element });
+}
+function MenuRadioItemIndicator(componentProps) {
+  const slot = (0, import_internal.S)("MenuRadioItemIndicator");
+  const {
+    render,
+    className,
+    style,
+    keepMounted = false,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const item = useMenuRadioItemContext();
+  const indicatorRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const { transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    item.checked,
+    void 0,
+    void 0,
+    (0, import_internal.subSlot)(slot, "ts")
+  );
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: item.checked,
+      ref: indicatorRef,
+      onComplete() {
+        if (!item.checked) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const state = {
+    checked: item.checked,
+    disabled: item.disabled,
+    highlighted: item.highlighted,
+    transitionStatus
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    componentProps,
+    {
+      state,
+      stateAttributesMapping: itemMapping,
+      ref: [forwardedRef, indicatorRef],
+      props: {
+        "aria-hidden": true,
+        ...elementProps
+      },
+      enabled: keepMounted || item.checked
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function MenuArrow(componentProps) {
+  const slot = (0, import_internal.S)("MenuArrow");
+  const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
+  const { store } = useMenuRootContext();
+  const { arrowRef, side, align, arrowUncentered, arrowStyles } = useMenuPositionerContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const state = {
+    open,
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: [arrowRef, forwardedRef],
+      stateAttributesMapping: import_popupStateMapping.popupStateMapping,
+      state,
+      props: {
+        style: arrowStyles,
+        "aria-hidden": true,
+        ...elementProps
+      }
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const menuBackdropStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus2.transitionStatusMapping
+};
+function MenuBackdrop(componentProps) {
+  const slot = (0, import_internal.S)("MenuBackdrop");
+  const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
+  const { store } = useMenuRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const lastOpenChangeReason = store.useState("lastOpenChangeReason", (0, import_internal.subSlot)(slot, "locr"));
+  const contextMenuContext = (0, import_ContextMenuRootContext.useContextMenuRootContext)();
+  const state = {
+    open,
+    transitionStatus
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
+      state,
+      stateAttributesMapping: menuBackdropStateAttributesMapping,
+      props: [
+        {
+          role: "presentation",
+          hidden: !mounted,
+          style: {
+            pointerEvents: lastOpenChangeReason === import_createChangeEventDetails.REASONS.triggerHover ? "none" : void 0,
+            userSelect: "none",
+            WebkitUserSelect: "none"
+          }
+        },
+        elementProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const MenuViewportCssVars = {
+  /**
+   * The width of the parent popup when the previous content was rendered. Placed on the
+   * 'previous' container so the popup's dimensions can be frozen while content animates.
+   */
+  popupWidth: "--popup-width",
+  /** The height of the parent popup when the previous content was rendered. */
+  popupHeight: "--popup-height"
+};
+const menuViewportStateAttributesMapping = {
+  activationDirection: (value) => value ? { "data-activation-direction": value } : null
+};
+function MenuViewport(componentProps) {
+  const slot = (0, import_internal.S)("MenuViewport");
+  const { render, className, style, children, ref: forwardedRef, ...elementProps } = componentProps;
+  const { store } = useMenuRootContext();
+  const { side } = useMenuPositionerContext();
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const { children: childrenToRender, state: viewportState } = (0, import_usePopupViewport.usePopupViewport)(
+    { store, side, cssVars: MenuViewportCssVars, children },
+    (0, import_internal.subSlot)(slot, "vp")
+  );
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: forwardedRef,
+      props: [elementProps, { children: childrenToRender }],
+      stateAttributesMapping: menuViewportStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function MenuSubmenuRoot(props) {
+  const slot = (0, import_internal.S)("MenuSubmenuRoot");
+  const parentMenu = useMenuRootContext().store;
+  const contextValue = (0, import_octane.useMemo)(() => ({ parentMenu }), [parentMenu], (0, import_internal.subSlot)(slot, "ctx"));
+  return (0, import_octane.createElement)(MenuSubmenuRootContext.Provider, {
+    value: contextValue,
+    children: (0, import_octane.createElement)(MenuRoot, props)
+  });
+}
+function MenuSubmenuTrigger(componentProps) {
+  const slot = (0, import_internal.S)("MenuSubmenuTrigger");
+  const {
+    render,
+    className,
+    style,
+    label,
+    id: idProp,
+    nativeButton = false,
+    openOnHover = true,
+    delay = 100,
+    closeDelay = 0,
+    disabled: disabledProp = false,
+    ref: forwardedRef,
+    ...elementProps
+  } = componentProps;
+  const listItem = (0, import_useCompositeListItem.useCompositeListItem)({ label }, (0, import_internal.subSlot)(slot, "li"));
+  const menuPositionerContext = useMenuPositionerContext();
+  const { store } = useMenuRootContext();
+  const thisTriggerId = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const floatingTreeRoot = store.useState("floatingTreeRoot", (0, import_internal.subSlot)(slot, "ftr"));
+  const popupId = store.useState("triggerPopupId", (0, import_internal.subSlot)(slot, "tpid"), thisTriggerId);
+  const baseRegisterTrigger = (0, import_popups.useTriggerRegistration)(
+    thisTriggerId,
+    store,
+    (0, import_internal.subSlot)(slot, "reg")
+  );
+  const registerTrigger = (0, import_octane.useCallback)(
+    (element) => {
+      const cleanup = baseRegisterTrigger(element);
+      if (element !== null && store.select("open") && store.select("activeTriggerId") == null) {
+        store.update({
+          activeTriggerId: thisTriggerId,
+          activeTriggerElement: element,
+          closeDelay
+        });
+      }
+      return cleanup;
+    },
+    [baseRegisterTrigger, closeDelay, store, thisTriggerId],
+    (0, import_internal.subSlot)(slot, "regcb")
+  );
+  const triggerElementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ter"));
+  const handleTriggerElementRef = (0, import_octane.useCallback)(
+    (el) => {
+      triggerElementRef.current = el;
+      store.set("activeTriggerElement", el);
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "tercb")
+  );
+  const submenuRootContext = useMenuSubmenuRootContext();
+  if (!submenuRootContext?.parentMenu) {
+    throw new Error("Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.");
+  }
+  store.useSyncedValue("closeDelay", closeDelay, (0, import_internal.subSlot)(slot, "cd"));
+  const parentMenuStore = submenuRootContext.parentMenu;
+  const rootDisabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "rd"));
+  const parentDisabled = parentMenuStore.useState("disabled", (0, import_internal.subSlot)(slot, "pd"));
+  const disabled = disabledProp || rootDisabled || parentDisabled;
+  const itemProps = parentMenuStore.useState("itemProps", (0, import_internal.subSlot)(slot, "ip"));
+  const highlighted = parentMenuStore.useState("isActive", (0, import_internal.subSlot)(slot, "hl"), listItem.index);
+  const itemMetadata = (0, import_octane.useMemo)(
+    () => ({
+      type: "submenu-trigger",
+      setActive() {
+        if (parentMenuStore.select("highlightItemOnHover")) {
+          parentMenuStore.set("activeIndex", listItem.index);
+        }
+      }
+    }),
+    [parentMenuStore, listItem.index],
+    (0, import_internal.subSlot)(slot, "meta")
+  );
+  const { getItemProps, itemRef } = useMenuItem(
+    {
+      closeOnClick: false,
+      disabled,
+      highlighted,
+      id: thisTriggerId,
+      store,
+      typingRef: parentMenuStore.context.typingRef,
+      nativeButton,
+      itemMetadata,
+      nodeId: menuPositionerContext?.context.nodeId
+    },
+    (0, import_internal.subSlot)(slot, "item")
+  );
+  const hoverEnabled = store.useState("hoverEnabled", (0, import_internal.subSlot)(slot, "he"));
+  const hoverProps = (0, import_useHoverReferenceInteraction.useHoverReferenceInteraction)(
+    floatingRootContext,
+    {
+      enabled: hoverEnabled && openOnHover && !disabled,
+      handleClose: (0, import_useHoverReferenceInteraction.safePolygon)({ blockPointerEvents: true }),
+      mouseOnly: true,
+      move: true,
+      restMs: delay,
+      delay: { open: delay, close: closeDelay },
+      shouldOpen: delay > 0 ? () => parentMenuStore.select("allowMouseEnter") : void 0,
+      triggerElementRef,
+      externalTree: floatingTreeRoot,
+      isClosing: () => store.select("transitionStatus") === "ending"
+    },
+    (0, import_internal.subSlot)(slot, "hover")
+  );
+  const click = (0, import_useClick.useClick)(
+    floatingRootContext,
+    {
+      enabled: !disabled,
+      event: "mousedown",
+      toggle: !openOnHover,
+      ignoreMouse: openOnHover,
+      stickIfOpen: false
+    },
+    (0, import_internal.subSlot)(slot, "click")
+  );
+  const localInteractionProps = click.reference ?? import_empty.EMPTY_OBJECT;
+  const rootTriggerProps = store.useState("triggerProps", (0, import_internal.subSlot)(slot, "tp"), true);
+  delete rootTriggerProps.id;
+  const state = { disabled, highlighted, open };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      stateAttributesMapping: import_popupStateMapping.triggerOpenStateMapping,
+      props: [
+        localInteractionProps,
+        hoverProps,
+        rootTriggerProps,
+        itemProps,
+        {
+          "aria-controls": popupId,
+          tabIndex: open || highlighted ? 0 : -1,
+          onBlur() {
+            if (highlighted) {
+              parentMenuStore.set("activeIndex", null);
+            }
+          }
+        },
+        elementProps,
+        getItemProps
+      ],
+      ref: [forwardedRef, listItem.ref, itemRef, registerTrigger, handleTriggerElementRef]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Menu = {
+  Root: MenuRoot,
+  Trigger: MenuTrigger,
+  Portal: MenuPortal,
+  Positioner: MenuPositioner,
+  Popup: MenuPopup,
+  Arrow: MenuArrow,
+  Backdrop: MenuBackdrop,
+  Viewport: MenuViewport,
+  Item: MenuItem,
+  LinkItem: MenuLinkItem,
+  CheckboxItem: MenuCheckboxItem,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  RadioItemIndicator: MenuRadioItemIndicator,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  Separator: import_separator.Separator,
+  SubmenuRoot: MenuSubmenuRoot,
+  SubmenuTrigger: MenuSubmenuTrigger,
+  createHandle: createMenuHandle,
+  Handle: MenuHandle
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menu,
+  MenuHandle,
+  MenuRootContext,
+  MenuStore,
+  MenuSubmenuRootContext,
+  MenuViewportCssVars,
+  REGULAR_ITEM,
+  createMenuHandle,
+  itemMapping,
+  useMenuCheckboxItemContext,
+  useMenuGroupRootContext,
+  useMenuItem,
+  useMenuItemCommonProps,
+  useMenuPortalContext,
+  useMenuPositionerContext,
+  useMenuRadioGroupContext,
+  useMenuRadioItemContext,
+  useMenuRootContext,
+  useMenuSubmenuRootContext
+});