@jobber/components 9.5.3 → 9.6.0

package/dist/MenuSubmenuTrigger-es.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { a as useRefWithInit, f as formatErrorMessage, u as useRenderElement, m as mergeProps, b as useMergedRefs, E as EMPTY_OBJECT, c as EMPTY_ARRAY, w as warn } from './useRenderElement-es.js';
-import { aw as isMouseLikePointerType, k as useTimeout, ax as mergeCleanups, s as addEventListener, g as getTarget, ay as isTypeableElement, az as matchesFocusVisible, aA as isTargetInsideEnabledTrigger, d as createChangeEventDetails, aB as triggerFocus, aC as createAttribute, D as activeElement, o as ownerDocument, _ as contains, aD as mac, a6 as webkit, aE as triggerPress, aF as escapeKey, H as useOnMount, T as Timeout, ae as useFloatingTree, ab as useFloatingParentNodeId, b as useStableCallback, a as useIsoLayoutEffect, aG as isInteractiveElement, aH as getNodeChildren, aI as triggerHover, q as useValueAsRef, p as popupStateMapping, t as transitionStatusMapping, a9 as itemPress, c as useButton, u as useBaseUiId, f as useOpenChangeComplete, X as outsidePress, i as FloatingFocusManager, a0 as FloatingPortal, aJ as useAnimationsFinished, aK as POPUP_COLLISION_AVOIDANCE, a1 as InternalBackdrop, a2 as inertValue, aL as FloatingNode, a3 as DROPDOWN_COLLISION_AVOIDANCE, aM as siblingOpen, n as useControlled, m as useTransitionStatus, N as createSelector, aN as ReactStore, ad as PopupTriggerMap, aO as FloatingTreeStore, aP as fastComponent, aQ as useInitialOpenSync, aa as useId, aR as useFloatingNodeId, O as useOpenInteractionType, aS as useImplicitActiveTrigger, aT as useOpenStateTransitions, aU as attachPreventUnmountOnClose, aV as setPopupOpenState, W as focusOut, aj as listNavigation, aW as useSyncedFloatingRootContext, j as imperativeAction, R as useDismiss, a4 as useDirection, aX as TYPEAHEAD_RESET_MS, F as FOCUSABLE_POPUP_PROPS, aY as usePopupInteractionProps, aZ as FloatingTree, a_ as useCompositeRootContext, a$ as getTabbableBeforeElement, b0 as isOutsideEvent, b1 as getTabbableAfterElement, b2 as getNextTabbable, b3 as fastComponentRef, b4 as useTriggerDataForwarding, $ as cancelOpen, Q as useClick, Y as pressableTriggerOpenStateMapping, b5 as FocusGuard, b6 as PATIENT_CLICK_THRESHOLD, b7 as useTriggerRegistration, S as SafeReact, b8 as triggerOpenStateMapping } from './useScrollLock-es.js';
+import { a as useRefWithInit, f as formatErrorMessage, u as useRenderElement, m as mergeProps, b as useMergedRefs, N as NOOP, E as EMPTY_OBJECT, c as EMPTY_ARRAY, w as warn } from './useRenderElement-es.js';
+import { bl as isMouseLikePointerType, q as useTimeout, I as getWindow, bm as mergeCleanups, y as addEventListener, e as getTarget, au as isElement, bn as isTypeableElement, bo as matchesFocusVisible, bp as isTargetInsideEnabledTrigger, h as createChangeEventDetails, bq as triggerFocus, br as createAttribute, D as activeElement, o as ownerDocument, a0 as contains, bs as mac, a9 as webkit, i as isHTMLElement, bt as triggerPress, bu as escapeKey, H as useOnMount, T as Timeout, aM as useFloatingTree, aJ as useFloatingParentNodeId, d as useStableCallback, c as useIsoLayoutEffect, bv as isInteractiveElement, bw as getNodeChildren, bx as triggerHover, w as useValueAsRef, p as popupTransitionStateMapping, ad as itemPress, by as dispatchClickWithModifiers, f as useButton, t as transitionStatusMapping, u as useBaseUiId, l as useOpenChangeComplete, Z as outsidePress, n as FloatingFocusManager, a2 as FloatingPortal, bz as useAnimationsFinished, bA as POPUP_COLLISION_AVOIDANCE, a3 as InternalBackdrop, a4 as inertValue, bB as FloatingNode, a5 as DROPDOWN_COLLISION_AVOIDANCE, bC as siblingOpen, v as useControlled, s as useTransitionStatus, aL as PopupTriggerMap, bD as FloatingTreeStore, X as ReactStore, bE as fastComponent, aI as useId, bF as useFloatingNodeId, R as useOpenInteractionType, b8 as useImplicitActiveTrigger, b9 as useOpenStateTransitions, bG as attachPreventUnmountOnClose, b5 as setPopupOpenState, Y as focusOut, aS as listNavigation, bH as useSyncedFloatingRootContext, k as imperativeAction, W as useDismiss, a7 as useDirection, bI as TYPEAHEAD_RESET_MS, F as FOCUSABLE_POPUP_PROPS, b4 as usePopupInteractionProps, ba as PopupHandleAttachment, bJ as FloatingTree, bK as useCompositeRootContext, a as isLastTraversableNode, b as getParentNode, bL as getTabbableBeforeElement, bM as isOutsideEvent, bN as getTabbableAfterElement, bO as getNextTabbable, bP as fastComponentRef, bb as useTriggerDataForwarding, a1 as cancelOpen, V as useClick, _ as pressableTriggerOpenStateMapping, bQ as FocusGuard, bR as PATIENT_CLICK_THRESHOLD, bS as useTriggerRegistration, S as SafeReact, be as triggerOpenStateMapping, bT as voiceOver } from './useScrollLock-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { z as useCompositeListItem, y as getDisabledMountTransitionStyles, v as useAnchorPositioning, B as adaptiveOrigin, t as useAnchoredPopupScrollLock, w as usePositioner, C as CompositeList, j as useListNavigation, k as useTypeahead, o as getPseudoElementBounds } from './useCompositeListItem-es.js';
+import { A as useCompositeListItem, z as getDisabledMountTransitionStyles, w as useAnchorPositioning, v as useAnchoredPopupScrollLock, x as usePositioner, C as CompositeList, j as useListNavigation, k as useTypeahead, p as isMouseWithinBounds } from './useCompositeListItem-es.js';
 import { u as useToolbarRootContext, l as isElementDisabled } from './SelectGroupLabel-es.js';
 import { C as COMPOSITE_KEYS } from './scrollEdges-es.js';
