@base-ui/react 1.3.0 → 1.4.0

package/esm/localization-provider/LocalizationContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Locale } from 'date-fns/locale';
+export type LocalizationContext = {
+  temporalLocale?: Locale | undefined;
+};
+/**
+ * @internal
+ */
+export declare const LocalizationContext: React.Context<LocalizationContext | undefined>;
+export declare function useTemporalLocale(): Locale | undefined;

package/esm/localization-provider/LocalizationContext.js

@@ -0,0 +1,16 @@
+'use client';
+
+import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
+import * as React from 'react';
+/**
+ * @internal
+ */
+export const LocalizationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") LocalizationContext.displayName = "LocalizationContext";
+export function useTemporalLocale() {
+  const context = React.useContext(LocalizationContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: LocalizationContext is missing. Temporal components must be place within <LocalizationProvider />' : _formatErrorMessage(94));
+  }
+  return context.temporalLocale;
+}

package/esm/localization-provider/LocalizationProvider.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Locale } from 'date-fns/locale';
+/**
+ * Defines the temporal locale provider for Base UI temporal components.
+ *
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Localization Provider](https://base-ui.com/react/utils/localization-provider)
+ */
+export declare const LocalizationProvider: React.FC<LocalizationProvider.Props>;
+export declare namespace LocalizationProvider {
+  interface Props {
+    children?: React.ReactNode;
+    /**
+     * The locale to use in temporal components.
+     * @default en-US
+     */
+    temporalLocale?: Locale | undefined;
+  }
+}

package/esm/localization-provider/LocalizationProvider.js

@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import { LocalizationContext } from "./LocalizationContext.js";
+import { TemporalAdapterDateFns } from "../temporal-adapter-date-fns/TemporalAdapterDateFns.js";
+import { TemporalAdapterContext } from "../temporal-adapter-provider/TemporalAdapterContext.js";
+
+/**
+ * Defines the temporal locale provider for Base UI temporal components.
+ *
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Localization Provider](https://base-ui.com/react/utils/localization-provider)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LocalizationProvider = function LocalizationProvider(props) {
+  const {
+    children,
+    temporalLocale
+  } = props;
+  const contextValue = React.useMemo(() => ({
+    temporalLocale
+  }), [temporalLocale]);
+  const adapterContextValue = React.useMemo(() => ({
+    adapter: new TemporalAdapterDateFns({
+      locale: temporalLocale
+    })
+  }), [temporalLocale]);
+  return /*#__PURE__*/_jsx(LocalizationContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(TemporalAdapterContext.Provider, {
+      value: adapterContextValue,
+      children: children
+    })
+  });
+};
+if (process.env.NODE_ENV !== "production") LocalizationProvider.displayName = "LocalizationProvider";

package/esm/localization-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { LocalizationProvider } from "./LocalizationProvider.js";
+export { useTemporalLocale } from "./LocalizationContext.js";

package/esm/localization-provider/index.js

@@ -0,0 +1,2 @@
+export { LocalizationProvider } from "./LocalizationProvider.js";
+export { useTemporalLocale } from "./LocalizationContext.js";

package/esm/menu/arrow/MenuArrow.js

