@base-ui/react 1.3.0 → 1.4.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.3.0
+ * @base-ui/react v1.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -274,6 +274,17 @@ Object.keys(_numberField).forEach(function (key) {
     }
   });
 });
+var _otpField = require("./otp-field");
+Object.keys(_otpField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _otpField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _otpField[key];
+    }
+  });
+});
 var _popover = require("./popover");
 Object.keys(_popover).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/input/Input.d.ts

@@ -12,7 +12,7 @@ export interface InputProps extends BaseUIComponentProps<'input', InputState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  onValueChange?: ((value: string, eventDetails: Input.ChangeEventDetails) => void) | undefined;
   /**
    * The default value of the input. Use when uncontrolled.
    */

package/labelable-provider/useLabel.js

@@ -74,7 +74,6 @@ function focusElementWithVisible(element) {
   element.focus({
     // Available from Chrome 144+ (January 2026).
     // Safari and Firefox already support it.
-    // @ts-expect-error not available in types yet
     focusVisible: true
   });
 }

package/localization-provider/LocalizationContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Locale } from 'date-fns/locale';
+export type LocalizationContext = {
+  temporalLocale?: Locale | undefined;
+};
+/**
+ * @internal
+ */
+export declare const LocalizationContext: React.Context<LocalizationContext | undefined>;
+export declare function useTemporalLocale(): Locale | undefined;

package/localization-provider/LocalizationContext.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalizationContext = void 0;
+exports.useTemporalLocale = useTemporalLocale;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @internal
+ */
+const LocalizationContext = exports.LocalizationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") LocalizationContext.displayName = "LocalizationContext";
+function useTemporalLocale() {
+  const context = React.useContext(LocalizationContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: LocalizationContext is missing. Temporal components must be place within <LocalizationProvider />' : (0, _formatErrorMessage2.default)(94));
+  }
+  return context.temporalLocale;
+}

package/localization-provider/LocalizationProvider.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Locale } from 'date-fns/locale';
+/**
+ * Defines the temporal locale provider for Base UI temporal components.
+ *
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Localization Provider](https://base-ui.com/react/utils/localization-provider)
+ */
+export declare const LocalizationProvider: React.FC<LocalizationProvider.Props>;
+export declare namespace LocalizationProvider {
+  interface Props {
+    children?: React.ReactNode;
+    /**
+     * The locale to use in temporal components.
+     * @default en-US
+     */
+    temporalLocale?: Locale | undefined;
+  }
+}

package/localization-provider/LocalizationProvider.js

@@ -0,0 +1,42 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalizationProvider = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _LocalizationContext = require("./LocalizationContext");
+var _TemporalAdapterDateFns = require("../temporal-adapter-date-fns/TemporalAdapterDateFns");
+var _TemporalAdapterContext = require("../temporal-adapter-provider/TemporalAdapterContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Defines the temporal locale provider for Base UI temporal components.
+ *
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Localization Provider](https://base-ui.com/react/utils/localization-provider)
+ */
+const LocalizationProvider = exports.LocalizationProvider = function LocalizationProvider(props) {
+  const {
+    children,
+    temporalLocale
+  } = props;
+  const contextValue = React.useMemo(() => ({
+    temporalLocale
+  }), [temporalLocale]);
+  const adapterContextValue = React.useMemo(() => ({
+    adapter: new _TemporalAdapterDateFns.TemporalAdapterDateFns({
+      locale: temporalLocale
+    })
+  }), [temporalLocale]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationContext.LocalizationContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TemporalAdapterContext.TemporalAdapterContext.Provider, {
+      value: adapterContextValue,
+      children: children
+    })
+  });
+};
+if (process.env.NODE_ENV !== "production") LocalizationProvider.displayName = "LocalizationProvider";

package/localization-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { LocalizationProvider } from "./LocalizationProvider.js";
+export { useTemporalLocale } from "./LocalizationContext.js";

package/localization-provider/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LocalizationProvider", {
+  enumerable: true,
+  get: function () {
+    return _LocalizationProvider.LocalizationProvider;
+  }
+});
+Object.defineProperty(exports, "useTemporalLocale", {
+  enumerable: true,
+  get: function () {
+    return _LocalizationContext.useTemporalLocale;
+  }
+});
+var _LocalizationProvider = require("./LocalizationProvider");
+var _LocalizationContext = require("./LocalizationContext");

package/menu/arrow/MenuArrow.js

