@base-ui/react 1.4.0 → 1.5.0

package/navigation-menu/arrow/NavigationMenuArrow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Align, Side } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays an element pointing toward the navigation menu's current anchor.
  * Renders a `<div>` element.

package/navigation-menu/arrow/NavigationMenuArrow.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * Displays an element pointing toward the navigation menu's current anchor.
  * Renders a `<div>` element.
@@ -19,8 +19,8 @@ var _useRenderElement = require("../../utils/useRenderElement");
  */
 const NavigationMenuArrow = exports.NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function NavigationMenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/navigation-menu/backdrop/NavigationMenuBackdrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A backdrop for the navigation menu popup.
  * Renders a `<div>` element.

package/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenuBackdrop = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -24,8 +24,8 @@ const stateAttributesMapping = {
  */
 const NavigationMenuBackdrop = exports.NavigationMenuBackdrop = /*#__PURE__*/React.forwardRef(function NavigationMenuBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/navigation-menu/content/NavigationMenuContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the content of the navigation menu item that is moved into the popup
  * when the item is active.

package/navigation-menu/content/NavigationMenuContent.js

@@ -9,17 +9,18 @@ exports.NavigationMenuContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _inertValue = require("@base-ui/utils/inertValue");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _CompositeRoot = require("../../composite/root/CompositeRoot");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _CompositeRoot = require("../../internals/composite/root/CompositeRoot");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -43,10 +44,10 @@ const stateAttributesMapping = {
  */
 const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React.forwardRef(function NavigationMenuContent(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    keepMounted = false,
+    className,
     style,
+    keepMounted = false,
     ...elementProps
   } = componentProps;
   const {
@@ -100,11 +101,13 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     transitionStatus,
     activationDirection
   };
-  const handleCurrentContentRef = React.useCallback(node => {
-    if (node) {
+  const handleCurrentContentRef = (0, _useStableCallback.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 = (0, _utils.getTarget)(event.nativeEvent);
@@ -160,7 +163,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
       refs: [forwardedRef, ref, handleCurrentContentRef],
       props: [defaultProps, hidden ? {
         hidden: true
-      } : _constants.EMPTY_OBJECT, elementProps],
+      } : _empty.EMPTY_OBJECT, elementProps],
       stateAttributesMapping: stateAttributesMapping
     })
   }), portalContainer);

package/navigation-menu/icon/NavigationMenuIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An icon that indicates that the trigger button opens a menu.
  *

package/navigation-menu/icon/NavigationMenuIcon.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenuIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
@@ -18,8 +18,8 @@ var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
  */
 const NavigationMenuIcon = exports.NavigationMenuIcon = /*#__PURE__*/React.forwardRef(function NavigationMenuIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/navigation-menu/item/NavigationMenuItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An individual navigation menu item.
  * Renders a `<li>` element.

package/navigation-menu/item/NavigationMenuItem.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenuItem = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuItemContext = require("./NavigationMenuItemContext");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual navigation menu item.
@@ -19,10 +19,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 const NavigationMenuItem = exports.NavigationMenuItem = /*#__PURE__*/React.forwardRef(function NavigationMenuItem(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    value: valueProp,
+    className,
     style,
+    value: valueProp,
     ...elementProps
   } = componentProps;
   const fallbackValue = (0, _useBaseUiId.useBaseUiId)();

package/navigation-menu/link/NavigationMenuLink.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A link in the navigation menu that can be used to navigate to a different page or section.
  * Renders an `<a>` element.

package/navigation-menu/link/NavigationMenuLink.js

@@ -10,9 +10,9 @@ var React = _interopRequireWildcard(require("react"));
 var _floatingUiReact = require("../../floating-ui-react");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _CompositeItem = require("../../internals/composite/item/CompositeItem");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A link in the navigation menu that can be used to navigate to a different page or section.

package/navigation-menu/list/NavigationMenuList.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Contains a list of navigation menu items.
  * Renders a `<ul>` element.

package/navigation-menu/list/NavigationMenuList.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenuList = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
-var _CompositeRoot = require("../../composite/root/CompositeRoot");
+var _CompositeRoot = require("../../internals/composite/root/CompositeRoot");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _constants = require("../../utils/constants");
-var _constants2 = require("../utils/constants");
+var _constants = require("../utils/constants");
 var _NavigationMenuDismissContext = require("./NavigationMenuDismissContext");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Contains a list of navigation menu items.
@@ -25,8 +25,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwardRef(function NavigationMenuList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
@@ -55,7 +55,7 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
     outsidePressEvent: 'intentional',
     outsidePress(event) {
       const target = (0, _utils.getTarget)(event);
-      const closestNavigationMenuTrigger = target?.closest(`[${_constants2.NAVIGATION_MENU_TRIGGER_IDENTIFIER}]`);
+      const closestNavigationMenuTrigger = target?.closest(`[${_constants.NAVIGATION_MENU_TRIGGER_IDENTIFIER}]`);
       return closestNavigationMenuTrigger === null;
     }
   });
@@ -67,7 +67,7 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
   // `stopEventPropagation` won't stop the propagation if the end of the list is reached,
   // but we want to block it in this case.
   // When nested, skip this handler so arrow keys can reach the parent CompositeRoot.
-  const defaultProps = nested ? _constants.EMPTY_OBJECT : {
+  const defaultProps = nested ? _empty.EMPTY_OBJECT : {
     onKeyDown(event) {
       const shouldStop = orientation === 'horizontal' && (event.key === 'ArrowLeft' || event.key === 'ArrowRight') || orientation === 'vertical' && (event.key === 'ArrowUp' || event.key === 'ArrowDown');
       if (shouldStop) {
@@ -75,7 +75,7 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
       }
     }
   };
-  const props = [dismissProps?.floating || _constants.EMPTY_OBJECT, defaultProps, {
+  const props = [dismissProps?.floating || _empty.EMPTY_OBJECT, defaultProps, {
     'aria-orientation': undefined
   }, elementProps];
 

package/navigation-menu/popup/NavigationMenuPopup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import { Align, Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A container for the navigation menu contents.

package/navigation-menu/popup/NavigationMenuPopup.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenuPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -27,10 +27,10 @@ const stateAttributesMapping = {
  */
 const NavigationMenuPopup = exports.NavigationMenuPopup = /*#__PURE__*/React.forwardRef(function NavigationMenuPopup(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    id: idProp,
+    className,
     style,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/positioner/NavigationMenuPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 /**
  * Positions the navigation menu against the currently active trigger.

package/navigation-menu/positioner/NavigationMenuPositioner.js

@@ -18,7 +18,7 @@ var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _NavigationMenuPortalContext = require("../portal/NavigationMenuPortalContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _NavigationMenuPositionerContext = require("./NavigationMenuPositionerContext");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
 var _usePositioner = require("../../utils/usePositioner");
 var _jsxRuntime = require("react/jsx-runtime");

package/navigation-menu/root/NavigationMenuRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Groups all parts of the navigation menu.
  * Renders a `<nav>` element at the root, or `<div>` element when nested.

package/navigation-menu/root/NavigationMenuRoot.js

@@ -13,12 +13,12 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("./NavigationMenuRootContext");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
 var _getCssDimensions = require("../../utils/getCssDimensions");
-var _reasons = require("../../utils/reasons");
+var _reasons = require("../../internals/reasons");
 var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
 var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -223,9 +223,7 @@ function TreeContext(props) {
   const nodeId = (0, _floatingUiReact.useFloatingNodeId)();
   const {
     rootRef,
-    nested
-  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const {
+    nested,
     open
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
   const state = {

package/navigation-menu/root/NavigationMenuRootContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { FloatingRootContext } from "../../floating-ui-react/index.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import type { NavigationMenuRoot } from "./NavigationMenuRoot.js";
 export type NavigationMenuPopupAutoSizeResetState = {
   abortController: AbortController | null;

package/navigation-menu/trigger/NavigationMenuTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * Opens the navigation menu popup when hovered or clicked, revealing the
  * associated content.

package/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -16,26 +16,29 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _useHoverInteractionSharedState = require("../../floating-ui-react/hooks/useHoverInteractionSharedState");
 var _utils = require("../../floating-ui-react/utils");
 var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _constants = require("../../utils/constants");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _constants = require("../../internals/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _useButton = require("../../use-button");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _CompositeItem = require("../../internals/composite/item/CompositeItem");
+var _useButton = require("../../internals/use-button");
+var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
 var _getCssDimensions = require("../../utils/getCssDimensions");
 var _constants2 = require("../utils/constants");
 var _NavigationMenuDismissContext = require("../list/NavigationMenuDismissContext");
 var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
 var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
+var _mergeProps = require("../../merge-props");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_SIZE = {
   width: 0,
@@ -51,11 +54,11 @@ const DEFAULT_SIZE = {
  */
 const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function NavigationMenuTrigger(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     nativeButton = true,
     disabled,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -89,6 +92,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
   const tree = (0, _floatingUiReact.useFloatingTree)();
   const dismissProps = (0, _NavigationMenuDismissContext.useNavigationMenuDismissContext)();
+  const direction = (0, _DirectionContext.useDirection)();
   const stickIfOpenTimeout = (0, _useTimeout.useTimeout)();
   const focusFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const mutationFrame = (0, _useAnimationFrame.useAnimationFrame)();
@@ -119,7 +123,14 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     popupAutoSizeResetRef.current.abortController = null;
     popupAutoSizeResetRef.current.owner = null;
   });
-  React.useEffect(cancelAutoSizeReset, [isActiveItem, cancelAutoSizeReset]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (isActiveItem) {
+      return;
+    }
+    mutationFrame.cancel();
+    sizeFrame.cancel();
+    cancelAutoSizeReset();
+  }, [isActiveItem, mutationFrame, sizeFrame, cancelAutoSizeReset]);
   function setAutoSizes() {
     if (!popupElement) {
       return;
@@ -183,6 +194,9 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${syncPositioner ? currentWidth : measuredWidth}px`);
     positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${syncPositioner ? currentHeight : measuredHeight}px`);
     sizeFrame.request(() => {
+      if (!isActiveItemRef.current) {
+        return;
+      }
       popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
       popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
       if (syncPositioner) {
@@ -214,6 +228,9 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
         const measuredHeight = height || currentHeight || prevSizeRef.current.height;
         setSharedFixedSizes(currentWidth, currentHeight);
         sizeFrame.request(() => {
+          if (!isActiveItemRef.current) {
+            return;
+          }
           setSharedFixedSizes(measuredWidth, measuredHeight);
           scheduleAutoSizeReset();
         });
@@ -335,7 +352,11 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     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();
@@ -354,14 +375,15 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
   (0, _useIsoLayoutEffect.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;
@@ -464,9 +486,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     stickIfOpen,
     toggle: isActiveItem
   });
-  const {
-    getReferenceProps
-  } = (0, _floatingUiReact.useInteractions)([hover, click]);
+  const referenceProps = React.useMemo(() => (0, _mergeProps.mergeProps)(click.reference, hover?.reference), [click.reference, hover]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (isActiveItem) {
       setFloatingRootContext(context);
@@ -570,8 +590,9 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent));
         handleOpenEvent(event);
@@ -610,7 +631,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       state: state,
       stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
       refs: [forwardedRef, handleTriggerElement, buttonRef],
-      props: [getReferenceProps, dismissProps?.reference || _constants.EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
+      props: [referenceProps, dismissProps?.reference || _empty.EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
     }), isActiveItem && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         ref: beforeOutsideRef,

package/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/navigation-menu/utils/isOutsideMenuEvent.js

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

package/navigation-menu/viewport/NavigationMenuViewport.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * The clipping viewport of the navigation menu's current content.
  * Renders a `<div>` element.

package/navigation-menu/viewport/NavigationMenuViewport.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useId = require("@base-ui/utils/useId");
 var _inertValue = require("@base-ui/utils/inertValue");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _utils = require("../../floating-ui-react/utils");
@@ -64,14 +64,13 @@ function Guards({
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-
 const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function NavigationMenuViewport(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     children,
     id: idProp,
-    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useId.useId)(idProp);