@base-ui/react 1.0.0 → 1.2.0

package/esm/menubar/Menubar.js

@@ -46,11 +46,11 @@ export const Menubar = /*#__PURE__*/React.forwardRef(function Menubar(props, for
   }, [hasSubmenuOpen, resetOpenInteractionType]);
   useScrollLock(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = useBaseUiId(idProp);
-  const state = React.useMemo(() => ({
+  const state = {
     orientation,
     modal,
     hasSubmenuOpen
-  }), [orientation, modal, hasSubmenuOpen]);
+  };
   const contentRef = React.useRef(null);
   const allowMouseUpTriggerRef = React.useRef(false);
   const context = React.useMemo(() => ({

package/esm/merge-props/mergeProps.d.ts

@@ -6,11 +6,14 @@ type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsO
 /**
  * Merges multiple sets of React props. It follows the Object.assign pattern where the rightmost object's fields overwrite
  * the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
- * Event handlers are merged such that they are called in sequence (the rightmost one being called first),
- * and allows the user to prevent the subsequent event handlers from being
- * executed by attaching a `preventBaseUIHandler` method.
- * It also merges the `className` and `style` props, whereby the classes are concatenated
- * and the rightmost styles overwrite the subsequent ones.
+ *
+ * Event handlers are merged and called in right-to-left order (rightmost handler executes first, leftmost last).
+ * For React synthetic events, the rightmost handler can prevent prior (left-positioned) handlers from executing
+ * by calling `event.preventBaseUIHandler()`. For non-synthetic events (custom events with primitive/object values),
+ * all handlers always execute without prevention capability.
+ *
+ * The `className` prop is merged by concatenating classes in right-to-left order (rightmost class appears first in the string).
+ * The `style` prop is merged with rightmost styles overwriting the prior ones.
  *
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
@@ -21,14 +24,31 @@ type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsO
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
  *
  * @important **`ref` is not merged.**
- * @param props props to merge.
- * @returns the merged props.
+ * @param a Props object to merge.
+ * @param b Props object to merge. The function will overwrite conflicting props from `a`.
+ * @param c Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @param d Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @param e Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @returns The merged props.
+ * @public
  */
-export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>): PropsOf<T>;
-export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>): PropsOf<T>;
-export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>, c: InputProps<T>): PropsOf<T>;
-export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>, c: InputProps<T>, d: InputProps<T>): PropsOf<T>;
 export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>, c: InputProps<T>, d: InputProps<T>, e: InputProps<T>): PropsOf<T>;
+export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>, c: InputProps<T>, d: InputProps<T>): PropsOf<T>;
+export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>, c: InputProps<T>): PropsOf<T>;
+export declare function mergeProps<T extends ElementType>(a: InputProps<T>, b: InputProps<T>): PropsOf<T>;
+/**
+ * Merges an arbitrary number of React props using the same logic as {@link mergeProps}.
+ * This function accepts an array of props instead of individual arguments.
+ *
+ * This has slightly lower performance than {@link mergeProps} due to accepting an array
+ * instead of a fixed number of arguments. Prefer {@link mergeProps} when merging 5 or
+ * fewer prop sets for better performance.
+ *
+ * @param props Array of props to merge.
+ * @returns The merged props.
+ * @see mergeProps
+ * @public
+ */
 export declare function mergePropsN<T extends ElementType>(props: InputProps<T>[]): PropsOf<T>;
 export declare function makeEventPreventable<T extends React.SyntheticEvent>(event: BaseUIEvent<T>): BaseUIEvent<T>;
 export declare function mergeClassNames(ourClassName: string | undefined, theirClassName: string | undefined): string | undefined;

package/esm/merge-props/mergeProps.js

@@ -1,14 +1,18 @@
 import { mergeObjects } from '@base-ui/utils/mergeObjects';
 const EMPTY_PROPS = {};
 
