@base-ui/react 1.2.0 → 1.3.0

package/menu/positioner/MenuPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the menu popup against the trigger.
@@ -13,12 +13,28 @@ export interface MenuPositionerState {
    * Whether the menu is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether the component is nested.
+   */
   nested: boolean;
+  /**
+   * Whether CSS transitions should be disabled.
+   */
+  instant: string | undefined;
 }
-export interface MenuPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', MenuPositioner.State> {}
+export interface MenuPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', MenuPositionerState> {}
 export declare namespace MenuPositioner {
   type State = MenuPositionerState;
   type Props = MenuPositionerProps;

package/menu/positioner/MenuPositioner.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _inertValue = require("@base-ui/utils/inertValue");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useTimeout = require("@base-ui/utils/useTimeout");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuPositionerContext = require("./MenuPositionerContext");
 var _MenuRootContext = require("../root/MenuRootContext");
@@ -22,6 +24,8 @@ var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTra
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
+var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
+var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the menu popup against the trigger.
@@ -60,9 +64,15 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
   const modal = store.useState('modal');
   const triggerElement = store.useState('activeTriggerElement');
   const transitionStatus = store.useState('transitionStatus');
+  const positionerElement = store.useState('positionerElement');
+  const instantType = store.useState('instantType');
+  const hasViewport = store.useState('hasViewport');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const floatingNodeId = store.useState('floatingNodeId');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
+  const domReference = floatingRootContext.useState('domReferenceElement');
+  const previousTriggerRef = React.useRef(null);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(positionerElement, false, false);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -105,7 +115,8 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     disableAnchorTracking,
     collisionAvoidance,
     shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
-    externalTree: floatingTreeRoot
+    externalTree: floatingTreeRoot,
+    adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
   });
   const positionerProps = React.useMemo(() => {
     const hiddenStyles = {};
@@ -153,6 +164,14 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
       floatingTreeRoot.events.off('menuopenchange', onParentClose);
     };
   }, [floatingTreeRoot.events, store]);
+  const closeTimeout = (0, _useTimeout.useTimeout)();
+
+  // Clear pending close timeout when the menu closes.
+  React.useEffect(() => {
+    if (!open) {
+      closeTimeout.clear();
+    }
+  }, [open, closeTimeout]);
 
   // Close unrelated child submenus when hovering a different item in the parent menu.
   React.useEffect(() => {
@@ -163,14 +182,26 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
         return;
       }
       if (event.target && triggerElement && triggerElement !== event.target) {
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.siblingOpen));
+        const delay = store.select('closeDelay');
+        if (delay > 0) {
+          if (!closeTimeout.isStarted()) {
+            closeTimeout.start(delay, () => {
+              store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.siblingOpen));
+            });
+          }
+        } else {
+          store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.siblingOpen));
+        }
+      } else {
+        // User re-hovered the submenu trigger, cancel pending close.
+        closeTimeout.clear();
       }
     }
     floatingTreeRoot.events.on('itemhover', onItemHover);
     return () => {
       floatingTreeRoot.events.off('itemhover', onItemHover);
     };
