@base-ui/react 1.0.0-rc.2 → 1.1.0

package/esm/form/FormContext.d.ts

@@ -8,7 +8,7 @@ export interface FormContext {
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
-      validate: () => void;
+      validate: (flushSync?: boolean | undefined) => void;
       validityData: FieldValidityData;
       controlRef: React.RefObject<HTMLElement | null>;
       getValue: () => unknown;

package/esm/index.d.ts

@@ -8,6 +8,7 @@ export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
 export * from "./field/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.0.0-rc.2
+ * @base-ui/react v1.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,6 +15,7 @@ export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
 export * from "./field/index.js";

package/esm/input/Input.d.ts

@@ -7,7 +7,7 @@ import { Field } from "../field/index.js";
  *
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface InputProps extends BaseUIComponentProps<'input', Input.State> {
   /**
    * Callback fired when the `value` changes. Use when controlled.

package/esm/menu/arrow/MenuArrow.d.ts

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

package/esm/menu/backdrop/MenuBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuBackdrop: React.ForwardRefExoticComponent<MenuBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuBackdrop: React.ForwardRefExoticComponent<Omit<MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuBackdropState {
   /**
    * Whether the menu is currently open.

package/esm/menu/checkbox-item/MenuCheckboxItem.d.ts

@@ -7,7 +7,7 @@ import type { MenuRoot } from "../root/MenuRoot.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuCheckboxItem: React.ForwardRefExoticComponent<MenuCheckboxItemProps & React.RefAttributes<Element>>;
+export declare const MenuCheckboxItem: React.ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export type MenuCheckboxItemState = {
   /**
    * Whether the checkbox item should ignore user interaction.

package/esm/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.d.ts

@@ -7,7 +7,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuCheckboxItemIndicator: React.ForwardRefExoticComponent<MenuCheckboxItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<MenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface MenuCheckboxItemIndicatorProps extends BaseUIComponentProps<'span', MenuCheckboxItemIndicator.State> {
   /**
    * Whether to keep the HTML element in the DOM when the checkbox item is not checked.

package/esm/menu/group/MenuGroup.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<Element>>;
+export declare const MenuGroup: React.ForwardRefExoticComponent<Omit<MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuGroupProps extends BaseUIComponentProps<'div', MenuGroup.State> {
   /**
    * The content of the component.

package/esm/menu/group-label/MenuGroupLabel.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuGroupLabel: React.ForwardRefExoticComponent<MenuGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuGroupLabel: React.ForwardRefExoticComponent<Omit<MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuGroupLabelProps extends BaseUIComponentProps<'div', MenuGroupLabel.State> {}
 export interface MenuGroupLabelState {}
 export declare namespace MenuGroupLabel {

package/esm/menu/item/MenuItem.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<Element>>;
+export declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface MenuItemState {
   /**
    * Whether the item should ignore user interaction.

package/esm/menu/popup/MenuPopup.d.ts

@@ -9,7 +9,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuPopup: React.ForwardRefExoticComponent<MenuPopupProps & React.RefAttributes<Element>>;
+export declare const MenuPopup: React.ForwardRefExoticComponent<Omit<MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopup.State> {
   children?: React.ReactNode;
   /**

package/esm/menu/popup/MenuPopup.js

@@ -53,6 +53,7 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const closeDelay = store.useState('closeDelay');
   const activeTriggerElement = store.useState('activeTriggerElement');
+  const isContextMenu = parent.type === 'context-menu';
   useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
@@ -74,7 +75,7 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
   const hoverEnabled = store.useState('hoverEnabled');
   const disabled = store.useState('disabled');
   useHoverFloatingInteraction(floatingContext, {
-    enabled: hoverEnabled && !disabled && parent.type !== 'context-menu' && parent.type !== 'menubar',
+    enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
   const state = React.useMemo(() => ({
@@ -99,13 +100,13 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
       'data-rootownerid': rootId
     }]
   });
-  let returnFocus = parent.type === undefined || parent.type === 'context-menu';
+  let returnFocus = parent.type === undefined || isContextMenu;
   if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== REASONS.outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/_jsx(FloatingFocusManager, {
     context: floatingContext,
-    modal: false,
+    modal: isContextMenu,
     disabled: !mounted,
     returnFocus: finalFocus === undefined ? returnFocus : finalFocus,
     initialFocus: parent.type !== 'menu',

package/esm/menu/portal/MenuPortal.d.ts

@@ -7,7 +7,7 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuPortal: React.ForwardRefExoticComponent<MenuPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuPortal: React.ForwardRefExoticComponent<Omit<MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace MenuPortal {
   interface State {}
 }

package/esm/menu/positioner/MenuPositioner.d.ts

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

package/esm/menu/radio-group/MenuRadioGroup.d.ts

@@ -7,7 +7,7 @@ import type { MenuRoot } from "../root/MenuRoot.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuRadioGroup: React.NamedExoticComponent<MenuRadioGroupProps & React.RefAttributes<Element>>;
+export declare const MenuRadioGroup: React.NamedExoticComponent<Omit<MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRadioGroup.State> {
   /**
    * The content of the component.

package/esm/menu/radio-item/MenuRadioItem.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuRadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<Element>>;
+export declare const MenuRadioItem: React.ForwardRefExoticComponent<Omit<MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export type MenuRadioItemState = {
   /**
    * Whether the radio item should ignore user interaction.

package/esm/menu/radio-item-indicator/MenuRadioItemIndicator.d.ts

@@ -7,7 +7,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuRadioItemIndicator: React.ForwardRefExoticComponent<MenuRadioItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<MenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span', MenuRadioItemIndicator.State> {
   /**
    * Whether to keep the HTML element in the DOM when the radio item is inactive.

package/esm/menu/root/MenuRoot.d.ts

@@ -36,7 +36,7 @@ export interface MenuRootProps<Payload = unknown> {
   highlightItemOnHover?: boolean;
   /**
    * Determines if the menu enters a modal state when open.
-   * - `true`: user interaction is limited to the menu: document page scroll is locked and and pointer interactions on outside elements are disabled.
+   * - `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * @default true
    */
@@ -77,21 +77,21 @@ export interface MenuRootProps<Payload = unknown> {
    *   Useful when the menu's animation is controlled by an external library.
    * - `close`: When specified, the menu can be closed imperatively.
    */
-  actionsRef?: React.RefObject<MenuRoot.Actions>;
+  actionsRef?: React.RefObject<MenuRoot.Actions | null>;
   /**
    * ID of the trigger that the popover is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled popover.
+   * This is useful in conjunction with the `open` prop to create a controlled popover.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
   triggerId?: string | null;
   /**
    * ID of the trigger that the popover is associated with.
-   * This is useful in conjuntion with the `defaultOpen` prop to create an initially open popover.
+   * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
    */
   defaultTriggerId?: string | null;
   /**
-   * A handle to associate the popover with a trigger.
-   * If specified, allows external triggers to control the popover's open state.
+   * A handle to associate the menu with a trigger.
+   * If specified, allows external triggers to control the menu's open state.
    */
   handle?: MenuHandle<Payload>;
   /**
@@ -102,6 +102,7 @@ export interface MenuRootProps<Payload = unknown> {
 }
 export interface MenuRootActions {
   unmount: () => void;
+  close: () => void;
 }
 export type MenuRootChangeEventReason = typeof REASONS.triggerHover | typeof REASONS.triggerFocus | typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.focusOut | typeof REASONS.listNavigation | typeof REASONS.escapeKey | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.siblingOpen | typeof REASONS.cancelOpen | typeof REASONS.imperativeAction | typeof REASONS.none;
 export type MenuRootChangeEventDetails = BaseUIChangeEventDetails<MenuRoot.ChangeEventReason> & {

package/esm/menu/root/MenuRoot.js

@@ -178,7 +178,7 @@ export function MenuRoot(props) {
   const allowTouchToCloseTimeout = useTimeout();
   const setOpen = useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
-    if (open === nextOpen && eventDetails.trigger === activeTriggerElement) {
+    if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
     }
     eventDetails.preventUnmountOnClose = () => {
@@ -301,7 +301,9 @@ export function MenuRoot(props) {
   }, [floatingEvents, setOpen]);
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
-    bubbles: closeParentOnEsc && parent.type === 'menu',
+    bubbles: {
+      escapeKey: closeParentOnEsc && parent.type === 'menu'
+    },
     outsidePress() {
       if (parent.type !== 'context-menu' || openEventRef.current?.type === 'contextmenu') {
         return true;

package/esm/menu/store/MenuStore.js

@@ -101,10 +101,10 @@ export class MenuStore extends ReactStore {
   }
   static useStore(externalStore, initialState) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const store = useRefWithInit(() => {
-      return externalStore ?? new MenuStore(initialState);
+    const internalStore = useRefWithInit(() => {
+      return new MenuStore(initialState);
     }).current;
-    return store;
+    return externalStore ?? internalStore;
   }
   unsubscribeParentListener = null;
 }

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

@@ -6,7 +6,7 @@ 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 declare const MenuSubmenuTrigger: React.ForwardRefExoticComponent<Omit<MenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface MenuSubmenuTriggerProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuSubmenuTrigger.State> {
   onClick?: React.MouseEventHandler<HTMLElement>;
   /**

package/esm/menu/trigger/MenuTrigger.js

@@ -22,7 +22,7 @@ import { findRootOwnerId } from "../utils/findRootOwnerId.js";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { REASONS } from "../../utils/reasons.js";
-import { useMixedToggleClickHandler } from "../../utils/useMixedToggleClickHander.js";
+import { useMixedToggleClickHandler } from "../../utils/useMixedToggleClickHandler.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { useMenubarContext } from "../../menubar/MenubarContext.js";
 import { PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
@@ -81,8 +81,9 @@ export const MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(co
     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
@@ -127,12 +128,12 @@ export const MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(co
       });
     }
   }, [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 = 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: safePolygon({
-      blockPointerEvents: parent.type !== 'menubar'
+      blockPointerEvents: !isInMenubar
     }),
     mouseOnly: true,
     move: false,
@@ -146,26 +147,25 @@ export const MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(co
   });
 
   // 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 = 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 = useFocus(floatingRootContext, {
-    enabled: !disabled && (parent.type !== 'menubar' && isOpenedByThisTrigger || parentMenubarHasSubmenuOpen)
+    enabled: !disabled && parentMenubarHasSubmenuOpen
   });
   const mixedToggleHandlers = useMixedToggleClickHandler({
     open: isOpenedByThisTrigger,
-    enabled: parent.type === 'menubar',
+    enabled: isInMenubar,
     mouseDownAction: 'open'
   });
   const localInteractionProps = useInteractions([click, focus]);
-  const isInMenubar = parent.type === 'menubar';
   const state = React.useMemo(() => ({
     disabled,
     open: isOpenedByThisTrigger
@@ -208,8 +208,8 @@ export const MenuTrigger = /*#__PURE__*/React.forwardRef(function MenuTrigger(co
       ReactDOM.flushSync(() => {
         store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
       });
-      let nextTabbable = getTabbableAfterElement(triggerElementRef.current);
-      while (nextTabbable !== null && contains(currentPositionerElement, nextTabbable) || nextTabbable?.hasAttribute('aria-hidden')) {
+      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && contains(currentPositionerElement, nextTabbable)) {
         const prevTabbable = nextTabbable;
         nextTabbable = getNextTabbable(nextTabbable);
         if (nextTabbable === prevTabbable) {

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

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

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,7 +7,7 @@ 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);
 }

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

package/esm/navigation-menu/content/NavigationMenuContent.js

@@ -59,6 +59,12 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
     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,