@@ -16,6 +16,7 @@ export const MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(compon
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/menu/backdrop/MenuBackdrop.js

@@ -22,6 +22,7 @@ export const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/menu/checkbox-item/MenuCheckboxItem.js

@@ -32,6 +32,7 @@ export const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheck
     checked: checkedProp,
     defaultChecked,
     onCheckedChange,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
@@ -60,7 +61,7 @@ export const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheck
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = React.useMemo(() => ({

package/esm/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js

@@ -17,6 +17,7 @@ export const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/esm/menu/group/MenuGroup.js

@@ -15,6 +15,7 @@ export const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(compon
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState(undefined);

package/esm/menu/group-label/MenuGroupLabel.js

@@ -17,6 +17,7 @@ export const MenuGroupLabel = /*#__PURE__*/React.forwardRef(function MenuGroupLa
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);

package/esm/menu/item/MenuItem.js

@@ -23,6 +23,7 @@ export const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componen
     nativeButton = false,
     disabled = false,
     closeOnClick = true,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
@@ -45,7 +46,7 @@ export const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componen
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = {

package/esm/menu/item/useMenuItem.d.ts

@@ -25,7 +25,7 @@ export interface UseMenuItemParameters {
   /**
    * Whether the component renders a native `<button>` element when replacing it
    * via the `render` prop.
-   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a button (for example, `<div>`).
    * @default false
    */
   nativeButton: boolean;

package/esm/menu/link-item/MenuLinkItem.js

@@ -23,6 +23,7 @@ export const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(
     id: idProp,
     label,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const linkRef = React.useRef(null);
@@ -30,7 +31,7 @@ export const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const nodeId = menuPositionerContext?.nodeId;
+  const nodeId = menuPositionerContext?.context.nodeId;
   const id = useBaseUiId(idProp);
   const {
     store

package/esm/menu/popup/MenuPopup.js

@@ -29,6 +29,7 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;

package/esm/menu/positioner/MenuPositioner.js

@@ -8,18 +8,17 @@ import { FloatingNode } from "../../floating-ui-react/index.js";
 import { MenuPositionerContext } from "./MenuPositionerContext.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
 import { useMenuPortalContext } from "../portal/MenuPortalContext.js";
 import { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
 import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { usePositioner } from "../../utils/usePositioner.js";
+import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.js";
 
 /**
  * Positions the menu popup against the trigger.
@@ -44,6 +43,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance: collisionAvoidanceProp = DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -57,6 +57,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
   const mounted = store.useState('mounted');
   const open = store.useState('open');
   const modal = store.useState('modal');
+  const openMethod = store.useState('openMethod');
   const triggerElement = store.useState('activeTriggerElement');
   const transitionStatus = store.useState('transitionStatus');
   const positionerElement = store.useState('positionerElement');
@@ -113,20 +114,6 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     externalTree: floatingTreeRoot,
     adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
-  const positionerProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioner.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioner.positionerStyles]);
   React.useEffect(() => {
     function onMenuOpenChange(details) {
       if (details.open) {
@@ -234,19 +221,16 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const contextValue = React.useMemo(() => ({
-    side: positioner.side,
-    align: positioner.align,
-    arrowRef: positioner.arrowRef,
-    arrowUncentered: positioner.arrowUncentered,
-    arrowStyles: positioner.arrowStyles,
-    nodeId: positioner.context.nodeId
-  }), [positioner.side, positioner.align, positioner.arrowRef, positioner.arrowUncentered, positioner.arrowStyles, positioner.context.nodeId]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    stateAttributesMapping: popupStateMapping,
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  const menubarModal = parent.type === 'menubar' && parent.context.modal;
+  const popupModal = modal && lastOpenChangeReason !== REASONS.triggerHover;
+  useAnchoredPopupScrollLock(open && (menubarModal || popupModal), openMethod === 'touch', positionerElement, triggerElement);
+  const element = usePositioner(componentProps, state, {
+    styles: positioner.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open
   });
   const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== REASONS.triggerHover || parent.type === 'menubar' && parent.context.modal);
 
@@ -258,7 +242,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     backdropCutout = triggerElement;
   }
   return /*#__PURE__*/_jsxs(MenuPositionerContext.Provider, {
-    value: contextValue,
+    value: positioner,
     children: [shouldRenderBackdrop && /*#__PURE__*/_jsx(InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
       inert: inertValue(!open),

package/esm/menu/positioner/MenuPositionerContext.d.ts

@@ -1,19 +1,6 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface MenuPositionerContext {
-  /**
-   * The side of the anchor element the popup is positioned relative to.
-   */
-  side: Side;
-  /**
-   * How to align the popup relative to the specified side.
-   */
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-  nodeId: string | undefined;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type MenuPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'context'>;
 export declare const MenuPositionerContext: React.Context<MenuPositionerContext | undefined>;
 export declare function useMenuPositionerContext(optional?: false): MenuPositionerContext;
 export declare function useMenuPositionerContext(optional: true): MenuPositionerContext | undefined;

package/esm/menu/radio-group/MenuRadioGroup.js

@@ -20,6 +20,7 @@ export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
     defaultValue,
     onValueChange: onValueChangeProp,
     disabled = false,
+    style,
     ...elementProps
   } = componentProps;
   const [value, setValueUnwrapped] = useControlled({

package/esm/menu/radio-item/MenuRadioItem.js

@@ -31,6 +31,7 @@ export const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioIte
     disabled: disabledProp = false,
     closeOnClick = false,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
@@ -60,7 +61,7 @@ export const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioIte
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = React.useMemo(() => ({

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

@@ -17,6 +17,7 @@ export const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function Men
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/esm/menu/root/MenuRoot.d.ts

@@ -9,7 +9,7 @@ import { MenuHandle } from "../store/MenuHandle.js";
 import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 /**
  * 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)
  */
@@ -82,7 +82,7 @@ export interface MenuRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the popover is associated with.
    * 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).
+   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

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,21 +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
-  } = useOpenInteractionType(open);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
@@ -180,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);
@@ -206,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;
@@ -293,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,

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,6 +8,7 @@ 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;
@@ -36,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;

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),
@@ -117,6 +118,7 @@ function createInitialState() {
     ...createInitialPopupStoreState(),
     disabled: false,
     modal: true,
+    openMethod: null,
     allowMouseEnter: false,
     stickIfOpen: true,
     parent: {

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));
@@ -86,7 +101,7 @@ export const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function Submenu
     typingRef: parentMenuStore.context.typingRef,
     nativeButton,
     itemMetadata,
-    nodeId: menuPositionerContext?.nodeId
+    nodeId: menuPositionerContext?.context.nodeId
   });
   const hoverEnabled = store.useState('hoverEnabled');
   const allowMouseEnter = parentMenuStore.useState('allowMouseEnter');
@@ -103,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,