@base-ui/react 1.6.0 → 1.7.0

package/menu/popup/MenuPopup.mjs

@@ -5,19 +5,13 @@ import { FloatingFocusManager, useHoverFloatingInteraction } from "../../floatin
 import { useMenuRootContext } from "../root/MenuRootContext.mjs";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.mjs";
 import { COMPOSITE_KEYS } from "../../internals/composite/composite.mjs";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping
-};
+import { getDisabledMountTransitionStyles } from "../../internals/getDisabledMountTransitionStyles.mjs";
 
 /**
  * A container for the menu items.
@@ -25,6 +19,7 @@ const stateAttributesMapping = {
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProps, forwardedRef) {
   const {
     render,
@@ -46,14 +41,13 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
   const popupProps = store.useState('popupProps');
   const mounted = store.useState('mounted');
   const instantType = store.useState('instantType');
-  const triggerElement = store.useState('activeTriggerElement');
+  const activeTriggerElement = store.useState('activeTriggerElement');
   const parent = store.useState('parent');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const rootId = store.useState('rootId');
   const floatingContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const closeDelay = store.useState('closeDelay');
-  const activeTriggerElement = store.useState('activeTriggerElement');
   const hoverEnabled = store.useState('hoverEnabled');
   const disabled = store.useState('disabled');
   const openMethod = store.useState('openMethod');
@@ -80,9 +74,7 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     transitionStatus,
     side,
@@ -94,7 +86,7 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
-    stateAttributesMapping,
+    stateAttributesMapping: popupTransitionStateMapping,
     props: [popupProps, {
       onKeyDown(event) {
         if (insideToolbar && COMPOSITE_KEYS.has(event.key)) {
@@ -106,7 +98,7 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
     }]
   });
   let returnFocus = parent.type === undefined || isContextMenu;
-  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== REASONS.outsidePress) {
+  if (activeTriggerElement || parent.type === 'menubar' && lastOpenChangeReason !== REASONS.outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/_jsx(FloatingFocusManager, {

package/menu/popup/MenuPopupDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum MenuPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the menu is animating in.
+   * Present when the menu begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/menu/popup/MenuPopupDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum MenuPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the menu is animating in.
+   * Present when the menu begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/menu/popup/MenuPopupDataAttributes.js

@@ -15,7 +15,7 @@ let MenuPopupDataAttributes = exports.MenuPopupDataAttributes = function (MenuPo
    */
   MenuPopupDataAttributes[MenuPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the menu is animating in.
+   * Present when the menu begins animating in.
    */
   MenuPopupDataAttributes[MenuPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/menu/popup/MenuPopupDataAttributes.mjs

@@ -9,7 +9,7 @@ export let MenuPopupDataAttributes = function (MenuPopupDataAttributes) {
    */
   MenuPopupDataAttributes[MenuPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the menu is animating in.
+   * Present when the menu begins animating in.
    */
   MenuPopupDataAttributes[MenuPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/menu/portal/MenuPortal.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.mjs";
+import { type BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,12 +9,16 @@ import { FloatingPortal } from "../../floating-ui-react/index.mjs";
  */
 export declare const MenuPortal: React.ForwardRefExoticComponent<Omit<MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuPortalState {}
-export interface MenuPortalProps extends FloatingPortal.Props<MenuPortalState> {
+export interface MenuPortalProps extends BaseUIComponentProps<'div', MenuPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
   keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export declare namespace MenuPortal {
   type State = MenuPortalState;

package/menu/portal/MenuPortal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,12 +9,16 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const MenuPortal: React.ForwardRefExoticComponent<Omit<MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuPortalState {}
-export interface MenuPortalProps extends FloatingPortal.Props<MenuPortalState> {
+export interface MenuPortalProps extends BaseUIComponentProps<'div', MenuPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
   keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export declare namespace MenuPortal {
   type State = MenuPortalState;

package/menu/positioner/MenuPositioner.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.mjs";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.mjs";
 import { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Positions the menu popup against the trigger.

package/menu/positioner/MenuPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.js";
 import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the menu popup against the trigger.

package/menu/positioner/MenuPositioner.js

@@ -13,7 +13,7 @@ var _useTimeout = require("@base-ui/utils/useTimeout");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuPositionerContext = require("./MenuPositionerContext");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
+var _useAnchorPositioning = require("../../internals/useAnchorPositioning");
 var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _MenuPortalContext = require("../portal/MenuPortalContext");
@@ -21,7 +21,6 @@ var _constants = require("../../internals/constants");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
-var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
 var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
 var _usePositioner = require("../../utils/usePositioner");
 var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
@@ -67,13 +66,13 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
   const transitionStatus = store.useState('transitionStatus');
   const positionerElement = store.useState('positionerElement');
   const instantType = store.useState('instantType');
-  const hasViewport = store.useState('hasViewport');
+  const adaptiveOrigin = store.useState('adaptiveOrigin');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const floatingNodeId = store.useState('floatingNodeId');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const domReference = floatingRootContext.useState('domReferenceElement');
   const previousTriggerRef = React.useRef(null);
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(positionerElement, false, false);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(positionerElement);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -115,9 +114,12 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+    shift: contextMenu ? {
+      crossAxis: !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+      rootBoundary: 'layoutViewport'
+    } : undefined,
     externalTree: floatingTreeRoot,
-    adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
+    adaptiveOrigin
   });
   React.useEffect(() => {
     function onMenuOpenChange(details) {

package/menu/positioner/MenuPositioner.mjs

@@ -7,7 +7,7 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { FloatingNode } from "../../floating-ui-react/index.mjs";
 import { MenuPositionerContext } from "./MenuPositionerContext.mjs";
 import { useMenuRootContext } from "../root/MenuRootContext.mjs";
-import { useAnchorPositioning } from "../../utils/useAnchorPositioning.mjs";
+import { useAnchorPositioning } from "../../internals/useAnchorPositioning.mjs";
 import { CompositeList } from "../../internals/composite/list/CompositeList.mjs";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.mjs";
 import { useMenuPortalContext } from "../portal/MenuPortalContext.mjs";
@@ -15,7 +15,6 @@ import { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE } from "../../i
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.mjs";
 import { useAnimationsFinished } from "../../internals/useAnimationsFinished.mjs";
 import { usePositioner } from "../../utils/usePositioner.mjs";
 import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.mjs";
@@ -62,13 +61,13 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
   const transitionStatus = store.useState('transitionStatus');
   const positionerElement = store.useState('positionerElement');
   const instantType = store.useState('instantType');
-  const hasViewport = store.useState('hasViewport');
+  const adaptiveOrigin = store.useState('adaptiveOrigin');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const floatingNodeId = store.useState('floatingNodeId');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const domReference = floatingRootContext.useState('domReferenceElement');
   const previousTriggerRef = React.useRef(null);
-  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -110,9 +109,12 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+    shift: contextMenu ? {
+      crossAxis: !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+      rootBoundary: 'layoutViewport'
+    } : undefined,
     externalTree: floatingTreeRoot,
-    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
+    adaptiveOrigin
   });
   React.useEffect(() => {
     function onMenuOpenChange(details) {

package/menu/positioner/MenuPositionerContext.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.mjs";
+import type { UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.mjs";
 export type MenuPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'context'>;
 export declare const MenuPositionerContext: React.Context<MenuPositionerContext | undefined>;
 export declare function useMenuPositionerContext(optional?: false): MenuPositionerContext;

package/menu/positioner/MenuPositionerContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+import type { UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.js";
 export type MenuPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'context'>;
 export declare const MenuPositionerContext: React.Context<MenuPositionerContext | undefined>;
 export declare function useMenuPositionerContext(optional?: false): MenuPositionerContext;

package/menu/positioner/MenuPositionerCssVars.d.mts

@@ -24,4 +24,16 @@ export declare enum MenuPositionerCssVars {
    * @type {string}
    */
   transformOrigin = "--transform-origin",
+  /**
+   * The width of the menu's positioner.
+   * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  positionerWidth = "--positioner-width",
+  /**
+   * The height of the menu's positioner.
+   * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  positionerHeight = "--positioner-height",
 }

package/menu/positioner/MenuPositionerCssVars.d.ts

@@ -24,4 +24,16 @@ export declare enum MenuPositionerCssVars {
    * @type {string}
    */
   transformOrigin = "--transform-origin",
+  /**
+   * The width of the menu's positioner.
+   * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  positionerWidth = "--positioner-width",
+  /**
+   * The height of the menu's positioner.
+   * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  positionerHeight = "--positioner-height",
 }

package/menu/positioner/MenuPositionerCssVars.js

@@ -30,5 +30,17 @@ let MenuPositionerCssVars = exports.MenuPositionerCssVars = /*#__PURE__*/functio
    * @type {string}
    */
   MenuPositionerCssVars["transformOrigin"] = "--transform-origin";
+  /**
+   * The width of the menu's positioner.
+   * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  MenuPositionerCssVars["positionerWidth"] = "--positioner-width";
+  /**
+   * The height of the menu's positioner.
+   * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  MenuPositionerCssVars["positionerHeight"] = "--positioner-height";
   return MenuPositionerCssVars;
 }({});

package/menu/positioner/MenuPositionerCssVars.mjs

@@ -24,5 +24,17 @@ export let MenuPositionerCssVars = /*#__PURE__*/function (MenuPositionerCssVars)
    * @type {string}
    */
   MenuPositionerCssVars["transformOrigin"] = "--transform-origin";
+  /**
+   * The width of the menu's positioner.
+   * It is important to set `width` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  MenuPositionerCssVars["positionerWidth"] = "--positioner-width";
+  /**
+   * The height of the menu's positioner.
+   * It is important to set `height` to this value when using CSS to animate size changes.
+   * @type {number}
+   */
+  MenuPositionerCssVars["positionerHeight"] = "--positioner-height";
   return MenuPositionerCssVars;
 }({});

package/menu/radio-item/MenuRadioItem.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuRadioItem = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _empty = require("@base-ui/utils/empty");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -39,6 +40,7 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
+    guess: true,
     label
   });
   const menuPositionerContext = (0, _MenuPositionerContext.useMenuPositionerContext)(true);
@@ -53,7 +55,8 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
     setValue: setSelectedValue,
     disabled: groupDisabled
   } = (0, _MenuRadioGroupContext.useMenuRadioGroupContext)();
-  const disabled = groupDisabled || disabledProp;
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || groupDisabled || rootDisabled;
   const checked = selectedValue === value;
   const {
     getItemProps,
@@ -75,7 +78,7 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
   }), [disabled, highlighted, checked]);
   function handleClick(event) {
     const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent, undefined, {
-      preventUnmountOnClose() {}
+      preventUnmountOnClose: _empty.NOOP
     });
     setSelectedValue(value, details);
   }

package/menu/radio-item/MenuRadioItem.mjs

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { NOOP } from '@base-ui/utils/empty';
 import { useMenuRootContext } from "../root/MenuRootContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
@@ -34,6 +35,7 @@ export const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioIte
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -48,7 +50,8 @@ export const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioIte
     setValue: setSelectedValue,
     disabled: groupDisabled
   } = useMenuRadioGroupContext();
-  const disabled = groupDisabled || disabledProp;
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || groupDisabled || rootDisabled;
   const checked = selectedValue === value;
   const {
     getItemProps,
@@ -70,7 +73,7 @@ export const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioIte
   }), [disabled, highlighted, checked]);
   function handleClick(event) {
     const details = createChangeEventDetails(REASONS.itemPress, event.nativeEvent, undefined, {
-      preventUnmountOnClose() {}
+      preventUnmountOnClose: NOOP
     });
     setSelectedValue(value, details);
   }

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

@@ -30,6 +30,7 @@ const MenuRadioItemIndicator = exports.MenuRadioItemIndicator = /*#__PURE__*/Rea
   const indicatorRef = React.useRef(null);
   const {
     transitionStatus,
+    mounted,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(item.checked);
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -55,7 +56,7 @@ const MenuRadioItemIndicator = exports.MenuRadioItemIndicator = /*#__PURE__*/Rea
       'aria-hidden': true,
       ...elementProps
     },
-    enabled: keepMounted || item.checked
+    enabled: keepMounted || mounted
   });
   return element;
 });

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

@@ -25,6 +25,7 @@ export const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function Men
   const indicatorRef = React.useRef(null);
   const {
     transitionStatus,
+    mounted,
     setMounted
   } = useTransitionStatus(item.checked);
   useOpenChangeComplete({
@@ -50,7 +51,7 @@ export const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function Men
       'aria-hidden': true,
       ...elementProps
     },
-    enabled: keepMounted || item.checked
+    enabled: keepMounted || mounted
   });
   return element;
 });

