@base-ui/react 1.2.0 → 1.4.0

package/esm/menu/root/MenuRoot.js

@@ -6,7 +6,6 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useId } from '@base-ui/utils/useId';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
-import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { EMPTY_ARRAY } from '@base-ui/utils/empty';
 import { fastComponent } from '@base-ui/utils/fastHooks';
 import { FloatingTree, useDismiss, useFloatingNodeId, useFloatingParentNodeId, useInteractions, useListNavigation, useRole, useTypeahead, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
@@ -25,7 +24,7 @@ import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContex
 
 /**
  * Groups all parts of the menu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -125,7 +124,6 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
   const hoverEnabled = store.useState('hoverEnabled');
-  const modal = store.useState('modal');
   const disabled = store.useState('disabled');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const parent = store.useState('parent');
@@ -134,22 +132,21 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const openEventRef = React.useRef(null);
   const nested = floatingParentNodeId != null;
-  let floatingEvents;
   if (process.env.NODE_ENV !== 'production') {
     if (parent.type !== undefined && modalProp !== undefined) {
       console.warn('Base UI: The `modal` prop is not supported on nested menus. It will be ignored.');
     }
   }
+  const {
+    openMethod,
+    triggerProps: interactionTypeProps
+  } = useOpenInteractionType(open);
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
+    openMethod,
     rootId: useId()
   });
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
-  } = useOpenInteractionType(open);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
@@ -158,7 +155,6 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       allowMouseEnter: false,
       stickIfOpen: true
     });
-    resetOpenInteractionType();
   });
   const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
   const allowOutsidePressDismissalTimeout = useTimeout();
@@ -182,7 +178,6 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  useScrollLock(open && modal && lastOpenChangeReason !== REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
@@ -208,13 +203,7 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested
-    };
-    floatingEvents?.emit('openchange', details);
+    store.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const nativeEvent = eventDetails.event;
     if (nextOpen === false && nativeEvent?.type === 'click' && nativeEvent.pointerType === 'touch' && !allowTouchToCloseRef.current) {
       return;
@@ -295,7 +284,7 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     popupStore: store,
     onOpenChange: setOpen
   });
-  floatingEvents = floatingRootContext.context.events;
+  const floatingEvents = floatingRootContext.context.events;
   React.useEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,
@@ -349,6 +338,7 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   }, [store]);
   const typeahead = useTypeahead(floatingRootContext, {
     listRef: store.context.itemLabels,
+    elementsRef: store.context.itemDomElements,
     activeIndex,
     resetMs: TYPEAHEAD_RESET_MS,
     onMatch: index => {

package/esm/menu/store/MenuStore.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { MenuParent, MenuRoot } from "../root/MenuRoot.js";
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.js";
 import { HTMLProps } from "../../utils/types.js";
@@ -7,13 +8,14 @@ import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js"
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
   modal: boolean;
+  openMethod: InteractionType | null;
   allowMouseEnter: boolean;
   parent: MenuParent;
   rootId: string | undefined;
   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 +23,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>;
@@ -35,6 +38,7 @@ type Context = PopupStoreContext<MenuRoot.ChangeEventDetails> & {
 declare const selectors: {
   disabled: (state: State<unknown>) => boolean;
   modal: (state: State<unknown>) => boolean;
+  openMethod: (state: State<unknown>) => InteractionType | null;
   allowMouseEnter: (state: State<unknown>) => boolean;
   stickIfOpen: (state: State<unknown>) => boolean;
   parent: (state: State<unknown>) => MenuParent;
@@ -42,13 +46,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/esm/menu/store/MenuStore.js

@@ -8,6 +8,7 @@ const selectors = {
   ...popupStoreSelectors,
   disabled: createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
   modal: createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  openMethod: createSelector(state => state.openMethod),
   allowMouseEnter: createSelector(state => state.allowMouseEnter),
   stickIfOpen: createSelector(state => state.stickIfOpen),
   parent: createSelector(state => state.parent),
@@ -32,6 +33,7 @@ const selectors = {
   floatingParentNodeId: createSelector(state => state.floatingParentNodeId),
   itemProps: createSelector(state => state.itemProps),
   closeDelay: createSelector(state => state.closeDelay),
+  hasViewport: createSelector(state => state.hasViewport),
   keyboardEventRelay: createSelector(state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
@@ -72,7 +74,19 @@ export class MenuStore extends 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;
@@ -104,6 +118,7 @@ function createInitialState() {
     ...createInitialPopupStoreState(),
     disabled: false,
     modal: true,
+    openMethod: null,
     allowMouseEnter: false,
     stickIfOpen: true,
     parent: {
@@ -119,6 +134,7 @@ function createInitialState() {
     floatingParentNodeId: null,
     itemProps: EMPTY_OBJECT,
     keyboardEventRelay: undefined,
-    closeDelay: 0
+    closeDelay: 0,
+    hasViewport: false
   };
 }

package/esm/menu/submenu-root/MenuSubmenuRoot.d.ts

@@ -2,7 +2,7 @@ import { MenuRoot } from "../root/MenuRoot.js";
 export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
 /**
  * Groups all parts of a submenu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */

package/esm/menu/submenu-root/MenuSubmenuRoot.js

@@ -9,7 +9,7 @@ export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
 
 /**
  * Groups all parts of a submenu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */

package/esm/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -2,6 +2,10 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
+import { isElementDisabled } from '@base-ui/utils/isElementDisabled';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { warn } from '@base-ui/utils/warn';
+import { SafeReact } from '@base-ui/utils/safeReact';
 import { safePolygon, useClick, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -30,6 +34,7 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     delay = 100,
     closeDelay = 0,
     disabled: disabledProp = false,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem();
@@ -58,6 +63,16 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      const element = triggerElementRef.current;
+      if (element && isElementDisabled(element) && !disabledProp) {
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+        warn(`A disabled element was detected on <Menu.SubmenuTrigger>. To properly disable the trigger, use the \`disabled\` prop on the component instead of setting it on the rendered element.${ownerStackMessage}`);
+      }
+    });
+  }
   const submenuRootContext = useMenuSubmenuRootContext();
   if (!submenuRootContext?.parentMenu) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : _formatErrorMessage(37));
