@base-ui/react 1.6.0 → 1.7.0

package/menu/store/MenuStore.js

@@ -5,44 +5,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuStore = void 0;
+exports.createNullMenuStore = createNullMenuStore;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
 var _empty = require("@base-ui/utils/empty");
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _FloatingTreeStore = require("../../floating-ui-react/components/FloatingTreeStore");
+var _NullStore = require("../../utils/NullStore");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
-  disabled: (0, _store.createSelector)(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: (0, _store.createSelector)(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  openMethod: (0, _store.createSelector)(state => state.openMethod),
-  allowMouseEnter: (0, _store.createSelector)(state => state.allowMouseEnter),
-  highlightItemOnHover: (0, _store.createSelector)(state => state.highlightItemOnHover),
-  stickIfOpen: (0, _store.createSelector)(state => state.stickIfOpen),
-  parent: (0, _store.createSelector)(state => state.parent),
-  rootId: (0, _store.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: (0, _store.createSelector)(state => state.activeIndex),
-  isActive: (0, _store.createSelector)((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: (0, _store.createSelector)(state => state.hoverEnabled),
-  instantType: (0, _store.createSelector)(state => state.instantType),
-  lastOpenChangeReason: (0, _store.createSelector)(state => state.openChangeReason),
-  floatingTreeRoot: (0, _store.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: (0, _store.createSelector)(state => state.floatingNodeId),
-  floatingParentNodeId: (0, _store.createSelector)(state => state.floatingParentNodeId),
-  itemProps: (0, _store.createSelector)(state => state.itemProps),
-  closeDelay: (0, _store.createSelector)(state => state.closeDelay),
-  hasViewport: (0, _store.createSelector)(state => state.hasViewport),
-  keyboardEventRelay: (0, _store.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;
     }
@@ -50,33 +50,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 _store.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 _popups.PopupTriggerMap()
-    }, selectors);
+    }, createInitialContext(), selectors);
 
     // Set up propagation of state from parent menu if applicable.
     this.unsubscribeParentListener = this.observe('parent', parent => {
@@ -112,16 +102,45 @@ class MenuStore extends _store.ReactStore {
       eventDetails
     });
   }
-  static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = (0, _useRefWithInit.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.
+ */
 exports.MenuStore = MenuStore;
+function createNullMenuStore() {
+  const store = new _NullStore.NullStore(Object.freeze(createInitialState()), Object.freeze(createInitialContext()), selectors);
+  return Object.assign(store, {
+    setOpen: _empty.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 _popups.PopupTriggerMap()
+  };
+}
 function createInitialState() {
   return {
     ...(0, _popups.createInitialPopupStoreState)(),
@@ -130,7 +149,6 @@ function createInitialState() {
     openMethod: null,
     allowMouseEnter: false,
     highlightItemOnHover: true,
-    stickIfOpen: true,
     parent: {
       type: undefined
     },
@@ -145,6 +163,6 @@ function createInitialState() {
     itemProps: _empty.EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    hasViewport: false
+    adaptiveOrigin: undefined
   };
 }

package/menu/store/MenuStore.mjs

@@ -1,41 +1,40 @@
 import * as React from 'react';
-import { createSelector, ReactStore } from '@base-ui/utils/store';
-import { EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import { ReactStore } from '@base-ui/utils/store';
+import { EMPTY_OBJECT, NOOP } from '@base-ui/utils/empty';
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.mjs";
+import { NullStore } from "../../utils/NullStore.mjs";
 import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.mjs";
 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;
     }
@@ -43,33 +42,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.
+ */
+
 export 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 => {
@@ -105,15 +94,44 @@ export 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.
+ */
+export 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(),
@@ -122,7 +140,6 @@ function createInitialState() {
     openMethod: null,
     allowMouseEnter: false,
     highlightItemOnHover: true,
-    stickIfOpen: true,
     parent: {
       type: undefined
     },
@@ -137,6 +154,6 @@ function createInitialState() {
     itemProps: EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    hasViewport: false
+    adaptiveOrigin: undefined
   };
 }

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -10,10 +10,10 @@ exports.MenuSubmenuTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _warn = require("@base-ui/utils/warn");
 var _safeReact = require("@base-ui/utils/safeReact");
 var _empty = require("@base-ui/utils/empty");
+var _platform = require("@base-ui/utils/platform");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -24,6 +24,11 @@ var _useRenderElement = require("../../internals/useRenderElement");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 var _popups = require("../../utils/popups");
 var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
+var _reasons = require("../../internals/reasons");
+const VOICE_OVER_EXPANDED_PROPS = {
+  'aria-expanded': undefined
+};
+
 /**
  * A menu item that opens a submenu.
  * Renders a `<div>` element.
@@ -44,7 +49,12 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
+  const submenuRootContext = (0, _MenuSubmenuRootContext.useMenuSubmenuRootContext)();
+  if (!submenuRootContext?.parentMenu) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : (0, _formatErrorMessage2.default)(37));
+  }
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
+    guess: true,
     label
   });
   const menuPositionerContext = (0, _MenuPositionerContext.useMenuPositionerContext)();
@@ -73,10 +83,6 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
-  const submenuRootContext = (0, _MenuSubmenuRootContext.useMenuSubmenuRootContext)();
-  if (!submenuRootContext?.parentMenu) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : (0, _formatErrorMessage2.default)(37));
-  }
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
   const rootDisabled = store.useState('disabled');
@@ -84,7 +90,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const disabled = disabledProp || rootDisabled || parentDisabled;
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    React.useEffect(() => {
       const element = triggerElementRef.current;
       if (element && (0, _isElementDisabled.isElementDisabled)(element) && !disabled) {
         const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
@@ -132,7 +138,10 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     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 = (0, _floatingUiReact.useClick)(floatingRootContext, {
     enabled: !disabled,
@@ -149,10 +158,22 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     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 === _reasons.REASONS.listNavigation || openMethod === 'keyboard';
+  const shouldOmitExpanded = open && openedByKeyboard && _platform.platform.screenReader.voiceOver;
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _popupStateMapping.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() {

package/menu/submenu-trigger/MenuSubmenuTrigger.mjs

@@ -3,10 +3,10 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { isElementDisabled } from '@base-ui/utils/isElementDisabled';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui/utils/warn';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { platform } from '@base-ui/utils/platform';
 import { safePolygon, useClick, useHoverReferenceInteraction } from "../../floating-ui-react/index.mjs";
 import { useMenuRootContext } from "../root/MenuRootContext.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
@@ -17,6 +17,10 @@ import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.mjs";
 import { useTriggerRegistration } from "../../utils/popups/index.mjs";
 import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContext.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
+const VOICE_OVER_EXPANDED_PROPS = {
+  'aria-expanded': undefined
+};
 
 /**
  * A menu item that opens a submenu.
@@ -38,7 +42,12 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSub
     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();
@@ -67,10 +76,6 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSub
     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');
@@ -78,7 +83,7 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSub
   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?.() || '';
@@ -126,7 +131,10 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSub
     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,
@@ -143,10 +151,22 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSub
     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 === REASONS.listNavigation || openMethod === 'keyboard';
+  const shouldOmitExpanded = open && openedByKeyboard && platform.screenReader.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() {

package/menu/trigger/MenuTrigger.js

@@ -31,14 +31,11 @@ var _useTriggerFocusGuards = require("../../utils/popups/useTriggerFocusGuards")
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _reasons = require("../../internals/reasons");
 var _useMixedToggleClickHandler = require("../../utils/useMixedToggleClickHandler");
-var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _MenubarContext = require("../../menubar/MenubarContext");
 var _constants = require("../../internals/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
-const BOUNDARY_OFFSET = 2;
-
 /**
  * A button that opens the menu.
  * Renders a `<button>` element.
@@ -61,7 +58,8 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     ...elementProps
   } = componentProps;
   const rootContext = (0, _MenuRootContext.useMenuRootContext)(true);
-  const store = handle?.store ?? rootContext?.store;
+  const handleStore = (0, _popups.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.' : (0, _formatErrorMessage2.default)(85));
   }
@@ -121,8 +119,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     if (mouseUpTarget != null && (0, _findRootOwnerId.findRootOwnerId)(mouseUpTarget) === store.select('rootId')) {
       return;
     }
-    const bounds = (0, _getPseudoElementBounds.getPseudoElementBounds)(triggerRef.current);
-    if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+    if ((0, _getPseudoElementBounds.isMouseWithinBounds)(mouseEvent, triggerRef.current)) {
       return;
     }
     floatingTreeRoot.events.emit('close', {
@@ -141,7 +138,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   const parentMenubarHasSubmenuOpen = isInMenubar && parent.context.hasSubmenuOpen;
   const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen;
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingRootContext, {
-    enabled: openOnHover && !disabled && parent.type !== 'context-menu' && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+    enabled: openOnHover && !disabled && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
     handleClose: (0, _floatingUiReact.safePolygon)({
       blockPointerEvents: !isInMenubar
     }),
@@ -162,7 +159,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
   const click = (0, _floatingUiReact.useClick)(floatingRootContext, {
-    enabled: !disabled && parent.type !== 'context-menu',
+    enabled: !disabled,
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
     ignoreMouse: false,
@@ -257,7 +254,7 @@ function useStickIfOpen(open, openReason) {
   const stickIfOpenTimeout = (0, _useTimeout.useTimeout)();
   const [stickIfOpen, setStickIfOpen] = React.useState(false);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (open && openReason === 'trigger-hover') {
+    if (open && openReason === _reasons.REASONS.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);
@@ -272,8 +269,6 @@ function useStickIfOpen(open, openReason) {
   return stickIfOpen;
 }
 function useMenuParent() {
-  const contextMenuContext = (0, _ContextMenuRootContext.useContextMenuRootContext)(true);
-  const parentContext = (0, _MenuRootContext.useMenuRootContext)(true);
   const menubarContext = (0, _MenubarContext.useMenubarContext)(true);
   const parent = React.useMemo(() => {
     if (menubarContext) {
@@ -282,19 +277,9 @@ 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;
 }