@base-ui/react 1.4.1 → 1.5.0

package/menu/radio-group/MenuRadioGroup.js

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

package/menu/radio-item/MenuRadioItem.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuRadioItem = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -74,13 +73,12 @@ const MenuRadioItem = exports.MenuRadioItem = /*#__PURE__*/React.forwardRef(func
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = (0, _useStableCallback.useStableCallback)(event => {
-    const details = {
-      ...(0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     setSelectedValue(value, details);
-  });
+  }
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _stateAttributesMapping.itemMapping,

package/menu/root/MenuRoot.js

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

package/menu/store/MenuHandle.js

@@ -44,7 +44,7 @@ class MenuHandle {
    * Indicates whether the menu is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

package/menu/store/MenuStore.d.ts

@@ -61,6 +61,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -78,6 +80,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -95,6 +99,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -112,6 +118,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -123,12 +131,33 @@ declare const selectors: {
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: HTMLProps;
+    inactiveTriggerProps: HTMLProps;
+    popupProps: HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -146,6 +175,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -163,6 +194,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -180,6 +213,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -191,12 +226,33 @@ declare const selectors: {
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: HTMLProps;
+    inactiveTriggerProps: HTMLProps;
+    popupProps: HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -214,6 +270,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -231,6 +289,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -248,6 +308,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -259,12 +321,33 @@ declare const selectors: {
     inactiveTriggerProps: HTMLProps;
     popupProps: HTMLProps;
   }, isActive: boolean) => HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: HTMLProps;
+    inactiveTriggerProps: HTMLProps;
+    popupProps: HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -282,6 +365,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -299,6 +384,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -13,6 +13,7 @@ var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _warn = require("@base-ui/utils/warn");
 var _safeReact = require("@base-ui/utils/safeReact");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -29,10 +30,11 @@ var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTriggerComponent(componentProps, forwardedRef) {
+const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     label,
     id: idProp,
     nativeButton = false,
@@ -40,7 +42,6 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     delay = 100,
     closeDelay = 0,
     disabled: disabledProp = false,
-    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)();
@@ -52,6 +53,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const baseRegisterTrigger = (0, _popups.useTriggerRegistration)(thisTriggerId, store);
   const registerTrigger = React.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
@@ -134,7 +136,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = (0, _floatingUiReact.useInteractions)([click]);
+  const localInteractionProps = click.reference ?? _empty.EMPTY_OBJECT;
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -145,7 +147,8 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping,
-    props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
+      'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
         if (highlighted) {

package/menu/trigger/MenuTrigger.js

@@ -35,6 +35,7 @@ var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootCo
 var _MenubarContext = require("../../menubar/MenubarContext");
 var _constants = require("../../internals/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
+var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
 const BOUNDARY_OFFSET = 2;
 
@@ -48,6 +49,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     nativeButton = true,
     id: idProp,
@@ -56,7 +58,6 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     closeDelay = 0,
     handle,
     payload,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _MenuRootContext.useMenuRootContext)(true);
@@ -68,6 +69,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React.useRef(null);
   const parent = useMenuParent();
   const compositeRootContext = (0, _CompositeRootContext.useCompositeRootContext)(true);
@@ -174,15 +176,21 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = (0, _floatingUiReact.useInteractions)([click, focus]);
+  const localInteractionProps = React.useMemo(() => (0, _mergeProps.mergeProps)(focus.reference, click.reference), [focus.reference, click.reference]);
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
   const state = {
     disabled,
     open: isOpenedByThisTrigger
   };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const ref = [triggerRef, forwardedRef, buttonRef, registerTrigger, triggerElementRef];
-  const props = [localInteractionProps.getReferenceProps(), hoverProps ?? _empty.EMPTY_OBJECT, rootTriggerProps, {
+  const props = [localInteractionProps, hoverProps ?? _empty.EMPTY_OBJECT, rootTriggerProps, {
     'aria-haspopup': 'menu',
+    'aria-controls': popupId,
     id: thisTriggerId,
     onMouseDown: event => {
       if (store.select('open')) {
@@ -201,11 +209,6 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const {
-    preFocusGuardRef,
-    handlePreFocusGuardFocus,
-    handleFocusTargetFocus
-  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,

package/menu/viewport/MenuViewport.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)

package/menu/viewport/MenuViewport.js

@@ -20,8 +20,8 @@ const stateAttributesMapping = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)

package/navigation-menu/arrow/NavigationMenuArrow.js

@@ -19,8 +19,8 @@ var _useRenderElement = require("../../internals/useRenderElement");
  */
 const NavigationMenuArrow = exports.NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function NavigationMenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;