@base-ui/react 1.0.0 → 1.2.0

package/menu/submenu-trigger/MenuSubmenuTrigger.d.ts

@@ -6,29 +6,43 @@ import { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuSubmenuTrigger: React.ForwardRefExoticComponent<MenuSubmenuTriggerProps & React.RefAttributes<HTMLElement>>;
-export interface MenuSubmenuTriggerProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuSubmenuTrigger.State> {
-  onClick?: React.MouseEventHandler<HTMLElement>;
+export declare const MenuSubmenuTrigger: React.ForwardRefExoticComponent<Omit<MenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface MenuSubmenuTriggerState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the item is highlighted.
+   */
+  highlighted: boolean;
+  /**
+   * Whether the menu is currently open.
+   */
+  open: boolean;
+}
+export interface MenuSubmenuTriggerProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuSubmenuTriggerState> {
+  onClick?: BaseUIComponentProps<'div', MenuSubmenuTriggerState>['onClick'] | undefined;
   /**
    * Overrides the text label to use when the item is matched during keyboard text navigation.
    */
-  label?: string;
+  label?: string | undefined;
   /**
    * @ignore
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * How long to wait before the menu may be opened on hover. Specified in milliseconds.
    *
    * Requires the `openOnHover` prop.
    * @default 100
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the menu that was opened on hover.
    * Specified in milliseconds.
@@ -36,25 +50,11 @@ export interface MenuSubmenuTriggerProps extends NonNativeButtonProps, BaseUICom
    * Requires the `openOnHover` prop.
    * @default 0
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * Whether the menu should also open when the trigger is hovered.
    */
-  openOnHover?: boolean;
-}
-export interface MenuSubmenuTriggerState {
-  /**
-   * Whether the component should ignore user interaction.
-   */
-  disabled: boolean;
-  /**
-   * Whether the item is highlighted.
-   */
-  highlighted: boolean;
-  /**
-   * Whether the menu is currently open.
-   */
-  open: boolean;
+  openOnHover?: boolean | undefined;
 }
 export declare namespace MenuSubmenuTrigger {
   type Props = MenuSubmenuTriggerProps;

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -66,7 +66,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   }, [store]);
   const submenuRootContext = (0, _MenuSubmenuRootContext.useMenuSubmenuRootContext)();
   if (!submenuRootContext?.parentMenu) {
-    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : (0, _formatErrorMessage2.default)(37));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : (0, _formatErrorMessage2.default)(37));
   }
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
@@ -74,7 +74,9 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const highlighted = parentMenuStore.useState('isActive', listItem.index);
   const itemMetadata = React.useMemo(() => ({
     type: 'submenu-trigger',
-    setActive: () => parentMenuStore.set('activeIndex', listItem.index)
+    setActive() {
+      parentMenuStore.set('activeIndex', listItem.index);
+    }
   }), [parentMenuStore, listItem.index]);
   const rootDisabled = store.useState('disabled');
   const disabled = disabledProp || rootDisabled;
@@ -92,19 +94,19 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     nodeId: menuPositionerContext?.nodeId
   });
   const hoverEnabled = store.useState('hoverEnabled');
-  const allowMouseEnter = store.useState('allowMouseEnter');
+  const allowMouseEnter = parentMenuStore.useState('allowMouseEnter');
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingRootContext, {
-    enabled: hoverEnabled && openOnHover && !disabled && allowMouseEnter,
+    enabled: hoverEnabled && openOnHover && !disabled,
     handleClose: (0, _floatingUiReact.safePolygon)({
       blockPointerEvents: true
     }),
     mouseOnly: true,
     move: true,
     restMs: delay,
-    delay: {
+    delay: allowMouseEnter ? {
       open: delay,
       close: closeDelay
-    },
+    } : 0,
     triggerElementRef,
     externalTree: floatingTreeRoot
   });
@@ -118,11 +120,11 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const localInteractionProps = (0, _floatingUiReact.useInteractions)([click]);
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     highlighted,
     open
-  }), [disabled, highlighted, open]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping,

package/menu/trigger/MenuTrigger.d.ts

@@ -17,22 +17,22 @@ export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps,
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A handle to associate the trigger with a menu.
    */
-  handle?: MenuHandle<Payload>;
+  handle?: MenuHandle<Payload> | undefined;
   /**
    * A payload to pass to the menu when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * How long to wait before the menu may be opened on hover. Specified in milliseconds.
    *
    * Requires the `openOnHover` prop.
    * @default 100
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the menu that was opened on hover.
    * Specified in milliseconds.
@@ -40,17 +40,21 @@ export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps,
    * Requires the `openOnHover` prop.
    * @default 0
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * Whether the menu should also open when the trigger is hovered.
    */