@@ -21,6 +21,7 @@ const MenuArrow = exports.MenuArrow = /*#__PURE__*/React.forwardRef(function Men
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/menu/backdrop/MenuBackdrop.js

@@ -28,6 +28,7 @@ const MenuBackdrop = exports.MenuBackdrop = /*#__PURE__*/React.forwardRef(functi
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/menu/checkbox-item/MenuCheckboxItem.js

@@ -38,6 +38,7 @@ const MenuCheckboxItem = exports.MenuCheckboxItem = /*#__PURE__*/React.forwardRe
     checked: checkedProp,
     defaultChecked,
     onCheckedChange,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
@@ -66,7 +67,7 @@ const MenuCheckboxItem = exports.MenuCheckboxItem = /*#__PURE__*/React.forwardRe
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: _useMenuItem.REGULAR_ITEM
   });
   const state = React.useMemo(() => ({

package/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js

@@ -22,6 +22,7 @@ const MenuCheckboxItemIndicator = exports.MenuCheckboxItemIndicator = /*#__PURE_
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/menu/group/MenuGroup.js

@@ -20,6 +20,7 @@ const MenuGroup = exports.MenuGroup = /*#__PURE__*/React.forwardRef(function Men
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState(undefined);

package/menu/group-label/MenuGroupLabel.js

@@ -22,6 +22,7 @@ const MenuGroupLabel = exports.MenuGroupLabel = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);

package/menu/item/MenuItem.js

@@ -28,6 +28,7 @@ const MenuItem = exports.MenuItem = /*#__PURE__*/React.forwardRef(function MenuI
     nativeButton = false,
     disabled = false,
     closeOnClick = true,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
@@ -50,7 +51,7 @@ const MenuItem = exports.MenuItem = /*#__PURE__*/React.forwardRef(function MenuI
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: _useMenuItem.REGULAR_ITEM
   });
   const state = {

package/menu/item/useMenuItem.d.ts

@@ -25,7 +25,7 @@ export interface UseMenuItemParameters {
   /**
    * Whether the component renders a native `<button>` element when replacing it
    * via the `render` prop.
-   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a button (for example, `<div>`).
    * @default false
    */
   nativeButton: boolean;

package/menu/link-item/MenuLinkItem.js

@@ -28,6 +28,7 @@ const MenuLinkItem = exports.MenuLinkItem = /*#__PURE__*/React.forwardRef(functi
     id: idProp,
     label,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const linkRef = React.useRef(null);
@@ -35,7 +36,7 @@ const MenuLinkItem = exports.MenuLinkItem = /*#__PURE__*/React.forwardRef(functi
     label
   });
   const menuPositionerContext = (0, _MenuPositionerContext.useMenuPositionerContext)(true);
-  const nodeId = menuPositionerContext?.nodeId;
+  const nodeId = menuPositionerContext?.context.nodeId;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const {
     store

package/menu/popup/MenuPopup.js

@@ -35,6 +35,7 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;

package/menu/positioner/MenuPositioner.js

@@ -14,18 +14,17 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _MenuPositionerContext = require("./MenuPositionerContext");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 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");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
 var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _usePositioner = require("../../utils/usePositioner");
+var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the menu popup against the trigger.
@@ -49,6 +48,7 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance: collisionAvoidanceProp = _constants.DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -62,6 +62,7 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
   const mounted = store.useState('mounted');
   const open = store.useState('open');
   const modal = store.useState('modal');
+  const openMethod = store.useState('openMethod');
   const triggerElement = store.useState('activeTriggerElement');
   const transitionStatus = store.useState('transitionStatus');
   const positionerElement = store.useState('positionerElement');
@@ -118,20 +119,6 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     externalTree: floatingTreeRoot,
     adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
   });
-  const positionerProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioner.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioner.positionerStyles]);
   React.useEffect(() => {
     function onMenuOpenChange(details) {
       if (details.open) {
@@ -239,19 +226,16 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const contextValue = React.useMemo(() => ({
-    side: positioner.side,
-    align: positioner.align,
-    arrowRef: positioner.arrowRef,
-    arrowUncentered: positioner.arrowUncentered,
-    arrowStyles: positioner.arrowStyles,
-    nodeId: positioner.context.nodeId
-  }), [positioner.side, positioner.align, positioner.arrowRef, positioner.arrowUncentered, positioner.arrowStyles, positioner.context.nodeId]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    stateAttributesMapping: _popupStateMapping.popupStateMapping,
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps]
+  const menubarModal = parent.type === 'menubar' && parent.context.modal;
+  const popupModal = modal && lastOpenChangeReason !== _reasons.REASONS.triggerHover;
+  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(open && (menubarModal || popupModal), openMethod === 'touch', positionerElement, triggerElement);
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioner.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open
   });
   const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== _reasons.REASONS.triggerHover || parent.type === 'menubar' && parent.context.modal);
 
@@ -263,7 +247,7 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     backdropCutout = triggerElement;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuPositionerContext.MenuPositionerContext.Provider, {
-    value: contextValue,
+    value: positioner,
     children: [shouldRenderBackdrop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
       inert: (0, _inertValue.inertValue)(!open),

package/menu/positioner/MenuPositionerContext.d.ts

@@ -1,19 +1,6 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface MenuPositionerContext {
-  /**
-   * The side of the anchor element the popup is positioned relative to.
-   */
-  side: Side;
-  /**
-   * How to align the popup relative to the specified side.
-   */
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-  nodeId: string | undefined;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/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;
 export declare function useMenuPositionerContext(optional: true): MenuPositionerContext | undefined;

package/menu/radio-group/MenuRadioGroup.js

@@ -26,6 +26,7 @@ const MenuRadioGroup = exports.MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PUR
     defaultValue,
     onValueChange: onValueChangeProp,
     disabled = false,
+    style,
     ...elementProps
   } = componentProps;
   const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({

package/menu/radio-item/MenuRadioItem.js

@@ -36,6 +36,7 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
     disabled: disabledProp = false,
     closeOnClick = false,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
@@ -65,7 +66,7 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: _useMenuItem.REGULAR_ITEM
   });
   const state = React.useMemo(() => ({

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

@@ -22,6 +22,7 @@ const MenuRadioItemIndicator = exports.MenuRadioItemIndicator = /*#__PURE__*/Rea
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/menu/root/MenuRoot.d.ts

@@ -9,7 +9,7 @@ import { MenuHandle } from "../store/MenuHandle.js";
 import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 /**
  * Groups all parts of the menu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -82,7 +82,7 @@ export interface MenuRootProps<Payload = unknown> {
   /**
    * 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).
+   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/menu/root/MenuRoot.js

@@ -12,7 +12,6 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useId = require("@base-ui/utils/useId");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 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");
@@ -31,7 +30,7 @@ var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the menu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -130,7 +129,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
   const hoverEnabled = store.useState('hoverEnabled');
-  const modal = store.useState('modal');
   const disabled = store.useState('disabled');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const parent = store.useState('parent');
@@ -139,21 +137,21 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const openEventRef = React.useRef(null);
   const nested = floatingParentNodeId != null;
-  let floatingEvents;
   if (process.env.NODE_ENV !== 'production') {
     if (parent.type !== undefined && modalProp !== undefined) {
       console.warn('Base UI: The `modal` prop is not supported on nested menus. It will be ignored.');
     }
   }
+  const {
+    openMethod,
+    triggerProps: interactionTypeProps
+  } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
+    openMethod,
     rootId: (0, _useId.useId)()
   });
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps
-  } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
@@ -185,7 +183,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  (0, _useScrollLock.useScrollLock)(open && modal && lastOpenChangeReason !== _reasons.REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
@@ -211,13 +208,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested
-    };
-    floatingEvents?.emit('openchange', details);
+    store.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const nativeEvent = eventDetails.event;
     if (nextOpen === false && nativeEvent?.type === 'click' && nativeEvent.pointerType === 'touch' && !allowTouchToCloseRef.current) {
       return;
@@ -298,7 +289,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     popupStore: store,
     onOpenChange: setOpen
   });
-  floatingEvents = floatingRootContext.context.events;
+  const floatingEvents = floatingRootContext.context.events;
   React.useEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,

package/menu/store/MenuStore.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { MenuParent, MenuRoot } from "../root/MenuRoot.js";
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.js";
 import { HTMLProps } from "../../utils/types.js";
@@ -7,6 +8,7 @@ import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js"
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
   modal: boolean;
+  openMethod: InteractionType | null;
   allowMouseEnter: boolean;
   parent: MenuParent;
   rootId: string | undefined;
@@ -36,6 +38,7 @@ type Context = PopupStoreContext<MenuRoot.ChangeEventDetails> & {
 declare const selectors: {
   disabled: (state: State<unknown>) => boolean;
   modal: (state: State<unknown>) => boolean;
+  openMethod: (state: State<unknown>) => InteractionType | null;
   allowMouseEnter: (state: State<unknown>) => boolean;
   stickIfOpen: (state: State<unknown>) => boolean;
   parent: (state: State<unknown>) => MenuParent;

package/menu/store/MenuStore.js

@@ -15,6 +15,7 @@ const selectors = {
   ..._popups.popupStoreSelectors,
   disabled: (0, _store.createSelector)(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
   modal: (0, _store.createSelector)(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  openMethod: (0, _store.createSelector)(state => state.openMethod),
   allowMouseEnter: (0, _store.createSelector)(state => state.allowMouseEnter),
   stickIfOpen: (0, _store.createSelector)(state => state.stickIfOpen),
   parent: (0, _store.createSelector)(state => state.parent),
@@ -125,6 +126,7 @@ function createInitialState() {
     ...(0, _popups.createInitialPopupStoreState)(),
     disabled: false,
     modal: true,
+    openMethod: null,
     allowMouseEnter: false,
     stickIfOpen: true,
     parent: {

package/menu/submenu-root/MenuSubmenuRoot.d.ts

@@ -2,7 +2,7 @@ import { MenuRoot } from "../root/MenuRoot.js";
 export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
 /**
  * Groups all parts of a submenu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */

package/menu/submenu-root/MenuSubmenuRoot.js

@@ -19,7 +19,7 @@ var _MenuSubmenuRootContext = require("./MenuSubmenuRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of a submenu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */