@base-ui/react 1.3.0 → 1.4.1

package/esm/internals/usePressAndHold.js

@@ -0,0 +1,192 @@
+'use client';
+
+import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useInterval } from '@base-ui/utils/useInterval';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { ownerWindow } from '@base-ui/utils/owner';
+const DEFAULT_TICK_DELAY = 60;
+const DEFAULT_START_DELAY = 400;
+const DEFAULT_SCROLL_DISTANCE = 8;
+const TOUCH_TIMEOUT = 50;
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+export function usePressAndHold(params) {
+  const {
+    disabled,
+    readOnly = false,
+    tick,
+    onStop,
+    tickDelay = DEFAULT_TICK_DELAY,
+    startDelay = DEFAULT_START_DELAY,
+    scrollDistance = DEFAULT_SCROLL_DISTANCE,
+    elementRef
+  } = params;
+  const startTickTimeout = useTimeout();
+  const tickInterval = useInterval();
+  const intentionalTouchCheckTimeout = useTimeout();
+  const isPressedRef = React.useRef(false);
+  const movesAfterTouchRef = React.useRef(0);
+  const downCoordsRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const isTouchingButtonRef = React.useRef(false);
+  const ignoreClickRef = React.useRef(false);
+  const pointerTypeRef = React.useRef('');
+  const unsubscribeFromGlobalContextMenuRef = React.useRef(() => {});
+  const stopAutoChange = useStableCallback(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = useStableCallback(triggerNativeEvent => {
+    stopAutoChange();
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const win = ownerWindow(element);
+    function handleContextMenu(event) {
+      event.preventDefault();
+    }
+
+    // A global context menu listener is necessary to prevent the context menu from
+    // appearing when the touch is slightly outside of the element's hit area.
+    unsubscribeFromGlobalContextMenuRef.current = addEventListener(win, 'contextmenu', handleContextMenu);
+    addEventListener(win, 'pointerup', event => {
+      isPressedRef.current = false;
+      stopAutoChange();
+      onStop?.(event);
+    }, {
+      once: true
+    });
+    if (!tick(triggerNativeEvent)) {
+      stopAutoChange();
+      return;
+    }
+    startTickTimeout.start(startDelay, () => {
+      tickInterval.start(tickDelay, () => {
+        if (!tick(triggerNativeEvent)) {
+          stopAutoChange();
+        }
+      });
+    });
+  });
+  React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
+  const pointerHandlers = {
+    onTouchStart() {
+      isTouchingButtonRef.current = true;
+    },
+    onTouchEnd() {
+      isTouchingButtonRef.current = false;
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
+        return;
+      }
+      pointerTypeRef.current = event.pointerType;
+      ignoreClickRef.current = false;
+      isPressedRef.current = true;
+      downCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
+        event.preventDefault();
+        startAutoChange(event.nativeEvent);
+      } else {
+        // Check if the pointerdown was intentional and not the result of a scroll or
+        // pinch-zoom. In that case, we don't want to start the auto-change sequence.
+        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
+          const moves = movesAfterTouchRef.current;
+          movesAfterTouchRef.current = 0;
+          // Only start auto-change if the touch is still pressed (prevents races
+          // with pointerup occurring before the timeout fires on quick taps).
+          const stillPressed = isPressedRef.current;
+          if (stillPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(event.nativeEvent);
+            ignoreClickRef.current = true; // synthesized click after hold should be ignored
+          } else {
+            // No auto-change (simple tap or scroll gesture), allow the click handler
+            // to perform a single action.
+            ignoreClickRef.current = false;
+            stopAutoChange();
+          }
+        });
+      }
+    },
+    onPointerUp(event) {
+      // Ensure we mark the press as released for touch flows even if auto-change never
+      // started, so the delayed auto-change check won't start after a quick tap.
+      if (isTouchLikePointerType(event.pointerType)) {
+        isPressedRef.current = false;
+      }
+    },
+    onPointerMove(event) {
+      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+        return;
+      }
+      if (movesAfterTouchRef.current != null) {
+        movesAfterTouchRef.current += 1;
+      }
+      const {
+        x,
+        y
+      } = downCoordsRef.current;
+      const dx = x - event.clientX;
+      const dy = y - event.clientY;
+      if (dx ** 2 + dy ** 2 > scrollDistance ** 2) {
+        stopAutoChange();
+      }
+    },
+    onMouseEnter(event) {
+      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+        return;
+      }
+      startAutoChange(event.nativeEvent);
+    },
+    onMouseLeave() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    },
+    onMouseUp() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    }
+  };
+  const shouldSkipClick = useStableCallback(event => {
+    if (event.defaultPrevented) {
+      return true;
+    }
+    if (isTouchLikePointerType(pointerTypeRef.current)) {
+      return ignoreClickRef.current;
+    }
+    return event.detail !== 0;
+  });
+  return {
+    pointerHandlers,
+    shouldSkipClick
+  };
+}

package/esm/{utils → internals}/useRenderElement.js

@@ -4,11 +4,11 @@ import { useMergedRefs, useMergedRefsN } from '@base-ui/utils/useMergedRefs';
 import { getReactElementRef } from '@base-ui/utils/getReactElementRef';
 import { mergeObjects } from '@base-ui/utils/mergeObjects';
 import { warn } from '@base-ui/utils/warn';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { getStateAttributesProps } from "./getStateAttributesProps.js";
-import { resolveClassName } from "./resolveClassName.js";
-import { resolveStyle } from "./resolveStyle.js";
+import { resolveClassName } from "../utils/resolveClassName.js";
+import { resolveStyle } from "../utils/resolveStyle.js";
 import { mergeProps, mergePropsN, mergeClassNames } from "../merge-props/index.js";
