@base-ui/react 1.3.0 → 1.4.1

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

@@ -2,13 +2,17 @@
 
 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";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.js";
 import { useMenuItem } from "../item/useMenuItem.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
 import { useTriggerRegistration } from "../../utils/popups/index.js";
 import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContext.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,

package/esm/menu/trigger/MenuTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import { MenuHandle } from "../store/MenuHandle.js";
 /**
  * A button that opens the menu.

package/esm/menu/trigger/MenuTrigger.js

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

package/esm/menu/utils/stateAttributesMapping.d.ts

@@ -1,4 +1,4 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 export declare const itemMapping: StateAttributesMapping<{
   checked: boolean;
 }>;

package/esm/menu/utils/stateAttributesMapping.js

@@ -1,4 +1,4 @@
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { MenuCheckboxItemDataAttributes } from "../checkbox-item/MenuCheckboxItemDataAttributes.js";
 export const itemMapping = {
   checked(value) {

package/esm/menu/viewport/MenuViewport.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/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

package/esm/menu/viewport/MenuViewport.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 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 { usePopupViewport } from "../../utils/usePopupViewport.js";
 import { MenuViewportCssVars } from "./MenuViewportCssVars.js";
 const stateAttributesMapping = {
@@ -24,6 +24,7 @@ export const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/esm/menubar/Menubar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type MenuRoot } from "../menu/root/MenuRoot.js";
-import { BaseUIComponentProps } from "../utils/types.js";
+import { BaseUIComponentProps } from "../internals/types.js";
 /**
  * The container for menus.
  *

package/esm/menubar/Menubar.js

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

package/esm/menubar/MenubarDataAttributes.d.ts

@@ -1,12 +1,15 @@
-export declare enum MenuTriggerDataAttributes {
+export declare enum MenubarDataAttributes {
   /**
    * Present when the corresponding menubar is modal.
    */
   modal = "data-modal",
   /**
    * Determines the orientation of the menubar.
-   * @type 'horizontal' | 'vertical'
-   * @default 'horizontal'
+   * @type {'horizontal' | 'vertical'}
    */
   orientation = "data-orientation",
+  /**
+   * Present when any submenu within the menubar is open.
+   */
+  hasSubmenuOpen = "data-has-submenu-open",
 }

package/esm/menubar/MenubarDataAttributes.js

@@ -1,13 +1,16 @@
-export let MenuTriggerDataAttributes = /*#__PURE__*/function (MenuTriggerDataAttributes) {
+export let MenubarDataAttributes = /*#__PURE__*/function (MenubarDataAttributes) {
   /**
    * Present when the corresponding menubar is modal.
    */
-  MenuTriggerDataAttributes["modal"] = "data-modal";
+  MenubarDataAttributes["modal"] = "data-modal";
   /**
    * Determines the orientation of the menubar.
-   * @type 'horizontal' | 'vertical'
-   * @default 'horizontal'
+   * @type {'horizontal' | 'vertical'}
    */
-  MenuTriggerDataAttributes["orientation"] = "data-orientation";
-  return MenuTriggerDataAttributes;
+  MenubarDataAttributes["orientation"] = "data-orientation";
+  /**
+   * Present when any submenu within the menubar is open.
+   */
+  MenubarDataAttributes["hasSubmenuOpen"] = "data-has-submenu-open";
+  return MenubarDataAttributes;
 }({});

package/esm/merge-props/mergeProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIEvent, WithBaseUIEvent } from "../utils/types.js";
+import type { BaseUIEvent, WithBaseUIEvent } from "../internals/types.js";
 type ElementType = React.ElementType;
 type PropsOf<T extends React.ElementType> = WithBaseUIEvent<React.ComponentPropsWithRef<T>>;
 type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsOf<T>) => PropsOf<T>) | undefined;
@@ -18,7 +18,7 @@ type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsO
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.

package/esm/merge-props/mergeProps.js

@@ -17,7 +17,7 @@ const EMPTY_PROPS = {};
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
@@ -33,21 +33,23 @@ const EMPTY_PROPS = {};
  */
 
 export function mergeProps(a, b, c, d, e) {
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(a, EMPTY_PROPS)
-  };
+  if (!c && !d && !e && !a) {
+    return createInitialMergedProps(b);
+  }
+
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(a);
   if (b) {
-    merged = mergeOne(merged, b);
+    merged = mergeInto(merged, b);
   }
   if (c) {
-    merged = mergeOne(merged, c);
+    merged = mergeInto(merged, c);
   }
   if (d) {
-    merged = mergeOne(merged, d);
+    merged = mergeInto(merged, d);
   }
   if (e) {
-    merged = mergeOne(merged, e);
+    merged = mergeInto(merged, e);
   }
   return merged;
 }