-import { K as getWindow, b as isElement, i as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils-es.js';
-import { p as popupStoreSelectors, n as createInitialPopupStoreState } from './ScrollAreaViewport-es.js';
+import { N as NullStore, o as createInitialPopupStoreState, p as popupStoreSelectors, q as usePopupHandleStore } from './ScrollAreaViewport-es.js';
 import * as ReactDOM from 'react-dom';
 
 function resolveValue(value, pointerType) {
@@ -438,7 +437,8 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext,
     isClosing,
-    shouldOpen: shouldOpenProp
+    shouldOpen: shouldOpenProp,
+    guardStaleOpen = false
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const {
@@ -640,13 +640,24 @@ function useHoverReferenceInteraction(context, props = {}) {
         closeWithDelay(event);
       }
     }
+
+    // Backup cancellation for Chrome's dropped `mouseleave` — see `guardStaleOpen`.
+    function onMouseOut(event) {
+      if (contains(trigger, event.relatedTarget)) {
+        return; // moved within the trigger's own subtree
+      }
+      instance.openChangeTimeout.clear();
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+    }
+    const staleOpenGuard = guardStaleOpen ? addEventListener(trigger, 'mouseout', onMouseOut) : undefined;
     if (move) {
       return mergeCleanups(addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
+      }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
     }
-    return mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent$1, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen]);
+    return mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent$1, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen, guardStaleOpen]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -987,11 +998,6 @@ function useContextMenuRootContext(optional = true) {
   return context;
 }
 