-import { EMPTY_OBJECT } from "./constants.js";
 import { createElement as _createElement } from "react";
 /**
  * Renders a Base UI element.
@@ -46,7 +46,12 @@ function useRenderElementProps(componentProps, params = {}) {
   const className = enabled ? resolveClassName(classNameProp, state) : undefined;
   const style = enabled ? resolveStyle(styleProp, state) : undefined;
   const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
-  const outProps = enabled ? mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props) ?? EMPTY_OBJECT : EMPTY_OBJECT;
+  const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : undefined;
+
+  // Ensure outProps is always a new mutable object when enabled, never EMPTY_OBJECT.
+  // This prevents potential TypeError when setting ref, className, or style properties,
+  // since EMPTY_OBJECT is frozen and mutations would fail in strict mode.
+  const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
 
   // SAFETY: The `useMergedRefs` functions use a single hook to store the same value,
   // switching between them at runtime is safe. If this assertion fails, React will
@@ -74,12 +79,20 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+function resolveRenderFunctionProps(props) {
+  if (Array.isArray(props)) {
+    return mergePropsN(props);
+  }
+  return mergeProps(undefined, props);
+}
 
 // The symbol React uses internally for lazy components
 // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
 // TODO delete once https://github.com/facebook/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
+const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
@@ -127,8 +140,10 @@ function warnIfRenderPropLooksLikeComponent(renderFn) {
   if (functionName.length === 0) {
     return;
   }
-  const firstCharacterCode = functionName.charCodeAt(0);
-  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
+  if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
+    return;
+  }
+  if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
     return;
   }
   warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, 'This usually means a React component was passed directly as `render={Component}`.', 'Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.', 'If this is an intentional render callback, rename it to start with a lowercase letter.', 'Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.', 'https://base-ui.com/r/invalid-render-prop');

package/esm/{utils → internals}/useTransitionStatus.js

@@ -58,10 +58,10 @@ export function useTransitionStatus(open, enableIdleState = false, deferEndingSt
     return () => {
       AnimationFrame.cancel(frame);
     };
-  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
-  return React.useMemo(() => ({
+  }, [enableIdleState, open, mounted, transitionStatus]);
+  return {
     mounted,
     setMounted,
     transitionStatus
-  }), [mounted, transitionStatus]);
+  };
 }

package/esm/menu/arrow/MenuArrow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays an element positioned against the menu anchor.
  * Renders a `<div>` element.

package/esm/menu/arrow/MenuArrow.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * An overlay displayed beneath the menu popup.
  * Renders a `<div>` element.

package/esm/menu/backdrop/MenuBackdrop.js

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { useMenuRootContext } from "../root/MenuRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 import type { MenuRoot } from "../root/MenuRoot.js";
 /**
  * A menu item that toggles a setting on or off.

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

@@ -5,14 +5,14 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { MenuCheckboxItemContext } from "./MenuCheckboxItemContext.js";
 import { REGULAR_ITEM, useMenuItem } from "../item/useMenuItem.js";
-import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { itemMapping } from "../utils/stateAttributesMapping.js";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A menu item that toggles a setting on or off.
@@ -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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
-import { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
+import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Indicates whether the checkbox item is ticked.
  * Renders a `<span>` element.

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

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useMenuCheckboxItemContext } from "../checkbox-item/MenuCheckboxItemContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { itemMapping } from "../utils/stateAttributesMapping.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
 
 /**
  * Indicates whether the checkbox item is ticked.
@@ -17,6 +17,7 @@ export const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

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

@@ -1,4 +1,4 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let MenuCheckboxItemIndicatorDataAttributes = function (MenuCheckboxItemIndicatorDataAttributes) {
   /**
    * Present when the menu checkbox item is checked.

package/esm/menu/group/MenuGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups related menu items with the corresponding label.
  * Renders a `<div>` element.

package/esm/menu/group/MenuGroup.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { MenuGroupContext } from "./MenuGroupContext.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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.

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

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useMenuGroupRootContext } from "../group/MenuGroupContext.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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 /**
  * An individual interactive item in the menu.
  * Renders a `<div>` element.

package/esm/menu/item/MenuItem.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { REGULAR_ITEM, useMenuItem } from "./useMenuItem.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.js";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../internals/types.js";
 import { MenuStore } from "../store/MenuStore.js";
 export declare const REGULAR_ITEM: {
   type: "regular-item";
@@ -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/item/useMenuItem.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { useButton } from "../../use-button/index.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { mergeProps } from "../../merge-props/index.js";
 import { useMenuItemCommonProps } from "./useMenuItemCommonProps.js";
 export const REGULAR_ITEM = {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../internals/types.js";
 import { MenuStore } from "../store/MenuStore.js";
 import type { UseMenuItemMetadata } from "./useMenuItem.js";
 export interface UseMenuItemCommonPropsParameters {

package/esm/menu/item/useMenuItemCommonProps.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { isMac } from '@base-ui/utils/detectBrowser';
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 /**
  * Returns common props shared by all menu item types.

package/esm/menu/link-item/MenuLinkItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A link in the menu that can be used to navigate to a different page or section.
  * Renders an `<a>` element.

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

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { useMenuRootContext } from "../root/MenuRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.js";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
 import { useMenuItemCommonProps } from "../item/useMenuItemCommonProps.js";
-import { useButton } from "../../use-button/index.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { mergeProps } from "../../merge-props/index.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.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the menu items.
  * Renders a `<div>` element.

package/esm/menu/popup/MenuPopup.js

@@ -4,14 +4,14 @@ import * as React from 'react';
 import { FloatingFocusManager, useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.js";
-import { COMPOSITE_KEYS } from "../../composite/composite.js";
+import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
@@ -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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the menu popup against the trigger.
  * Renders a `<div>` element.