@base-ui/react 1.3.0 → 1.4.1

package/scroll-area/corner/ScrollAreaCorner.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ScrollAreaCorner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
  * Renders a `<div>` element.
@@ -19,6 +19,7 @@ const ScrollAreaCorner = exports.ScrollAreaCorner = /*#__PURE__*/React.forwardRe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/scroll-area/root/ScrollAreaRoot.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";
 declare const DEFAULT_COORDS: {
   x: number;
   y: number;

package/scroll-area/root/ScrollAreaRoot.js

@@ -10,13 +10,13 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _ScrollAreaRootContext = require("./ScrollAreaRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ScrollAreaRootCssVars = require("./ScrollAreaRootCssVars");
 var _constants = require("../constants");
 var _getOffset = require("../utils/getOffset");
 var _ScrollAreaScrollbarDataAttributes = require("../scrollbar/ScrollAreaScrollbarDataAttributes");
 var _styles = require("../../utils/styles");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _stateAttributes = require("./stateAttributes");
 var _utils = require("../../floating-ui-react/utils");
 var _CSPContext = require("../../csp-provider/CSPContext");
@@ -51,6 +51,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     render,
     className,
     overflowEdgeThreshold: overflowEdgeThresholdProp,
+    style,
     ...elementProps
   } = componentProps;
   const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);

package/scroll-area/root/stateAttributes.d.ts

@@ -1,3 +1,3 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 import type { ScrollAreaRootState } from "./ScrollAreaRoot.js";
 export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState>;