@@ -71,24 +73,46 @@ export function mergePropsN(props) {
     return EMPTY_PROPS;
   }
   if (props.length === 1) {
-    return resolvePropsGetter(props[0], EMPTY_PROPS);
+    return createInitialMergedProps(props[0]);
   }
 
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(props[0], EMPTY_PROPS)
-  };
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(props[0]);
   for (let i = 1; i < props.length; i += 1) {
-    merged = mergeOne(merged, props[i]);
+    merged = mergeInto(merged, props[i]);
   }
   return merged;
 }
-function mergeOne(merged, inputProps) {
+function createInitialMergedProps(inputProps) {
   if (isPropsGetter(inputProps)) {
-    return inputProps(merged);
+    // Getter-returned handlers intentionally keep their existing semantics.
+    return {
+      ...resolvePropsGetter(inputProps, EMPTY_PROPS)
+    };
+  }
+  return copyInitialProps(inputProps);
+}
+function mergeInto(merged, inputProps) {
+  if (isPropsGetter(inputProps)) {
+    return resolvePropsGetter(inputProps, merged);
   }
   return mutablyMergeInto(merged, inputProps);
 }
+function copyInitialProps(inputProps) {
+  const copiedProps = {
+    ...inputProps
+  };
+
+  // `copiedProps` is our fresh own-object copy, so iterating with `for...in` is safe here.
+  // eslint-disable-next-line guard-for-in
+  for (const propName in copiedProps) {
+    const propValue = copiedProps[propName];
+    if (isEventHandler(propName, propValue)) {
+      copiedProps[propName] = wrapEventHandler(propValue);
+    }
+  }
+  return copiedProps;
+}
 
 /**
  * Merges two sets of props. In case of conflicts, the external props take precedence.
@@ -145,23 +169,36 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return ourHandler;
   }
   if (!ourHandler) {
-    return theirHandler;
+    return wrapEventHandler(theirHandler);
   }
-  return event => {
+  return (...args) => {
+    const event = args[0];
     if (isSyntheticEvent(event)) {
       const baseUIEvent = event;
       makeEventPreventable(baseUIEvent);
-      const result = theirHandler(baseUIEvent);
+      const result = theirHandler(...args);
       if (!baseUIEvent.baseUIHandlerPrevented) {
-        ourHandler?.(baseUIEvent);
+        ourHandler?.(...args);
       }
       return result;
     }
-    const result = theirHandler(event);
-    ourHandler?.(event);
+    const result = theirHandler(...args);
+    ourHandler?.(...args);
     return result;
   };
 }
+function wrapEventHandler(handler) {
+  if (!handler) {
+    return handler;
+  }
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) {
+      makeEventPreventable(event);
+    }
+    return handler(...args);
+  };
+}
 export function makeEventPreventable(event) {
   event.preventBaseUIHandler = () => {
     event.baseUIHandlerPrevented = true;

package/esm/meter/indicator/MeterIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * Visualizes the position of the value along the range.

package/esm/meter/indicator/MeterIndicator.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { valueToPercent } from "../../utils/valueToPercent.js";
 import { useMeterRootContext } from "../root/MeterRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Visualizes the position of the value along the range.
@@ -15,6 +15,7 @@ export const MeterIndicator = /*#__PURE__*/React.forwardRef(function MeterIndica
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const context = useMeterRootContext();

package/esm/meter/label/MeterLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { MeterRootState } from "../root/MeterRoot.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label for the meter.
  * Renders a `<span>` element.

package/esm/meter/label/MeterLabel.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useMeterRootContext } from "../root/MeterRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 
 /**
@@ -15,6 +15,7 @@ export const MeterLabel = /*#__PURE__*/React.forwardRef(function MeterLabel(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/esm/meter/root/MeterRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups all parts of the meter and provides the value for screen readers.
  * Renders a `<div>` element.

package/esm/meter/root/MeterRoot.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { MeterRootContext } from "./MeterRootContext.js";
 import { formatNumberValue } from "../../utils/formatNumber.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Groups all parts of the meter and provides the value for screen readers.
@@ -24,6 +24,7 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/esm/meter/track/MeterTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { MeterRootState } from "../root/MeterRoot.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Contains the meter indicator and represents the entire range of the meter.
  * Renders a `<div>` element.

package/esm/meter/track/MeterTrack.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Contains the meter indicator and represents the entire range of the meter.
@@ -13,6 +13,7 @@ export const MeterTrack = /*#__PURE__*/React.forwardRef(function MeterTrack(comp
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   return useRenderElement('div', componentProps, {

package/esm/meter/value/MeterValue.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";
 import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * A text element displaying the current value.

package/esm/meter/value/MeterValue.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useMeterRootContext } from "../root/MeterRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A text element displaying the current value.
@@ -15,6 +15,7 @@ export const MeterValue = /*#__PURE__*/React.forwardRef(function MeterValue(comp
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/arrow/NavigationMenuArrow.d.ts

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

package/esm/navigation-menu/arrow/NavigationMenuArrow.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Displays an element pointing toward the navigation menu's current anchor.
@@ -16,6 +16,7 @@ export const NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function Naviga
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {