@base-ui/react 1.1.0 → 1.3.0

package/esm/menu/popup/MenuPopup.d.ts

@@ -10,12 +10,12 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuPopup: React.ForwardRefExoticComponent<Omit<MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopup.State> {
+export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopupState> {
   children?: React.ReactNode;
   /**
    * @ignore
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Determines the element to focus when the menu is closed.
    *
@@ -25,18 +25,34 @@ export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopup.St
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void);
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
-export type MenuPopupState = {
+export interface MenuPopupState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
   /**
    * Whether the menu is currently open.
    */
   open: boolean;
+  /**
+   * Whether the component is nested.
+   */
   nested: boolean;
-};
+  /**
+   * Whether transitions should be skipped.
+   */
+  instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
+}
 export declare namespace MenuPopup {
   type Props = MenuPopupProps;
   type State = MenuPopupState;

package/esm/menu/popup/MenuPopup.js

@@ -78,17 +78,20 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
-  const state = React.useMemo(() => ({
+  const state = {
     transitionStatus,
     side,
     align,
     open,
     nested: parent.type === 'menu',
     instant: instantType
-  }), [transitionStatus, side, align, open, parent.type, instantType]);
+  };
+  const setPopupElement = React.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const element = useRenderElement('div', componentProps, {
     state,
-    ref: [forwardedRef, store.context.popupRef],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping,
     props: [popupProps, {
       onKeyDown(event) {

package/esm/menu/popup/MenuPopupDataAttributes.d.ts

@@ -27,7 +27,7 @@ export declare enum MenuPopupDataAttributes {
   align = "data-align",
   /**
    * Present if animations should be instant.
-   * @type {'click' | 'dismiss' | 'group'}
+   * @type {'click' | 'dismiss' | 'group' | 'trigger-change'}
    */
   instant = "data-instant",
 }

package/esm/menu/popup/MenuPopupDataAttributes.js

@@ -20,15 +20,15 @@ export let MenuPopupDataAttributes = function (MenuPopupDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  MenuPopupDataAttributes["side"] = "data-side";
+  MenuPopupDataAttributes[MenuPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  MenuPopupDataAttributes["align"] = "data-align";
+  MenuPopupDataAttributes[MenuPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
-   * @type {'click' | 'dismiss' | 'group'}
+   * @type {'click' | 'dismiss' | 'group' | 'trigger-change'}
    */
   MenuPopupDataAttributes["instant"] = "data-instant";
   return MenuPopupDataAttributes;

package/esm/menu/portal/MenuPortal.d.ts

@@ -8,16 +8,15 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuPortal: React.ForwardRefExoticComponent<Omit<MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace MenuPortal {
-  interface State {}
-}
-export interface MenuPortalProps extends FloatingPortal.Props<MenuPortal.State> {
+export interface MenuPortalState {}
+export interface MenuPortalProps extends FloatingPortal.Props<MenuPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace MenuPortal {
+  type State = MenuPortalState;
   type Props = MenuPortalProps;
 }

package/esm/menu/portal/MenuPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const MenuPortalContext = /*#__PURE__*/React.createContext(undefined);

package/esm/menu/positioner/MenuPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the menu popup against the trigger.
@@ -13,12 +13,28 @@ export interface MenuPositionerState {
    * Whether the menu is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether the component is nested.
+   */
   nested: boolean;
+  /**
+   * Whether CSS transitions should be disabled.
+   */
+  instant: string | undefined;
 }
-export interface MenuPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', MenuPositioner.State> {}
+export interface MenuPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', MenuPositionerState> {}
 export declare namespace MenuPositioner {
   type State = MenuPositionerState;
   type Props = MenuPositionerProps;

package/esm/menu/positioner/MenuPositioner.js

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import { inertValue } from '@base-ui/utils/inertValue';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useTimeout } from '@base-ui/utils/useTimeout';
 import { FloatingNode } from "../../floating-ui-react/index.js";
 import { MenuPositionerContext } from "./MenuPositionerContext.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
@@ -12,16 +14,20 @@ import { CompositeList } from "../../composite/list/CompositeList.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
 import { useMenuPortalContext } from "../portal/MenuPortalContext.js";
 import { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
+import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+
 /**
  * Positions the menu popup against the trigger.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(componentProps, forwardedRef) {
   const {
     anchor: anchorProp,
@@ -52,9 +58,16 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
   const open = store.useState('open');
   const modal = store.useState('modal');
   const triggerElement = store.useState('activeTriggerElement');
+  const transitionStatus = store.useState('transitionStatus');
+  const positionerElement = store.useState('positionerElement');
+  const instantType = store.useState('instantType');
+  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.useRef(null);
+  const runOnceAnimationsFinish = useAnimationsFinished(positionerElement, false, false);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -96,8 +109,9 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shiftCrossAxis: contextMenu,
-    externalTree: floatingTreeRoot
+    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
+    externalTree: floatingTreeRoot,
+    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
   const positionerProps = React.useMemo(() => {
     const hiddenStyles = {};
@@ -122,14 +136,6 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
         if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select('floatingParentNodeId')) {
           store.setOpen(false, createChangeEventDetails(REASONS.siblingOpen));
         }
-      } else if (details.parentNodeId === floatingNodeId) {
-        // Re-enable hover on the parent when a child closes, except when the child
-        // closed due to hovering a different sibling item in this parent (sibling-open).
-        // Keeping hover disabled in that scenario prevents the parent from closing
-        // immediately when the pointer then leaves it.
-        if (details.reason !== REASONS.siblingOpen) {
-          store.set('hoverEnabled', true);
-        }
       }
     }
     floatingTreeRoot.events.on('menuopenchange', onMenuOpenChange);
@@ -153,6 +159,14 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
       floatingTreeRoot.events.off('menuopenchange', onParentClose);
     };
   }, [floatingTreeRoot.events, store]);
+  const closeTimeout = useTimeout();
+
+  // Clear pending close timeout when the menu closes.
+  React.useEffect(() => {
+    if (!open) {
+      closeTimeout.clear();
+    }
+  }, [open, closeTimeout]);
 
   // Close unrelated child submenus when hovering a different item in the parent menu.
   React.useEffect(() => {
@@ -163,14 +177,26 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
         return;
       }
       if (event.target && triggerElement && triggerElement !== event.target) {
-        store.setOpen(false, createChangeEventDetails(REASONS.siblingOpen));
+        const delay = store.select('closeDelay');
+        if (delay > 0) {
+          if (!closeTimeout.isStarted()) {
+            closeTimeout.start(delay, () => {
+              store.setOpen(false, createChangeEventDetails(REASONS.siblingOpen));
+            });
+          }
+        } else {
+          store.setOpen(false, createChangeEventDetails(REASONS.siblingOpen));
+        }
+      } else {
+        // User re-hovered the submenu trigger, cancel pending close.
+        closeTimeout.clear();
       }
     }
     floatingTreeRoot.events.on('itemhover', onItemHover);
     return () => {
       floatingTreeRoot.events.off('itemhover', onItemHover);
     };
-  }, [floatingTreeRoot.events, open, triggerElement, store]);
+  }, [floatingTreeRoot.events, open, triggerElement, store, closeTimeout]);
   React.useEffect(() => {
     const eventDetails = {
       open,
@@ -180,13 +206,34 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     };
     floatingTreeRoot.events.emit('menuopenchange', eventDetails);
   }, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
-  const state = React.useMemo(() => ({
+
+  // Keep positioner transition behavior aligned with Popover when switching detached triggers.
+  useIsoLayoutEffect(() => {
+    const currentTrigger = domReference;
+    const previousTrigger = previousTriggerRef.current;
+    if (currentTrigger) {
+      previousTriggerRef.current = currentTrigger;
+    }
+    if (previousTrigger && currentTrigger && currentTrigger !== previousTrigger) {
+      store.set('instantType', undefined);
+      const abortController = new AbortController();
+      runOnceAnimationsFinish(() => {
+        store.set('instantType', 'trigger-change');
+      }, abortController.signal);
+      return () => {
+        abortController.abort();
+      };
+    }
+    return undefined;
+  }, [domReference, runOnceAnimationsFinish, store]);
+  const state = {
     open,
     side: positioner.side,
     align: positioner.align,
     anchorHidden: positioner.anchorHidden,
-    nested: parent.type === 'menu'
-  }), [open, positioner.side, positioner.align, positioner.anchorHidden, parent.type]);
+    nested: parent.type === 'menu',
+    instant: instantType
+  };
   const contextValue = React.useMemo(() => ({
     side: positioner.side,
     align: positioner.align,
@@ -199,7 +246,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     state,
     stateAttributesMapping: popupStateMapping,
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, elementProps]
+    props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
   const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== REASONS.triggerHover || parent.type === 'menubar' && parent.context.modal);
 

package/esm/menu/positioner/MenuPositionerDataAttributes.js

@@ -16,11 +16,11 @@ export let MenuPositionerDataAttributes = function (MenuPositionerDataAttributes
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  MenuPositionerDataAttributes["side"] = "data-side";
+  MenuPositionerDataAttributes[MenuPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  MenuPositionerDataAttributes["align"] = "data-align";
+  MenuPositionerDataAttributes[MenuPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return MenuPositionerDataAttributes;
 }({});

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

@@ -8,7 +8,7 @@ import type { MenuRoot } from "../root/MenuRoot.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuRadioGroup: React.NamedExoticComponent<Omit<MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRadioGroup.State> {
+export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRadioGroupState> {
   /**
    * The content of the component.
    */
@@ -28,17 +28,20 @@ export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRad
   /**
    * Function called when the selected value changes.
    */
-  onValueChange?: (value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) => void;
+  onValueChange?: ((value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the component should ignore user interaction.
    *
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
-export type MenuRadioGroupState = {
+export interface MenuRadioGroupState {
+  /**
+   * Whether the component is disabled.
+   */
   disabled: boolean;
-};
+}
 export type MenuRadioGroupChangeEventReason = MenuRoot.ChangeEventReason;
 export type MenuRadioGroupChangeEventDetails = MenuRoot.ChangeEventDetails;
 export declare namespace MenuRadioGroup {

package/esm/menu/radio-group/MenuRadioGroup.js

@@ -35,9 +35,9 @@ export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
     }
     setValueUnwrapped(newValue);
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/menu/radio-group/MenuRadioGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const MenuRadioGroupContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuRadioItem: React.ForwardRefExoticComponent<Omit<MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type MenuRadioItemState = {
+export interface MenuRadioItemState {
   /**
    * Whether the radio item should ignore user interaction.
    */
@@ -20,8 +20,8 @@ export type MenuRadioItemState = {
    * Whether the radio item is currently selected.
    */
   checked: boolean;
-};
-export interface MenuRadioItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuRadioItem.State> {
+}
+export interface MenuRadioItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuRadioItemState> {
   /**
    * Value of the radio item.
    * This is the value that will be set in the MenuRadioGroup when the item is selected.
@@ -30,25 +30,25 @@ export interface MenuRadioItemProps extends NonNativeButtonProps, BaseUIComponen
   /**
    * The click handler for the menu item.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', MenuRadioItemState>['onClick'] | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Overrides the text label to use when the item is matched during keyboard text navigation.
    */
-  label?: string;
+  label?: string | undefined;
   /**
    * @ignore
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether to close the menu when the item is clicked.
    * @default false
    */
-  closeOnClick?: boolean;
+  closeOnClick?: boolean | undefined;
 }
 export declare namespace MenuRadioItem {
   type State = MenuRadioItemState;

package/esm/menu/radio-item/MenuRadioItemContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const MenuRadioItemContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -3,17 +3,17 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 import { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Indicates whether the radio item is selected.
- * Renders a `<div>` element.
+ * Renders a `<span>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<MenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span', MenuRadioItemIndicator.State> {
+export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span', MenuRadioItemIndicatorState> {
   /**
    * Whether to keep the HTML element in the DOM when the radio item is inactive.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface MenuRadioItemIndicatorState {
   /**
@@ -24,7 +24,13 @@ export interface MenuRadioItemIndicatorState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the item is highlighted.
+   */
   highlighted: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace MenuRadioItemIndicator {

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

@@ -9,7 +9,7 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 
 /**
  * Indicates whether the radio item is selected.
- * Renders a `<div>` element.
+ * Renders a `<span>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -35,12 +35,12 @@ export const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function Men
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     checked: item.checked,
     disabled: item.disabled,
     highlighted: item.highlighted,
     transitionStatus
-  }), [item.checked, item.disabled, item.highlighted, transitionStatus]);
+  };
   const element = useRenderElement('span', componentProps, {
     state,
     stateAttributesMapping: itemMapping,

package/esm/menu/root/MenuRoot.d.ts

@@ -13,7 +13,8 @@ import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare function MenuRoot<Payload>(props: MenuRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export declare const MenuRoot: <Payload>(props: MenuRoot.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+export interface MenuRootState {}
 export interface MenuRootProps<Payload = unknown> {
   /**
    * Whether the menu is initially open.
@@ -21,55 +22,55 @@ export interface MenuRootProps<Payload = unknown> {
    * To render a controlled menu, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * 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.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Event handler called when the menu is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: MenuRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: MenuRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the menu is closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the menu is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * The visual orientation of the menu.
    * Controls whether roving focus uses up/down or left/right arrow keys.
    * @default 'vertical'
    */
-  orientation?: MenuRoot.Orientation;
+  orientation?: MenuRoot.Orientation | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * When in a submenu, determines whether pressing the Escape key
    * closes the entire menu, or only the current child menu.
    * @default false
    */
-  closeParentOnEsc?: boolean;
+  closeParentOnEsc?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the menu will not be unmounted when closed.
@@ -77,23 +78,23 @@ export interface MenuRootProps<Payload = unknown> {
    *   Useful when the menu's animation is controlled by an external library.
    * - `close`: When specified, the menu can be closed imperatively.
    */
-  actionsRef?: React.RefObject<MenuRoot.Actions | null>;
+  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 (i.e. when the `open` prop is not set).
    */
-  triggerId?: string | null;
+  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.
    */
-  defaultTriggerId?: string | null;
+  defaultTriggerId?: string | null | undefined;
   /**
    * A handle to associate the menu with a trigger.
    * If specified, allows external triggers to control the menu's open state.
    */
-  handle?: MenuHandle<Payload>;
+  handle?: MenuHandle<Payload> | undefined;
   /**
    * The content of the popover.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.
@@ -126,6 +127,7 @@ export type MenuParent = {
   type: undefined;
 };
 export declare namespace MenuRoot {
+  type State = MenuRootState;
   type Props<Payload = unknown> = MenuRootProps<Payload>;
   type Actions = MenuRootActions;
   type ChangeEventReason = MenuRootChangeEventReason;