@base-ui/react 1.7.0 → 1.8.0

package/menu/root/MenuRoot.mjs

@@ -18,8 +18,9 @@ import { createChangeEventDetails } from "../../internals/createBaseUIEventDetai
 import { REASONS } from "../../internals/reasons.mjs";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
+import { useAnimationsFinished } from "../../internals/useAnimationsFinished.mjs";
 import { MenuStore } from "../store/MenuStore.mjs";
-import { attachPreventUnmountOnClose, FOCUSABLE_POPUP_PROPS, setPopupOpenState, PopupHandleAttachment, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps } from "../../utils/popups/index.mjs";
+import { attachPreventUnmountOnClose, FOCUSABLE_POPUP_PROPS, createPopupOpenState, PopupHandleAttachment, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps } from "../../utils/popups/index.mjs";
 import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContext.mjs";
 
 /**
@@ -78,21 +79,41 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       type: undefined
     };
   }, [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu]);
+  const rootId = useId();
+  const floatingId = useId();
+  const floatingParentNodeIdFromContext = 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 = 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 = useId();
-  const floatingId = useId();
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeIdFromContext = useFloatingParentNodeId();
   const open = store.useState('open');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
@@ -127,10 +148,54 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   });
   useImplicitActiveTrigger(store);
   const {
-    forceUnmount
+    forceUnmount,
+    transitionStatus
   } = useOpenStateTransitions(open, store, () => {
     store.set('allowMouseEnter', false);
-  });
+  }, animateInitialOpen);
+  const runOnceAnimationsFinish = 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]);
   useIsoLayoutEffect(() => {
     if (contextMenuContext && !parentMenuRootContext) {
       // This is a context menu root.
@@ -221,23 +286,26 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     // `useMenuItemCommonProps`) carry `detail >= 1`.
     const isKeyboardClick = (reason === REASONS.triggerPress || reason === REASONS.itemPress) && nativeEvent.detail === 0;
     const isDismissClose = !nextOpen && (reason === REASONS.escapeKey || reason == null);
-    const updatedState = {
-      open: nextOpen,
-      openChangeReason: reason
-    };
     openEventRef.current = eventDetails.event;
-    setPopupOpenState(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
-    store.update(updatedState);
+    const popupOpenState = createPopupOpenState(store.state, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
+    popupOpenState.openChangeReason = reason;
     if (parent.type === 'menubar' && (reason === REASONS.triggerFocus || reason === REASONS.focusOut || reason === REASONS.triggerHover || reason === REASONS.listNavigation || reason === 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 = useSyncedFloatingRootContext({
     popupStore: store,
+    floatingRootContext: store.state.floatingRootContext,
     floatingId,
     nested: floatingParentNodeIdFromContext != null,
     onOpenChange: setOpen
@@ -339,9 +407,20 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     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.
+  useRefWithInit(() => {
+    store.update({
+      inactiveTriggerProps
+    });
+    return null;
+  });
   const popupProps = React.useMemo(() => mergeProps(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);
@@ -363,7 +442,7 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
         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_OBJECT;
   usePopupInteractionProps(store, {
     floatingRootContext,
@@ -395,12 +474,12 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   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 = useRefWithInit(() => new MenuStore(initialState)).current;
+  const store = useRefWithInit(() => new MenuStore(initialState, floatingId, nested)).current;
   return store;
 }

package/menu/store/MenuStore.d.mts

@@ -8,7 +8,7 @@ import type { AdaptiveOriginMiddleware } from "../../utils/adaptiveOriginConstan
 import { PopupStoreContext, PopupStoreState, type PopupTriggerStoreKeys } from "../../utils/popups/index.mjs";
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
-  modal: boolean;
+  modal: boolean | undefined;
   openMethod: InteractionType | null;
   allowMouseEnter: boolean;
   highlightItemOnHover: boolean;
@@ -409,7 +409,7 @@ type Selectors = typeof selectors;
  */
 export type MenuHandleStore<Payload> = Pick<MenuStore<Payload>, PopupTriggerStoreKeys | 'setOpen'>;
 export declare class MenuStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, Selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen(open: boolean, eventDetails: Omit<MenuRoot.ChangeEventDetails, 'preventUnmountOnClose'>): void;
   private unsubscribeParentListener;
 }