-const stateAttributesMapping$1 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
 /**
  * An overlay displayed beneath the menu popup.
  * Renders a `<div>` element.
@@ -1020,7 +1026,7 @@ const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(compone
   return useRenderElement('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,
-    stateAttributesMapping: stateAttributesMapping$1,
+    stateAttributesMapping: popupTransitionStateMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -1102,8 +1108,12 @@ function useMenuItemCommonProps(params) {
       if (itemRef.current && store.context.allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
         // This fires whenever the user clicks on the trigger, moves the cursor, and releases it over the item.
         // We trigger the click and override the `closeOnClick` preference to always close the menu.
-        if (!itemMetadata || itemMetadata.type === 'regular-item') {
-          itemRef.current.click();
+        if (itemMetadata.type === 'regular-item') {
+          // `detail: 1` marks this as a mouse-gesture click so MenuRoot doesn't
+          // treat it as a keyboard activation (`detail === 0` → `data-instant`).
+          dispatchClickWithModifiers(itemRef.current, event, {
+            detail: 1
+          });
         }
       }
     }
@@ -1116,7 +1126,7 @@ const REGULAR_ITEM = {
 function useMenuItem(params) {
   const {
     closeOnClick,
-    disabled: disabledProp = false,
+    disabled,
     highlighted,
     id,
     store,
@@ -1125,8 +1135,6 @@ function useMenuItem(params) {
     itemMetadata,
     nodeId
   } = params;
-  const rootDisabled = store.useState('disabled');
-  const disabled = disabledProp || rootDisabled;
   const itemRef = React.useRef(null);
   const {
     getButtonProps,
@@ -1250,7 +1258,7 @@ const MenuGroupLabel = /*#__PURE__*/React.forwardRef(function MenuGroupLabel(com
   useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
-      setLabelId(undefined);
+      setLabelId(currentId => currentId === id ? undefined : currentId);
     };
   }, [setLabelId, id]);
   return useRenderElement('div', componentProps, {
@@ -1277,12 +1285,13 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componentProps,
     id: idProp,
     label,
     nativeButton = false,
-    disabled = false,
+    disabled: disabledProp = false,
     closeOnClick = true,
     style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1290,6 +1299,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componentProps,
   const {
     store
   } = useMenuRootContext();
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || rootDisabled;
   const highlighted = store.useState('isActive', listItem.index);
   const itemProps = store.useState('itemProps');
   const {
@@ -1335,6 +1346,7 @@ const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(compone
   } = componentProps;
   const linkRef = React.useRef(null);
   const listItem = useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1360,7 +1372,8 @@ const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(compone
     nodeId,
     store,
     typingRef,
-    itemRef: linkRef
+    itemRef: linkRef,
+    itemMetadata: REGULAR_ITEM
   });
   function getItemProps(externalProps) {
     return mergeProps(commonProps, externalProps, getButtonProps);
@@ -1376,17 +1389,6 @@ const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(compone
 });
 if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
 
-const stateAttributesMapping = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
-/**
- * A container for the menu items.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
 const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProps, forwardedRef) {
   const {
     render,
@@ -1408,14 +1410,13 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
   const popupProps = store.useState('popupProps');
   const mounted = store.useState('mounted');
   const instantType = store.useState('instantType');
-  const triggerElement = store.useState('activeTriggerElement');
+  const activeTriggerElement = store.useState('activeTriggerElement');
   const parent = store.useState('parent');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const rootId = store.useState('rootId');
   const floatingContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const closeDelay = store.useState('closeDelay');
-  const activeTriggerElement = store.useState('activeTriggerElement');
   const hoverEnabled = store.useState('hoverEnabled');
   const disabled = store.useState('disabled');
   const openMethod = store.useState('openMethod');
@@ -1442,9 +1443,7 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     transitionStatus,
     side,
@@ -1456,7 +1455,7 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
-    stateAttributesMapping,
+    stateAttributesMapping: popupTransitionStateMapping,
     props: [popupProps, {
       onKeyDown(event) {
         if (insideToolbar && COMPOSITE_KEYS.has(event.key)) {
@@ -1468,7 +1467,7 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
     }]
   });
   let returnFocus = parent.type === undefined || isContextMenu;
-  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== outsidePress) {
+  if (activeTriggerElement || parent.type === 'menubar' && lastOpenChangeReason !== outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/jsx(FloatingFocusManager, {
@@ -1556,13 +1555,13 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
   const transitionStatus = store.useState('transitionStatus');
   const positionerElement = store.useState('positionerElement');
   const instantType = store.useState('instantType');
-  const hasViewport = store.useState('hasViewport');
+  const adaptiveOrigin = store.useState('adaptiveOrigin');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const floatingNodeId = store.useState('floatingNodeId');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const domReference = floatingRootContext.useState('domReferenceElement');
   const previousTriggerRef = React.useRef(null);
-  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -1604,9 +1603,12 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+    shift: contextMenu ? {
+      crossAxis: !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+      rootBoundary: 'layoutViewport'
+    } : undefined,
     externalTree: floatingTreeRoot,
-    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
+    adaptiveOrigin
   });
   React.useEffect(() => {
     function onMenuOpenChange(details) {
@@ -1846,6 +1848,7 @@ const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioItem(compo
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1860,7 +1863,8 @@ const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioItem(compo
     setValue: setSelectedValue,
     disabled: groupDisabled
   } = useMenuRadioGroupContext();
-  const disabled = groupDisabled || disabledProp;
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || groupDisabled || rootDisabled;
   const checked = selectedValue === value;
   const {
     getItemProps,
@@ -1882,7 +1886,7 @@ const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioItem(compo
   }), [disabled, highlighted, checked]);
   function handleClick(event) {
     const details = createChangeEventDetails(itemPress, event.nativeEvent, undefined, {
-      preventUnmountOnClose() {}
+      preventUnmountOnClose: NOOP
     });
     setSelectedValue(value, details);
   }
@@ -1921,6 +1925,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function MenuRadioI
   const indicatorRef = React.useRef(null);
   const {
     transitionStatus,
+    mounted,
     setMounted
   } = useTransitionStatus(item.checked);
   useOpenChangeComplete({
@@ -1946,7 +1951,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function MenuRadioI
       'aria-hidden': true,
       ...elementProps
     },
-    enabled: keepMounted || item.checked
+    enabled: keepMounted || mounted
   });
   return element;
 });
@@ -1964,36 +1969,35 @@ function useMenubarContext(optional) {
 
 const selectors = {
   ...popupStoreSelectors,
-  disabled: createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  openMethod: createSelector(state => state.openMethod),
-  allowMouseEnter: createSelector(state => state.allowMouseEnter),
-  highlightItemOnHover: createSelector(state => state.highlightItemOnHover),
-  stickIfOpen: createSelector(state => state.stickIfOpen),
-  parent: createSelector(state => state.parent),
-  rootId: createSelector(state => {
+  disabled: state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled,
+  modal: state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true),
+  openMethod: state => state.openMethod,
+  allowMouseEnter: state => state.allowMouseEnter,
+  highlightItemOnHover: state => state.highlightItemOnHover,
+  parent: state => state.parent,
+  rootId: state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('rootId');
     }
     return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
-  }),
-  activeIndex: createSelector(state => state.activeIndex),
-  isActive: createSelector((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: createSelector(state => state.hoverEnabled),
-  instantType: createSelector(state => state.instantType),
-  lastOpenChangeReason: createSelector(state => state.openChangeReason),
-  floatingTreeRoot: createSelector(state => {
+  },
+  activeIndex: state => state.activeIndex,
+  isActive: (state, itemIndex) => state.activeIndex === itemIndex,
+  hoverEnabled: state => state.hoverEnabled,
+  instantType: state => state.instantType,
+  lastOpenChangeReason: state => state.openChangeReason,
+  floatingTreeRoot: state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('floatingTreeRoot');
     }
     return state.floatingTreeRoot;
-  }),
-  floatingNodeId: createSelector(state => state.floatingNodeId),
-  floatingParentNodeId: createSelector(state => state.floatingParentNodeId),
-  itemProps: createSelector(state => state.itemProps),
-  closeDelay: createSelector(state => state.closeDelay),
-  hasViewport: createSelector(state => state.hasViewport),
-  keyboardEventRelay: createSelector(state => {
+  },
+  floatingNodeId: state => state.floatingNodeId,
+  floatingParentNodeId: state => state.floatingParentNodeId,
+  itemProps: state => state.itemProps,
+  closeDelay: state => state.closeDelay,
+  adaptiveOrigin: state => state.adaptiveOrigin,
+  keyboardEventRelay: state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
     }
@@ -2001,33 +2005,23 @@ const selectors = {
       return state.parent.store.select('keyboardEventRelay');
     }
     return undefined;
-  })
+  }
 };
+
+/**
+ * The store view that detached handle-backed triggers read from. Both the real `MenuStore` and the
+ * inert fallback store satisfy it, so a trigger can read from whichever store the handle currently
+ * exposes. Narrowed to the members a trigger actually uses — the trigger-data members plus `setOpen`
+ * (called by the focus guards) — so the exposed surface can't bypass the open-change pipeline; on
+ * the detached fallback store every one of these mutations is a no-op.
+ */
+
 class MenuStore extends ReactStore {
   constructor(initialState) {
     super({
       ...createInitialState(),
       ...initialState
-    }, {
-      positionerRef: /*#__PURE__*/React.createRef(),
-      popupRef: /*#__PURE__*/React.createRef(),
-      typingRef: {
-        current: false
-      },
-      itemDomElements: {
-        current: []
-      },
-      itemLabels: {
-        current: []
-      },
-      allowMouseUpTriggerRef: {
-        current: false
-      },
-      triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
-      beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
-      onOpenChangeComplete: undefined,
-      triggerElements: new PopupTriggerMap()
-    }, selectors);
+    }, createInitialContext(), selectors);
 
     // Set up propagation of state from parent menu if applicable.
     this.unsubscribeParentListener = this.observe('parent', parent => {
@@ -2063,15 +2057,44 @@ class MenuStore extends ReactStore {
       eventDetails
     });
   }
-  static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = useRefWithInit(() => {
-      return new MenuStore(initialState);
-    }).current;
-    return externalStore ?? internalStore;
-  }
   unsubscribeParentListener = null;
 }
