@jobber/components 9.6.0 → 9.6.2

package/dist/MenuSubmenuTrigger-cjs.js

@@ -7,6 +7,7 @@ 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');
 
@@ -85,14 +86,14 @@ function useFocus(context, props = {}) {
     if (!enabled) {
       return undefined;
     }
-    const win = useScrollLock.getWindow(domReference);
+    const win = floatingUi_utils.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') && useScrollLock.isHTMLElement(currentDomReference) && currentDomReference === useScrollLock.activeElement(useScrollLock.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && floatingUi_utils.isHTMLElement(currentDomReference) && currentDomReference === useScrollLock.activeElement(useScrollLock.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -111,7 +112,7 @@ function useFocus(context, props = {}) {
     function onOpenChangeLocal(details) {
       if (details.reason === useScrollLock.triggerPress || details.reason === useScrollLock.escapeKey) {
         const referenceElement = store.select('domReferenceElement');
-        if (useScrollLock.isElement(referenceElement)) {
+        if (floatingUi_utils.isElement(referenceElement)) {
           blockedReferenceRef.current = referenceElement;
           blockFocusRef.current = true;
         }
@@ -140,7 +141,7 @@ function useFocus(context, props = {}) {
           resetBlockedFocus();
         }
         const target = useScrollLock.getTarget(event.nativeEvent);
-        if (useScrollLock.isElement(target)) {
+        if (floatingUi_utils.isElement(target)) {
           // Safari fails to match `:focus-visible` if focus was initially
           // outside the document.
           if (isMacSafari && !event.relatedTarget) {
@@ -175,7 +176,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 = useScrollLock.isElement(relatedTarget) && relatedTarget.hasAttribute(useScrollLock.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+        const movedToFocusGuard = floatingUi_utils.isElement(relatedTarget) && relatedTarget.hasAttribute(useScrollLock.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
         // Wait for the window blur listener to fire.
         timeout.start(0, () => {
@@ -333,7 +334,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     if (!enabled) {
       return undefined;
     }
-    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && useScrollLock.isElement(domReferenceElement) && floatingElement) {
+    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && floatingUi_utils.isElement(domReferenceElement) && floatingElement) {
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
       const doc = useScrollLock.ownerDocument(floatingElement);
@@ -405,7 +406,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
       const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
       const relatedTarget = event.relatedTarget;
-      const isMovingIntoDescendantFloating = tree && currentNodeId && useScrollLock.isElement(relatedTarget) && useScrollLock.getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => useScrollLock.contains(node.context?.elements.floating, 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));
       if (isMovingIntoDescendantFloating) {
         return;
       }
@@ -459,8 +460,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext,
     isClosing,
-    shouldOpen: shouldOpenProp,
-    guardStaleOpen = false
+    shouldOpen: shouldOpenProp
   } = 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 (!useScrollLock.isElement(target)) {
+    if (!floatingUi_utils.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 (!useScrollLock.isElement(trigger)) {
+    if (!floatingUi_utils.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 (useScrollLock.isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+      if (floatingUi_utils.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 (useScrollLock.isElement(currentTarget) && useScrollLock.isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && useScrollLock.contains(currentTarget, currentDomReference)) {
+      if (floatingUi_utils.isElement(currentTarget) && floatingUi_utils.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 && useScrollLock.isElement(triggerNode) && useScrollLock.isElement(currentDomReference) && useScrollLock.contains(currentDomReference, triggerNode) && isHoverCloseTransition;
+      const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && floatingUi_utils.isElement(triggerNode) && floatingUi_utils.isElement(currentDomReference) && useScrollLock.contains(currentDomReference, triggerNode) && isHoverCloseTransition;
       const isRestOnlyDelay = restMsValue > 0 && !openDelay;
       const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
       const shouldOpen = !isOpen || isOverInactive;
@@ -662,24 +662,13 @@ 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), staleOpenGuard);
+      }), useScrollLock.addEventListener(trigger, 'mouseenter', onMouseEnter), useScrollLock.addEventListener(trigger, 'mouseleave', onMouseLeave));
     }
-    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 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 React__namespace.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -859,7 +848,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 && useScrollLock.isElement(event.relatedTarget) && useScrollLock.contains(floating, event.relatedTarget)) {
+      if (isLeave && floatingUi_utils.isElement(event.relatedTarget) && useScrollLock.contains(floating, event.relatedTarget)) {
         return undefined;
       }
       function hasOpenChildNode() {
@@ -1020,6 +1009,11 @@ function useContextMenuRootContext(optional = true) {
   return context;
 }
 
+const stateAttributesMapping$1 = {
+  ...useScrollLock.popupStateMapping,
+  ...useScrollLock.transitionStatusMapping
+};
+
 /**
  * An overlay displayed beneath the menu popup.
  * Renders a `<div>` element.
@@ -1048,7 +1042,7 @@ const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackd
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,
-    stateAttributesMapping: useScrollLock.popupTransitionStateMapping,
+    stateAttributesMapping: stateAttributesMapping$1,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -1130,12 +1124,8 @@ 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.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
-          });
+        if (!itemMetadata || itemMetadata.type === 'regular-item') {
+          itemRef.current.click();
         }
       }
     }
@@ -1148,7 +1138,7 @@ const REGULAR_ITEM = {
 function useMenuItem(params) {
   const {
     closeOnClick,
-    disabled,
+    disabled: disabledProp = false,
     highlighted,
     id,
     store,
@@ -1157,6 +1147,8 @@ function useMenuItem(params) {
     itemMetadata,
     nodeId
   } = params;
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || rootDisabled;
   const itemRef = React__namespace.useRef(null);
   const {
     getButtonProps,
@@ -1280,7 +1272,7 @@ const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGro
   useScrollLock.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
-      setLabelId(currentId => currentId === id ? undefined : currentId);
+      setLabelId(undefined);
     };
   }, [setLabelId, id]);
   return useRenderElement.useRenderElement('div', componentProps, {
@@ -1307,13 +1299,12 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     id: idProp,
     label,
     nativeButton = false,
-    disabled: disabledProp = false,
+    disabled = false,
     closeOnClick = true,
     style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
-    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1321,8 +1312,6 @@ 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 {
@@ -1368,7 +1357,6 @@ 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);
@@ -1394,8 +1382,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
     nodeId,
     store,
     typingRef,
-    itemRef: linkRef,
-    itemMetadata: REGULAR_ITEM
+    itemRef: linkRef
   });
   function getItemProps(externalProps) {
     return useRenderElement.mergeProps(commonProps, externalProps, getButtonProps);
@@ -1411,6 +1398,17 @@ 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,
@@ -1432,13 +1430,14 @@ 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 activeTriggerElement = store.useState('activeTriggerElement');
+  const triggerElement = 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');
@@ -1465,7 +1464,9 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
-  const setPopupElement = store.useStateSetter('popupElement');
+  const setPopupElement = React__namespace.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     transitionStatus,
     side,
@@ -1477,7 +1478,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
-    stateAttributesMapping: useScrollLock.popupTransitionStateMapping,
+    stateAttributesMapping,
     props: [popupProps, {
       onKeyDown(event) {
         if (insideToolbar && scrollEdges.COMPOSITE_KEYS.has(event.key)) {
@@ -1489,7 +1490,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     }]
   });
   let returnFocus = parent.type === undefined || isContextMenu;
-  if (activeTriggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useScrollLock.outsidePress) {
+  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useScrollLock.outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
@@ -1577,13 +1578,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 adaptiveOrigin = store.useState('adaptiveOrigin');
+  const hasViewport = store.useState('hasViewport');
   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);
+  const runOnceAnimationsFinish = useScrollLock.useAnimationsFinished(positionerElement, false, false);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -1625,12 +1626,9 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shift: contextMenu ? {
-      crossAxis: !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
-      rootBoundary: 'layoutViewport'
-    } : undefined,
+    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
     externalTree: floatingTreeRoot,
-    adaptiveOrigin
+    adaptiveOrigin: hasViewport ? useCompositeListItem.adaptiveOrigin : undefined
   });
   React__namespace.useEffect(() => {
     function onMenuOpenChange(details) {
@@ -1870,7 +1868,6 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
-    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1885,8 +1882,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     setValue: setSelectedValue,
     disabled: groupDisabled
   } = useMenuRadioGroupContext();
-  const rootDisabled = store.useState('disabled');
-  const disabled = disabledProp || groupDisabled || rootDisabled;
+  const disabled = groupDisabled || disabledProp;
   const checked = selectedValue === value;
   const {
     getItemProps,
@@ -1908,7 +1904,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: useRenderElement.NOOP
+      preventUnmountOnClose() {}
     });
     setSelectedValue(value, details);
   }
@@ -1947,7 +1943,6 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   const indicatorRef = React__namespace.useRef(null);
   const {
     transitionStatus,
-    mounted,
     setMounted
   } = useScrollLock.useTransitionStatus(item.checked);
   useScrollLock.useOpenChangeComplete({
@@ -1973,7 +1968,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
       'aria-hidden': true,
       ...elementProps
     },
-    enabled: keepMounted || mounted
+    enabled: keepMounted || item.checked
   });
   return element;
 });
@@ -1991,35 +1986,36 @@ function useMenubarContext(optional) {
 
 const selectors = {
   ...ScrollAreaViewport.popupStoreSelectors,
-  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 => {
+  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 => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('rootId');
     }
     return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
-  },
-  activeIndex: state => state.activeIndex,
-  isActive: (state, itemIndex) => state.activeIndex === itemIndex,
-  hoverEnabled: state => state.hoverEnabled,
-  instantType: state => state.instantType,
-  lastOpenChangeReason: state => state.openChangeReason,
-  floatingTreeRoot: state => {
+  }),
+  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 => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('floatingTreeRoot');
     }
     return state.floatingTreeRoot;
-  },
-  floatingNodeId: state => state.floatingNodeId,
-  floatingParentNodeId: state => state.floatingParentNodeId,
-  itemProps: state => state.itemProps,
-  closeDelay: state => state.closeDelay,
-  adaptiveOrigin: state => state.adaptiveOrigin,
-  keyboardEventRelay: state => {
+  }),
+  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 => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
     }
@@ -2027,23 +2023,33 @@ 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
-    }, createInitialContext(), selectors);
+    }, {
+      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);
 
     // Set up propagation of state from parent menu if applicable.
     this.unsubscribeParentListener = this.observe('parent', parent => {
@@ -2079,44 +2085,15 @@ 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(),
@@ -2125,6 +2102,7 @@ function createInitialState() {
     openMethod: null,
     allowMouseEnter: false,
     highlightItemOnHover: true,
+    stickIfOpen: true,
     parent: {
       type: undefined
     },
@@ -2139,7 +2117,7 @@ function createInitialState() {
     itemProps: useRenderElement.EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    adaptiveOrigin: undefined
+    hasViewport: false
   };
 }
 
@@ -2198,13 +2176,14 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
       type: undefined
     };
   }, [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu]);
-  const store = useMenuRootStore({
+  const store = MenuStore.useStore(handle?.store, {
     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);
@@ -2249,7 +2228,10 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
   const {
     forceUnmount
   } = useScrollLock.useOpenStateTransitions(open, store, () => {
-    store.set('allowMouseEnter', false);
+    store.update({
+      allowMouseEnter: false,
+      stickIfOpen: true
+    });
   });
   useScrollLock.useIsoLayoutEffect(() => {
     if (contextMenuContext && !parentMenuRootContext) {
@@ -2297,12 +2279,6 @@ 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;
     }
@@ -2335,17 +2311,13 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
       allowTouchToCloseRef.current = true;
       allowTouchToCloseTimeout.clear();
     }
-
-    // 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 isKeyboardClick = (reason === useScrollLock.triggerPress || reason === useScrollLock.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
     const isDismissClose = !nextOpen && (reason === useScrollLock.escapeKey || reason == null);
     const updatedState = {
       open: nextOpen,
       openChangeReason: reason
     };
-    openEventRef.current = eventDetails.event;
+    openEventRef.current = eventDetails.event ?? null;
     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)) {
@@ -2363,11 +2335,7 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
     onOpenChange: setOpen
   });
   const floatingEvents = floatingRootContext.context.events;
-
-  // 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(() => {
+  React__namespace.useEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,
       eventDetails
@@ -2496,14 +2464,11 @@ const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
     store,
     parent: parentFromContext
   }), [store, parentFromContext]);
-  const content = /*#__PURE__*/jsxRuntime.jsxs(MenuRootContext.Provider, {
+  const content = /*#__PURE__*/jsxRuntime.jsx(MenuRootContext.Provider, {
     value: context,
-    children: [handle && /*#__PURE__*/jsxRuntime.jsx(useScrollLock.PopupHandleAttachment, {
-      handle: handle,
-      store: store
-    }), typeof children === 'function' ? children({
+    children: 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
@@ -2515,15 +2480,6 @@ 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.
@@ -2580,6 +2536,9 @@ function useCompositeItem(params = {}) {
   };
 }
 
+/**
+ * @internal
+ */
 function CompositeItem(componentProps) {
   const {
     render,
@@ -2601,21 +2560,20 @@ function CompositeItem(componentProps) {
   });
   return useRenderElement.useRenderElement(tag, componentProps, {
     state,
-    // The composite ref attaches first so an outer item wins when nested items share a DOM node.
-    ref: [compositeRef, ...refs],
+    ref: [...refs, compositeRef],
     props: [compositeProps, ...props, elementProps],
     stateAttributesMapping
   });
 }
 
 function findRootOwnerId(node) {
-  if (useScrollLock.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
-    return node.getAttribute('data-rootownerid');
+  if (floatingUi_utils.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
+    return node.getAttribute('data-rootownerid') ?? undefined;
   }
-  if (useScrollLock.isLastTraversableNode(node)) {
+  if (floatingUi_utils.isLastTraversableNode(node)) {
     return undefined;
   }
-  return findRootOwnerId(useScrollLock.getParentNode(node));
+  return findRootOwnerId(floatingUi_utils.getParentNode(node));
 }
 
 /**
@@ -2702,6 +2660,14 @@ 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,
@@ -2718,8 +2684,7 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
-  const handleStore = ScrollAreaViewport.usePopupHandleStore(handle);
-  const store = handleStore ?? rootContext?.store;
+  const store = handle?.store ?? 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));
   }
@@ -2779,7 +2744,8 @@ const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componen
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
       return;
     }
-    if (useCompositeListItem.isMouseWithinBounds(mouseEvent, triggerRef.current)) {
+    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) {
       return;
     }
     floatingTreeRoot.events.emit('close', {
@@ -2798,7 +2764,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 && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+    enabled: openOnHover && !disabled && parent.type !== 'context-menu' && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
     handleClose: safePolygon({
       blockPointerEvents: !isInMenubar
     }),
@@ -2819,7 +2785,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,
+    enabled: !disabled && parent.type !== 'context-menu',
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
     ignoreMouse: false,
@@ -2914,7 +2880,7 @@ function useStickIfOpen(open, openReason) {
   const stickIfOpenTimeout = useScrollLock.useTimeout();
   const [stickIfOpen, setStickIfOpen] = React__namespace.useState(false);
   useScrollLock.useIsoLayoutEffect(() => {
-    if (open && openReason === useScrollLock.triggerHover) {
+    if (open && openReason === 'trigger-hover') {
       // 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);
@@ -2929,6 +2895,8 @@ 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) {
@@ -2937,17 +2905,23 @@ 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
     };
-  }, [menubarContext]);
+  }, [contextMenuContext, parentContext, menubarContext]);
   return parent;
 }
 
-const VOICE_OVER_EXPANDED_PROPS = {
-  'aria-expanded': undefined
-};
-
 /**
  * A menu item that opens a submenu.
  * Renders a `<div>` element.
@@ -2968,12 +2942,7 @@ 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();
@@ -3002,6 +2971,10 @@ 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');
@@ -3009,7 +2982,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
-    React__namespace.useEffect(() => {
+    useScrollLock.useIsoLayoutEffect(() => {
       const element = triggerElementRef.current;
       if (element && SelectGroupLabel.isElementDisabled(element) && !disabled) {
         const ownerStackMessage = useScrollLock.SafeReact.captureOwnerStack?.() || '';
@@ -3057,10 +3030,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Men
     shouldOpen: delay > 0 ? () => parentMenuStore.select('allowMouseEnter') : undefined,
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    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
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = useScrollLock.useClick(floatingRootContext, {
     enabled: !disabled,
@@ -3077,22 +3047,10 @@ 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,
-    // 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, {
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
       'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
@@ -3119,11 +3077,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;