@base-ui/react 1.1.0 → 1.2.0

package/menu/link-item/MenuLinkItem.js

@@ -0,0 +1,60 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _MenuPositionerContext = require("../positioner/MenuPositionerContext");
+var _useMenuItemCommonProps = require("../item/useMenuItemCommonProps");
+/**
+ * A link in the menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuLinkItem = exports.MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    closeOnClick = false,
+    ...elementProps
+  } = componentProps;
+  const linkRef = React.useRef(null);
+  const listItem = (0, _useCompositeListItem.useCompositeListItem)({
+    label
+  });
+  const menuPositionerContext = (0, _MenuPositionerContext.useMenuPositionerContext)(true);
+  const nodeId = menuPositionerContext?.nodeId;
+  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
+  const {
+    store
+  } = (0, _MenuRootContext.useMenuRootContext)();
+  const highlighted = store.useState('isActive', listItem.index);
+  const itemProps = store.useState('itemProps');
+  const commonProps = (0, _useMenuItemCommonProps.useMenuItemCommonProps)({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    itemRef: linkRef
+  });
+  const state = React.useMemo(() => ({
+    highlighted
+  }), [highlighted]);
+  return (0, _useRenderElement.useRenderElement)('a', componentProps, {
+    state,
+    props: [itemProps, elementProps, commonProps],
+    ref: [linkRef, forwardedRef, listItem.ref]
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";

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

@@ -0,0 +1,6 @@
+export declare enum MenuLinkItemDataAttributes {
+  /**
+   * Present when the link is highlighted.
+   */
+  highlighted = "data-highlighted",
+}

package/menu/link-item/MenuLinkItemDataAttributes.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuLinkItemDataAttributes = void 0;
+let MenuLinkItemDataAttributes = exports.MenuLinkItemDataAttributes = /*#__PURE__*/function (MenuLinkItemDataAttributes) {
+  /**
+   * Present when the link is highlighted.
+   */
+  MenuLinkItemDataAttributes["highlighted"] = "data-highlighted";
+  return MenuLinkItemDataAttributes;
+}({});

package/menu/popup/MenuPopup.d.ts

@@ -15,7 +15,7 @@ export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopup.St
   /**
    * @ignore
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Determines the element to focus when the menu is closed.
    *
@@ -25,7 +25,7 @@ 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 = {
   transitionStatus: TransitionStatus;
@@ -36,6 +36,7 @@ export type MenuPopupState = {
    */
   open: boolean;
   nested: boolean;
+  instant: 'dismiss' | 'click' | 'group' | undefined;
 };
 export declare namespace MenuPopup {
   type Props = MenuPopupProps;

package/menu/popup/MenuPopup.js

@@ -84,14 +84,14 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
     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 element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef],

package/menu/popup/MenuPopupDataAttributes.js

@@ -26,12 +26,12 @@ let MenuPopupDataAttributes = exports.MenuPopupDataAttributes = function (MenuPo
    * 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"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  MenuPopupDataAttributes["align"] = "data-align";
+  MenuPopupDataAttributes[MenuPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss' | 'group'}

package/menu/portal/MenuPortal.d.ts

@@ -16,7 +16,7 @@ export interface MenuPortalProps extends FloatingPortal.Props<MenuPortal.State>
    * 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 Props = MenuPortalProps;

package/menu/portal/MenuPortalContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/menu/positioner/MenuPositioner.js

@@ -18,6 +18,7 @@ var _CompositeList = require("../../composite/list/CompositeList");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _MenuPortalContext = require("../portal/MenuPortalContext");
 var _constants = require("../../utils/constants");
+var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -58,6 +59,7 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
   const open = store.useState('open');
   const modal = store.useState('modal');
   const triggerElement = store.useState('activeTriggerElement');
+  const transitionStatus = store.useState('transitionStatus');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const floatingNodeId = store.useState('floatingNodeId');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
@@ -102,7 +104,7 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shiftCrossAxis: contextMenu,
+    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
     externalTree: floatingTreeRoot
   });
   const positionerProps = React.useMemo(() => {
@@ -128,14 +130,6 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
         if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select('floatingParentNodeId')) {
           store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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.REASONS.siblingOpen) {
-          store.set('hoverEnabled', true);
-        }
       }
     }
     floatingTreeRoot.events.on('menuopenchange', onMenuOpenChange);
@@ -186,13 +180,13 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     };
     floatingTreeRoot.events.emit('menuopenchange', eventDetails);
   }, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
-  const state = React.useMemo(() => ({
+  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]);
+  };
   const contextValue = React.useMemo(() => ({
     side: positioner.side,
     align: positioner.align,
@@ -205,7 +199,7 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     state,
     stateAttributesMapping: _popupStateMapping.popupStateMapping,
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, elementProps]
+    props: [positionerProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps]
   });
   const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== _reasons.REASONS.triggerHover || parent.type === 'menubar' && parent.context.modal);
 

package/menu/positioner/MenuPositionerDataAttributes.js

@@ -22,11 +22,11 @@ let MenuPositionerDataAttributes = exports.MenuPositionerDataAttributes = functi
    * 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"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  MenuPositionerDataAttributes["align"] = "data-align";
+  MenuPositionerDataAttributes[MenuPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return MenuPositionerDataAttributes;
 }({});

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

@@ -28,13 +28,13 @@ 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 = {
   disabled: boolean;

package/menu/radio-group/MenuRadioGroup.js

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

package/menu/radio-group/MenuRadioGroupContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -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/menu/radio-item/MenuRadioItemContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -3,7 +3,7 @@ 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)
  */