+/* eslint-disable id-denylist */
 /**
  * Merges multiple sets of React props. It follows the Object.assign pattern where the rightmost object's fields overwrite
  * the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
- * Event handlers are merged such that they are called in sequence (the rightmost one being called first),
- * and allows the user to prevent the subsequent event handlers from being
- * executed by attaching a `preventBaseUIHandler` method.
- * It also merges the `className` and `style` props, whereby the classes are concatenated
- * and the rightmost styles overwrite the subsequent ones.
+ *
+ * Event handlers are merged and called in right-to-left order (rightmost handler executes first, leftmost last).
+ * For React synthetic events, the rightmost handler can prevent prior (left-positioned) handlers from executing
+ * by calling `event.preventBaseUIHandler()`. For non-synthetic events (custom events with primitive/object values),
+ * all handlers always execute without prevention capability.
+ *
+ * The `className` prop is merged by concatenating classes in right-to-left order (rightmost class appears first in the string).
+ * The `style` prop is merged with rightmost styles overwriting the prior ones.
  *
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
@@ -19,10 +23,14 @@ const EMPTY_PROPS = {};
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
  *
  * @important **`ref` is not merged.**
- * @param props props to merge.
- * @returns the merged props.
+ * @param a Props object to merge.
+ * @param b Props object to merge. The function will overwrite conflicting props from `a`.
+ * @param c Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @param d Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @param e Props object to merge. The function will overwrite conflicting props from previous parameters.
+ * @returns The merged props.
+ * @public
  */