+
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no `Menu.Root` is
+ * attached. It preserves a menu-specific trigger registry in context so detached triggers can
+ * register before migrating to the live root store. `setOpen` is a no-op (matching the inert
+ * reads/writes of `NullStore`), so a trigger can hand the store to focus-guard helpers that expect
+ * `setOpen` without it ever taking effect while detached.
+ */
+function createNullMenuStore() {
+  const store = new NullStore(Object.freeze(createInitialState()), Object.freeze(createInitialContext()), selectors);
+  return Object.assign(store, {
+    setOpen: NOOP
+  });
+}
+function createInitialContext() {
+  return {
+    positionerRef: /*#__PURE__*/React.createRef(),
+    popupRef: /*#__PURE__*/React.createRef(),
+    typingRef: {
+      current: false
+    },
+    itemDomElements: {
+      current: []
+    },
+    itemLabels: {
+      current: []
+    },
+    allowMouseUpTriggerRef: {
+      current: false
+    },
+    triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
+    beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
+    onOpenChangeComplete: undefined,
+    triggerElements: new PopupTriggerMap()
+  };
+}
 function createInitialState() {
   return {
     ...createInitialPopupStoreState(),
@@ -2080,7 +2103,6 @@ function createInitialState() {
     openMethod: null,
     allowMouseEnter: false,
     highlightItemOnHover: true,
-    stickIfOpen: true,
     parent: {
       type: undefined
     },
@@ -2095,7 +2117,7 @@ function createInitialState() {
     itemProps: EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    hasViewport: false
+    adaptiveOrigin: undefined
   };
 }
 
@@ -2154,14 +2176,13 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
       type: undefined
     };
   }, [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu]);