-  }, [floatingTreeRoot.events, open, triggerElement, store]);
+  }, [floatingTreeRoot.events, open, triggerElement, store, closeTimeout]);
   React.useEffect(() => {
     const eventDetails = {
       open,
@@ -180,12 +211,33 @@ const MenuPositioner = exports.MenuPositioner = /*#__PURE__*/React.forwardRef(fu
     };
     floatingTreeRoot.events.emit('menuopenchange', eventDetails);
   }, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
+
+  // Keep positioner transition behavior aligned with Popover when switching detached triggers.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const currentTrigger = domReference;
+    const previousTrigger = previousTriggerRef.current;
+    if (currentTrigger) {
+      previousTriggerRef.current = currentTrigger;
+    }
+    if (previousTrigger && currentTrigger && currentTrigger !== previousTrigger) {
+      store.set('instantType', undefined);
+      const abortController = new AbortController();
+      runOnceAnimationsFinish(() => {
+        store.set('instantType', 'trigger-change');
+      }, abortController.signal);
+      return () => {
+        abortController.abort();
+      };
+    }
+    return undefined;
+  }, [domReference, runOnceAnimationsFinish, store]);
   const state = {
     open,
     side: positioner.side,
     align: positioner.align,
     anchorHidden: positioner.anchorHidden,
-    nested: parent.type === 'menu'
+    nested: parent.type === 'menu',
+    instant: instantType
   };
   const contextValue = React.useMemo(() => ({
     side: positioner.side,

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

@@ -8,7 +8,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<Omit<MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRadioGroup.State> {
+export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRadioGroupState> {
   /**
    * The content of the component.
    */
@@ -36,9 +36,12 @@ export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRad
    */
   disabled?: boolean | undefined;
 }
-export type MenuRadioGroupState = {
+export interface MenuRadioGroupState {
+  /**
+   * Whether the component is disabled.
+   */
   disabled: boolean;
-};
+}
 export type MenuRadioGroupChangeEventReason = MenuRoot.ChangeEventReason;
 export type MenuRadioGroupChangeEventDetails = MenuRoot.ChangeEventDetails;
 export declare namespace MenuRadioGroup {

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

@@ -7,7 +7,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<Omit<MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type MenuRadioItemState = {
+export interface MenuRadioItemState {
   /**
    * Whether the radio item should ignore user interaction.
    */
@@ -20,8 +20,8 @@ export type MenuRadioItemState = {
    * Whether the radio item is currently selected.
    */
   checked: boolean;
-};
-export interface MenuRadioItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuRadioItem.State> {
+}
+export interface MenuRadioItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuRadioItemState> {
   /**
    * Value of the radio item.
    * This is the value that will be set in the MenuRadioGroup when the item is selected.

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

@@ -8,7 +8,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<MenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span', MenuRadioItemIndicator.State> {
+export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span', MenuRadioItemIndicatorState> {
   /**
    * Whether to keep the HTML element in the DOM when the radio item is inactive.
    * @default false
@@ -24,7 +24,13 @@ export interface MenuRadioItemIndicatorState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the item is highlighted.
+   */
   highlighted: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace MenuRadioItemIndicator {

package/menu/root/MenuRoot.d.ts

@@ -14,6 +14,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 interface MenuRootState {}
 export interface MenuRootProps<Payload = unknown> {
   /**
    * Whether the menu is initially open.
@@ -83,12 +84,12 @@ export interface MenuRootProps<Payload = unknown> {
    * 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) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * A handle to associate the menu with a trigger.
    * If specified, allows external triggers to control the menu's open state.
@@ -126,6 +127,7 @@ export type MenuParent = {
   type: undefined;
 };
 export declare namespace MenuRoot {
+  type State = MenuRootState;
   type Props<Payload = unknown> = MenuRootProps<Payload>;
   type Actions = MenuRootActions;
   type ChangeEventReason = MenuRootChangeEventReason;

package/menu/root/MenuRoot.js

@@ -152,8 +152,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   });
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
@@ -163,7 +162,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       allowMouseEnter: false,
       stickIfOpen: true
     });
-    resetOpenInteractionType();
   });
   const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
   const allowOutsidePressDismissalTimeout = (0, _useTimeout.useTimeout)();
@@ -354,6 +352,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   }, [store]);
   const typeahead = (0, _floatingUiReact.useTypeahead)(floatingRootContext, {
     listRef: store.context.itemLabels,
+    elementsRef: store.context.itemDomElements,
     activeIndex,
     resetMs: _constants.TYPEAHEAD_RESET_MS,
     onMatch: index => {

package/menu/store/MenuStore.d.ts

@@ -13,7 +13,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   activeIndex: number | null;
   hoverEnabled: boolean;
   stickIfOpen: boolean;
-  instantType: 'dismiss' | 'click' | 'group' | undefined;
+  instantType: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
   openChangeReason: MenuRoot.ChangeEventReason | null;
   floatingTreeRoot: FloatingTreeStore;
   floatingNodeId: string | undefined;
@@ -21,6 +21,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   itemProps: HTMLProps;
   closeDelay: number;
   keyboardEventRelay: ((event: React.KeyboardEvent<any>) => void) | undefined;
+  hasViewport: boolean;
 };
 type Context = PopupStoreContext<MenuRoot.ChangeEventDetails> & {
   readonly positionerRef: React.RefObject<HTMLElement | null>;
@@ -42,13 +43,14 @@ declare const selectors: {
   activeIndex: (state: State<unknown>) => number | null;
   isActive: (state: State<unknown>, itemIndex: number) => boolean;
   hoverEnabled: (state: State<unknown>) => boolean;
-  instantType: (state: State<unknown>) => "group" | "click" | "dismiss" | undefined;
+  instantType: (state: State<unknown>) => "group" | "click" | "dismiss" | "trigger-change" | undefined;
   lastOpenChangeReason: (state: State<unknown>) => import("../index.js").MenuRootChangeEventReason | null;
   floatingTreeRoot: (state: State<unknown>) => FloatingTreeStore;
   floatingNodeId: (state: State<unknown>) => string | undefined;
   floatingParentNodeId: (state: State<unknown>) => string | null;
   itemProps: (state: State<unknown>) => HTMLProps;
   closeDelay: (state: State<unknown>) => number;
+  hasViewport: (state: State<unknown>) => boolean;
   keyboardEventRelay: (state: State<unknown>) => React.KeyboardEventHandler<any> | undefined;
   open: (state: {
     open: boolean;

package/menu/store/MenuStore.js

@@ -39,6 +39,7 @@ const selectors = {
   floatingParentNodeId: (0, _store.createSelector)(state => state.floatingParentNodeId),
   itemProps: (0, _store.createSelector)(state => state.itemProps),
   closeDelay: (0, _store.createSelector)(state => state.closeDelay),
+  hasViewport: (0, _store.createSelector)(state => state.hasViewport),
   keyboardEventRelay: (0, _store.createSelector)(state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
@@ -79,7 +80,19 @@ class MenuStore extends _store.ReactStore {
     this.unsubscribeParentListener = this.observe('parent', parent => {
       this.unsubscribeParentListener?.();
       if (parent.type === 'menu') {
+        let rootId = parent.store.select('rootId');
+        let floatingTreeRoot = parent.store.select('floatingTreeRoot');
+        let keyboardEventRelay = parent.store.select('keyboardEventRelay');
         this.unsubscribeParentListener = parent.store.subscribe(() => {
+          const nextRootId = parent.store.select('rootId');
+          const nextFloatingTreeRoot = parent.store.select('floatingTreeRoot');
+          const nextKeyboardEventRelay = parent.store.select('keyboardEventRelay');
+          if (rootId === nextRootId && floatingTreeRoot === nextFloatingTreeRoot && keyboardEventRelay === nextKeyboardEventRelay) {
+            return;
+          }
+          rootId = nextRootId;
+          floatingTreeRoot = nextFloatingTreeRoot;
+          keyboardEventRelay = nextKeyboardEventRelay;
           this.notifyAll();
         });
         this.context.allowMouseUpTriggerRef = parent.store.context.allowMouseUpTriggerRef;
@@ -127,6 +140,7 @@ function createInitialState() {
     floatingParentNodeId: null,
     itemProps: _empty.EMPTY_OBJECT,
     keyboardEventRelay: undefined,
-    closeDelay: 0
+    closeDelay: 0,
+    hasViewport: false
   };
 }

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -89,6 +89,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     highlighted,
     id: thisTriggerId,
     store,
+    typingRef: parentMenuStore.context.typingRef,
     nativeButton,
     itemMetadata,
     nodeId: menuPositionerContext?.nodeId

package/menu/trigger/MenuTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const MenuTrigger: MenuTrigger;
 export interface MenuTrigger {
   <Payload>(componentProps: MenuTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', MenuTrigger.State> {
+export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', MenuTriggerState> {
   children?: React.ReactNode;
   /**
    * Whether the component should ignore user interaction.
@@ -46,7 +46,7 @@ export interface MenuTriggerProps<Payload = unknown> extends NativeButtonProps,
    */
   openOnHover?: boolean | undefined;
 }
-export type MenuTriggerState = {
+export interface MenuTriggerState {
   /**
    * Whether the menu is currently open.
    */
@@ -55,7 +55,7 @@ export type MenuTriggerState = {
    * Whether the trigger is disabled.
    */
   disabled: boolean;
-};
+}
 export declare namespace MenuTrigger {
   type Props<Payload = unknown> = MenuTriggerProps<Payload>;
   type State = MenuTriggerState;

package/menu/viewport/MenuViewport.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
+ * and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare const MenuViewport: React.ForwardRefExoticComponent<Omit<MenuViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare namespace MenuViewport {
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The content to render inside the transition container.
+     */
+    children?: React.ReactNode;
+  }
+  interface State {
+    activationDirection: string | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    /**
+     * Present if animations should be instant.
+     */
+    instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
+  }
+}

package/menu/viewport/MenuViewport.js

@@ -0,0 +1,66 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuViewport = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _MenuRootContext = require("../root/MenuRootContext");
+var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _usePopupViewport = require("../../utils/usePopupViewport");
+var _MenuViewportCssVars = require("./MenuViewportCssVars");
+const stateAttributesMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': value
+  } : null
+};
+
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
+ * and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuViewport = exports.MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = (0, _MenuRootContext.useMenuRootContext)();
+  const {
+    side
+  } = (0, _MenuPositionerContext.useMenuPositionerContext)();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = (0, _usePopupViewport.usePopupViewport)({
+    store,
+    side,
+    cssVars: _MenuViewportCssVars.MenuViewportCssVars,
+    children
+  });
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";

package/menu/viewport/MenuViewportCssVars.d.ts

@@ -0,0 +1,14 @@
+export declare enum MenuViewportCssVars {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupWidth = "--popup-width",
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupHeight = "--popup-height",
+}

package/menu/viewport/MenuViewportCssVars.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuViewportCssVars = void 0;
+let MenuViewportCssVars = exports.MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  MenuViewportCssVars["popupWidth"] = "--popup-width";
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  MenuViewportCssVars["popupHeight"] = "--popup-height";
+  return MenuViewportCssVars;
+}({});

package/menu/viewport/MenuViewportDataAttributes.d.ts

@@ -0,0 +1,26 @@
+export declare enum MenuViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'down' | 'up'}`}
+   */
+  activationDirection = "data-activation-direction",
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'click' | 'dismiss' | 'group' | 'trigger-change'}
+   */
+  instant = "data-instant",
+}

package/menu/viewport/MenuViewportDataAttributes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuViewportDataAttributes = void 0;
+let MenuViewportDataAttributes = exports.MenuViewportDataAttributes = /*#__PURE__*/function (MenuViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  MenuViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  MenuViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'down' | 'up'}`}
+   */
+  MenuViewportDataAttributes["activationDirection"] = "data-activation-direction";
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  MenuViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'click' | 'dismiss' | 'group' | 'trigger-change'}
+   */
+  MenuViewportDataAttributes["instant"] = "data-instant";
+  return MenuViewportDataAttributes;
+}({});

package/menubar/Menubar.d.ts

@@ -21,7 +21,7 @@ export interface MenubarState {
    */
   hasSubmenuOpen: boolean;
 }
-export interface MenubarProps extends BaseUIComponentProps<'div', Menubar.State> {
+export interface MenubarProps extends BaseUIComponentProps<'div', MenubarState> {
   /**
    * Whether the menubar is modal.
    * @default true

package/menubar/Menubar.js

@@ -42,14 +42,8 @@ const Menubar = exports.Menubar = /*#__PURE__*/React.forwardRef(function Menubar
   const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(hasSubmenuOpen);
-  React.useEffect(() => {
-    if (!hasSubmenuOpen) {
-      resetOpenInteractionType();
-    }
-  }, [hasSubmenuOpen, resetOpenInteractionType]);
   (0, _useScrollLock.useScrollLock)(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const state = {

package/meter/indicator/MeterIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * Visualizes the position of the value along the range.
  * Renders a `<div>` element.
@@ -8,7 +8,9 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
+export interface MeterIndicatorState extends MeterRootState {}
+export interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterIndicatorState> {}
 export declare namespace MeterIndicator {
+  type State = MeterIndicatorState;
   type Props = MeterIndicatorProps;
 }

package/meter/label/MeterLabel.d.ts

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