-/* eslint-disable id-denylist */
 
 export function mergeProps(a, b, c, d, e) {
   // We need to mutably own `merged`
@@ -45,6 +53,19 @@ export function mergeProps(a, b, c, d, e) {
 }
 /* eslint-enable id-denylist */
 
+/**
+ * Merges an arbitrary number of React props using the same logic as {@link mergeProps}.
+ * This function accepts an array of props instead of individual arguments.
+ *
+ * This has slightly lower performance than {@link mergeProps} due to accepting an array
+ * instead of a fixed number of arguments. Prefer {@link mergeProps} when merging 5 or
+ * fewer prop sets for better performance.
+ *
+ * @param props Array of props to merge.
+ * @returns The merged props.
+ * @see mergeProps
+ * @public
+ */
 export function mergePropsN(props) {
   if (props.length === 0) {
     return EMPTY_PROPS;

package/esm/meter/indicator/MeterIndicator.d.ts

@@ -7,7 +7,7 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-export declare const MeterIndicator: React.ForwardRefExoticComponent<MeterIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
 export declare namespace MeterIndicator {
   type Props = MeterIndicatorProps;

package/esm/meter/label/MeterLabel.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-export declare const MeterLabel: React.ForwardRefExoticComponent<MeterLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MeterLabel: React.ForwardRefExoticComponent<Omit<MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface MeterLabelProps extends BaseUIComponentProps<'span', MeterRoot.State> {}
 export declare namespace MeterLabel {
   type Props = MeterLabelProps;

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

@@ -6,36 +6,36 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-export declare const MeterRoot: React.ForwardRefExoticComponent<MeterRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MeterRoot: React.ForwardRefExoticComponent<Omit<MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MeterRootState {}
 export interface MeterRootProps extends BaseUIComponentProps<'div', MeterRoot.State> {
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */
-  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'];
+  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**
    * Options to format the value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter.
    */
-  getAriaValueText?: (formattedValue: string, value: number) => string;
+  getAriaValueText?: ((formattedValue: string, value: number) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum value
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum value
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The current value.
    */

package/esm/meter/root/MeterRoot.js

@@ -2,17 +2,8 @@
 
 import * as React from 'react';
 import { MeterRootContext } from "./MeterRootContext.js";
-import { formatNumber } from "../../utils/formatNumber.js";
+import { formatNumberValue } from "../../utils/formatNumber.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function formatValue(value, locale, format) {
-  if (!format) {
-    return formatNumber(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return formatNumber(value, locale, format);
-}
 
 /**
  * Groups all parts of the meter and provides the value for screen readers.
@@ -20,6 +11,7 @@ function formatValue(value, locale, format) {
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(componentProps, forwardedRef) {
   const {
     format,
@@ -33,7 +25,7 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
-  const formattedValue = formatValue(valueProp, locale, format);
+  const formattedValue = formatNumberValue(valueProp, locale, format);
   let ariaValuetext = `${valueProp}%`;
   if (getAriaValueText) {
     ariaValuetext = getAriaValueText(formattedValue, valueProp);

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

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-export declare const MeterTrack: React.ForwardRefExoticComponent<MeterTrackProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MeterTrack: React.ForwardRefExoticComponent<Omit<MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
 export declare namespace MeterTrack {
   type Props = MeterTrackProps;

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

@@ -7,9 +7,9 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-export declare const MeterValue: React.ForwardRefExoticComponent<MeterValueProps & React.RefAttributes<HTMLSpanElement>>;
+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);
+  children?: (null | ((formattedValue: string, value: number) => React.ReactNode)) | undefined;
 }
 export declare namespace MeterValue {
   type Props = MeterValueProps;

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

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuArrow: React.ForwardRefExoticComponent<NavigationMenuArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuArrow: React.ForwardRefExoticComponent<Omit<NavigationMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuArrowState {
   /**
    * Whether the popup is currently open.

package/esm/navigation-menu/arrow/NavigationMenuArrow.js

@@ -28,12 +28,12 @@ export const NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function Naviga
     arrowUncentered,
     arrowStyles
   } = useNavigationMenuPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/navigation-menu/arrow/NavigationMenuArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let NavigationMenuArrowDataAttributes = function (NavigationMenuArrowData
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuArrowDataAttributes["side"] = "data-side";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuArrowDataAttributes["align"] = "data-align";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popup arrow is uncentered.
    */

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

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuBackdrop: React.ForwardRefExoticComponent<NavigationMenuBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuBackdrop: React.ForwardRefExoticComponent<Omit<NavigationMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuBackdropState {
   /**
    * If `true`, the popup is open.

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

@@ -8,7 +8,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuContentState {
   /**
    * If `true`, the component is open.
@@ -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', NavigationMenuContent.State> {
+  /**
+   * 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

@@ -12,6 +12,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 +38,7 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
   const {
     className,
     render,
+    keepMounted = false,
     ...elementProps
   } = componentProps;
   const {
@@ -53,12 +55,19 @@ 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,
     setMounted,
     transitionStatus
   } = useTransitionStatus(open);
+
+  // If the popup unmounts before the content's exit animation completes, reset the internal
+  // mounted state so the next open can re-enter via `transitionStatus="starting"`.
+  if (mounted && !popupMounted) {
+    setMounted(false);
+  }
   useOpenChangeComplete({
     ref,
     open,
@@ -68,11 +77,11 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     activationDirection
-  }), [open, transitionStatus, activationDirection]);
+  };
   const handleCurrentContentRef = React.useCallback(node => {
     if (node) {
       currentContentRef.current = node;
@@ -102,8 +111,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, {
@@ -113,7 +138,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,7 +5,7 @@ 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<NavigationMenuIconProps & 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.

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,7 +6,7 @@ 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<NavigationMenuItemProps & 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> {
   /**

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

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export interface NavigationMenuLinkState {
   /**
    * Whether the link is the currently active page.
@@ -18,12 +18,12 @@ export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', Navig
    * 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,7 +6,7 @@ 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<NavigationMenuListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export interface NavigationMenuListState {
   /**
    * If `true`, the popup is open.

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

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

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

@@ -1,13 +1,14 @@
 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.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuPopup: React.ForwardRefExoticComponent<NavigationMenuPopupProps & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenuPopup: React.ForwardRefExoticComponent<Omit<NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface NavigationMenuPopupState {
   /**
    * If `true`, the popup is open.
@@ -17,6 +18,18 @@ 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 declare namespace NavigationMenuPopup {

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;
 }({});