@jobber/components 9.5.3 → 9.6.0

package/dist/MenuSubmenuTrigger-cjs.js

@@ -7,7 +7,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var useCompositeListItem = require('./useCompositeListItem-cjs.js');
 var SelectGroupLabel = require('./SelectGroupLabel-cjs.js');
 var scrollEdges = require('./scrollEdges-cjs.js');
-var floatingUi_utils = require('./floating-ui.utils-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var ReactDOM = require('react-dom');
 
@@ -86,14 +85,14 @@ function useFocus(context, props = {}) {
     if (!enabled) {
       return undefined;
     }
-    const win = floatingUi_utils.getWindow(domReference);
+    const win = useScrollLock.getWindow(domReference);
 
     // If the reference was focused and the user left the tab/window, and the
     // floating element was not open, the focus should be blocked when they
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && floatingUi_utils.isHTMLElement(currentDomReference) && currentDomReference === useScrollLock.activeElement(useScrollLock.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && useScrollLock.isHTMLElement(currentDomReference) && currentDomReference === useScrollLock.activeElement(useScrollLock.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -112,7 +111,7 @@ function useFocus(context, props = {}) {
     function onOpenChangeLocal(details) {
       if (details.reason === useScrollLock.triggerPress || details.reason === useScrollLock.escapeKey) {
         const referenceElement = store.select('domReferenceElement');
-        if (floatingUi_utils.isElement(referenceElement)) {
+        if (useScrollLock.isElement(referenceElement)) {
           blockedReferenceRef.current = referenceElement;
           blockFocusRef.current = true;
         }
@@ -141,7 +140,7 @@ function useFocus(context, props = {}) {
           resetBlockedFocus();
         }
         const target = useScrollLock.getTarget(event.nativeEvent);
-        if (floatingUi_utils.isElement(target)) {
+        if (useScrollLock.isElement(target)) {
           // Safari fails to match `:focus-visible` if focus was initially
           // outside the document.
           if (isMacSafari && !event.relatedTarget) {
@@ -176,7 +175,7 @@ function useFocus(context, props = {}) {
 
         // Hit the non-modal focus management portal guard. Focus will be
         // moved into the floating element immediately after.
-        const movedToFocusGuard = floatingUi_utils.isElement(relatedTarget) && relatedTarget.hasAttribute(useScrollLock.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+        const movedToFocusGuard = useScrollLock.isElement(relatedTarget) && relatedTarget.hasAttribute(useScrollLock.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
         // Wait for the window blur listener to fire.
         timeout.start(0, () => {
@@ -334,7 +333,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     if (!enabled) {
       return undefined;
     }
-    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && floatingUi_utils.isElement(domReferenceElement) && floatingElement) {
+    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && useScrollLock.isElement(domReferenceElement) && floatingElement) {
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
       const doc = useScrollLock.ownerDocument(floatingElement);
@@ -406,7 +405,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
       const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
       const relatedTarget = event.relatedTarget;
-      const isMovingIntoDescendantFloating = tree && currentNodeId && floatingUi_utils.isElement(relatedTarget) && useScrollLock.getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => useScrollLock.contains(node.context?.elements.floating, relatedTarget));
+      const isMovingIntoDescendantFloating = tree && currentNodeId && useScrollLock.isElement(relatedTarget) && useScrollLock.getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => useScrollLock.contains(node.context?.elements.floating, relatedTarget));
       if (isMovingIntoDescendantFloating) {
         return;
       }
@@ -460,7 +459,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 {
@@ -491,7 +491,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     }
 
     // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
-    if (!floatingUi_utils.isElement(target)) {
+    if (!useScrollLock.isElement(target)) {
       return false;
     }
     const targetElement = target;
@@ -555,7 +555,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
     }
     const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
-    if (!floatingUi_utils.isElement(trigger)) {
+    if (!useScrollLock.isElement(trigger)) {
       return undefined;
     }
     function onMouseEnter(event) {
@@ -575,7 +575,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       let triggerNode = currentTarget;
 
       // Wrapper/delegated mode: resolve the actual trigger from the event target.
-      if (floatingUi_utils.isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+      if (useScrollLock.isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
         for (const triggerElement of store.context.triggerElements.elements()) {
           if (useScrollLock.contains(triggerElement, eventTarget)) {
             triggerNode = triggerElement;
@@ -586,14 +586,14 @@ function useHoverReferenceInteraction(context, props = {}) {
 
       // Wrapper/delegated mode fallback: if the wrapper contains the active trigger,
       // treat this as re-entering that active trigger.
-      if (floatingUi_utils.isElement(currentTarget) && floatingUi_utils.isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && useScrollLock.contains(currentTarget, currentDomReference)) {
+      if (useScrollLock.isElement(currentTarget) && useScrollLock.isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && useScrollLock.contains(currentTarget, currentDomReference)) {
         triggerNode = currentDomReference;
       }
       const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, eventTarget);
       const isOpen = store.select('open');
       const isInClosingTransition = isClosingRef.current?.() ?? store.select('transitionStatus') === 'ending';
       const isHoverCloseTransition = !isOpen && isInClosingTransition && isHoverCloseActiveRef.current;
-      const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && floatingUi_utils.isElement(triggerNode) && floatingUi_utils.isElement(currentDomReference) && useScrollLock.contains(currentDomReference, triggerNode) && isHoverCloseTransition;
+      const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && useScrollLock.isElement(triggerNode) && useScrollLock.isElement(currentDomReference) && useScrollLock.contains(currentDomReference, triggerNode) && isHoverCloseTransition;
       const isRestOnlyDelay = restMsValue > 0 && !openDelay;
       const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
       const shouldOpen = !isOpen || isOverInactive;
@@ -662,13 +662,24 @@ function useHoverReferenceInteraction(context, props = {}) {
         closeWithDelay(event);
       }
     }
+
+    // Backup cancellation for Chrome's dropped `mouseleave` — see `guardStaleOpen`.
+    function onMouseOut(event) {
+      if (useScrollLock.contains(trigger, event.relatedTarget)) {
+        return; // moved within the trigger's own subtree
+      }
+      instance.openChangeTimeout.clear();
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+    }
+    const staleOpenGuard = guardStaleOpen ? useScrollLock.addEventListener(trigger, 'mouseout', onMouseOut) : undefined;
     if (move) {
       return useScrollLock.mergeCleanups(useScrollLock.addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      }), useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.addEventListener(trigger, 'mouseleave', onMouseLeave));
+      }), useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.addEventListener(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
     }
-    return useScrollLock.mergeCleanups(useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.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 useScrollLock.mergeCleanups(useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.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__namespace.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -848,7 +859,7 @@ function safePolygon(options = {}) {
 
       // Prevent overlapping floating element from being stuck in an open-close
       // loop: https://github.com/floating-ui/floating-ui/issues/1910
-      if (isLeave && floatingUi_utils.isElement(event.relatedTarget) && useScrollLock.contains(floating, event.relatedTarget)) {
+      if (isLeave && useScrollLock.isElement(event.relatedTarget) && useScrollLock.contains(floating, event.relatedTarget)) {
         return undefined;
       }
       function hasOpenChildNode() {
@@ -1009,11 +1020,6 @@ function useContextMenuRootContext(optional = true) {
   return context;
 }
 
-const stateAttributesMapping$1 = {
-  ...useScrollLock.popupStateMapping,
-  ...useScrollLock.transitionStatusMapping
-};
-
 /**
  * An overlay displayed beneath the menu popup.
  * Renders a `<div>` element.
@@ -1042,7 +1048,7 @@ const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackd
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,
-    stateAttributesMapping: stateAttributesMapping$1,
+    stateAttributesMapping: useScrollLock.popupTransitionStateMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -1124,8 +1130,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`).
+          useScrollLock.dispatchClickWithModifiers(itemRef.current, event, {
+            detail: 1
+          });
         }
       }
     }
@@ -1138,7 +1148,7 @@ const REGULAR_ITEM = {
 function useMenuItem(params) {
   const {
     closeOnClick,
-    disabled: disabledProp = false,
+    disabled,
     highlighted,
     id,
     store,
@@ -1147,8 +1157,6 @@ function useMenuItem(params) {
     itemMetadata,
     nodeId
   } = params;
-  const rootDisabled = store.useState('disabled');
-  const disabled = disabledProp || rootDisabled;
   const itemRef = React__namespace.useRef(null);
   const {
     getButtonProps,
@@ -1272,7 +1280,7 @@ const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGro
   useScrollLock.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
-      setLabelId(undefined);
+      setLabelId(currentId => currentId === id ? undefined : currentId);
     };
   }, [setLabelId, id]);
   return useRenderElement.useRenderElement('div', componentProps, {
@@ -1299,12 +1307,13 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     id: idProp,
     label,
     nativeButton = false,
-    disabled = false,
+    disabled: disabledProp = false,
     closeOnClick = true,
     style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1312,6 +1321,8 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
   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 {
@@ -1357,6 +1368,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   } = componentProps;
   const linkRef = React__namespace.useRef(null);
   const listItem = useCompositeListItem.useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1382,7 +1394,8 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
     nodeId,
     store,
     typingRef,
-    itemRef: linkRef
+    itemRef: linkRef,
+    itemMetadata: REGULAR_ITEM
   });
   function getItemProps(externalProps) {
     return useRenderElement.mergeProps(commonProps, externalProps, getButtonProps);
@@ -1398,17 +1411,6 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
 });
 if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
 
-const stateAttributesMapping = {
-  ...useScrollLock.popupStateMapping,
-  ...useScrollLock.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__namespace.forwardRef(function MenuPopup(componentProps, forwardedRef) {
   const {
     render,
@@ -1430,14 +1432,13 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   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');
@@ -1464,9 +1465,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
-  const setPopupElement = React__namespace.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     transitionStatus,
     side,
@@ -1478,7 +1477,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
-    stateAttributesMapping,
+    stateAttributesMapping: useScrollLock.popupTransitionStateMapping,
     props: [popupProps, {
       onKeyDown(event) {
         if (insideToolbar && scrollEdges.COMPOSITE_KEYS.has(event.key)) {
@@ -1490,7 +1489,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     }]
   });
   let returnFocus = parent.type === undefined || isContextMenu;
-  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useScrollLock.outsidePress) {
+  if (activeTriggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useScrollLock.outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
@@ -1578,13 +1577,13 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   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__namespace.useRef(null);
-  const runOnceAnimationsFinish = useScrollLock.useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = useScrollLock.useAnimationsFinished(positionerElement);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -1626,9 +1625,12 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     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 ? useCompositeListItem.adaptiveOrigin : undefined
+    adaptiveOrigin
   });
   React__namespace.useEffect(() => {
     function onMenuOpenChange(details) {
@@ -1868,6 +1870,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1882,7 +1885,8 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     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,
@@ -1904,7 +1908,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
   }), [disabled, highlighted, checked]);
   function handleClick(event) {
     const details = useScrollLock.createChangeEventDetails(useScrollLock.itemPress, event.nativeEvent, undefined, {
-      preventUnmountOnClose() {}
+      preventUnmountOnClose: useRenderElement.NOOP
     });
     setSelectedValue(value, details);
   }
@@ -1943,6 +1947,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   const indicatorRef = React__namespace.useRef(null);
   const {
     transitionStatus,
+    mounted,
     setMounted
   } = useScrollLock.useTransitionStatus(item.checked);
   useScrollLock.useOpenChangeComplete({
@@ -1968,7 +1973,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
       'aria-hidden': true,
       ...elementProps
     },
-    enabled: keepMounted || item.checked
+    enabled: keepMounted || mounted
   });
   return element;
 });
@@ -1986,36 +1991,35 @@ function useMenubarContext(optional) {
 
 const selectors = {
   ...ScrollAreaViewport.popupStoreSelectors,
-  disabled: useScrollLock.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: useScrollLock.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  openMethod: useScrollLock.createSelector(state => state.openMethod),
-  allowMouseEnter: useScrollLock.createSelector(state => state.allowMouseEnter),
-  highlightItemOnHover: useScrollLock.createSelector(state => state.highlightItemOnHover),
-  stickIfOpen: useScrollLock.createSelector(state => state.stickIfOpen),
-  parent: useScrollLock.createSelector(state => state.parent),
-  rootId: useScrollLock.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: useScrollLock.createSelector(state => state.activeIndex),
-  isActive: useScrollLock.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: useScrollLock.createSelector(state => state.hoverEnabled),
-  instantType: useScrollLock.createSelector(state => state.instantType),
-  lastOpenChangeReason: useScrollLock.createSelector(state => state.openChangeReason),
-  floatingTreeRoot: useScrollLock.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: useScrollLock.createSelector(state => state.floatingNodeId),
-  floatingParentNodeId: useScrollLock.createSelector(state => state.floatingParentNodeId),
-  itemProps: useScrollLock.createSelector(state => state.itemProps),
-  closeDelay: useScrollLock.createSelector(state => state.closeDelay),
-  hasViewport: useScrollLock.createSelector(state => state.hasViewport),
-  keyboardEventRelay: useScrollLock.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;
     }
@@ -2023,33 +2027,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 useScrollLock.ReactStore {
   constructor(initialState) {
     super({
       ...createInitialState(),
       ...initialState
-    }, {
-      positionerRef: /*#__PURE__*/React__namespace.createRef(),
-      popupRef: /*#__PURE__*/React__namespace.createRef(),
-      typingRef: {
-        current: false
-      },
-      itemDomElements: {
-        current: []
-      },
-      itemLabels: {
-        current: []
-      },
-      allowMouseUpTriggerRef: {
-        current: false
-      },
-      triggerFocusTargetRef: /*#__PURE__*/React__namespace.createRef(),
-      beforeContentFocusGuardRef: /*#__PURE__*/React__namespace.createRef(),
-      onOpenChangeComplete: undefined,
-      triggerElements: new useScrollLock.PopupTriggerMap()
-    }, selectors);
+    }, createInitialContext(), selectors);
 
     // Set up propagation of state from parent menu if applicable.
     this.unsubscribeParentListener = this.observe('parent', parent => {
@@ -2085,15 +2079,44 @@ class MenuStore extends useScrollLock.ReactStore {
       eventDetails
     });
   }
-  static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = useRenderElement.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 ScrollAreaViewport.NullStore(Object.freeze(createInitialState()), Object.freeze(createInitialContext()), selectors);
+  return Object.assign(store, {
+    setOpen: useRenderElement.NOOP
+  });
+}
+function createInitialContext() {
+  return {
+    positionerRef: /*#__PURE__*/React__namespace.createRef(),
+    popupRef: /*#__PURE__*/React__namespace.createRef(),
+    typingRef: {
+      current: false
+    },
+    itemDomElements: {
+      current: []
+    },
+    itemLabels: {
+      current: []
+    },
+    allowMouseUpTriggerRef: {
+      current: false
+    },
+    triggerFocusTargetRef: /*#__PURE__*/React__namespace.createRef(),
+    beforeContentFocusGuardRef: /*#__PURE__*/React__namespace.createRef(),
+    onOpenChangeComplete: undefined,
+    triggerElements: new useScrollLock.PopupTriggerMap()
+  };
+}
 function createInitialState() {
   return {
     ...ScrollAreaViewport.createInitialPopupStoreState(),
@@ -2102,7 +2125,6 @@ function createInitialState() {
     openMethod: null,
     allowMouseEnter: false,
     highlightItemOnHover: true,
-    stickIfOpen: true,
     parent: {
       type: undefined
     },
@@ -2117,7 +2139,7 @@ function createInitialState() {
     itemProps: useRenderElement.EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    hasViewport: false
+    adaptiveOrigin: undefined
   };
 }
 
@@ -2176,14 +2198,13 @@ const MenuRoot = useScrollLock.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
   });
-  useScrollLock.useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerIdProp);
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
@@ -2228,10 +2249,7 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
   const {
     forceUnmount
   } = useScrollLock.useOpenStateTransitions(open, store, () => {
-    store.update({
-      allowMouseEnter: false,
-      stickIfOpen: true
-    });
+    store.set('allowMouseEnter', false);
   });
   useScrollLock.useIsoLayoutEffect(() => {
     if (contextMenuContext && !parentMenuRootContext) {
@@ -2279,6 +2297,12 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
   }, [open, hoverEnabled, store]);
   const setOpen = useScrollLock.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;
     }
@@ -2311,13 +2335,17 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
       allowTouchToCloseRef.current = true;
       allowTouchToCloseTimeout.clear();
     }
-    const isKeyboardClick = (reason === useScrollLock.triggerPress || reason === useScrollLock.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 === useScrollLock.triggerPress || reason === useScrollLock.itemPress) && nativeEvent.detail === 0;
     const isDismissClose = !nextOpen && (reason === useScrollLock.escapeKey || reason == null);
     const updatedState = {
       open: nextOpen,
       openChangeReason: reason
     };
-    openEventRef.current = eventDetails.event ?? null;
+    openEventRef.current = eventDetails.event;
     useScrollLock.setPopupOpenState(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
     store.update(updatedState);
     if (parent.type === 'menubar' && (reason === useScrollLock.triggerFocus || reason === useScrollLock.focusOut || reason === useScrollLock.triggerHover || reason === useScrollLock.listNavigation || reason === useScrollLock.siblingOpen)) {
@@ -2335,7 +2363,11 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
     onOpenChange: setOpen
   });
   const floatingEvents = floatingRootContext.context.events;
-  React__namespace.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.
+  useScrollLock.useIsoLayoutEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,
       eventDetails
@@ -2464,11 +2496,14 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
     store,
     parent: parentFromContext
   }), [store, parentFromContext]);
-  const content = /*#__PURE__*/jsxRuntime.jsx(MenuRootContext.Provider, {
+  const content = /*#__PURE__*/jsxRuntime.jsxs(MenuRootContext.Provider, {
     value: context,
-    children: typeof children === 'function' ? children({
+    children: [handle && /*#__PURE__*/jsxRuntime.jsx(useScrollLock.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
@@ -2480,6 +2515,15 @@ const MenuRoot = useScrollLock.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 = useRenderElement.useRefWithInit(() => new MenuStore(initialState)).current;
+  return store;
+}
 
 /**
  * Groups all parts of a submenu.
@@ -2536,9 +2580,6 @@ function useCompositeItem(params = {}) {
   };
 }
 
-/**
- * @internal
- */
 function CompositeItem(componentProps) {
   const {
     render,
@@ -2560,20 +2601,21 @@ function CompositeItem(componentProps) {
   });
   return useRenderElement.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
   });
 }
 
 function findRootOwnerId(node) {
-  if (floatingUi_utils.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
-    return node.getAttribute('data-rootownerid') ?? undefined;
+  if (useScrollLock.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
+    return node.getAttribute('data-rootownerid');
   }
-  if (floatingUi_utils.isLastTraversableNode(node)) {
+  if (useScrollLock.isLastTraversableNode(node)) {
     return undefined;
   }
-  return findRootOwnerId(floatingUi_utils.getParentNode(node));
+  return findRootOwnerId(useScrollLock.getParentNode(node));
 }
 
 /**
@@ -2660,14 +2702,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 = useScrollLock.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
@@ -2684,7 +2718,8 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
-  const store = handle?.store ?? rootContext?.store;
+  const handleStore = ScrollAreaViewport.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.' : useRenderElement.formatErrorMessage(85));
   }
@@ -2744,8 +2779,7 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
       return;
     }
-    const bounds = useCompositeListItem.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 (useCompositeListItem.isMouseWithinBounds(mouseEvent, triggerRef.current)) {
       return;
     }
     floatingTreeRoot.events.emit('close', {
@@ -2764,7 +2798,7 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
   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
     }),
@@ -2785,7 +2819,7 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
   const click = useScrollLock.useClick(floatingRootContext, {
-    enabled: !disabled && parent.type !== 'context-menu',
+    enabled: !disabled,
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
     ignoreMouse: false,
@@ -2880,7 +2914,7 @@ function useStickIfOpen(open, openReason) {
   const stickIfOpenTimeout = useScrollLock.useTimeout();
   const [stickIfOpen, setStickIfOpen] = React__namespace.useState(false);
   useScrollLock.useIsoLayoutEffect(() => {
-    if (open && openReason === 'trigger-hover') {
+    if (open && openReason === useScrollLock.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);
@@ -2895,8 +2929,6 @@ function useStickIfOpen(open, openReason) {
   return stickIfOpen;
 }
 function useMenuParent() {
-  const contextMenuContext = useContextMenuRootContext(true);
-  const parentContext = useMenuRootContext(true);
   const menubarContext = useMenubarContext(true);
   const parent = React__namespace.useMemo(() => {
     if (menubarContext) {
@@ -2905,23 +2937,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.
@@ -2942,7 +2968,12 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
     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>.' : useRenderElement.formatErrorMessage(37));
+  }
   const listItem = useCompositeListItem.useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext();
@@ -2971,10 +3002,6 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
     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>.' : useRenderElement.formatErrorMessage(37));
-  }
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
   const rootDisabled = store.useState('disabled');
@@ -2982,7 +3009,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
   const disabled = disabledProp || rootDisabled || parentDisabled;
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useScrollLock.useIsoLayoutEffect(() => {
+    React__namespace.useEffect(() => {
       const element = triggerElementRef.current;
       if (element && SelectGroupLabel.isElementDisabled(element) && !disabled) {
         const ownerStackMessage = useScrollLock.SafeReact.captureOwnerStack?.() || '';
@@ -3030,7 +3057,10 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
     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 = useScrollLock.useClick(floatingRootContext, {
     enabled: !disabled,
@@ -3047,10 +3077,22 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
     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 === useScrollLock.listNavigation || openMethod === 'keyboard';
+  const shouldOmitExpanded = open && openedByKeyboard && useScrollLock.voiceOver;
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: useScrollLock.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() {
@@ -3077,11 +3119,11 @@ exports.MenuRadioGroup = MenuRadioGroup;
 exports.MenuRadioItem = MenuRadioItem;
 exports.MenuRadioItemIndicator = MenuRadioItemIndicator;
 exports.MenuRoot = MenuRoot;
-exports.MenuStore = MenuStore;
 exports.MenuSubmenuRoot = MenuSubmenuRoot;
 exports.MenuSubmenuTrigger = MenuSubmenuTrigger;
 exports.MenuTrigger = MenuTrigger;
 exports.REGULAR_ITEM = REGULAR_ITEM;
+exports.createNullMenuStore = createNullMenuStore;
 exports.itemMapping = itemMapping;
 exports.useMenuItem = useMenuItem;
 exports.useMenuPositionerContext = useMenuPositionerContext;