-  const store = MenuStore.useStore(handle?.store, {
+  const store = useMenuRootStore({
     open: defaultOpen,
     openProp,
     activeTriggerId: defaultTriggerIdProp,
     triggerIdProp,
     parent: parentFromContext
   });
-  useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerIdProp);
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
@@ -2206,10 +2227,7 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
   const {
     forceUnmount
   } = useOpenStateTransitions(open, store, () => {
-    store.update({
-      allowMouseEnter: false,
-      stickIfOpen: true
-    });
+    store.set('allowMouseEnter', false);
   });
   useIsoLayoutEffect(() => {
     if (contextMenuContext && !parentMenuRootContext) {
@@ -2257,6 +2275,12 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
   }, [open, hoverEnabled, store]);
   const setOpen = useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
+
+    // Read the store directly, as relayed tree events and stale hover timers can request
+    // a close after the state changed but before this component re-rendered.
+    if (!nextOpen && !store.select('open')) {
+      return;
+    }
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
     }
@@ -2289,13 +2313,17 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
       allowTouchToCloseRef.current = true;
       allowTouchToCloseTimeout.clear();
     }
-    const isKeyboardClick = (reason === triggerPress || reason === itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
+
+    // Keyboard and assistive-technology activations produce `detail === 0` clicks;
+    // mouse-gesture clicks (including the synthesized drag-release click from
+    // `useMenuItemCommonProps`) carry `detail >= 1`.
+    const isKeyboardClick = (reason === triggerPress || reason === itemPress) && nativeEvent.detail === 0;
     const isDismissClose = !nextOpen && (reason === escapeKey || reason == null);
     const updatedState = {
       open: nextOpen,
       openChangeReason: reason
     };
-    openEventRef.current = eventDetails.event ?? null;
+    openEventRef.current = eventDetails.event;
     setPopupOpenState(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
     store.update(updatedState);
     if (parent.type === 'menubar' && (reason === triggerFocus || reason === focusOut || reason === triggerHover || reason === listNavigation || reason === siblingOpen)) {
@@ -2313,7 +2341,11 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
     onOpenChange: setOpen
   });
   const floatingEvents = floatingRootContext.context.events;
-  React.useEffect(() => {
+
+  // Registered in a layout effect (not a passive one) so `setOpen` emits from imperative
+  // `MenuHandle.open()` calls made in the same commit this root mounts — e.g. from another layout
+  // effect during a route-transition handoff — are received instead of being silently dropped.
+  useIsoLayoutEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,
       eventDetails
@@ -2442,11 +2474,14 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
     store,
     parent: parentFromContext
   }), [store, parentFromContext]);
