@base-ui/react 1.2.0 → 1.3.0

package/esm/meter/label/MeterLabel.js

@@ -1,10 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useMeterRootContext } from "../root/MeterRootContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 
 /**
  * An accessible label for the meter.
@@ -19,18 +18,15 @@ export const MeterLabel = /*#__PURE__*/React.forwardRef(function MeterLabel(comp
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId(idProp);
   const {
     setLabelId
   } = useMeterRootContext();
-  useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => setLabelId(undefined);
-  }, [id, setLabelId]);
+  const id = useRegisteredLabelId(idProp, setLabelId);
   return useRenderElement('span', componentProps, {
     ref: forwardedRef,
     props: [{
-      id
+      id,
+      role: 'presentation'
     }, elementProps]
   });
 });

package/esm/meter/root/MeterRoot.d.ts

@@ -8,7 +8,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const MeterRoot: React.ForwardRefExoticComponent<Omit<MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MeterRootState {}
-export interface MeterRootProps extends BaseUIComponentProps<'div', MeterRoot.State> {
+export interface MeterRootProps extends BaseUIComponentProps<'div', MeterRootState> {
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */

package/esm/meter/root/MeterRoot.js

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { MeterRootContext } from "./MeterRootContext.js";
 import { formatNumberValue } from "../../utils/formatNumber.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -11,7 +12,7 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(componentProps, forwardedRef) {
   const {
     format,
@@ -22,6 +23,7 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     value: valueProp,
     render,
     className,
+    children,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
@@ -38,7 +40,14 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     'aria-valuemin': min,
     'aria-valuenow': valueProp,
     'aria-valuetext': ariaValuetext,
-    role: 'meter'
+    role: 'meter',
+    children: /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [children, /*#__PURE__*/_jsx("span", {
+        role: "presentation",
+        style: visuallyHidden,
+        children: "x"
+      })]
+    })
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,

package/esm/meter/track/MeterTrack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Contains the meter indicator and represents the entire range of the meter.
@@ -8,7 +8,9 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterTrack: React.ForwardRefExoticComponent<Omit<MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
+export interface MeterTrackState extends MeterRootState {}
+export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterTrackState> {}
 export declare namespace MeterTrack {
+  type State = MeterTrackState;
   type Props = MeterTrackProps;
 }

package/esm/meter/value/MeterValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * A text element displaying the current value.
  * Renders a `<span>` element.
@@ -8,9 +8,11 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterValue: React.ForwardRefExoticComponent<Omit<MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterRoot.State>, 'children'> {
-  children?: (null | ((formattedValue: string, value: number) => React.ReactNode)) | undefined;
+export interface MeterValueState extends MeterRootState {}
+export interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterValueState>, 'children'> {
+  children?: null | ((formattedValue: string, value: number) => React.ReactNode) | undefined;
 }
 export declare namespace MeterValue {
+  type State = MeterValueState;
   type Props = MeterValueProps;
 }

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

@@ -13,11 +13,20 @@ export interface NavigationMenuArrowState {
    * Whether the popup 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 arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface NavigationMenuArrowProps extends BaseUIComponentProps<'div', NavigationMenuArrow.State> {}
+export interface NavigationMenuArrowProps extends BaseUIComponentProps<'div', NavigationMenuArrowState> {}
 export declare namespace NavigationMenuArrow {
   type State = NavigationMenuArrowState;
   type Props = NavigationMenuArrowProps;

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/content/NavigationMenuContent.d.ts

@@ -23,7 +23,7 @@ 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.

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";
@@ -77,6 +78,16 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
       }
     }
   });
+
+  // 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,

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

@@ -12,7 +12,7 @@ export interface NavigationMenuIconState {
    */
   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/item/NavigationMenuItem.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 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/link/NavigationMenuLink.d.ts

@@ -13,7 +13,7 @@ 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

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

@@ -13,7 +13,7 @@ export interface NavigationMenuListState {
    */
   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',
@@ -52,7 +59,9 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
   // `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

@@ -31,7 +31,7 @@ export interface NavigationMenuPopupState {
    */
   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/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/root/NavigationMenuRoot.d.ts

@@ -19,7 +19,7 @@ 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.
    */
@@ -48,12 +48,12 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
    */
   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 | 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 +61,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;

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);
@@ -203,12 +221,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/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;