@base-ui/react 1.4.1 → 1.5.0

package/esm/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/esm/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -6,7 +6,8 @@ import { isElementDisabled } from '@base-ui/utils/isElementDisabled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui/utils/warn';
 import { SafeReact } from '@base-ui/utils/safeReact';
-import { safePolygon, useClick, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { safePolygon, useClick, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
@@ -23,10 +24,11 @@ import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContex
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTriggerComponent(componentProps, forwardedRef) {
+export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     label,
     id: idProp,
     nativeButton = false,
@@ -34,7 +36,6 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     delay = 100,
     closeDelay = 0,
     disabled: disabledProp = false,
-    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem();
@@ -46,6 +47,7 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const baseRegisterTrigger = useTriggerRegistration(thisTriggerId, store);
   const registerTrigger = React.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
@@ -128,7 +130,7 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = useInteractions([click]);
+  const localInteractionProps = click.reference ?? EMPTY_OBJECT;
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -139,7 +141,8 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: triggerOpenStateMapping,
-    props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
+      'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
         if (highlighted) {

package/esm/menu/trigger/MenuTrigger.js

@@ -8,7 +8,7 @@ import { fastComponentRef } from '@base-ui/utils/fastHooks';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { safePolygon, useClick, useFloatingTree, useFocus, useHoverReferenceInteraction, useInteractions, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
+import { safePolygon, useClick, useFloatingTree, useFocus, useHoverReferenceInteraction, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.js";
 import { contains } from "../../floating-ui-react/utils.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
@@ -28,6 +28,7 @@ import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRo
 import { useMenubarContext } from "../../menubar/MenubarContext.js";
 import { PATIENT_CLICK_THRESHOLD } from "../../internals/constants.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
+import { mergeProps } from "../../merge-props/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BOUNDARY_OFFSET = 2;
 
@@ -41,6 +42,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     nativeButton = true,
     id: idProp,
@@ -49,7 +51,6 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     closeDelay = 0,
     handle,
     payload,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
@@ -61,6 +62,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   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 = useCompositeRootContext(true);
@@ -167,15 +169,21 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = useInteractions([click, focus]);
+  const localInteractionProps = React.useMemo(() => mergeProps(focus.reference, click.reference), [focus.reference, click.reference]);
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = 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_OBJECT, rootTriggerProps, {
+  const props = [localInteractionProps, hoverProps ?? EMPTY_OBJECT, rootTriggerProps, {
     'aria-haspopup': 'menu',
+    'aria-controls': popupId,
     id: thisTriggerId,
     onMouseDown: event => {
       if (store.select('open')) {
@@ -194,11 +202,6 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const {
-    preFocusGuardRef,
-    handlePreFocusGuardFocus,
-    handleFocusTargetFocus
-  } = useTriggerFocusGuards(store, triggerElementRef);
   const element = useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: pressableTriggerOpenStateMapping,

package/esm/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/esm/menu/viewport/MenuViewport.js

@@ -14,8 +14,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/esm/navigation-menu/arrow/NavigationMenuArrow.js

@@ -14,8 +14,8 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
  */
 export const NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function NavigationMenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -18,8 +18,8 @@ const stateAttributesMapping = {
  */
 export const NavigationMenuBackdrop = /*#__PURE__*/React.forwardRef(function NavigationMenuBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/navigation-menu/content/NavigationMenuContent.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { inertValue } from '@base-ui/utils/inertValue';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { FloatingNode } from "../../floating-ui-react/index.js";
@@ -37,10 +38,10 @@ const stateAttributesMapping = {
  */
 export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function NavigationMenuContent(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    keepMounted = false,
+    className,
     style,
+    keepMounted = false,
     ...elementProps
   } = componentProps;
   const {
@@ -94,11 +95,13 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
     transitionStatus,
     activationDirection
   };
-  const handleCurrentContentRef = React.useCallback(node => {
-    if (node) {
+  const handleCurrentContentRef = useStableCallback(node => {
+    // Inactive `keepMounted` content also mounts in the viewport; only the
+    // active content can own the shared sizing observer target.
+    if (node && open) {
       currentContentRef.current = node;
     }
-  }, [currentContentRef]);
+  });
   const commonProps = {
     onFocus(event) {
       const target = getTarget(event.nativeEvent);

package/esm/navigation-menu/icon/NavigationMenuIcon.js

@@ -13,8 +13,8 @@ import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.
  */
 export const NavigationMenuIcon = /*#__PURE__*/React.forwardRef(function NavigationMenuIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/navigation-menu/item/NavigationMenuItem.js

@@ -14,10 +14,10 @@ import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const NavigationMenuItem = /*#__PURE__*/React.forwardRef(function NavigationMenuItem(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    value: valueProp,
+    className,
     style,
+    value: valueProp,
     ...elementProps
   } = componentProps;
   const fallbackValue = useBaseUiId();

package/esm/navigation-menu/list/NavigationMenuList.js

@@ -20,8 +20,8 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function NavigationMenuList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/navigation-menu/popup/NavigationMenuPopup.js

@@ -21,10 +21,10 @@ const stateAttributesMapping = {
  */
 export const NavigationMenuPopup = /*#__PURE__*/React.forwardRef(function NavigationMenuPopup(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    id: idProp,
+    className,
     style,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/root/NavigationMenuRoot.js

@@ -217,9 +217,7 @@ function TreeContext(props) {
   const nodeId = useFloatingNodeId();
   const {
     rootRef,
-    nested
-  } = useNavigationMenuRootContext();
-  const {
+    nested,
     open
   } = useNavigationMenuRootContext();
   const state = {

package/esm/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -11,7 +11,7 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { EMPTY_ARRAY } from '@base-ui/utils/empty';
-import { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
+import { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
 import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "../../floating-ui-react/hooks/useHoverInteractionSharedState.js";
 import { contains, getTabbableAfterElement, getNextTabbable, getPreviousTabbable, isOutsideEvent, stopEvent } from "../../floating-ui-react/utils.js";
 import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.js";
@@ -31,6 +31,8 @@ import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from "../utils/constants.js";
 import { useNavigationMenuDismissContext } from "../list/NavigationMenuDismissContext.js";
 import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
 import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
+import { mergeProps } from "../../merge-props/index.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_SIZE = {
   width: 0,
@@ -46,11 +48,11 @@ const DEFAULT_SIZE = {
  */
 export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function NavigationMenuTrigger(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     nativeButton = true,
     disabled,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -84,6 +86,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   const nodeId = useNavigationMenuTreeContext();
   const tree = useFloatingTree();
   const dismissProps = useNavigationMenuDismissContext();
+  const direction = useDirection();
   const stickIfOpenTimeout = useTimeout();
   const focusFrame = useAnimationFrame();
   const mutationFrame = useAnimationFrame();
@@ -343,7 +346,11 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     mutationObserver.observe(observedElement, {
       childList: true,
       subtree: true,
-      characterData: true
+      characterData: true,
+      // `keepMounted` submenu switches update dimensions by toggling hidden
+      // content rather than inserting or removing content nodes.
+      attributes: true,
+      attributeFilter: ['hidden']
     });
     return () => {
       mutationObserver.disconnect();
@@ -362,14 +369,15 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
   useIsoLayoutEffect(() => {
     if (isActiveItemRef.current && open && popupElement) {
-      if (transitionStatus === 'starting') {
-        const hasNestedMenu = currentContentRef.current?.querySelector('[data-nested]') != null;
-        if (hasNestedMenu) {
-          sizeFrame.request(syncCurrentSize);
-          return () => {
-            sizeFrame.cancel();
-          };
-        }
+      const hasNestedMenu = currentContentRef.current?.querySelector('[data-nested]') != null;
+      if (transitionStatus === 'starting' && hasNestedMenu) {
+        // Inline nested menus can reveal their default content after the
+        // top-level content enters the viewport. Defer once so the opening
+        // size is measured from the final nested content, not the shell.
+        sizeFrame.request(syncCurrentSize);
+        return () => {
+          sizeFrame.cancel();
+        };
       }
       if (skipAutoSizeSyncRef.current) {
         skipAutoSizeSyncRef.current = false;
@@ -472,9 +480,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     stickIfOpen,
     toggle: isActiveItem
   });
-  const {
-    getReferenceProps
-  } = useInteractions([hover, click]);
+  const referenceProps = React.useMemo(() => mergeProps(click.reference, hover?.reference), [click.reference, hover]);
   useIsoLayoutEffect(() => {
     if (isActiveItem) {
       setFloatingRootContext(context);
@@ -578,8 +584,9 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       if (nested) {
         return;
       }
+      const verticalOpenKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
       const openHorizontal = orientation === 'horizontal' && event.key === 'ArrowDown';
-      const openVertical = orientation === 'vertical' && event.key === 'ArrowRight';
+      const openVertical = orientation === 'vertical' && event.key === verticalOpenKey;
       if (openHorizontal || openVertical) {
         setValue(itemValue, createChangeEventDetails(REASONS.listNavigation, event.nativeEvent));
         handleOpenEvent(event);
@@ -618,7 +625,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       state: state,
       stateAttributesMapping: pressableTriggerOpenStateMapping,
       refs: [forwardedRef, handleTriggerElement, buttonRef],
-      props: [getReferenceProps, dismissProps?.reference || EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
+      props: [referenceProps, dismissProps?.reference || EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
     }), isActiveItem && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(FocusGuard, {
         ref: beforeOutsideRef,

package/esm/navigation-menu/utils/isOutsideMenuEvent.d.ts

@@ -5,7 +5,6 @@ interface Targets {
 }
 interface Params {
   popupElement: HTMLElement | null;
-  viewportElement?: HTMLElement | null | undefined;
   rootRef: React.RefObject<HTMLDivElement | null>;
   tree: FloatingTreeType | null;
   nodeId: string | undefined;

package/esm/navigation-menu/utils/isOutsideMenuEvent.js

@@ -5,7 +5,6 @@ export function isOutsideMenuEvent({
 }, params) {
   const {
     popupElement,
-    viewportElement,
     rootRef,
     tree,
     nodeId
@@ -17,8 +16,5 @@ export function isOutsideMenuEvent({
   if (!popupElement) {
     return !contains(rootRef.current, relatedTarget) && !nodeChildrenContains;
   }
-
-  // Use popupElement as the primary floating element, but fall back to viewportElement if needed
-  const floatingElement = popupElement || viewportElement;
-  return !contains(floatingElement, currentTarget) && !contains(floatingElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains && !(contains(floatingElement, relatedTarget) && relatedTarget?.hasAttribute('data-base-ui-focus-guard'));
+  return !contains(popupElement, currentTarget) && !contains(popupElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains && !(contains(popupElement, relatedTarget) && relatedTarget?.hasAttribute('data-base-ui-focus-guard'));
 }

package/esm/navigation-menu/viewport/NavigationMenuViewport.js

@@ -58,14 +58,13 @@ function Guards({
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-
 export const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function NavigationMenuViewport(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     children,
     id: idProp,
-    style,
     ...elementProps
   } = componentProps;
   const id = useId(idProp);