@@ -83,9 +98,10 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     highlighted,
     id: thisTriggerId,
     store,
+    typingRef: parentMenuStore.context.typingRef,
     nativeButton,
     itemMetadata,
-    nodeId: menuPositionerContext?.nodeId
+    nodeId: menuPositionerContext?.context.nodeId
   });
   const hoverEnabled = store.useState('hoverEnabled');
   const allowMouseEnter = parentMenuStore.useState('allowMouseEnter');
@@ -102,7 +118,8 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
       close: closeDelay
     } : 0,
     triggerElementRef,
-    externalTree: floatingTreeRoot
+    externalTree: floatingTreeRoot,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = useClick(floatingRootContext, {
     enabled: !disabled,

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

@@ -2,7 +2,6 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { fastComponentRef } from '@base-ui/utils/fastHooks';
@@ -11,7 +10,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { safePolygon, useClick, useFloatingTree, useFocus, useHoverReferenceInteraction, useInteractions, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.js";
-import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
+import { contains } from "../../floating-ui-react/utils.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -21,6 +20,7 @@ import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { useCompositeRootContext } from "../../composite/root/CompositeRootContext.js";
 import { findRootOwnerId } from "../utils/findRootOwnerId.js";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
+import { useTriggerFocusGuards } from "../../utils/popups/useTriggerFocusGuards.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useMixedToggleClickHandler } from "../../utils/useMixedToggleClickHandler.js";
@@ -28,7 +28,6 @@ import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRo
 import { useMenubarContext } from "../../menubar/MenubarContext.js";
 import { PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BOUNDARY_OFFSET = 2;
 
@@ -50,6 +49,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     closeDelay = 0,
     handle,
     payload,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
@@ -144,7 +144,8 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     },
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
 
   // Whether to ignore clicks to open the menu.
@@ -193,33 +194,11 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = useStableCallback(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useStableCallback(event => {
-    const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && isOutsideEvent(event, currentPositionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && contains(currentPositionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = getNextTabbable(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = useTriggerFocusGuards(store, triggerElementRef);
   const element = useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: pressableTriggerOpenStateMapping,
@@ -232,6 +211,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: ref,
       props: props,

package/esm/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/esm/menu/viewport/MenuViewport.js

@@ -0,0 +1,61 @@
+'use client';
+
+import * as React from 'react';
+import { useMenuRootContext } from "../root/MenuRootContext.js";
+import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { usePopupViewport } from "../../utils/usePopupViewport.js";
+import { MenuViewportCssVars } from "./MenuViewportCssVars.js";
+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)
+ */
+export const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    children,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useMenuRootContext();
+  const {
+    side
+  } = useMenuPositionerContext();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = usePopupViewport({
+    store,
+    side,
+    cssVars: MenuViewportCssVars,
+    children
+  });
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";

package/esm/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/esm/menu/viewport/MenuViewportCssVars.js

@@ -0,0 +1,15 @@
+export let 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/esm/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/esm/menu/viewport/MenuViewportDataAttributes.js

@@ -0,0 +1,27 @@
+export let 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/esm/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/esm/menubar/Menubar.js

@@ -1,18 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingTree } from "../floating-ui-react/index.js";
 import { MenubarContext, useMenubarContext } from "./MenubarContext.js";
-import { useOpenInteractionType } from "../utils/useOpenInteractionType.js";
 import { CompositeRoot } from "../composite/root/CompositeRoot.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { MenubarDataAttributes } from "./MenubarDataAttributes.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const menubarStateAttributesMapping = {
   hasSubmenuOpen(value) {
-    return {
-      'data-has-submenu-open': value ? 'true' : 'false'
-    };
+    return value ? {
+      [MenubarDataAttributes.hasSubmenuOpen]: ''
+    } : null;
   }
 };
 
@@ -30,21 +29,11 @@ export const Menubar = /*#__PURE__*/React.forwardRef(function Menubar(props, for
     modal = true,
     disabled = false,
     id: idProp,
+    style,
     ...elementProps
   } = props;
   const [contentElement, setContentElement] = React.useState(null);
   const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
-  } = useOpenInteractionType(hasSubmenuOpen);
-  React.useEffect(() => {
-    if (!hasSubmenuOpen) {
-      resetOpenInteractionType();
-    }
-  }, [hasSubmenuOpen, resetOpenInteractionType]);
-  useScrollLock(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = useBaseUiId(idProp);
   const state = {
     orientation,
@@ -71,13 +60,14 @@ export const Menubar = /*#__PURE__*/React.forwardRef(function Menubar(props, for
         children: /*#__PURE__*/_jsx(CompositeRoot, {
           render: render,
           className: className,
+          style: style,
           state: state,
           stateAttributesMapping: menubarStateAttributesMapping,
           refs: [forwardedRef, setContentElement, contentRef],
           props: [{
             role: 'menubar',
             id
-          }, interactionTypeProps, elementProps],
+          }, elementProps],
           orientation: orientation,
           loopFocus: loopFocus,
           highlightItemOnHover: hasSubmenuOpen