-  openOnHover?: boolean;
+  openOnHover?: boolean | undefined;
 }
 export type MenuTriggerState = {
   /**
    * Whether the menu is currently open.
    */
   open: boolean;
+  /**
+   * Whether the trigger is disabled.
+   */
+  disabled: boolean;
 };
 export declare namespace MenuTrigger {
   type Props<Payload = unknown> = MenuTriggerProps<Payload>;

package/menu/trigger/MenuTrigger.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
+var _fastHooks = require("@base-ui/utils/fastHooks");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _empty = require("@base-ui/utils/empty");
@@ -29,7 +30,7 @@ var _findRootOwnerId = require("../utils/findRootOwnerId");
 var _popups = require("../../utils/popups");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _reasons = require("../../utils/reasons");
-var _useMixedToggleClickHander = require("../../utils/useMixedToggleClickHander");
+var _useMixedToggleClickHandler = require("../../utils/useMixedToggleClickHandler");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _MenubarContext = require("../../menubar/MenubarContext");
 var _constants = require("../../utils/constants");
@@ -44,7 +45,7 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuTrigger = exports.MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(componentProps, forwardedRef) {
+const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -61,7 +62,7 @@ const MenuTrigger = exports.MenuTrigger = /*#__PURE__*/React.forwardRef(function
   const rootContext = (0, _MenuRootContext.useMenuRootContext)(true);
   const store = handle?.store ?? rootContext?.store;
   if (!store) {
-    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(85));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(85));
   }
   const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
@@ -88,8 +89,9 @@ const MenuTrigger = exports.MenuTrigger = /*#__PURE__*/React.forwardRef(function
     floatingParentNodeId,
     keyboardEventRelay: compositeRootContext?.relayKeyboardEvent
   });
+  const isInMenubar = parent.type === 'menubar';
   const rootDisabled = store.useState('disabled');
-  const disabled = disabledProp || rootDisabled || parent.type === 'menubar' && parent.context.disabled;
+  const disabled = disabledProp || rootDisabled || isInMenubar && parent.context.disabled;
   const {
     getButtonProps,
     buttonRef
@@ -134,12 +136,12 @@ const MenuTrigger = exports.MenuTrigger = /*#__PURE__*/React.forwardRef(function
       });
     }
   }, [isOpenedByThisTrigger, handleDocumentMouseUp, store]);
