@base-ui/react 1.2.0 → 1.4.0

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

@@ -8,10 +8,8 @@ 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
@@ -20,8 +18,9 @@ export interface NavigationMenuPortalProps extends FloatingPortal.Props<Navigati
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<NavigationMenuPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<NavigationMenuPortalState>['container'] | undefined;
 }
 export declare namespace NavigationMenuPortal {
+  type State = NavigationMenuPortalState;
   type Props = NavigationMenuPortalProps;
 }

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

@@ -2,19 +2,19 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerWindow } from '@base-ui/utils/owner';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { disableFocusInside, enableFocusInside, isOutsideEvent } from "../../floating-ui-react/utils.js";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
 import { useNavigationMenuPortalContext } from "../portal/NavigationMenuPortalContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { NavigationMenuPositionerContext } from "./NavigationMenuPositionerContext.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { usePositioner } from "../../utils/usePositioner.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_ROOT_CONTEXT = getEmptyRootContext();
 
@@ -49,6 +49,7 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = useNavigationMenuPortalContext();
@@ -77,12 +78,7 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
 
     // 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 mergeCleanups(addEventListener(positionerElement, 'focusin', onFocus, true), addEventListener(positionerElement, 'focusout', onFocus, true));
   }, [positionerElement]);
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   const positioning = useAnchorPositioning({
@@ -106,20 +102,6 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
     // and position transition simultaneously when side=top or side=left.
     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,
@@ -140,16 +122,15 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
       });
     }
     const win = ownerWindow(positionerElement);
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return addEventListener(win, 'resize', handleResize);
   }, [open, resizeTimeout, positionerElement]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement, positionerRef],
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement, positionerRef],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/_jsx(NavigationMenuPositionerContext.Provider, {
     value: positioning,

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

@@ -8,7 +8,9 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * 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', NavigationMenuRoot.State> {
+export interface NavigationMenuRootProps<Value = any> extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
   /**
    * A ref to imperative actions.
    */
@@ -35,25 +37,25 @@ 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 menu. Specified in milliseconds.
+   * How long to wait before opening the navigation popup. Specified in milliseconds.
    * @default 50
    */
   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 | undefined;
@@ -61,7 +63,7 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
    * The orientation of the navigation menu.
    * @default 'horizontal'
    */
-  orientation?: ('horizontal' | 'vertical') | undefined;
+  orientation?: 'horizontal' | 'vertical' | undefined;
 }
 export interface NavigationMenuRootActions {
   unmount: () => void;
@@ -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/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,
@@ -58,6 +74,12 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
   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,
@@ -72,8 +94,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 +104,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);
@@ -151,6 +175,7 @@ export const NavigationMenuRoot = /*#__PURE__*/React.forwardRef(function Navigat
     beforeOutsideRef,
     afterOutsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
     delay,
     closeDelay,
     orientation,
@@ -186,6 +211,7 @@ function TreeContext(props) {
     closeDelay,
     orientation,
     onOpenChangeComplete,
+    style,
     ...elementProps
   } = props.componentProps;
   const nodeId = useFloatingNodeId();
@@ -203,12 +229,13 @@ function TreeContext(props) {
   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.d.ts

@@ -2,10 +2,14 @@ import * as React from 'react';
 import type { FloatingRootContext } from "../../floating-ui-react/index.js";
 import type { TransitionStatus } from "../../utils/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/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;