package/menu/radio-item-indicator/MenuRadioItemIndicatorDataAttributes.d.mts

@@ -12,7 +12,7 @@ export declare enum MenuRadioItemIndicatorDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

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

@@ -12,7 +12,7 @@ export declare enum MenuRadioItemIndicatorDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

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

@@ -19,7 +19,7 @@ let MenuRadioItemIndicatorDataAttributes = exports.MenuRadioItemIndicatorDataAtt
    */
   MenuRadioItemIndicatorDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   MenuRadioItemIndicatorDataAttributes[MenuRadioItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

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

@@ -13,7 +13,7 @@ export let MenuRadioItemIndicatorDataAttributes = function (MenuRadioItemIndicat
    */
   MenuRadioItemIndicatorDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   MenuRadioItemIndicatorDataAttributes[MenuRadioItemIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/menu/root/MenuRoot.d.mts

@@ -39,6 +39,10 @@ export interface MenuRootProps<Payload = unknown> {
    * Determines if the menu enters a modal state when open.
    * - `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
+   *
+   * On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
+   *
+   * Nested menus ignore this prop, and menus opened by hover are never modal.
    * @default true
    */
   modal?: boolean | undefined;
@@ -47,7 +51,7 @@ export interface MenuRootProps<Payload = unknown> {
    */
   onOpenChange?: ((open: boolean, eventDetails: MenuRoot.ChangeEventDetails) => void) | undefined;
   /**
-   * Event handler called after any animations complete when the menu is closed.
+   * Event handler called after any animations complete when the menu is opened or closed.
    */
   onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
@@ -79,14 +83,14 @@ export interface MenuRootProps<Payload = unknown> {
    */
   actionsRef?: React.RefObject<MenuRoot.Actions | null> | undefined;
   /**
-   * ID of the trigger that the popover is associated with.
-   * This is useful in conjunction with the `open` prop to create a controlled popover.
-   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
+   * ID of the trigger that the menu is associated with.
+   * This is useful in conjunction with the `open` prop to create a controlled menu.
+   * There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**
-   * ID of the trigger that the popover is associated with.
-   * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
+   * ID of the trigger that the menu is associated with.
+   * This is useful in conjunction with the `defaultOpen` prop to create an initially open menu.
    */
   defaultTriggerId?: string | null | undefined;
   /**
@@ -95,7 +99,7 @@ export interface MenuRootProps<Payload = unknown> {
    */
   handle?: MenuHandle<Payload> | undefined;
   /**
-   * The content of the popover.
+   * The content of the menu.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.
    */
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;

package/menu/root/MenuRoot.d.ts

@@ -39,6 +39,10 @@ export interface MenuRootProps<Payload = unknown> {
    * Determines if the menu enters a modal state when open.
    * - `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
+   *
+   * On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
+   *
+   * Nested menus ignore this prop, and menus opened by hover are never modal.
    * @default true
    */
   modal?: boolean | undefined;
@@ -47,7 +51,7 @@ export interface MenuRootProps<Payload = unknown> {
    */
   onOpenChange?: ((open: boolean, eventDetails: MenuRoot.ChangeEventDetails) => void) | undefined;
   /**
-   * Event handler called after any animations complete when the menu is closed.
+   * Event handler called after any animations complete when the menu is opened or closed.
    */
   onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
@@ -79,14 +83,14 @@ export interface MenuRootProps<Payload = unknown> {
    */
   actionsRef?: React.RefObject<MenuRoot.Actions | null> | undefined;
   /**
-   * ID of the trigger that the popover is associated with.
-   * This is useful in conjunction with the `open` prop to create a controlled popover.
-   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
+   * ID of the trigger that the menu is associated with.
+   * This is useful in conjunction with the `open` prop to create a controlled menu.
+   * There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**
-   * ID of the trigger that the popover is associated with.
-   * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
+   * ID of the trigger that the menu is associated with.
+   * This is useful in conjunction with the `defaultOpen` prop to create an initially open menu.
    */
   defaultTriggerId?: string | null | undefined;
   /**
@@ -95,7 +99,7 @@ export interface MenuRootProps<Payload = unknown> {
    */
   handle?: MenuHandle<Payload> | undefined;
   /**
-   * The content of the popover.
+   * The content of the menu.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.
    */
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;