@base-ui/react 1.3.0 → 1.4.1

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,
@@ -26,6 +26,7 @@ const NavigationMenuBackdrop = exports.NavigationMenuBackdrop = /*#__PURE__*/Rea
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -10,16 +10,16 @@ var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 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,
@@ -46,6 +46,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     className,
     render,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -137,6 +138,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, {
@@ -153,11 +155,12 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       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");
@@ -20,6 +20,7 @@ const NavigationMenuIcon = exports.NavigationMenuIcon = /*#__PURE__*/React.forwa
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

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.
@@ -22,6 +22,7 @@ const NavigationMenuItem = exports.NavigationMenuItem = /*#__PURE__*/React.forwa
     className,
     render,
     value: valueProp,
+    style,
     ...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.
@@ -26,6 +26,7 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
     render,
     active = false,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -65,6 +66,7 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
     tag: "a",
     render: render,
     className: className,
+    style: style,
     state: state,
     refs: [forwardedRef],
     props: [defaultProps, elementProps]

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.
@@ -27,8 +27,10 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
+  const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
   const {
     orientation,
     open,
@@ -45,14 +47,15 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
   const hoverInteractionsEnabled = positionerElement || viewportElement ? true : !value;
   (0, _floatingUiReact.useHoverFloatingInteraction)(context, {
     enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
-    closeDelay
+    closeDelay,
+    nodeId
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(context, {
     enabled: interactionsEnabled,
     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;
     }
   });
@@ -64,9 +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 ? {
-    'aria-orientation': orientation
-  } : {
+  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) {
@@ -74,7 +75,9 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
       }
     }
   };
-  const props = [dismissProps?.floating || _constants.EMPTY_OBJECT, defaultProps, elementProps];
+  const props = [dismissProps?.floating || _empty.EMPTY_OBJECT, defaultProps, {
+    'aria-orientation': undefined
+  }, elementProps];
 
   // When nested, skip the CompositeRoot wrapper so that triggers can participate
   // in the parent Content's composite navigation context. Also skip the onKeyDown
@@ -96,6 +99,7 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: props,

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,
@@ -30,6 +30,7 @@ const NavigationMenuPopup = exports.NavigationMenuPopup = /*#__PURE__*/React.for
     className,
     render,
     id: idProp,
+    style,
     ...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

@@ -8,19 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavigationMenuPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _owner = require("@base-ui/utils/owner");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _utils = require("../../floating-ui-react/utils");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _NavigationMenuPortalContext = require("../portal/NavigationMenuPortalContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _NavigationMenuPositionerContext = require("./NavigationMenuPositionerContext");
-var _popupStateMapping = require("../../utils/popupStateMapping");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _usePositioner = require("../../utils/usePositioner");
 var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_ROOT_CONTEXT = (0, _getEmptyRootContext.getEmptyRootContext)();
 
@@ -55,6 +55,7 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _NavigationMenuPortalContext.useNavigationMenuPortalContext)();
@@ -83,12 +84,7 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
 
     // Listen to the event on the capture phase so they run before the focus
     // trap elements onFocus prop is called.
-    positionerElement.addEventListener('focusin', onFocus, true);
-    positionerElement.addEventListener('focusout', onFocus, true);
-    return () => {
-      positionerElement.removeEventListener('focusin', onFocus, true);
-      positionerElement.removeEventListener('focusout', onFocus, true);
-    };
+    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(positionerElement, 'focusin', onFocus, true), (0, _addEventListener.addEventListener)(positionerElement, 'focusout', onFocus, true));
   }, [positionerElement]);
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
@@ -112,20 +108,6 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
     // and position transition simultaneously when side=top or side=left.
     adaptiveOrigin: _adaptiveOriginMiddleware.adaptiveOrigin
   });
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioning.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioning.positionerStyles]);
   const state = {
     open,
     side: positioning.side,
@@ -146,16 +128,15 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
       });
     }
     const win = (0, _owner.ownerWindow)(positionerElement);
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return (0, _addEventListener.addEventListener)(win, 'resize', handleResize);
   }, [open, resizeTimeout, positionerElement]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement, positionerRef],
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement, positionerRef],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuPositionerContext.NavigationMenuPositionerContext.Provider, {
     value: positioning,

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

@@ -1,14 +1,16 @@
 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.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuRoot: React.ForwardRefExoticComponent<Omit<NavigationMenuRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenuRoot: {
+  <Value = any>(props: NavigationMenuRoot.Props<Value>): React.JSX.Element;
+};
 export interface NavigationMenuRootState {
   /**
    * If `true`, the popup is open.
@@ -19,7 +21,7 @@ export interface NavigationMenuRootState {
    */
   nested: boolean;
 }
-export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
+export interface NavigationMenuRootProps<Value = any> extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
   /**
    * A ref to imperative actions.
    */
@@ -35,18 +37,18 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
    * To render an uncontrolled navigation menu, use the `defaultValue` prop instead.
    * @default null
    */
-  value?: any;
+  value?: Value | null | undefined;
   /**
    * The uncontrolled value of the item that should be initially selected.
    *
    * To render a controlled navigation menu, use the `value` prop instead.
    * @default null
    */
-  defaultValue?: any;
+  defaultValue?: Value | null | undefined;
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: ((value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
+  onValueChange?: ((value: Value | null, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
   /**
    * How long to wait before opening the navigation popup. Specified in milliseconds.
    * @default 50
@@ -70,7 +72,8 @@ export type NavigationMenuRootChangeEventReason = typeof REASONS.triggerPress |
 export type NavigationMenuRootChangeEventDetails = BaseUIChangeEventDetails<NavigationMenuRoot.ChangeEventReason>;
 export declare namespace NavigationMenuRoot {
   type State = NavigationMenuRootState;
-  type Props = NavigationMenuRootProps;
+  type Props<TValue = any> = NavigationMenuRootProps<TValue>;
+  type Value<TValue = any> = TValue | null;
   type Actions = NavigationMenuRootActions;
   type ChangeEventReason = NavigationMenuRootChangeEventReason;
   type ChangeEventDetails = NavigationMenuRootChangeEventDetails;

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");
@@ -80,6 +80,12 @@ const NavigationMenuRoot = exports.NavigationMenuRoot = /*#__PURE__*/React.forwa
   const afterInsideRef = React.useRef(null);
   const beforeOutsideRef = React.useRef(null);
   const afterOutsideRef = React.useRef(null);
+  // Shared across triggers so a newly active trigger can cancel a stale
+  // popup auto-size reset scheduled by the previously active trigger.
+  const popupAutoSizeResetRef = React.useRef({
+    abortController: null,
+    owner: null
+  });
   const {
     mounted,
     setMounted,
@@ -175,6 +181,7 @@ const NavigationMenuRoot = exports.NavigationMenuRoot = /*#__PURE__*/React.forwa
     beforeOutsideRef,
     afterOutsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
     delay,
     closeDelay,
     orientation,
@@ -210,6 +217,7 @@ function TreeContext(props) {
     closeDelay,
     orientation,
     onOpenChangeComplete,
+    style,
     ...elementProps
   } = props.componentProps;
   const nodeId = (0, _floatingUiReact.useFloatingNodeId)();

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

@@ -1,11 +1,15 @@
 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 interface NavigationMenuRootContext {
+export type NavigationMenuPopupAutoSizeResetState = {
+  abortController: AbortController | null;
+  owner: any;
+};
+export interface NavigationMenuRootContext<Value = any> {
   open: boolean;
-  value: any;
-  setValue: (value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
+  value: NavigationMenuRoot.Value<Value>;
+  setValue: (value: NavigationMenuRoot.Value<Value>, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
   transitionStatus: TransitionStatus;
   mounted: boolean;
   popupElement: HTMLElement | null;
@@ -28,15 +32,16 @@ export interface NavigationMenuRootContext {
   beforeOutsideRef: React.RefObject<HTMLSpanElement | null>;
   afterOutsideRef: React.RefObject<HTMLSpanElement | null>;
   prevTriggerElementRef: React.RefObject<Element | null | undefined>;
+  popupAutoSizeResetRef: React.MutableRefObject<NavigationMenuPopupAutoSizeResetState>;
   delay: number;
   closeDelay: number;
   orientation: 'horizontal' | 'vertical';
   viewportInert: boolean;
   setViewportInert: React.Dispatch<React.SetStateAction<boolean>>;
 }
-export declare const NavigationMenuRootContext: React.Context<NavigationMenuRootContext | undefined>;
-declare function useNavigationMenuRootContext(optional?: false): NavigationMenuRootContext;
-declare function useNavigationMenuRootContext(optional: true): NavigationMenuRootContext | undefined;
+export declare const NavigationMenuRootContext: React.Context<NavigationMenuRootContext<any> | undefined>;
+declare function useNavigationMenuRootContext<Value = any>(optional?: false): NavigationMenuRootContext<Value>;
+declare function useNavigationMenuRootContext<Value = any>(optional: true): NavigationMenuRootContext<Value> | undefined;
 export declare const NavigationMenuTreeContext: React.Context<string | undefined>;
 declare function useNavigationMenuTreeContext(): string | undefined;
 export { useNavigationMenuRootContext, useNavigationMenuTreeContext };

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.