@base-ui/react 1.1.0 → 1.3.0

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

@@ -18,7 +18,7 @@ export interface NavigationMenuBackdropState {
    */
   transitionStatus: TransitionStatus;
 }
-export interface NavigationMenuBackdropProps extends BaseUIComponentProps<'div', NavigationMenuBackdrop.State> {}
+export interface NavigationMenuBackdropProps extends BaseUIComponentProps<'div', NavigationMenuBackdropState> {}
 export declare namespace NavigationMenuBackdrop {
   type State = NavigationMenuBackdropState;
   type Props = NavigationMenuBackdropProps;

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

@@ -27,10 +27,10 @@ export const NavigationMenuBackdrop = /*#__PURE__*/React.forwardRef(function Nav
     mounted,
     transitionStatus
   } = useNavigationMenuRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

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

@@ -23,7 +23,14 @@ export interface NavigationMenuContentState {
    */
   activationDirection: 'left' | 'right' | 'up' | 'down' | null;
 }
-export interface NavigationMenuContentProps extends BaseUIComponentProps<'div', NavigationMenuContent.State> {}
+export interface NavigationMenuContentProps extends BaseUIComponentProps<'div', NavigationMenuContentState> {
+  /**
+   * Whether to keep the content mounted in the DOM while the popup is closed.
+   * Ensures the content is present during server-side rendering for web crawlers.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+}
 export declare namespace NavigationMenuContent {
   type State = NavigationMenuContentState;
   type Props = NavigationMenuContentProps;

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { inertValue } from '@base-ui/utils/inertValue';
 import { FloatingNode } from "../../floating-ui-react/index.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
@@ -12,6 +13,7 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
+import { EMPTY_OBJECT } from "../../utils/constants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...popupStateMapping,
@@ -37,6 +39,7 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
   const {
     className,
     render,
+    keepMounted = false,
     ...elementProps
   } = componentProps;
   const {
@@ -53,6 +56,7 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
   const nodeId = useNavigationMenuTreeContext();
   const open = popupMounted && value === itemValue;
   const ref = React.useRef(null);
+  const [hasMountedInPortal, setHasMountedInPortal] = React.useState(false);
   const [focusInside, setFocusInside] = React.useState(false);
   const {
     mounted,
@@ -74,11 +78,21 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
       }
     }
   });
-  const state = React.useMemo(() => ({
+
+  // When a content re-enters while still mounted (e.g. switching top-level triggers
+  // back before the exit animation completes), the DOM element hasn't changed so the
+  // callback ref won't fire again. Ensure the shared ref is updated so the
+  // MutationObserver in the trigger watches the correct content element.
+  useIsoLayoutEffect(() => {
+    if (open && ref.current) {
+      currentContentRef.current = ref.current;
+    }
+  }, [open, currentContentRef]);
+  const state = {
     open,
     transitionStatus,
     activationDirection
-  }), [open, transitionStatus, activationDirection]);
+  };
   const handleCurrentContentRef = React.useCallback(node => {
     if (node) {
       currentContentRef.current = node;
@@ -108,8 +122,24 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
     ...commonProps
   } : commonProps;
   const portalContainer = viewportTargetElement || viewportElement;
-  const shouldRender = portalContainer !== null && mounted;
-  if (!portalContainer || !shouldRender) {
+  const hidden = keepMounted && !mounted;
+  const shouldRenderInline = keepMounted && !portalContainer && !hasMountedInPortal;
+  if (keepMounted && portalContainer && !hasMountedInPortal) {
+    setHasMountedInPortal(true);
+  }
+  if (shouldRenderInline) {
+    return /*#__PURE__*/_jsx(CompositeRoot, {
+      render: render,
+      className: className,
+      state: state,
+      refs: [forwardedRef],
+      props: [defaultProps, {
+        hidden: true
+      }, elementProps],
+      stateAttributesMapping: stateAttributesMapping
+    });
+  }
+  if (!portalContainer || !mounted && !keepMounted) {
     return null;
   }
   return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(FloatingNode, {
@@ -119,7 +149,9 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
       className: className,
       state: state,
       refs: [forwardedRef, ref, handleCurrentContentRef],
-      props: [defaultProps, elementProps],
+      props: [defaultProps, hidden ? {
+        hidden: true
+      } : EMPTY_OBJECT, elementProps],
       stateAttributesMapping: stateAttributesMapping
     })
   }), portalContainer);

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

