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

package/floating-ui-react/hooks/useFocus.js

@@ -27,9 +27,12 @@ function useFocus(context, props = {}) {
   } = store.context;
   const {
     enabled = true,
-    visibleOnly = true
+    visibleOnly = true,
+    delay
   } = props;
   const blockFocusRef = React.useRef(false);
+  // Track which reference should be blocked from re-opening after Escape/press dismissal.
+  const blockedReferenceRef = React.useRef(null);
   const timeout = (0, _useTimeout.useTimeout)();
   const keyboardModalityRef = React.useRef(true);
   React.useEffect(() => {
@@ -43,7 +46,8 @@ function useFocus(context, props = {}) {
     // floating element was not open, the focus should be blocked when they
     // return to the tab/window.
     function onBlur() {
-      if (!store.select('open') && (0, _dom.isHTMLElement)(domReference) && domReference === (0, _utils.activeElement)((0, _utils.getDocument)(domReference))) {
+      const currentDomReference = store.select('domReferenceElement');
+      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _utils.getDocument)(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -72,21 +76,31 @@ function useFocus(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (details.reason === _reasons.REASONS.triggerPress || details.reason === _reasons.REASONS.escapeKey) {
-        blockFocusRef.current = true;
+        const referenceElement = store.select('domReferenceElement');
+        if ((0, _dom.isElement)(referenceElement)) {
+          blockedReferenceRef.current = referenceElement;
+          blockFocusRef.current = true;
+        }
       }
     }
     events.on('openchange', onOpenChangeLocal);
     return () => {
       events.off('openchange', onOpenChangeLocal);
     };
-  }, [events, enabled]);
+  }, [events, enabled, store]);
   const reference = React.useMemo(() => ({
     onMouseLeave() {
       blockFocusRef.current = false;
+      blockedReferenceRef.current = null;
     },
     onFocus(event) {
+      const focusTarget = event.currentTarget;
       if (blockFocusRef.current) {
-        return;
+        if (blockedReferenceRef.current === focusTarget) {
+          return;
+        }
+        blockFocusRef.current = false;
+        blockedReferenceRef.current = null;
       }
       const target = (0, _utils.getTarget)(event.nativeEvent);
       if (visibleOnly && (0, _dom.isElement)(target)) {
@@ -100,10 +114,26 @@ function useFocus(context, props = {}) {
           return;
         }
       }
-      store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, event.nativeEvent, event.currentTarget));
+      const movedFromOtherTrigger = event.relatedTarget && store.context.triggerElements.hasElement(event.relatedTarget);
+      const {
+        nativeEvent,
+        currentTarget
+      } = event;
+      const delayValue = typeof delay === 'function' ? delay() : delay;
+      if (store.select('open') && movedFromOtherTrigger || delayValue === 0 || delayValue === undefined) {
+        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
+        return;
+      }
+      timeout.start(delayValue, () => {
+        if (blockFocusRef.current) {
+          return;
+        }
+        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
+      });
     },
     onBlur(event) {
       blockFocusRef.current = false;
+      blockedReferenceRef.current = null;
       const relatedTarget = event.relatedTarget;
       const nativeEvent = event.nativeEvent;
 
@@ -135,13 +165,17 @@ function useFocus(context, props = {}) {
         // If the next focused element is one of the triggers, do not close
         // the floating element. The focus handler of that trigger will
         // handle the open state.
-        if (store.context.triggerElements.hasElement(event.relatedTarget)) {
-          return;
+        const nextFocusedElement = relatedTarget ?? activeEl;
+        if ((0, _dom.isElement)(nextFocusedElement)) {
+          const triggerElements = store.context.triggerElements;
+          if (triggerElements.hasElement(nextFocusedElement) || triggerElements.hasMatchingElement(trigger => (0, _utils.contains)(trigger, nextFocusedElement))) {
+            return;
+          }
         }
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
       });
     }
-  }), [dataRef, store, visibleOnly, timeout]);
+  }), [dataRef, store, visibleOnly, timeout, delay]);
   return React.useMemo(() => enabled ? {
     reference,
     trigger: reference

package/floating-ui-react/hooks/useHoverReferenceInteraction.js

@@ -165,8 +165,13 @@ function useHoverReferenceInteraction(context, props = {}) {
       const allTriggers = store.context.triggerElements;
       const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, event.target));
       const triggerNode = event.currentTarget ?? null;
-      const shouldOpen = !store.select('open') || isOverInactiveTrigger;
-      if (openDelay) {
+      const isOpen = store.select('open');
+      const shouldOpen = !isOpen || isOverInactiveTrigger;
+
+      // When moving between triggers while already open, open immediately without delay
+      if (isOverInactiveTrigger && isOpen) {
+        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+      } else if (openDelay) {
         openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
@@ -270,7 +275,15 @@ function useHoverReferenceInteraction(context, props = {}) {
         }
         restTimeout.clear();
         function handleMouseMove() {
-          if (!blockMouseMoveRef.current && (!currentOpen || isOverInactiveTrigger)) {
+          restTimeoutPendingRef.current = false;
+
+          // A delayed hover open should not override a click-like open that happened
+          // while the hover delay was pending.
+          if (isClickLikeOpenEvent()) {
+            return;
+          }
+          const latestOpen = store.select('open');
+          if (!blockMouseMoveRef.current && (!latestOpen || isOverInactiveTrigger)) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));
           }
         }
@@ -286,5 +299,5 @@ function useHoverReferenceInteraction(context, props = {}) {
         }
       }
     };
