@base-ui/react 1.4.0 → 1.5.0

package/menu/item/MenuItem.js

@@ -9,9 +9,9 @@ exports.MenuItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useMenuItem = require("./useMenuItem");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 /**
  * An individual interactive item in the menu.

package/menu/item/useMenuItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../internals/types.js";
 import { MenuStore } from "../store/MenuStore.js";
 export declare const REGULAR_ITEM: {
   type: "regular-item";

package/menu/item/useMenuItem.js

@@ -9,7 +9,7 @@ exports.REGULAR_ITEM = void 0;
 exports.useMenuItem = useMenuItem;
 var React = _interopRequireWildcard(require("react"));
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
-var _useButton = require("../../use-button");
+var _useButton = require("../../internals/use-button");
 var _mergeProps = require("../../merge-props");
 var _useMenuItemCommonProps = require("./useMenuItemCommonProps");
 const REGULAR_ITEM = exports.REGULAR_ITEM = {

package/menu/item/useMenuItemCommonProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../internals/types.js";
 import { MenuStore } from "../store/MenuStore.js";
 import type { UseMenuItemMetadata } from "./useMenuItem.js";
 export interface UseMenuItemCommonPropsParameters {

package/menu/item/useMenuItemCommonProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMenuItemCommonProps = useMenuItemCommonProps;
 var React = _interopRequireWildcard(require("react"));
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
-var _reasons = require("../../utils/reasons");
+var _reasons = require("../../internals/reasons");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 /**
  * Returns common props shared by all menu item types.

package/menu/link-item/MenuLinkItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A link in the menu that can be used to navigate to a different page or section.
  * Renders an `<a>` element.

package/menu/link-item/MenuLinkItem.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuLinkItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _MenuRootContext = require("../root/MenuRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 var _useMenuItemCommonProps = require("../item/useMenuItemCommonProps");
-var _useButton = require("../../use-button");
+var _useButton = require("../../internals/use-button");
 var _mergeProps = require("../../merge-props");
 /**
  * A link in the menu that can be used to navigate to a different page or section.
@@ -63,9 +63,9 @@ const MenuLinkItem = exports.MenuLinkItem = /*#__PURE__*/React.forwardRef(functi
   function getItemProps(externalProps) {
     return (0, _mergeProps.mergeProps)(commonProps, externalProps, getButtonProps);
   }
-  const state = React.useMemo(() => ({
+  const state = {
     highlighted
-  }), [highlighted]);
+  };
   return (0, _useRenderElement.useRenderElement)('a', componentProps, {
     state,
     props: [itemProps, elementProps, getItemProps],

package/menu/popup/MenuPopup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the menu items.
  * Renders a `<div>` element.

package/menu/popup/MenuPopup.js

@@ -10,14 +10,14 @@ var React = _interopRequireWildcard(require("react"));
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
-var _composite = require("../../composite/composite");
+var _composite = require("../../internals/composite/composite");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
@@ -60,6 +60,8 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
   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 isContextMenu = parent.type === 'context-menu';
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
@@ -79,12 +81,13 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
       floatingTreeRoot.events.off('close', handleClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const hoverEnabled = store.useState('hoverEnabled');
-  const disabled = store.useState('disabled');
   (0, _floatingUiReact.useHoverFloatingInteraction)(floatingContext, {
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
+  const setPopupElement = React.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     transitionStatus,
     side,
@@ -93,9 +96,6 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],

package/menu/positioner/MenuPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the menu popup against the trigger.
  * Renders a `<div>` element.

package/menu/positioner/MenuPositioner.js

@@ -14,15 +14,15 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _MenuPositionerContext = require("./MenuPositionerContext");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _CompositeList = require("../../composite/list/CompositeList");
+var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _MenuPortalContext = require("../portal/MenuPortalContext");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
 var _usePositioner = require("../../utils/usePositioner");
 var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");

package/menu/radio-group/MenuRadioGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { MenuRoot } from "../root/MenuRoot.js";
 /**
  * Groups related radio items.

package/menu/radio-group/MenuRadioGroup.js

@@ -10,7 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _MenuRadioGroupContext = require("./MenuRadioGroupContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _MenuGroupContext = require("../group/MenuGroupContext");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups related radio items.
@@ -27,16 +28,17 @@ const MenuRadioGroup = exports.MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PUR
     onValueChange: onValueChangeProp,
     disabled = false,
     style,
+    'aria-labelledby': ariaLabelledByProp,
     ...elementProps
   } = componentProps;
+  const [labelId, setLabelId] = React.useState(undefined);
   const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = (0, _useStableCallback.useStableCallback)(onValueChangeProp);
   const setValue = (0, _useStableCallback.useStableCallback)((newValue, eventDetails) => {
-    onValueChange?.(newValue, eventDetails);
+    onValueChangeProp?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -50,6 +52,7 @@ const MenuRadioGroup = exports.MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PUR
     ref: forwardedRef,
     props: {
       role: 'group',
+      'aria-labelledby': ariaLabelledByProp ?? labelId,
       'aria-disabled': disabled || undefined,
       ...elementProps
     }
@@ -59,9 +62,12 @@ const MenuRadioGroup = exports.MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PUR
     setValue,
     disabled
   }), [value, setValue, disabled]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioGroupContext.MenuRadioGroupContext.Provider, {
-    value: context,
-    children: element
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuGroupContext.MenuGroupContext.Provider, {
+    value: setLabelId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioGroupContext.MenuRadioGroupContext.Provider, {
+      value: context,
+      children: element
+    })
   });
 }));
 if (process.env.NODE_ENV !== "production") MenuRadioGroup.displayName = "MenuRadioGroup";

package/menu/radio-item/MenuRadioItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 /**
  * A menu item that works like a radio button in a given group.
  * Renders a `<div>` element.

package/menu/radio-item/MenuRadioItem.js

@@ -7,18 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuRadioItem = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _MenuRadioGroupContext = require("../radio-group/MenuRadioGroupContext");
 var _MenuRadioItemContext = require("./MenuRadioItemContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _useMenuItem = require("../item/useMenuItem");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A menu item that works like a radio button in a given group.
@@ -74,13 +73,12 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = (0, _useStableCallback.useStableCallback)(event => {
-    const details = {
-      ...(0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     setSelectedValue(value, details);
-  });
+  }
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _stateAttributesMapping.itemMapping,

package/menu/radio-item-indicator/MenuRadioItemIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
-import { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
+import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Indicates whether the radio item is selected.
  * Renders a `<span>` element.

package/menu/radio-item-indicator/MenuRadioItemIndicator.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuRadioItemIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _MenuRadioItemContext = require("../radio-item/MenuRadioItemContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 /**
  * Indicates whether the radio item is selected.
  * Renders a `<span>` element.

package/menu/radio-item-indicator/MenuRadioItemIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuRadioItemIndicatorDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let MenuRadioItemIndicatorDataAttributes = exports.MenuRadioItemIndicatorDataAttributes = function (MenuRadioItemIndicatorDataAttributes) {
   /**
    * Present when the menu radio item is selected.

package/menu/root/MenuRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { MenuRootContext } from "./MenuRootContext.js";
 import { MenubarContext } from "../../menubar/MenubarContext.js";
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { ContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { MenuStore } from "../store/MenuStore.js";
 import { MenuHandle } from "../store/MenuHandle.js";

package/menu/root/MenuRoot.js

@@ -17,11 +17,11 @@ var _fastHooks = require("@base-ui/utils/fastHooks");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("./MenuRootContext");
 var _MenubarContext = require("../../menubar/MenubarContext");
-var _constants = require("../../utils/constants");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _constants = require("../../internals/constants");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _mergeProps = require("../../merge-props");
 var _MenuStore = require("../store/MenuStore");
@@ -103,28 +103,11 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const rootId = (0, _useId.useId)();
+  const floatingId = (0, _useId.useId)();
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = (0, _floatingUiReact.useFloatingNodeId)(floatingTreeRoot);
   const floatingParentNodeIdFromContext = (0, _floatingUiReact.useFloatingParentNodeId)();
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (contextMenuContext && !parentMenuRootContext) {
-      // This is a context menu root.
-      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
-      store.update({
-        parent: {
-          type: 'context-menu',
-          context: contextMenuContext
-        },
-        floatingNodeId: floatingNodeIdFromContext,
-        floatingParentNodeId: floatingParentNodeIdFromContext
-      });
-    } else if (parentMenuRootContext) {
-      store.update({
-        floatingNodeId: floatingNodeIdFromContext,
-        floatingParentNodeId: floatingParentNodeIdFromContext
-      });
-    }
-  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
   const open = store.useState('open');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
@@ -136,6 +119,10 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   const payload = store.useState('payload');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const openEventRef = React.useRef(null);
+  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
+  const allowOutsidePressDismissalTimeout = (0, _useTimeout.useTimeout)();
+  const allowTouchToCloseRef = React.useRef(true);
+  const allowTouchToCloseTimeout = (0, _useTimeout.useTimeout)();
   const nested = floatingParentNodeId != null;
   if (process.env.NODE_ENV !== 'production') {
     if (parent.type !== undefined && modalProp !== undefined) {
@@ -150,7 +137,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
     openMethod,
-    rootId: (0, _useId.useId)()
+    rootId
   });
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
@@ -161,8 +148,25 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       stickIfOpen: true
     });
   });
-  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = (0, _useTimeout.useTimeout)();
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (contextMenuContext && !parentMenuRootContext) {
+      // This is a context menu root.
+      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
+      store.update({
+        parent: {
+          type: 'context-menu',
+          context: contextMenuContext
+        },
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    } else if (parentMenuRootContext) {
+      store.update({
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    }
+  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
   React.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -188,8 +192,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
-  const allowTouchToCloseRef = React.useRef(true);
-  const allowTouchToCloseTimeout = (0, _useTimeout.useTimeout)();
   const setOpen = (0, _useStableCallback.useStableCallback)((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
@@ -263,30 +265,10 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       store.set('instantType', undefined);
     }
   });
-  const createMenuEventDetails = React.useCallback(reason => {
-    const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  }, [store]);
-  const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createMenuEventDetails(_reasons.REASONS.imperativeAction));
-  }, [store, createMenuEventDetails]);
-  React.useImperativeHandle(actionsRef, () => ({
-    unmount: forceUnmount,
-    close: handleImperativeClose
-  }), [forceUnmount, handleImperativeClose]);
-  let ctx;
-  if (parent.type === 'context-menu') {
-    ctx = parent.context;
-  }
-  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
-  React.useImperativeHandle(ctx?.actionsRef, () => ({
-    setOpen
-  }), [setOpen]);
   const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
     popupStore: store,
+    floatingId,
+    nested: floatingParentNodeIdFromContext != null,
     onOpenChange: setOpen
   });
   const floatingEvents = floatingRootContext.context.events;
@@ -300,6 +282,21 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
   }, [floatingEvents, setOpen]);
+  const handleImperativeClose = React.useCallback(() => {
+    store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.imperativeAction));
+  }, [store]);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  let ctx;
+  if (parent.type === 'context-menu') {
+    ctx = parent.context;
+  }
+  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
+  React.useImperativeHandle(ctx?.actionsRef, () => ({
+    setOpen
+  }), [setOpen]);
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
@@ -313,9 +310,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     },
     externalTree: nested ? floatingTreeRoot : undefined
   });
-  const role = (0, _floatingUiReact.useRole)(floatingRootContext, {
-    role: 'menu'
-  });
   const direction = (0, _DirectionContext.useDirection)();
   const setActiveIndex = React.useCallback(index => {
     if (store.select('activeIndex') === index) {
@@ -338,7 +332,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     externalTree: nested ? floatingTreeRoot : undefined,
     focusItemOnHover: highlightItemOnHover
   });
-  const onTypingChange = React.useCallback(nextTyping => {
+  const onTyping = React.useCallback(nextTyping => {
     store.context.typingRef.current = nextTyping;
   }, [store]);
   const typeahead = (0, _floatingUiReact.useTypeahead)(floatingRootContext, {
@@ -351,34 +345,28 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
         store.set('activeIndex', index);
       }
     },
-    onTypingChange
+    onTyping
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps,
-    getTriggerProps
-  } = (0, _floatingUiReact.useInteractions)([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React.useMemo(() => {
-    const mergedProps = (0, _mergeProps.mergeProps)(getReferenceProps(), {
+    const mergedProps = (0, _mergeProps.mergeProps)(typeahead.reference, listNavigation.reference, dismiss.reference, {
       onMouseMove() {
         store.set('allowMouseEnter', true);
       }
     }, interactionTypeProps);
-    delete mergedProps.role;
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = open;
     return mergedProps;
-  }, [getReferenceProps, store, interactionTypeProps]);
+  }, [store, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, open]);
   const inactiveTriggerProps = React.useMemo(() => {
-    const triggerProps = getTriggerProps();
-    if (!triggerProps) {
-      return triggerProps;
-    }
-    const mergedProps = (0, _mergeProps.mergeProps)(triggerProps, interactionTypeProps);
-    delete mergedProps.role;
-    delete mergedProps['aria-controls'];
+    const mergedProps = (0, _mergeProps.mergeProps)(listNavigation.trigger, dismiss.trigger, interactionTypeProps);
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = false;
     return mergedProps;
-  }, [getTriggerProps, interactionTypeProps]);
-  const popupProps = React.useMemo(() => getFloatingProps({
+  }, [listNavigation.trigger, dismiss.trigger, interactionTypeProps]);
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, {
+    id: floatingId,
+    role: 'menu',
+    'aria-labelledby': activeTriggerElement?.id,
     onMouseMove() {
       store.set('allowMouseEnter', true);
       if (parent.type === 'menu') {
@@ -399,9 +387,9 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
         relay(event);
       }
     }
-  }), [getFloatingProps, parent.type, store]);
-  const itemProps = React.useMemo(() => getItemProps(), [getItemProps]);
-  store.useSyncedValues({
+  }, typeahead.floating, listNavigation.floating, dismiss.floating), [activeTriggerElement, floatingId, parent.type, store, typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? _empty.EMPTY_OBJECT;
+  (0, _popups.usePopupInteractionProps)(store, {
     floatingRootContext,
     activeTriggerProps,
     inactiveTriggerProps,

package/menu/store/MenuHandle.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuHandle = void 0;
 exports.createMenuHandle = createMenuHandle;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _MenuStore = require("./MenuStore");
 class MenuHandle {
   /**
@@ -44,7 +44,7 @@ class MenuHandle {
    * Indicates whether the menu is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }