@base-ui/react 1.7.0 → 1.8.0

package/menu/radio-item/MenuRadioItemDataAttributes.d.ts

@@ -1,18 +1,16 @@
-export declare enum MenuRadioItemDataAttributes {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  checked = "data-checked",
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  unchecked = "data-unchecked",
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the menu radio item is highlighted.
-   */
-  highlighted = "data-highlighted",
-}
+/**
+ * Present when the menu radio item is selected.
+ */
+export declare const checked = "data-checked";
+/**
+ * Present when the menu radio item is not selected.
+ */
+export declare const unchecked = "data-unchecked";
+/**
+ * Present when the menu radio item is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the menu radio item is highlighted.
+ */
+export declare const highlighted = "data-highlighted";

package/menu/radio-item/MenuRadioItemDataAttributes.js

@@ -3,23 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuRadioItemDataAttributes = void 0;
-let MenuRadioItemDataAttributes = exports.MenuRadioItemDataAttributes = /*#__PURE__*/function (MenuRadioItemDataAttributes) {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  MenuRadioItemDataAttributes["checked"] = "data-checked";
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  MenuRadioItemDataAttributes["unchecked"] = "data-unchecked";
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  MenuRadioItemDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the menu radio item is highlighted.
-   */
-  MenuRadioItemDataAttributes["highlighted"] = "data-highlighted";
-  return MenuRadioItemDataAttributes;
-}({});
+exports.unchecked = exports.highlighted = exports.disabled = exports.checked = void 0;
+/**
+ * Present when the menu radio item is selected.
+ */
+const checked = exports.checked = 'data-checked';
+/**
+ * Present when the menu radio item is not selected.
+ */
+const unchecked = exports.unchecked = 'data-unchecked';
+/**
+ * Present when the menu radio item is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';
+/**
+ * Present when the menu radio item is highlighted.
+ */
+const highlighted = exports.highlighted = 'data-highlighted';

package/menu/radio-item/MenuRadioItemDataAttributes.mjs

@@ -1,19 +1,16 @@
-export let MenuRadioItemDataAttributes = /*#__PURE__*/function (MenuRadioItemDataAttributes) {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  MenuRadioItemDataAttributes["checked"] = "data-checked";
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  MenuRadioItemDataAttributes["unchecked"] = "data-unchecked";
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  MenuRadioItemDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the menu radio item is highlighted.
-   */
-  MenuRadioItemDataAttributes["highlighted"] = "data-highlighted";
-  return MenuRadioItemDataAttributes;
-}({});
+/**
+ * Present when the menu radio item is selected.
+ */
+export const checked = 'data-checked';
+/**
+ * Present when the menu radio item is not selected.
+ */
+export const unchecked = 'data-unchecked';
+/**
+ * Present when the menu radio item is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the menu radio item is highlighted.
+ */
+export const highlighted = 'data-highlighted';

package/menu/radio-item-indicator/MenuRadioItemIndicator.js