-  }, [blockMouseMoveRef, mouseOnly, store, pointerTypeRef, restMsRef, restTimeout, restTimeoutPendingRef]);
+  }, [blockMouseMoveRef, isClickLikeOpenEvent, mouseOnly, store, pointerTypeRef, restMsRef, restTimeout, restTimeoutPendingRef]);
 }

package/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -47,6 +47,9 @@ function useSyncedFloatingRootContext(options) {
     if ((0, _dom.isElement)(referenceElement)) {
       valuesToSync.domReferenceElement = referenceElement;
     }
+    if (store.state.positionReference === store.state.referenceElement) {
+      valuesToSync.positionReference = referenceElement;
+    }
     store.update(valuesToSync);
   }, [open, floatingId, referenceElement, floatingElement, store]);
 

package/form/Form.d.ts

@@ -16,6 +16,10 @@ export declare const Form: {
 };
 export type FormSubmitEventReason = typeof REASONS.none;
 export type FormSubmitEventDetails = BaseUIGenericEventDetails<Form.SubmitEventReason>;
+export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+export interface FormActions {
+  validate: (fieldName?: string | undefined) => void;
+}
 export interface FormState {}
 export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', Form.State> {
   /**
@@ -40,11 +44,24 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    * `preventDefault()` is called on the native submit event when used.
    */
   onFormSubmit?: (formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void;
+  /**
+   * A ref to imperative actions.
+   * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
+   * @example
+   * ```tsx
+   * // validate all fields
+   * actionsRef.current.validate();
+   *
+   * // validate one field
+   * actionsRef.current.validate('email');
+   * ```
+   */
+  actionsRef?: React.RefObject<Form.Actions | null>;
 }
-export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
 export declare namespace Form {
   type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;
   type State = FormState;
+  type Actions = FormActions;
   type ValidationMode = FormValidationMode;
   type SubmitEventReason = FormSubmitEventReason;
   type SubmitEventDetails = FormSubmitEventDetails;

package/form/Form.js

@@ -29,6 +29,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     errors: externalErrors,
     onSubmit,
     onFormSubmit,
+    actionsRef,
     ...elementProps
   } = componentProps;
   const formRef = React.useRef({
@@ -59,6 +60,22 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
       focusControl(invalidFields[0].controlRef.current);
     }
   }, [errors, focusControl]);
+  const handleImperativeValidate = React.useCallback(fieldName => {
+    const values = Array.from(formRef.current.fields.values());
+    if (fieldName) {
+      const namedField = values.find(field => field.name === fieldName);
+      if (namedField) {
+        namedField.validate(false);
+      }
+    } else {
+      values.forEach(field => {
+        field.validate(false);
+      });
+    }
+  }, []);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate: handleImperativeValidate
+  }), [handleImperativeValidate]);
   const element = (0, _useRenderElement.useRenderElement)('form', componentProps, {
     ref: forwardedRef,
     props: [{

package/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/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/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
@@ -120,6 +120,17 @@ Object.keys(_contextMenu).forEach(function (key) {
     }
   });
 });
+var _cspProvider = require("./csp-provider");
+Object.keys(_cspProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cspProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cspProvider[key];
+    }
+  });
+});
 var _dialog = require("./dialog");
 Object.keys(_dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/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/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/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/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/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/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/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/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/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/menu/popup/MenuPopup.js

@@ -59,6 +59,7 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const closeDelay = store.useState('closeDelay');
   const activeTriggerElement = store.useState('activeTriggerElement');
+  const isContextMenu = parent.type === 'context-menu';
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
     ref: store.context.popupRef,
@@ -80,7 +81,7 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
   const hoverEnabled = store.useState('hoverEnabled');
   const disabled = store.useState('disabled');
   (0, _floatingUiReact.useHoverFloatingInteraction)(floatingContext, {
-    enabled: hoverEnabled && !disabled && parent.type !== 'context-menu' && parent.type !== 'menubar',
+    enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
   const state = React.useMemo(() => ({
@@ -105,13 +106,13 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
       '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.REASONS.outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingContext,
-    modal: false,
+    modal: isContextMenu,
     disabled: !mounted,
     returnFocus: finalFocus === undefined ? returnFocus : finalFocus,
     initialFocus: parent.type !== 'menu',

package/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/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/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/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/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/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/menu/root/MenuRoot.js

@@ -183,7 +183,7 @@ function MenuRoot(props) {
   const allowTouchToCloseTimeout = (0, _useTimeout.useTimeout)();
   const setOpen = (0, _useStableCallback.useStableCallback)((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
-    if (open === nextOpen && eventDetails.trigger === activeTriggerElement) {
+    if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
     }
     eventDetails.preventUnmountOnClose = () => {
@@ -306,7 +306,9 @@ function MenuRoot(props) {
   }, [floatingEvents, setOpen]);
   const dismiss = (0, _floatingUiReact.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/menu/store/MenuStore.js

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

package/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/menu/trigger/MenuTrigger.js

@@ -29,7 +29,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");
@@ -88,8 +88,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 +135,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,26 +154,25 @@ 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(() => ({
     disabled,
     open: isOpenedByThisTrigger
@@ -215,8 +215,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.