@@ -13,7 +13,7 @@ export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span'
    * 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 {
   /**

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

@@ -14,7 +14,7 @@ var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 /**
  * 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)
  */
@@ -40,12 +40,12 @@ const MenuRadioItemIndicator = exports.MenuRadioItemIndicator = /*#__PURE__*/Rea
       }
     }
   });
-  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 = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     stateAttributesMapping: _stateAttributesMapping.itemMapping,

package/menu/root/MenuRoot.d.ts

@@ -13,7 +13,7 @@ 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 MenuRootProps<Payload = unknown> {
   /**
    * Whether the menu is initially open.
@@ -21,55 +21,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 +77,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.

package/menu/root/MenuRoot.js

@@ -5,16 +5,16 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuRoot = MenuRoot;
+exports.MenuRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useId = require("@base-ui/utils/useId");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
+var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _empty = require("@base-ui/utils/empty");
+var _fastHooks = require("@base-ui/utils/fastHooks");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("./MenuRootContext");
 var _MenubarContext = require("../../menubar/MenubarContext");
@@ -35,7 +35,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-function MenuRoot(props) {
+const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuRoot(props) {
   const {
     children,
     open: openProp,
@@ -85,8 +85,25 @@ function MenuRoot(props) {
     };
   }, [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu]);
   const store = _MenuStore.MenuStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
     parent: parentFromContext
   });
+
+  // Support initially open state when uncontrolled
+  (0, _useOnFirstRender.useOnFirstRender)(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = (0, _floatingUiReact.useFloatingNodeId)(floatingTreeRoot);
   const floatingParentNodeIdFromContext = (0, _floatingUiReact.useFloatingParentNodeId)();
@@ -109,9 +126,6 @@ function MenuRoot(props) {
       });
     }
   }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
-  store.useControlledProp('open', openProp, defaultOpen);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
-  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const open = store.useState('open');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
@@ -238,27 +252,20 @@ function MenuRoot(props) {
     }
     const isKeyboardClick = (reason === _reasons.REASONS.triggerPress || reason === _reasons.REASONS.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
     const isDismissClose = !nextOpen && (reason === _reasons.REASONS.escapeKey || reason == null);
-    function changeState() {
-      const updatedState = {
-        open: nextOpen,
-        openChangeReason: reason
-      };
-      openEventRef.current = eventDetails.event ?? null;
+    const updatedState = {
+      open: nextOpen,
+      openChangeReason: reason
+    };
+    openEventRef.current = eventDetails.event ?? null;
 
-      // If a popup is closing, the `trigger` may be null.
-      // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-      const newTriggerId = eventDetails.trigger?.id ?? null;
-      if (newTriggerId || nextOpen) {
-        updatedState.activeTriggerId = newTriggerId;
-        updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-      }
-      store.update(updatedState);
-    }
-    if (reason === _reasons.REASONS.triggerHover) {
-      ReactDOM.flushSync(changeState);
-    } else {
-      changeState();
+    // If a popup is closing, the `trigger` may be null.
+    // We want to keep the previous value so that exit animations are played and focus is returned correctly.
+    const newTriggerId = eventDetails.trigger?.id ?? null;
+    if (newTriggerId || nextOpen) {
+      updatedState.activeTriggerId = newTriggerId;
+      updatedState.activeTriggerElement = eventDetails.trigger ?? null;
     }
+    store.update(updatedState);
     if (parent.type === 'menubar' && (reason === _reasons.REASONS.triggerFocus || reason === _reasons.REASONS.focusOut || reason === _reasons.REASONS.triggerHover || reason === _reasons.REASONS.listNavigation || reason === _reasons.REASONS.siblingOpen)) {
       store.set('instantType', 'group');
     } else if (isKeyboardClick || isDismissClose) {
@@ -364,9 +371,6 @@ function MenuRoot(props) {
   } = (0, _floatingUiReact.useInteractions)([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React.useMemo(() => {
     const mergedProps = (0, _mergeProps.mergeProps)(getReferenceProps(), {
-      onMouseEnter() {
-        store.set('hoverEnabled', true);
-      },
       onMouseMove() {
         store.set('allowMouseEnter', true);
       }
@@ -384,15 +388,12 @@ function MenuRoot(props) {
     delete mergedProps['aria-controls'];
     return mergedProps;
   }, [getTriggerProps, interactionTypeProps]);
-  const disableHoverTimeout = (0, _useAnimationFrame.useAnimationFrame)();
   const popupProps = React.useMemo(() => getFloatingProps({
-    onMouseEnter() {
-      if (parent.type === 'menu') {
-        disableHoverTimeout.request(() => store.set('hoverEnabled', false));
-      }
-    },
     onMouseMove() {
       store.set('allowMouseEnter', true);
+      if (parent.type === 'menu') {
+        store.set('hoverEnabled', false);
+      }
     },
     onClick() {
       if (store.select('hoverEnabled')) {
@@ -408,7 +409,7 @@ function MenuRoot(props) {
         relay(event);
       }
     }
-  }), [getFloatingProps, parent.type, disableHoverTimeout, store]);
+  }), [getFloatingProps, parent.type, store]);
   const itemProps = React.useMemo(() => getItemProps(), [getItemProps]);
   store.useSyncedValues({
     floatingRootContext,
@@ -435,4 +436,5 @@ function MenuRoot(props) {
     });
   }
   return content;
-}
+});
+if (process.env.NODE_ENV !== "production") MenuRoot.displayName = "MenuRoot";