@@ -34,6 +34,8 @@ const MenuRadioItemIndicator = exports.MenuRadioItemIndicator = /*#__PURE__*/Rea
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(item.checked);
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    batch: true,
+    enabled: !item.checked,
     open: item.checked,
     ref: indicatorRef,
     onComplete() {

package/menu/radio-item-indicator/MenuRadioItemIndicator.mjs

@@ -29,6 +29,8 @@ export const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function Men
     setMounted
   } = useTransitionStatus(item.checked);
   useOpenChangeComplete({
+    batch: true,
+    enabled: !item.checked,
     open: item.checked,
     ref: indicatorRef,
     onComplete() {

package/menu/radio-item-indicator/MenuRadioItemIndicatorDataAttributes.d.mts

@@ -1,22 +1,20 @@
-export declare enum MenuRadioItemIndicatorDataAttributes {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  checked = "data-checked",
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  unchecked = "data-unchecked",
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the radio indicator begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the radio indicator is animating out.
-   */
-  endingStyle = "data-ending-style",
-}
+/**
+ * Present when the menu radio item is selected.
+ */
+export declare const checked = "data-checked";
+/**
+ * Present when the menu radio item is not selected.
+ */
+export declare const unchecked = "data-unchecked";
+/**
+ * Present when the menu radio item is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the radio indicator begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the radio indicator is animating out.
+ */
+export declare const endingStyle = "data-ending-style";

package/menu/radio-item-indicator/MenuRadioItemIndicatorDataAttributes.d.ts

@@ -1,22 +1,20 @@
-export declare enum MenuRadioItemIndicatorDataAttributes {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  checked = "data-checked",
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  unchecked = "data-unchecked",
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the radio indicator begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the radio indicator is animating out.
-   */
-  endingStyle = "data-ending-style",
-}
+/**
+ * Present when the menu radio item is selected.
+ */
+export declare const checked = "data-checked";
+/**
+ * Present when the menu radio item is not selected.
+ */
+export declare const unchecked = "data-unchecked";
+/**
+ * Present when the menu radio item is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the radio indicator begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the radio indicator is animating out.
+ */
+export declare const endingStyle = "data-ending-style";

package/menu/radio-item-indicator/MenuRadioItemIndicatorDataAttributes.js

@@ -3,28 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuRadioItemIndicatorDataAttributes = void 0;
+exports.unchecked = exports.startingStyle = exports.endingStyle = exports.disabled = exports.checked = void 0;
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
-let MenuRadioItemIndicatorDataAttributes = exports.MenuRadioItemIndicatorDataAttributes = function (MenuRadioItemIndicatorDataAttributes) {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  MenuRadioItemIndicatorDataAttributes["checked"] = "data-checked";
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  MenuRadioItemIndicatorDataAttributes["unchecked"] = "data-unchecked";
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  MenuRadioItemIndicatorDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the radio indicator begins animating in.
-   */
-  MenuRadioItemIndicatorDataAttributes[MenuRadioItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the radio indicator is animating out.
-   */
-  MenuRadioItemIndicatorDataAttributes[MenuRadioItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
-  return MenuRadioItemIndicatorDataAttributes;
-}({});
+/**
+ * Present when the menu radio item is selected.
+ */
+const checked = exports.checked = 'data-checked';
+/**
+ * Present when the menu radio item is not selected.
+ */
+const unchecked = exports.unchecked = 'data-unchecked';
+/**
+ * Present when the menu radio item is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';
+/**
+ * Present when the radio indicator begins animating in.
+ */
+const startingStyle = exports.startingStyle = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
+/**
+ * Present when the radio indicator is animating out.
+ */
+const endingStyle = exports.endingStyle = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle;

package/menu/radio-item-indicator/MenuRadioItemIndicatorDataAttributes.mjs

@@ -1,24 +1,22 @@
 import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
-export let MenuRadioItemIndicatorDataAttributes = function (MenuRadioItemIndicatorDataAttributes) {
-  /**
-   * Present when the menu radio item is selected.
-   */
-  MenuRadioItemIndicatorDataAttributes["checked"] = "data-checked";
-  /**
-   * Present when the menu radio item is not selected.
-   */
-  MenuRadioItemIndicatorDataAttributes["unchecked"] = "data-unchecked";
-  /**
-   * Present when the menu radio item is disabled.
-   */
-  MenuRadioItemIndicatorDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the radio indicator begins animating in.
-   */
-  MenuRadioItemIndicatorDataAttributes[MenuRadioItemIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the radio indicator is animating out.
-   */
-  MenuRadioItemIndicatorDataAttributes[MenuRadioItemIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
-  return MenuRadioItemIndicatorDataAttributes;
-}({});
+
+/**
+ * Present when the menu radio item is selected.
+ */
+export const checked = 'data-checked';
+/**
+ * Present when the menu radio item is not selected.
+ */
+export const unchecked = 'data-unchecked';
+/**
+ * Present when the menu radio item is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the radio indicator begins animating in.
+ */
+export const startingStyle = TransitionStatusDataAttributes.startingStyle;
+/**
+ * Present when the radio indicator is animating out.
+ */
+export const endingStyle = TransitionStatusDataAttributes.endingStyle;

package/menu/root/MenuRoot.d.mts

@@ -13,7 +13,7 @@ import { PayloadChildRenderFunction } from "../../utils/popups/index.mjs";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuRoot: <Payload>(props: MenuRoot.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuRoot: <Payload>(props: MenuRoot.Props<Payload>) => React.JSX.Element;
 export interface MenuRootState {}
 export interface MenuRootProps<Payload = unknown> {
   /**

package/menu/root/MenuRoot.d.ts

@@ -13,7 +13,7 @@ import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuRoot: <Payload>(props: MenuRoot.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuRoot: <Payload>(props: MenuRoot.Props<Payload>) => React.JSX.Element;
 export interface MenuRootState {}
 export interface MenuRootProps<Payload = unknown> {
   /**

package/menu/root/MenuRoot.js

@@ -24,6 +24,7 @@ var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetail
 var _reasons = require("../../internals/reasons");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _mergeProps = require("../../merge-props");
+var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
 var _MenuStore = require("../store/MenuStore");
 var _popups = require("../../utils/popups");
 var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
@@ -83,21 +84,41 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       type: undefined
     };
   }, [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu]);
+  const rootId = (0, _useId.useId)();
+  const floatingId = (0, _useId.useId)();
+  const floatingParentNodeIdFromContext = (0, _floatingUiReact.useFloatingParentNodeId)();
+  const parentMenuStore = parentFromContext.type === 'menu' ? parentFromContext.store : undefined;
+  // An initially open submenu should animate in only when the user watches it appear, i.e. when
+  // its subtree mounts because the parent popup is playing its own enter transition. A parent
+  // that was `defaultOpen` at page load never passes through `'starting'`, and under a
+  // `keepMounted` parent these initializers run at page load while the parent's status is still
+  // `undefined` — in both cases the submenu is page-load content that must not animate. Gated on
+  // being open at mount so a closed submenu doesn't seed `instantType` it would never clear. Read
+  // during the first render only — consumed exclusively by first-render initializers below
+  // (`useState` and the store's initial state).
+  const animateInitialOpen = (openProp ?? defaultOpen) && parentMenuStore?.state.transitionStatus === 'starting';
+
+  // Mirror an instantly-opened parent (e.g. keyboard click) so `[data-instant]` styling
+  // suppresses the enter transition on both popups or neither. Captured once —
+  // `animateInitialOpen` is only meaningful during the first render.
+  const seededInstantType = (0, _useRefWithInit.useRefWithInit)(() => animateInitialOpen ? parentMenuStore?.state.instantType : undefined).current;
   const store = useMenuRootStore({
     open: defaultOpen,
     openProp,
     activeTriggerId: defaultTriggerIdProp,
     triggerIdProp,
-    parent: parentFromContext
-  });
+    parent: parentFromContext,
+    disabled: disabledProp,
+    highlightItemOnHover,
+    modal: parentFromContext.type === undefined ? modalProp : undefined,
+    rootId,
+    instantType: seededInstantType
+  }, floatingId, floatingParentNodeIdFromContext != null);
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
-  const rootId = (0, _useId.useId)();
-  const floatingId = (0, _useId.useId)();
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = (0, _floatingUiReact.useFloatingNodeId)(floatingTreeRoot);
-  const floatingParentNodeIdFromContext = (0, _floatingUiReact.useFloatingParentNodeId)();
   const open = store.useState('open');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
@@ -132,10 +153,54 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   });
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
-    forceUnmount
+    forceUnmount,
+    transitionStatus
   } = (0, _popups.useOpenStateTransitions)(open, store, () => {
     store.set('allowMouseEnter', false);
-  });
+  }, animateInitialOpen);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(store.context.popupRef);
+
+  // An inherited `instantType` is only for the initial reveal. A later controlled `open` flip
+  // bypasses `setOpen`, so nothing would reset it and `[data-instant]` would wrongly suppress
+  // every subsequent transition. Clear it once the enter phase settles, unless an interactive
+  // open change already replaced it.
+  React.useEffect(() => {
+    if (seededInstantType === undefined) {
+      return undefined;
+    }
+    const clearSeededInstantType = () => {
+      if (store.state.instantType === seededInstantType) {
+        store.set('instantType', undefined);
+      }
+    };
+
+    // A controlled close can interrupt the initial enter before the animations-finished cleanup
+    // below fires (its abort cancels the pending callback, and a closed popup schedules no new
+    // one). Nothing is left to protect once closing starts — the exit's suppression was already
+    // decided at its trigger commit — so clear now or the next reopen renders a stale
+    // `[data-instant]`.
+    if (!open) {
+      clearSeededInstantType();
+      return undefined;
+    }
+    if (transitionStatus !== undefined) {
+      return undefined;
+    }
+
+    // With no popup element (e.g. its subtree is suspended or waiting on data), there is no
+    // enter transition to protect, and `useAnimationsFinished` would return without invoking the
+    // callback — a ref assignment alone would never rerun this effect, leaving the seed stuck.
+    // Clear immediately: a popup that appears after the reveal settles is page-load-like content.
+    if (store.context.popupRef.current == null) {
+      clearSeededInstantType();
+      return undefined;
+    }
+    const abortController = new AbortController();
+    runOnceAnimationsFinish(clearSeededInstantType, abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [seededInstantType, open, transitionStatus, runOnceAnimationsFinish, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (contextMenuContext && !parentMenuRootContext) {
       // This is a context menu root.
@@ -226,23 +291,26 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     // `useMenuItemCommonProps`) carry `detail >= 1`.
     const isKeyboardClick = (reason === _reasons.REASONS.triggerPress || reason === _reasons.REASONS.itemPress) && nativeEvent.detail === 0;
     const isDismissClose = !nextOpen && (reason === _reasons.REASONS.escapeKey || reason == null);
-    const updatedState = {
-      open: nextOpen,
-      openChangeReason: reason
-    };
     openEventRef.current = eventDetails.event;
-    (0, _popups.setPopupOpenState)(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
-    store.update(updatedState);
+    const popupOpenState = (0, _popups.createPopupOpenState)(store.state, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
+    popupOpenState.openChangeReason = reason;
     if (parent.type === 'menubar' && (reason === _reasons.REASONS.triggerFocus || reason === _reasons.REASONS.focusOut || reason === _reasons.REASONS.triggerHover || reason === _reasons.REASONS.listNavigation || reason === _reasons.REASONS.siblingOpen)) {
-      store.set('instantType', 'group');
+      popupOpenState.instantType = 'group';
     } else if (isKeyboardClick || isDismissClose) {
-      store.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
+      popupOpenState.instantType = isKeyboardClick ? 'click' : 'dismiss';
     } else {
-      store.set('instantType', undefined);
+      popupOpenState.instantType = undefined;
     }
+
+    // `instantType` must land in the same update that mounts the popup subtree: in React 17
+    // legacy mode this `update` can flush synchronously, and a separate `instantType` write
+    // after it would come too late for an initially open submenu seeding its own store from
+    // this one during that flush.
+    store.update(popupOpenState);
   });
   const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
     popupStore: store,
+    floatingRootContext: store.state.floatingRootContext,
     floatingId,
     nested: floatingParentNodeIdFromContext != null,
     onOpenChange: setOpen
@@ -344,9 +412,20 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     mergedProps['aria-expanded'] = false;
     return mergedProps;
   }, [listNavigation.trigger, dismiss.trigger, interactionTypeProps]);
+
+  // The initial render has no store subscribers yet. Seed these props before triggers render so
+  // the synchronization effect below doesn't make every trigger render twice in the first commit.
+  (0, _useRefWithInit.useRefWithInit)(() => {
+    store.update({
+      inactiveTriggerProps
+    });
+    return null;
+  });
   const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, {
     id: floatingId,
     role: 'menu',
+    // `menu` is implicitly vertical, so only the non-default value needs to be rendered.
+    'aria-orientation': orientation === 'horizontal' ? 'horizontal' : undefined,
     'aria-labelledby': activeTriggerElement?.id,
     onMouseMove() {
       store.set('allowMouseEnter', true);
@@ -368,7 +447,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
         relay(event);
       }
     }
-  }, typeahead.floating, listNavigation.floating, dismiss.floating), [activeTriggerElement, floatingId, parent.type, store, typeahead.floating, listNavigation.floating, dismiss.floating]);
+  }, typeahead.floating, listNavigation.floating, dismiss.floating), [activeTriggerElement, floatingId, orientation, parent.type, store, typeahead.floating, listNavigation.floating, dismiss.floating]);
   const itemProps = listNavigation.item ?? _empty.EMPTY_OBJECT;
   (0, _popups.usePopupInteractionProps)(store, {
     floatingRootContext,
@@ -400,12 +479,12 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   return content;
 });
 if (process.env.NODE_ENV !== "production") MenuRoot.displayName = "MenuRoot";
-function useMenuRootStore(initialState) {
+function useMenuRootStore(initialState, floatingId, nested) {
   // The store is owned by this Root instance and created exactly once. It is not tied to the handle:
   // the handle attaches to it, so swapping the handle re-attaches rather than recreating state.
   // Default values are only initial values; controlled values and root state are synced after creation.
   // Unlike other popups, Menu wires its floating root context separately (it relays open changes
   // through an event).
-  const store = (0, _useRefWithInit.useRefWithInit)(() => new _MenuStore.MenuStore(initialState)).current;
+  const store = (0, _useRefWithInit.useRefWithInit)(() => new _MenuStore.MenuStore(initialState, floatingId, nested)).current;
   return store;
 }