package/scroll-area/scrollbar/ScrollAreaScrollbar.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 { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A vertical or horizontal scrollbar for the scroll area.
@@ -29,7 +29,7 @@ export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', Sc
    */
   orientation?: 'vertical' | 'horizontal' | undefined;
   /**
-   * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
+   * Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
    * @default false
    */
   keepMounted?: boolean | undefined;

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -7,13 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollAreaScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _utils = require("../../floating-ui-react/utils");
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _ScrollAreaScrollbarContext = require("./ScrollAreaScrollbarContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _getOffset = require("../utils/getOffset");
 var _ScrollAreaRootCssVars = require("../root/ScrollAreaRootCssVars");
 var _ScrollAreaScrollbarCssVars = require("./ScrollAreaScrollbarCssVars");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _stateAttributes = require("../root/stateAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -28,6 +30,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     className,
     orientation = 'vertical',
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -95,12 +98,9 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
         viewportEl.scrollLeft += event.deltaX;
       }
     }
-    scrollbarEl.addEventListener('wheel', handleWheel, {
+    return (0, _addEventListener.addEventListener)(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-    return () => {
-      scrollbarEl.removeEventListener('wheel', handleWheel);
-    };
   }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
   const props = {
     ...(rootId && {
@@ -110,9 +110,12 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
       if (event.button !== 0) {
         return;
       }
+      const target = (0, _utils.getTarget)(event.nativeEvent);
+      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
 
-      // Ignore clicks on thumb
-      if (event.currentTarget !== event.target) {
+      // Ignore clicks on thumb, including cases where React retargets the
+      // synthetic event to the track host across a shadow boundary.
+      if (thumb && (0, _utils.contains)(thumb, target)) {
         return;
       }
       if (!viewportRef.current) {

package/scroll-area/thumb/ScrollAreaThumb.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";
 /**
  * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _ScrollAreaScrollbarContext = require("../scrollbar/ScrollAreaScrollbarContext");
 var _ScrollAreaScrollbarCssVars = require("../scrollbar/ScrollAreaScrollbarCssVars");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
@@ -21,6 +21,7 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/scroll-area/viewport/ScrollAreaViewport.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 { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * The actual scrollable container of the scroll area.

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -13,22 +13,19 @@ var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _ScrollAreaViewportContext = require("./ScrollAreaViewportContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _getOffset = require("../utils/getOffset");
 var _constants = require("../constants");
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 var _styles = require("../../utils/styles");
-var _onVisible = require("../utils/onVisible");
 var _stateAttributes = require("../root/stateAttributes");
 var _ScrollAreaViewportCssVars = require("./ScrollAreaViewportCssVars");
-var _scrollEdges = require("../utils/scrollEdges");
+var _scrollEdges = require("../../utils/scrollEdges");
 var _jsxRuntime = require("react/jsx-runtime");
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 let scrollAreaOverflowVarsRegistered = false;
-const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined';
-
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
  * improves rendering performance in complex scroll areas with deep subtrees.
@@ -71,6 +68,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -240,16 +238,10 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!viewportRef.current) {
-      return undefined;
+      return;
     }
     removeCSSVariableInheritance();
-    if (HAS_RESIZE_OBSERVER) {
-      return undefined;
-    }
-    return (0, _onVisible.onVisible)(viewportRef.current, () => {
-      computeThumbPosition();
-    });
-  }, [computeThumbPosition, viewportRef]);
+  }, [viewportRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
     queueMicrotask(computeThumbPosition);
@@ -263,7 +255,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   }, [viewportRef, setHovering]);
   React.useEffect(() => {
     const viewport = viewportRef.current;
-    if (!HAS_RESIZE_OBSERVER || !viewport) {
+    if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
     let hasInitialized = false;

package/select/arrow/SelectArrow.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 { Align, Side } from "../../utils/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the select popup anchor.

package/select/arrow/SelectArrow.js

@@ -11,8 +11,8 @@ var _store = require("@base-ui/utils/store");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _store2 = require("../store");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -29,6 +29,7 @@ const SelectArrow = exports.SelectArrow = /*#__PURE__*/React.forwardRef(function
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/backdrop/SelectBackdrop.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/select/backdrop/SelectBackdrop.js

@@ -10,8 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _store2 = require("../store");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -28,6 +28,7 @@ const SelectBackdrop = exports.SelectBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/group/SelectGroup.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";
 /**
  * Groups related select items with the corresponding label.
  * Renders a `<div>` element.

package/select/group/SelectGroup.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _SelectGroupContext = require("./SelectGroupContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups related select items with the corresponding label.
@@ -20,6 +20,7 @@ const SelectGroup = exports.SelectGroup = /*#__PURE__*/React.forwardRef(function
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/select/group-label/SelectGroupLabel.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/select/group-label/SelectGroupLabel.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectGroupLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _SelectGroupContext = require("../group/SelectGroupContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
@@ -22,6 +22,7 @@ const SelectGroupLabel = exports.SelectGroupLabel = /*#__PURE__*/React.forwardRe
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/icon/SelectIcon.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 icon that indicates that the trigger button opens a select popup.
  * Renders a `<span>` element.

package/select/icon/SelectIcon.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _store2 = require("../store");
@@ -22,6 +22,7 @@ const SelectIcon = exports.SelectIcon = /*#__PURE__*/React.forwardRef(function S
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/item/SelectItem.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 option in the select popup.
  * Renders a `<div>` element.

package/select/item/SelectItem.js

@@ -9,18 +9,16 @@ exports.SelectItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
-var _isMouseWithinBounds = require("@base-ui/utils/isMouseWithinBounds");
-var _useTimeout = require("@base-ui/utils/useTimeout");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _SelectItemContext = require("./SelectItemContext");
 var _store2 = require("../store");
-var _useButton = require("../../use-button");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _itemEquality = require("../../utils/itemEquality");
+var _useButton = require("../../internals/use-button");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _itemEquality = require("../../internals/itemEquality");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual option in the select popup.
@@ -36,6 +34,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     label,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -52,11 +51,9 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     selectionRef,
     typingRef,
     valuesRef,
-    keyboardActiveRef,
     multiple,
-    highlightItemOnHover
+    selectedItemTextRef
   } = (0, _SelectRootContext.useSelectRootContext)();
-  const highlightTimeout = (0, _useTimeout.useTimeout)();
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, listItem.index);
   const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = (0, _store.useStore)(store, _store2.selectors.isSelectedByFocus, listItem.index);
@@ -77,7 +74,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   }, [hasRegistered, index, itemValue, valuesRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!hasRegistered) {
-      return undefined;
+      return;
     }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
@@ -86,9 +83,13 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     }
     if (selectedCandidate !== undefined && (0, _itemEquality.compareItemEquality)(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
+      // Make sure SelectPopup can measure the selected item on first open.
+      // SelectItemText can still update this ref later when focus moves.
+      if (textRef.current) {
+        selectedItemTextRef.current = textRef.current;
+      }
     }
-    return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
   const state = {
     disabled,
     selected,
@@ -98,9 +99,6 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     active: highlighted,
     selected
   });
-  // With our custom `focusItemOnHover` implementation, this interferes with the logic and can
-  // cause the index state to be stuck when leaving the select popup.
-  rootProps.onFocus = undefined;
   rootProps.id = undefined;
   const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
@@ -129,29 +127,6 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     role: 'option',
     'aria-selected': selected,
     tabIndex: highlighted ? 0 : -1,
-    onFocus() {
-      store.set('activeIndex', index);
-    },
-    onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseMove() {
-      if (highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseLeave(event) {
-      if (!highlightItemOnHover || keyboardActiveRef.current || (0, _isMouseWithinBounds.isMouseWithinBounds)(event)) {
-        return;
-      }
-      highlightTimeout.start(0, () => {
-        if (store.state.activeIndex === index) {
-          store.set('activeIndex', null);
-        }
-      });
-    },
     onTouchStart() {
       selectionRef.current = {
         allowSelectedMouseUp: false,

package/select/item-indicator/SelectItemIndicator.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";
 /**
  * Indicates whether the select item is selected.
  * Renders a `<span>` element.

package/select/item-indicator/SelectItemIndicator.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectItemIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _SelectItemContext = require("../item/SelectItemContext");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the select item is selected.
@@ -43,6 +43,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/select/item-indicator/SelectItemIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectItemIndicatorDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let SelectItemIndicatorDataAttributes = exports.SelectItemIndicatorDataAttributes = function (SelectItemIndicatorDataAttributes) {
   /**
    * Present when the indicator is animating in.

package/select/item-text/SelectItemText.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 text label of the select item.
  * Renders a `<div>` element.

package/select/item-text/SelectItemText.js

@@ -9,7 +9,7 @@ exports.SelectItemText = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectItemContext = require("../item/SelectItemContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A text label of the select item.
  * Renders a `<div>` element.
@@ -29,6 +29,7 @@ const SelectItemText = exports.SelectItemText = /*#__PURE__*/React.memo(/*#__PUR
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const localRef = React.useCallback(node => {

package/select/label/SelectLabel.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 { FieldRoot } from "../../field/root/FieldRoot.js";
 /**
  * An accessible label that is automatically associated with the select trigger.

package/select/label/SelectLabel.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _constants = require("../../field/utils/constants");
-var _useLabel = require("../../labelable-provider/useLabel");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _constants = require("../../internals/field-constants/constants");
+var _useLabel = require("../../internals/labelable-provider/useLabel");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _store2 = require("../store");
@@ -25,6 +25,7 @@ const SelectLabel = exports.SelectLabel = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/select/list/SelectList.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 container for the select items.
  * Renders a `<div>` element.

package/select/list/SelectList.js

@@ -11,7 +11,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _styles = require("../../utils/styles");
 var _utils = require("../popup/utils");
 var _store2 = require("../store");
@@ -25,6 +25,7 @@ const SelectList = exports.SelectList = /*#__PURE__*/React.forwardRef(function S
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/popup/SelectPopup.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 select list.
  * Renders a `<div>` element.