@@ -5,14 +5,14 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuIcon: React.ForwardRefExoticComponent<Omit<NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuIcon: React.ForwardRefExoticComponent<Omit<NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface NavigationMenuIconState {
   /**
    * Whether the navigation menu is open and the item is active.
    */
   open: boolean;
 }
-export interface NavigationMenuIconProps extends BaseUIComponentProps<'span', NavigationMenuIcon.State> {}
+export interface NavigationMenuIconProps extends BaseUIComponentProps<'span', NavigationMenuIconState> {}
 export declare namespace NavigationMenuIcon {
   type State = NavigationMenuIconState;
   type Props = NavigationMenuIconProps;

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

@@ -25,9 +25,9 @@ export const NavigationMenuIcon = /*#__PURE__*/React.forwardRef(function Navigat
     value
   } = useNavigationMenuRootContext();
   const isActiveItem = open && value === itemValue;
-  const state = React.useMemo(() => ({
+  const state = {
     open: isActiveItem
-  }), [isActiveItem]);
+  };
   const element = useRenderElement('span', componentProps, {
     state,
     ref: forwardedRef,

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

@@ -6,9 +6,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export interface NavigationMenuItemState {}
-export interface NavigationMenuItemProps extends BaseUIComponentProps<'li', NavigationMenuItem.State> {
+export interface NavigationMenuItemProps extends BaseUIComponentProps<'li', NavigationMenuItemState> {
   /**
    * A unique value that identifies this navigation menu item.
    * If no value is provided, a unique ID will be generated automatically.

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

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NavigationMenuItemContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -13,17 +13,17 @@ export interface NavigationMenuLinkState {
    */
   active: boolean;
 }
-export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLink.State> {
+export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState> {
   /**
    * Whether the link is the currently active page.
    * @default false
    */
-  active?: boolean;
+  active?: boolean | undefined;
   /**
    * Whether to close the navigation menu when the link is clicked.
    * @default false
    */
-  closeOnClick?: boolean;
+  closeOnClick?: boolean | undefined;
 }
 export declare namespace NavigationMenuLink {
   type State = NavigationMenuLinkState;

package/esm/navigation-menu/link/NavigationMenuLink.js

@@ -31,9 +31,9 @@ export const NavigationMenuLink = /*#__PURE__*/React.forwardRef(function Navigat
   } = useNavigationMenuRootContext();
   const nodeId = useNavigationMenuTreeContext();
   const tree = useFloatingTree();
-  const state = React.useMemo(() => ({
+  const state = {
     active
-  }), [active]);
+  };
   const defaultProps = {
     'aria-current': active ? 'page' : undefined,
     tabIndex: undefined,

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const NavigationMenuDismissContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") NavigationMenuDismissContext.displayName = "NavigationMenuDismissContext";

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

@@ -6,14 +6,14 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export interface NavigationMenuListState {
   /**
    * If `true`, the popup is open.
    */
   open: boolean;
 }
-export interface NavigationMenuListProps extends BaseUIComponentProps<'ul', NavigationMenuList.State> {}
+export interface NavigationMenuListProps extends BaseUIComponentProps<'ul', NavigationMenuListState> {}
 export declare namespace NavigationMenuList {
   type State = NavigationMenuListState;
   type Props = NavigationMenuListProps;

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useDismiss } from "../../floating-ui-react/index.js";
+import { useDismiss, useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
 import { getTarget } from "../../floating-ui-react/utils.js";
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
@@ -30,11 +30,18 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
     floatingRootContext,
     positionerElement,
     value,
+    closeDelay,
+    viewportElement,
     nested
   } = useNavigationMenuRootContext();
   const fallbackContext = React.useMemo(() => getEmptyRootContext(), []);
   const context = floatingRootContext || fallbackContext;
   const interactionsEnabled = positionerElement ? true : !value;
+  const hoverInteractionsEnabled = positionerElement || viewportElement ? true : !value;
+  useHoverFloatingInteraction(context, {
+    enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
+    closeDelay
+  });
   const dismiss = useDismiss(context, {
     enabled: interactionsEnabled,
     outsidePressEvent: 'intentional',
@@ -45,14 +52,16 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
     }
   });
   const dismissProps = floatingRootContext ? dismiss : undefined;
-  const state = React.useMemo(() => ({
+  const state = {
     open
-  }), [open]);
+  };
 
   // `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 ? {} : {
+  const defaultProps = nested ? {
+    'aria-orientation': orientation
+  } : {
     onKeyDown(event) {
       const shouldStop = orientation === 'horizontal' && (event.key === 'ArrowLeft' || event.key === 'ArrowRight') || orientation === 'vertical' && (event.key === 'ArrowUp' || event.key === 'ArrowDown');
       if (shouldStop) {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { Align, Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A container for the navigation menu contents.
  * Renders a `<nav>` element.
@@ -17,8 +18,20 @@ export interface NavigationMenuPopupState {
    * The transition status of the popup.
    */
   transitionStatus: TransitionStatus;
+  /**
+   * The side of the anchor the popup is positioned on.
+   */
+  side: Side;
+  /**
+   * The alignment of the popup relative to the anchor.
+   */
+  align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
+  anchorHidden: boolean;
 }
-export interface NavigationMenuPopupProps extends BaseUIComponentProps<'nav', NavigationMenuPopup.State> {}
+export interface NavigationMenuPopupProps extends BaseUIComponentProps<'nav', NavigationMenuPopupState> {}
 export declare namespace NavigationMenuPopup {
   type State = NavigationMenuPopupState;
   type Props = NavigationMenuPopupProps;

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

@@ -34,13 +34,13 @@ export const NavigationMenuPopup = /*#__PURE__*/React.forwardRef(function Naviga
   const positioning = useNavigationMenuPositionerContext();
   const direction = useDirection();
   const id = useBaseUiId(idProp);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
-  }), [open, transitionStatus, positioning.side, positioning.align, positioning.anchorHidden]);
+  };
 
   // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
   let isOriginSide = positioning.side === 'top';

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

@@ -20,11 +20,11 @@ export let NavigationMenuPopupDataAttributes = function (NavigationMenuPopupData
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuPopupDataAttributes["side"] = "data-side";
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to the specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuPopupDataAttributes["align"] = "data-align";
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return NavigationMenuPopupDataAttributes;
 }({});

package/esm/navigation-menu/portal/NavigationMenuPortal.d.ts

@@ -8,20 +8,19 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
 export declare const NavigationMenuPortal: React.ForwardRefExoticComponent<Omit<NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace NavigationMenuPortal {
-  interface State {}
-}
-export interface NavigationMenuPortalProps extends FloatingPortal.Props<NavigationMenuPortal.State> {
+export interface NavigationMenuPortalState {}
+export interface NavigationMenuPortalProps extends FloatingPortal.Props<NavigationMenuPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<NavigationMenuPortal.State>['container'];
+  container?: FloatingPortal.Props<NavigationMenuPortalState>['container'] | undefined;
 }
 export declare namespace NavigationMenuPortal {
+  type State = NavigationMenuPortalState;
   type Props = NavigationMenuPortalProps;
 }

package/esm/navigation-menu/portal/NavigationMenuPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NavigationMenuPortalContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 /**
  * Positions the navigation menu against the currently active trigger.
  * Renders a `<div>` element.
@@ -13,15 +13,24 @@ export interface NavigationMenuPositionerState {
    * Whether the navigation menu is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
   /**
    * Whether CSS transitions should be disabled.
    */
   instant: boolean;
 }
-export interface NavigationMenuPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', NavigationMenuPositioner.State> {}
+export interface NavigationMenuPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', NavigationMenuPositionerState> {}
 export declare namespace NavigationMenuPositioner {
   type State = NavigationMenuPositionerState;
   type Props = NavigationMenuPositionerProps;

package/esm/navigation-menu/positioner/NavigationMenuPositioner.js

@@ -120,13 +120,13 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
       }
     };
   }, [open, mounted, positioning.positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     instant
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, instant]);
+  };
   React.useEffect(() => {
     if (!open) {
       return undefined;

package/esm/navigation-menu/positioner/NavigationPositionerDataAttributes.js

@@ -16,12 +16,12 @@ export let NavigationMenuPositionerDataAttributes = function (NavigationMenuPosi
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuPositionerDataAttributes["side"] = "data-side";
+  NavigationMenuPositionerDataAttributes[NavigationMenuPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to the specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuPositionerDataAttributes["align"] = "data-align";
+  NavigationMenuPositionerDataAttributes[NavigationMenuPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    */

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

@@ -19,15 +19,15 @@ export interface NavigationMenuRootState {
    */
   nested: boolean;
 }
-export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRoot.State> {
+export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
   /**
    * A ref to imperative actions.
    */
-  actionsRef?: React.RefObject<NavigationMenuRoot.Actions | null>;
+  actionsRef?: React.RefObject<NavigationMenuRoot.Actions | null> | undefined;
   /**
    * Event handler called after any animations complete when the navigation menu is closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * The controlled value of the navigation menu item that should be currently open.
    * When non-nullish, the menu will be open. When nullish, the menu will be closed.
@@ -46,22 +46,22 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
   /**
-   * How long to wait before opening the navigation menu. Specified in milliseconds.
+   * How long to wait before opening the navigation popup. Specified in milliseconds.
    * @default 50
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
-   * How long to wait before closing the navigation menu. Specified in milliseconds.
+   * How long to wait before closing the navigation popup. Specified in milliseconds.
    * @default 50
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * The orientation of the navigation menu.
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical' | undefined;
 }
 export interface NavigationMenuRootActions {
   unmount: () => void;

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

@@ -5,16 +5,31 @@ import { isHTMLElement } from '@floating-ui/utils/dom';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { FloatingTree, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
+import { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
 import { activeElement, contains } from "../../floating-ui-react/utils.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { NavigationMenuRootContext, NavigationMenuTreeContext, useNavigationMenuRootContext } from "./NavigationMenuRootContext.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { setFixedSize } from "../utils/setFixedSize.js";
+import { getCssDimensions } from "../../utils/getCssDimensions.js";
 import { REASONS } from "../../utils/reasons.js";
+import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
+import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const blockedReturnFocusReasons = new Set([REASONS.triggerHover, REASONS.outsidePress, REASONS.focusOut]);
+function setSharedFixedSize(popupElement, positionerElement) {
+  const {
+    width,
+    height
+  } = getCssDimensions(popupElement);
+  if (width === 0 || height === 0) {
+    return;
+  }
+  popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${width}px`);
+  popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${height}px`);
+  positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+  positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+}
 
 /**
  * Groups all parts of the navigation menu.
@@ -34,6 +49,7 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
     onOpenChangeComplete
   } = componentProps;
   const nested = useFloatingParentNodeId() != null;
+  const parentRootContext = useNavigationMenuRootContext(true);
   const [value, setValueUnwrapped] = useControlled({
     controlled: valueParam,
     default: defaultValue,
@@ -72,8 +88,7 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
       setActivationDirection(null);
       setFloatingRootContext(undefined);
       if (positionerElement && popupElement) {
-        setFixedSize(popupElement, 'popup');
-        setFixedSize(positionerElement, 'positioner');
+        setSharedFixedSize(popupElement, positionerElement);
       }
     }
     if (nextValue !== value) {
@@ -83,6 +98,9 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
       return;
     }
     setValueUnwrapped(nextValue);
+    if (nested && !nextValue && eventDetails.reason === REASONS.linkPress && parentRootContext) {
+      parentRootContext.setValue(null, eventDetails);
+    }
   });
   const handleUnmount = useStableCallback(() => {
     const doc = ownerDocument(rootRef.current);
@@ -196,19 +214,20 @@ function TreeContext(props) {
   const {
     open
   } = useNavigationMenuRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     nested
-  }), [open, nested]);
+  };
   const element = useRenderElement(nested ? 'div' : 'nav', props.componentProps, {
     state,
     ref: [props.forwardedRef, rootRef],
-    props: [{
-      'aria-orientation': orientation
-    }, elementProps]
+    props: elementProps
   });
   return /*#__PURE__*/_jsx(NavigationMenuTreeContext.Provider, {
     value: nodeId,
-    children: element
+    children: /*#__PURE__*/_jsx(FloatingNode, {
+      id: nodeId,
+      children: element
+    })
   });
 }

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

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NavigationMenuRootContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -14,7 +14,7 @@ export interface NavigationMenuTriggerState {
    */
   open: boolean;
 }
-export interface NavigationMenuTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', NavigationMenuTrigger.State> {}
+export interface NavigationMenuTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', NavigationMenuTriggerState> {}
 export declare namespace NavigationMenuTrigger {
   type State = NavigationMenuTriggerState;
   type Props = NavigationMenuTriggerProps;