-  const parentMenubarHasSubmenuOpen = parent.type === 'menubar' && parent.context.hasSubmenuOpen;
-  const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen ?? false;
+  const parentMenubarHasSubmenuOpen = isInMenubar && parent.context.hasSubmenuOpen;
+  const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen;
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingRootContext, {
-    enabled: openOnHover && !disabled && parent.type !== 'context-menu' && (parent.type !== 'menubar' || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+    enabled: openOnHover && !disabled && parent.type !== 'context-menu' && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
     handleClose: (0, _floatingUiReact.safePolygon)({
-      blockPointerEvents: parent.type !== 'menubar'
+      blockPointerEvents: !isInMenubar
     }),
     mouseOnly: true,
     move: false,
@@ -153,30 +155,29 @@ const MenuTrigger = exports.MenuTrigger = /*#__PURE__*/React.forwardRef(function
   });
 
   // Whether to ignore clicks to open the menu.
-  // `lastOpenChangeReason` doesnt't need to be reactive here, as we need to run this
+  // `lastOpenChangeReason` doesn't need to be reactive here, as we need to run this
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
   const click = (0, _floatingUiReact.useClick)(floatingRootContext, {
     enabled: !disabled && parent.type !== 'context-menu',
-    event: isOpenedByThisTrigger && parent.type === 'menubar' ? 'click' : 'mousedown',
+    event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
     ignoreMouse: false,
     stickIfOpen: parent.type === undefined ? stickIfOpen : false
   });
   const focus = (0, _floatingUiReact.useFocus)(floatingRootContext, {
-    enabled: !disabled && (parent.type !== 'menubar' && isOpenedByThisTrigger || parentMenubarHasSubmenuOpen)
+    enabled: !disabled && parentMenubarHasSubmenuOpen
   });
-  const mixedToggleHandlers = (0, _useMixedToggleClickHander.useMixedToggleClickHandler)({
+  const mixedToggleHandlers = (0, _useMixedToggleClickHandler.useMixedToggleClickHandler)({
     open: isOpenedByThisTrigger,
-    enabled: parent.type === 'menubar',
+    enabled: isInMenubar,
     mouseDownAction: 'open'
   });
   const localInteractionProps = (0, _floatingUiReact.useInteractions)([click, focus]);
-  const isInMenubar = parent.type === 'menubar';
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open: isOpenedByThisTrigger
-  }), [disabled, isOpenedByThisTrigger]);
+  };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const ref = [triggerRef, forwardedRef, buttonRef, registerTrigger, triggerElementRef];
   const props = [localInteractionProps.getReferenceProps(), hoverProps ?? _empty.EMPTY_OBJECT, rootTriggerProps, {
@@ -215,8 +216,8 @@ const MenuTrigger = exports.MenuTrigger = /*#__PURE__*/React.forwardRef(function
       ReactDOM.flushSync(() => {
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
       });
-      let nextTabbable = (0, _utils.getTabbableAfterElement)(triggerElementRef.current);
-      while (nextTabbable !== null && (0, _utils.contains)(currentPositionerElement, nextTabbable) || nextTabbable?.hasAttribute('aria-hidden')) {
+      let nextTabbable = (0, _utils.getTabbableAfterElement)(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && (0, _utils.contains)(currentPositionerElement, nextTabbable)) {
         const prevTabbable = nextTabbable;
         nextTabbable = (0, _utils.getNextTabbable)(nextTabbable);
         if (nextTabbable === prevTabbable) {

package/menubar/Menubar.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../utils/types.js";
  *
  * Documentation: [Base UI Menubar](https://base-ui.com/react/components/menubar)
  */
-export declare const Menubar: React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenubarState {
   /**
    * The orientation of the menubar.
@@ -26,23 +26,23 @@ export interface MenubarProps extends BaseUIComponentProps<'div', Menubar.State>
    * Whether the menubar is modal.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Whether the whole menubar is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * The orientation of the menubar.
    * @default 'horizontal'
    */
-  orientation?: MenuRoot.Orientation;
+  orientation?: MenuRoot.Orientation | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
 }
 export declare namespace Menubar {
   type State = MenubarState;

package/menubar/Menubar.js

@@ -52,11 +52,11 @@ const Menubar = exports.Menubar = /*#__PURE__*/React.forwardRef(function Menubar
   }, [hasSubmenuOpen, resetOpenInteractionType]);
   (0, _useScrollLock.useScrollLock)(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = (0, _useBaseUiId.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/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/merge-props/mergeProps.js

@@ -10,14 +10,18 @@ exports.mergePropsN = mergePropsN;
 var _mergeObjects = require("@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):
@@ -28,10 +32,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 */
 
 function mergeProps(a, b, c, d, e) {
   // We need to mutably own `merged`
@@ -54,6 +62,19 @@ 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
+ */
 function mergePropsN(props) {
   if (props.length === 0) {
     return EMPTY_PROPS;

package/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/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/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/meter/root/MeterRoot.js

@@ -11,15 +11,6 @@ var _MeterRootContext = require("./MeterRootContext");
 var _formatNumber = require("../../utils/formatNumber");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
-function formatValue(value, locale, format) {
-  if (!format) {
-    return (0, _formatNumber.formatNumber)(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return (0, _formatNumber.formatNumber)(value, locale, format);
-}
-
 /**
  * Groups all parts of the meter and provides the value for screen readers.
  * Renders a `<div>` element.
@@ -39,7 +30,7 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
-  const formattedValue = formatValue(valueProp, locale, format);
+  const formattedValue = (0, _formatNumber.formatNumberValue)(valueProp, locale, format);
   let ariaValuetext = `${valueProp}%`;
   if (getAriaValueText) {
     ariaValuetext = getAriaValueText(formattedValue, valueProp);

package/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/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/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/navigation-menu/arrow/NavigationMenuArrow.js

@@ -33,12 +33,12 @@ const NavigationMenuArrow = exports.NavigationMenuArrow = /*#__PURE__*/React.for
     arrowUncentered,
     arrowStyles
   } = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/navigation-menu/arrow/NavigationMenuArrowDataAttributes.js

@@ -18,12 +18,12 @@ let NavigationMenuArrowDataAttributes = exports.NavigationMenuArrowDataAttribute
    * 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"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuArrowDataAttributes["align"] = "data-align";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popup arrow is uncentered.
    */

package/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.