package/menu/store/MenuStore.d.ts

@@ -8,7 +8,7 @@ import type { AdaptiveOriginMiddleware } from "../../utils/adaptiveOriginConstan
 import { PopupStoreContext, PopupStoreState, type PopupTriggerStoreKeys } from "../../utils/popups/index.js";
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
-  modal: boolean;
+  modal: boolean | undefined;
   openMethod: InteractionType | null;
   allowMouseEnter: boolean;
   highlightItemOnHover: boolean;
@@ -409,7 +409,7 @@ type Selectors = typeof selectors;
  */
 export type MenuHandleStore<Payload> = Pick<MenuStore<Payload>, PopupTriggerStoreKeys | 'setOpen'>;
 export declare class MenuStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, Selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen(open: boolean, eventDetails: Omit<MenuRoot.ChangeEventDetails, 'preventUnmountOnClose'>): void;
   private unsubscribeParentListener;
 }

package/menu/store/MenuStore.js

@@ -62,11 +62,10 @@ const selectors = {
  */
 
 class MenuStore extends _store.ReactStore {
-  constructor(initialState) {
-    super({
-      ...createInitialState(),
-      ...initialState
-    }, createInitialContext(), selectors);
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new _popups.PopupTriggerMap();
+    const state = createInitialState(triggerElements, floatingId, nested, initialState);
+    super(state, createInitialContext(triggerElements), selectors);
 
     // Set up propagation of state from parent menu if applicable.
     this.unsubscribeParentListener = this.observe('parent', parent => {
@@ -114,12 +113,13 @@ class MenuStore extends _store.ReactStore {
  */
 exports.MenuStore = MenuStore;
 function createNullMenuStore() {
-  const store = new _NullStore.NullStore(Object.freeze(createInitialState()), Object.freeze(createInitialContext()), selectors);
+  const triggerElements = new _popups.PopupTriggerMap();
+  const store = new _NullStore.NullStore(Object.freeze(createInitialState(triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
   return Object.assign(store, {
     setOpen: _empty.NOOP
   });
 }
-function createInitialContext() {
+function createInitialContext(triggerElements) {
   return {
     positionerRef: /*#__PURE__*/React.createRef(),
     popupRef: /*#__PURE__*/React.createRef(),
@@ -138,12 +138,12 @@ function createInitialContext() {
     triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
     beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
     onOpenChangeComplete: undefined,
-    triggerElements: new _popups.PopupTriggerMap()
+    triggerElements
   };
 }
-function createInitialState() {
+function createInitialState(triggerElements, floatingId, nested = false, initialState) {
   return {
-    ...(0, _popups.createInitialPopupStoreState)(),
+    ...(0, _popups.createInitialPopupStoreState)(triggerElements, floatingId, nested),
     disabled: false,
     modal: true,
     openMethod: null,
@@ -163,6 +163,7 @@ function createInitialState() {
     itemProps: _empty.EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    adaptiveOrigin: undefined
+    adaptiveOrigin: undefined,
+    ...initialState
   };
 }

package/menu/store/MenuStore.mjs

@@ -54,11 +54,10 @@ const selectors = {
  */
 
 export class MenuStore extends ReactStore {
-  constructor(initialState) {
-    super({
-      ...createInitialState(),
-      ...initialState
-    }, createInitialContext(), selectors);
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new PopupTriggerMap();
+    const state = createInitialState(triggerElements, floatingId, nested, initialState);
+    super(state, createInitialContext(triggerElements), selectors);
 
     // Set up propagation of state from parent menu if applicable.
     this.unsubscribeParentListener = this.observe('parent', parent => {
@@ -105,12 +104,13 @@ export class MenuStore extends ReactStore {
  * `setOpen` without it ever taking effect while detached.
  */
 export function createNullMenuStore() {
-  const store = new NullStore(Object.freeze(createInitialState()), Object.freeze(createInitialContext()), selectors);
+  const triggerElements = new PopupTriggerMap();
+  const store = new NullStore(Object.freeze(createInitialState(triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
   return Object.assign(store, {
     setOpen: NOOP
   });
 }
-function createInitialContext() {
+function createInitialContext(triggerElements) {
   return {
     positionerRef: /*#__PURE__*/React.createRef(),
     popupRef: /*#__PURE__*/React.createRef(),
@@ -129,12 +129,12 @@ function createInitialContext() {
     triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
     beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
     onOpenChangeComplete: undefined,
-    triggerElements: new PopupTriggerMap()
+    triggerElements
   };
 }
-function createInitialState() {
+function createInitialState(triggerElements, floatingId, nested = false, initialState) {
   return {
-    ...createInitialPopupStoreState(),
+    ...createInitialPopupStoreState(triggerElements, floatingId, nested),
     disabled: false,
     modal: true,
     openMethod: null,
@@ -154,6 +154,7 @@ function createInitialState() {
     itemProps: EMPTY_OBJECT,
     keyboardEventRelay: undefined,
     closeDelay: 0,
-    adaptiveOrigin: undefined
+    adaptiveOrigin: undefined,
+    ...initialState
   };
 }

package/menu/submenu-root/MenuSubmenuRoot.d.mts

@@ -7,7 +7,7 @@ export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.mjs";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare function MenuSubmenuRoot(props: MenuSubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSubmenuRoot(props: MenuSubmenuRoot.Props): React.JSX.Element;
 export interface MenuSubmenuRootProps extends Omit<MenuRoot.Props, 'modal' | 'openOnHover' | 'onOpenChange' | 'handle' | 'triggerId' | 'defaultTriggerId' | 'children'> {
   /**
    * Event handler called when the menu is opened or closed.

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

@@ -7,7 +7,7 @@ export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare function MenuSubmenuRoot(props: MenuSubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSubmenuRoot(props: MenuSubmenuRoot.Props): React.JSX.Element;
 export interface MenuSubmenuRootProps extends Omit<MenuRoot.Props, 'modal' | 'openOnHover' | 'onOpenChange' | 'handle' | 'triggerId' | 'defaultTriggerId' | 'children'> {
   /**
    * Event handler called when the menu is opened or closed.

package/menu/submenu-trigger/MenuSubmenuTrigger.d.mts

@@ -53,6 +53,7 @@ export interface MenuSubmenuTriggerProps extends NonNativeButtonProps, BaseUICom
   closeDelay?: number | undefined;
   /**
    * Whether the menu should also open when the trigger is hovered.
+   * @default true
    */
   openOnHover?: boolean | undefined;
 }

package/menu/submenu-trigger/MenuSubmenuTrigger.d.ts

@@ -53,6 +53,7 @@ export interface MenuSubmenuTriggerProps extends NonNativeButtonProps, BaseUICom
   closeDelay?: number | undefined;
   /**
    * Whether the menu should also open when the trigger is hovered.
+   * @default true
    */
   openOnHover?: boolean | undefined;
 }

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -14,6 +14,8 @@ var _warn = require("@base-ui/utils/warn");
 var _safeReact = require("@base-ui/utils/safeReact");
 var _empty = require("@base-ui/utils/empty");
 var _platform = require("@base-ui/utils/platform");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -67,22 +69,31 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const popupId = store.useState('triggerPopupId', thisTriggerId);
   const baseRegisterTrigger = (0, _popups.useTriggerRegistration)(thisTriggerId, store);
-  const registerTrigger = React.useCallback(element => {
-    const cleanup = baseRegisterTrigger(element);
+  // Stable, so the merged ref on the rendered element keeps its identity for the trigger's whole
+  // lifetime; the latest `closeDelay` is read when it runs.
+  const registerTrigger = (0, _useStableCallback.useStableCallback)(element => {
+    baseRegisterTrigger(element);
     if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
       store.update({
-        activeTriggerId: thisTriggerId,
+        activeTriggerId: thisTriggerId ?? null,
         activeTriggerElement: element,
         closeDelay
       });
     }
-    return cleanup;
-  }, [baseRegisterTrigger, closeDelay, store, thisTriggerId]);
+  });
   const triggerElementRef = React.useRef(null);
   const handleTriggerElementRef = React.useCallback(el => {
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
+
+  // A stable ref does not re-fire when the id changes, so register the rendered element here
+  // instead. On React 17 the id also starts out `undefined`, so this is what registers the trigger
+  // at all.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    registerTrigger(triggerElementRef.current);
+    return () => registerTrigger(null);
+  }, [registerTrigger, thisTriggerId, store]);
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
   const rootDisabled = store.useState('disabled');

package/menu/submenu-trigger/MenuSubmenuTrigger.mjs

@@ -7,6 +7,8 @@ import { warn } from '@base-ui/utils/warn';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { platform } from '@base-ui/utils/platform';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { safePolygon, useClick, useHoverReferenceInteraction } from "../../floating-ui-react/index.mjs";
 import { useMenuRootContext } from "../root/MenuRootContext.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
@@ -60,22 +62,31 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSub
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const popupId = store.useState('triggerPopupId', thisTriggerId);
   const baseRegisterTrigger = useTriggerRegistration(thisTriggerId, store);
-  const registerTrigger = React.useCallback(element => {
-    const cleanup = baseRegisterTrigger(element);
+  // Stable, so the merged ref on the rendered element keeps its identity for the trigger's whole
+  // lifetime; the latest `closeDelay` is read when it runs.
+  const registerTrigger = useStableCallback(element => {
+    baseRegisterTrigger(element);
     if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
       store.update({
-        activeTriggerId: thisTriggerId,
+        activeTriggerId: thisTriggerId ?? null,
         activeTriggerElement: element,
         closeDelay
       });
     }
-    return cleanup;
-  }, [baseRegisterTrigger, closeDelay, store, thisTriggerId]);
+  });
   const triggerElementRef = React.useRef(null);
   const handleTriggerElementRef = React.useCallback(el => {
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
+
+  // A stable ref does not re-fire when the id changes, so register the rendered element here
+  // instead. On React 17 the id also starts out `undefined`, so this is what registers the trigger
+  // at all.
+  useIsoLayoutEffect(() => {
+    registerTrigger(triggerElementRef.current);
+    return () => registerTrigger(null);
+  }, [registerTrigger, thisTriggerId, store]);
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
   const rootDisabled = store.useState('disabled');

package/menu/submenu-trigger/MenuSubmenuTriggerDataAttributes.d.mts

@@ -1,14 +1,12 @@
-export declare enum MenuSubmenuTriggerDataAttributes {
-  /**
-   * Present when the corresponding submenu is open.
-   */
-  popupOpen = "data-popup-open",
-  /**
-   * Present when the submenu trigger is highlighted.
-   */
-  highlighted = "data-highlighted",
-  /**
-   * Present when the submenu trigger is disabled.
-   */
-  disabled = "data-disabled",
-}
+/**
+ * Present when the corresponding submenu is open.
+ */
+export declare const popupOpen = "data-popup-open";
+/**
+ * Present when the submenu trigger is highlighted.
+ */
+export declare const highlighted = "data-highlighted";
+/**
+ * Present when the submenu trigger is disabled.
+ */
+export declare const disabled = "data-disabled";

package/menu/submenu-trigger/MenuSubmenuTriggerDataAttributes.d.ts

@@ -1,14 +1,12 @@
-export declare enum MenuSubmenuTriggerDataAttributes {
-  /**
-   * Present when the corresponding submenu is open.
-   */
-  popupOpen = "data-popup-open",
-  /**
-   * Present when the submenu trigger is highlighted.
-   */
-  highlighted = "data-highlighted",
-  /**
-   * Present when the submenu trigger is disabled.
-   */
-  disabled = "data-disabled",
-}
+/**
+ * Present when the corresponding submenu is open.
+ */
+export declare const popupOpen = "data-popup-open";
+/**
+ * Present when the submenu trigger is highlighted.
+ */
+export declare const highlighted = "data-highlighted";
+/**
+ * Present when the submenu trigger is disabled.
+ */
+export declare const disabled = "data-disabled";

package/menu/submenu-trigger/MenuSubmenuTriggerDataAttributes.js

@@ -3,20 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuSubmenuTriggerDataAttributes = void 0;
+exports.popupOpen = exports.highlighted = exports.disabled = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-let MenuSubmenuTriggerDataAttributes = exports.MenuSubmenuTriggerDataAttributes = function (MenuSubmenuTriggerDataAttributes) {
-  /**
-   * Present when the corresponding submenu is open.
-   */
-  MenuSubmenuTriggerDataAttributes[MenuSubmenuTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
-  /**
-   * Present when the submenu trigger is highlighted.
-   */
-  MenuSubmenuTriggerDataAttributes["highlighted"] = "data-highlighted";
-  /**
-   * Present when the submenu trigger is disabled.
-   */
-  MenuSubmenuTriggerDataAttributes["disabled"] = "data-disabled";
-  return MenuSubmenuTriggerDataAttributes;
-}({});
+/**
+ * Present when the corresponding submenu is open.
+ */
+const popupOpen = exports.popupOpen = _popupStateMapping.CommonTriggerDataAttributes.popupOpen;
+/**
+ * Present when the submenu trigger is highlighted.
+ */
+const highlighted = exports.highlighted = 'data-highlighted';
+/**
+ * Present when the submenu trigger is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';

package/menu/submenu-trigger/MenuSubmenuTriggerDataAttributes.mjs

@@ -1,16 +1,14 @@
 import { CommonTriggerDataAttributes } from "../../utils/popupStateMapping.mjs";
-export let MenuSubmenuTriggerDataAttributes = function (MenuSubmenuTriggerDataAttributes) {
-  /**
-   * Present when the corresponding submenu is open.
-   */
-  MenuSubmenuTriggerDataAttributes[MenuSubmenuTriggerDataAttributes["popupOpen"] = CommonTriggerDataAttributes.popupOpen] = "popupOpen";
-  /**
-   * Present when the submenu trigger is highlighted.
-   */
-  MenuSubmenuTriggerDataAttributes["highlighted"] = "data-highlighted";
-  /**
-   * Present when the submenu trigger is disabled.
-   */
-  MenuSubmenuTriggerDataAttributes["disabled"] = "data-disabled";
-  return MenuSubmenuTriggerDataAttributes;
-}({});
+
+/**
+ * Present when the corresponding submenu is open.
+ */
+export const popupOpen = CommonTriggerDataAttributes.popupOpen;
+/**
+ * Present when the submenu trigger is highlighted.
+ */
+export const highlighted = 'data-highlighted';
+/**
+ * Present when the submenu trigger is disabled.
+ */
+export const disabled = 'data-disabled';

package/menu/trigger/MenuTriggerDataAttributes.d.mts

@@ -1,10 +1,12 @@
-export declare enum MenuTriggerDataAttributes {
-  /**
-   * Present when the corresponding menu is open.
-   */
-  popupOpen = "data-popup-open",
-  /**
-   * Present when the trigger is pressed.
-   */
-  pressed = "data-pressed",
-}
+/**
+ * Present when the corresponding menu is open.
+ */
+export declare const popupOpen = "data-popup-open";
+/**
+ * Present when the trigger is pressed.
+ */
+export declare const pressed = "data-pressed";
+/**
+ * Present when the trigger is disabled.
+ */
+export declare const disabled = "data-disabled";

package/menu/trigger/MenuTriggerDataAttributes.d.ts

@@ -1,10 +1,12 @@
-export declare enum MenuTriggerDataAttributes {
-  /**
-   * Present when the corresponding menu is open.
-   */
-  popupOpen = "data-popup-open",
-  /**
-   * Present when the trigger is pressed.
-   */
-  pressed = "data-pressed",
-}
+/**
+ * Present when the corresponding menu is open.
+ */
+export declare const popupOpen = "data-popup-open";
+/**
+ * Present when the trigger is pressed.
+ */
+export declare const pressed = "data-pressed";
+/**
+ * Present when the trigger is disabled.
+ */
+export declare const disabled = "data-disabled";