-  const content = /*#__PURE__*/jsx(MenuRootContext.Provider, {
+  const content = /*#__PURE__*/jsxs(MenuRootContext.Provider, {
     value: context,
-    children: typeof children === 'function' ? children({
+    children: [handle && /*#__PURE__*/jsx(PopupHandleAttachment, {
+      handle: handle,
+      store: store
+    }), typeof children === 'function' ? children({
       payload
-    }) : children
+    }) : children]
   });
   if (parent.type === undefined || parent.type === 'context-menu') {
     // set up a FloatingTree to provide the context to nested menus
@@ -2458,6 +2493,15 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
   return content;
 });
 if (process.env.NODE_ENV !== "production") MenuRoot.displayName = "MenuRoot";
+function useMenuRootStore(initialState) {
+  // The store is owned by this Root instance and created exactly once. It is not tied to the handle:
+  // the handle attaches to it, so swapping the handle re-attaches rather than recreating state.
+  // Default values are only initial values; controlled values and root state are synced after creation.
+  // Unlike other popups, Menu wires its floating root context separately (it relays open changes
+  // through an event).
+  const store = useRefWithInit(() => new MenuStore(initialState)).current;
+  return store;
+}
 
 /**
  * Groups all parts of a submenu.
@@ -2514,9 +2558,6 @@ function useCompositeItem(params = {}) {
   };
 }
 
-/**
- * @internal
- */
 function CompositeItem(componentProps) {
   const {
     render,
@@ -2538,7 +2579,8 @@ function CompositeItem(componentProps) {
   });
   return useRenderElement(tag, componentProps, {
     state,
-    ref: [...refs, compositeRef],
+    // The composite ref attaches first so an outer item wins when nested items share a DOM node.
+    ref: [compositeRef, ...refs],
     props: [compositeProps, ...props, elementProps],
     stateAttributesMapping
   });
@@ -2546,7 +2588,7 @@ function CompositeItem(componentProps) {
 
 function findRootOwnerId(node) {
   if (isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
-    return node.getAttribute('data-rootownerid') ?? undefined;
+    return node.getAttribute('data-rootownerid');
   }
   if (isLastTraversableNode(node)) {
     return undefined;
@@ -2638,14 +2680,6 @@ function useMixedToggleClickHandler(params) {
   }, [enabled, mouseDownAction, open]);
 }
 
-const BOUNDARY_OFFSET = 2;
-
-/**
- * A button that opens the menu.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
 const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
@@ -2662,7 +2696,8 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
-  const store = handle?.store ?? rootContext?.store;
+  const handleStore = usePopupHandleStore(handle);
+  const store = handleStore ?? rootContext?.store;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : formatErrorMessage(85));
   }
@@ -2722,8 +2757,7 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
       return;
     }
-    const bounds = 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) {
+    if (isMouseWithinBounds(mouseEvent, triggerRef.current)) {
       return;
     }
     floatingTreeRoot.events.emit('close', {
@@ -2742,7 +2776,7 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
   const parentMenubarHasSubmenuOpen = isInMenubar && parent.context.hasSubmenuOpen;
   const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen;
   const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
-    enabled: openOnHover && !disabled && parent.type !== 'context-menu' && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+    enabled: openOnHover && !disabled && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
     handleClose: safePolygon({
       blockPointerEvents: !isInMenubar
     }),
@@ -2763,7 +2797,7 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
   const click = useClick(floatingRootContext, {
-    enabled: !disabled && parent.type !== 'context-menu',
+    enabled: !disabled,
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
     ignoreMouse: false,
@@ -2858,7 +2892,7 @@ function useStickIfOpen(open, openReason) {
   const stickIfOpenTimeout = useTimeout();
   const [stickIfOpen, setStickIfOpen] = React.useState(false);
   useIsoLayoutEffect(() => {
-    if (open && openReason === 'trigger-hover') {
+    if (open && openReason === triggerHover) {
       // Only allow "patient" clicks to close the menu if it's open.
       // If they clicked within 500ms of the menu opening, keep it open.
       setStickIfOpen(true);
@@ -2873,8 +2907,6 @@ function useStickIfOpen(open, openReason) {
   return stickIfOpen;
 }
 function useMenuParent() {
-  const contextMenuContext = useContextMenuRootContext(true);
-  const parentContext = useMenuRootContext(true);
   const menubarContext = useMenubarContext(true);
   const parent = React.useMemo(() => {
     if (menubarContext) {
@@ -2883,23 +2915,17 @@ function useMenuParent() {
         context: menubarContext
       };
     }
-
-    // Ensure this is not a Menu nested inside ContextMenu.Trigger.
-    // ContextMenu parentContext is always undefined as ContextMenu.Root is instantiated with
-    // <MenuRootContext.Provider value={undefined}>
-    if (contextMenuContext && !parentContext) {
-      return {
-        type: 'context-menu',
-        context: contextMenuContext
-      };
-    }
     return {
       type: undefined
     };
-  }, [contextMenuContext, parentContext, menubarContext]);
+  }, [menubarContext]);
   return parent;
 }
 
+const VOICE_OVER_EXPANDED_PROPS = {
+  'aria-expanded': undefined
+};
+
 /**
  * A menu item that opens a submenu.
  * Renders a `<div>` element.
@@ -2920,7 +2946,12 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTri
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
+  const submenuRootContext = useMenuSubmenuRootContext();
+  if (!submenuRootContext?.parentMenu) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : formatErrorMessage(37));
+  }
   const listItem = useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext();
@@ -2949,10 +2980,6 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTri
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
-  const submenuRootContext = useMenuSubmenuRootContext();
-  if (!submenuRootContext?.parentMenu) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : formatErrorMessage(37));
-  }
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
   const rootDisabled = store.useState('disabled');
@@ -2960,7 +2987,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTri
   const disabled = disabledProp || rootDisabled || parentDisabled;
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useIsoLayoutEffect(() => {
+    React.useEffect(() => {
       const element = triggerElementRef.current;
       if (element && isElementDisabled(element) && !disabled) {
         const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
@@ -3008,7 +3035,10 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTri
     shouldOpen: delay > 0 ? () => parentMenuStore.select('allowMouseEnter') : undefined,
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isClosing: () => store.select('transitionStatus') === 'ending'
+    isClosing: () => store.select('transitionStatus') === 'ending',
+    // Chrome can drop the trigger's `mouseleave` during a fast pointer sweep,
+    // leaving a stale submenu open (see #5152) — cancel from `mouseout` too.
+    guardStaleOpen: true
   });
   const click = useClick(floatingRootContext, {
     enabled: !disabled,
@@ -3025,10 +3055,22 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTri
     highlighted,
     open
   };
+  const openMethod = store.useState('openMethod');
+  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
+  // Arrow keys open the submenu through list navigation without dispatching a click, so
+  // `openMethod` stays null there; Enter and Space do dispatch one and report `keyboard`.
+  const openedByKeyboard = lastOpenChangeReason === listNavigation || openMethod === 'keyboard';
+  const shouldOmitExpanded = open && openedByKeyboard && voiceOver;
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: triggerOpenStateMapping,
-    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps,
+    // Opening a submenu changes the trigger's expanded state while the trigger still holds
+    // focus, and VoiceOver announces that state change instead of the submenu item that focus
+    // moves to a moment later, so the first item is never announced. Dropping the state while
+    // the submenu is open avoids the announcement without claiming the submenu is collapsed;
+    // `aria-haspopup` still conveys that the item opens a submenu.
+    shouldOmitExpanded ? VOICE_OVER_EXPANDED_PROPS : undefined, {
       'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
@@ -3043,4 +3085,4 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTri
 });
 if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
 
-export { MenuTrigger as M, REGULAR_ITEM as R, MenuLinkItem as a, MenuItem as b, MenuRadioItem as c, MenuRadioItemIndicator as d, MenuSubmenuTrigger as e, MenuRoot as f, MenuPortal as g, MenuBackdrop as h, MenuPositioner as i, MenuPopup as j, MenuRadioGroup as k, MenuGroup as l, MenuSubmenuRoot as m, MenuGroupLabel as n, useMenuPositionerContext as o, useMenuItem as p, itemMapping as q, MenuStore as r, useMenuRootContext as u };
+export { MenuTrigger as M, REGULAR_ITEM as R, MenuLinkItem as a, MenuItem as b, MenuRadioItem as c, MenuRadioItemIndicator as d, MenuSubmenuTrigger as e, MenuRoot as f, MenuPortal as g, MenuBackdrop as h, MenuPositioner as i, MenuPopup as j, MenuRadioGroup as k, MenuGroup as l, MenuSubmenuRoot as m, MenuGroupLabel as n, useMenuPositionerContext as o, useMenuItem as p, itemMapping as q, createNullMenuStore as r, useMenuRootContext as u };