@base-ui/react 1.2.0 → 1.4.0

package/menu/root/MenuRoot.js

@@ -12,7 +12,6 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useId = require("@base-ui/utils/useId");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _empty = require("@base-ui/utils/empty");
 var _fastHooks = require("@base-ui/utils/fastHooks");
 var _floatingUiReact = require("../../floating-ui-react");
@@ -31,7 +30,7 @@ var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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)
  */
@@ -130,7 +129,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   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');
@@ -139,22 +137,21 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
   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
+  } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
+    openMethod,
     rootId: (0, _useId.useId)()
   });
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
-  } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
@@ -163,7 +160,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)();
@@ -187,7 +183,6 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  (0, _useScrollLock.useScrollLock)(open && modal && lastOpenChangeReason !== _reasons.REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
@@ -213,13 +208,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     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;
@@ -300,7 +289,7 @@ const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuR
     popupStore: store,
     onOpenChange: setOpen
   });
-  floatingEvents = floatingRootContext.context.events;
+  const floatingEvents = floatingRootContext.context.events;
   React.useEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,
@@ -354,6 +343,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

@@ -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/menu/store/MenuStore.js

@@ -15,6 +15,7 @@ const selectors = {
   ..._popups.popupStoreSelectors,
   disabled: (0, _store.createSelector)(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
   modal: (0, _store.createSelector)(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  openMethod: (0, _store.createSelector)(state => state.openMethod),
   allowMouseEnter: (0, _store.createSelector)(state => state.allowMouseEnter),
   stickIfOpen: (0, _store.createSelector)(state => state.stickIfOpen),
   parent: (0, _store.createSelector)(state => state.parent),
@@ -39,6 +40,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 +81,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;
@@ -112,6 +126,7 @@ function createInitialState() {
     ...(0, _popups.createInitialPopupStoreState)(),
     disabled: false,
     modal: true,
+    openMethod: null,
     allowMouseEnter: false,
     stickIfOpen: true,
     parent: {
@@ -127,6 +142,7 @@ function createInitialState() {
     floatingParentNodeId: null,
     itemProps: _empty.EMPTY_OBJECT,
     keyboardEventRelay: undefined,
-    closeDelay: 0
+    closeDelay: 0,
+    hasViewport: false
   };
 }

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

@@ -19,7 +19,7 @@ var _MenuSubmenuRootContext = require("./MenuSubmenuRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuSubmenuTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
+var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _warn = require("@base-ui/utils/warn");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useBaseUiId = require("../../utils/useBaseUiId");
@@ -36,6 +40,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     delay = 100,
     closeDelay = 0,
     disabled: disabledProp = false,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)();
@@ -64,6 +69,16 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+      const element = triggerElementRef.current;
+      if (element && (0, _isElementDisabled.isElementDisabled)(element) && !disabledProp) {
+        const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+        (0, _warn.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 = (0, _MenuSubmenuRootContext.useMenuSubmenuRootContext)();
   if (!submenuRootContext?.parentMenu) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : (0, _formatErrorMessage2.default)(37));
@@ -89,9 +104,10 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     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');
@@ -108,7 +124,8 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
       close: closeDelay
     } : 0,
     triggerElementRef,
-    externalTree: floatingTreeRoot
+    externalTree: floatingTreeRoot,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = (0, _floatingUiReact.useClick)(floatingRootContext, {
     enabled: !disabled,

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

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
 var _fastHooks = require("@base-ui/utils/fastHooks");
@@ -28,6 +27,7 @@ var _CompositeItem = require("../../composite/item/CompositeItem");
 var _CompositeRootContext = require("../../composite/root/CompositeRootContext");
 var _findRootOwnerId = require("../utils/findRootOwnerId");
 var _popups = require("../../utils/popups");
+var _useTriggerFocusGuards = require("../../utils/popups/useTriggerFocusGuards");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _reasons = require("../../utils/reasons");
 var _useMixedToggleClickHandler = require("../../utils/useMixedToggleClickHandler");
@@ -35,7 +35,6 @@ var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootCo
 var _MenubarContext = require("../../menubar/MenubarContext");
 var _constants = require("../../utils/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _jsxRuntime = require("react/jsx-runtime");
 const BOUNDARY_OFFSET = 2;
 
@@ -57,6 +56,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     closeDelay = 0,
     handle,
     payload,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _MenuRootContext.useMenuRootContext)(true);
@@ -151,7 +151,8 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     },
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
 
   // Whether to ignore clicks to open the menu.
@@ -200,33 +201,11 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = (0, _useStableCallback.useStableCallback)(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = (0, _utils.getTabbableBeforeElement)(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = (0, _useStableCallback.useStableCallback)(event => {
-    const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && (0, _utils.isOutsideEvent)(event, currentPositionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      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) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
@@ -239,6 +218,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: ref,
       props: props,

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,67 @@
+"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,
+    style,
+    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