@base-ui/react 1.3.0 → 1.4.1

package/esm/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/esm/scroll-area/thumb/ScrollAreaThumb.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
 import { useScrollAreaScrollbarContext } from "../scrollbar/ScrollAreaScrollbarContext.js";
 import { ScrollAreaScrollbarCssVars } from "../scrollbar/ScrollAreaScrollbarCssVars.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * The draggable part of the scrollbar that indicates the current scroll position.
@@ -16,6 +16,7 @@ export const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollArea
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/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/esm/scroll-area/viewport/ScrollAreaViewport.js

@@ -7,23 +7,20 @@ import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
 import { ScrollAreaViewportContext } from "./ScrollAreaViewportContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { getOffset } from "../utils/getOffset.js";
 import { MIN_THUMB_SIZE } from "../constants.js";
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { styleDisableScrollbar } from "../../utils/styles.js";
-import { onVisible } from "../utils/onVisible.js";
 import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.js";
 import { ScrollAreaViewportCssVars } from "./ScrollAreaViewportCssVars.js";
-import { normalizeScrollOffset } from "../utils/scrollEdges.js";
+import { normalizeScrollOffset } from "../../utils/scrollEdges.js";
 
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 import { jsx as _jsx } from "react/jsx-runtime";
 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.
@@ -66,6 +63,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -235,16 +233,10 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   });
   useIsoLayoutEffect(() => {
     if (!viewportRef.current) {
-      return undefined;
+      return;
     }
     removeCSSVariableInheritance();
-    if (HAS_RESIZE_OBSERVER) {
-      return undefined;
-    }
-    return onVisible(viewportRef.current, () => {
-      computeThumbPosition();
-    });
-  }, [computeThumbPosition, viewportRef]);
+  }, [viewportRef]);
   useIsoLayoutEffect(() => {
     // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
     queueMicrotask(computeThumbPosition);
@@ -258,7 +250,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   }, [viewportRef, setHovering]);
   React.useEffect(() => {
     const viewport = viewportRef.current;
-    if (!HAS_RESIZE_OBSERVER || !viewport) {
+    if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
     let hasInitialized = false;

package/esm/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/esm/select/arrow/SelectArrow.js

@@ -5,8 +5,8 @@ import { useStore } from '@base-ui/utils/store';
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { selectors } from "../store.js";
 const stateAttributesMapping = {
   ...baseMapping,
@@ -23,6 +23,7 @@ export const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(co
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { selectors } from "../store.js";
 const stateAttributesMapping = {
   ...popupStateMapping,
@@ -22,6 +22,7 @@ export const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackd
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/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/esm/select/group/SelectGroup.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { SelectGroupContext } from "./SelectGroupContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Groups related select items with the corresponding label.
@@ -15,6 +15,7 @@ export const SelectGroup = /*#__PURE__*/React.forwardRef(function SelectGroup(co
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

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

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useSelectGroupContext } from "../group/SelectGroupContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * An accessible label that is automatically associated with its parent group.
@@ -17,6 +17,7 @@ export const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGro
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/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/esm/select/icon/SelectIcon.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { selectors } from "../store.js";
@@ -17,6 +17,7 @@ export const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(comp
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/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/esm/select/item/SelectItem.js

@@ -3,18 +3,16 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
-import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { useCompositeListItem, IndexGuessBehavior } from "../../composite/list/useCompositeListItem.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useCompositeListItem, IndexGuessBehavior } from "../../internals/composite/list/useCompositeListItem.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { SelectItemContext } from "./SelectItemContext.js";
 import { selectors } from "../store.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { compareItemEquality, removeItem } from "../../utils/itemEquality.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { compareItemEquality, removeItem } from "../../internals/itemEquality.js";
 
 /**
  * An individual option in the select popup.
@@ -31,6 +29,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     label,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -47,11 +46,9 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     selectionRef,
     typingRef,
     valuesRef,
-    keyboardActiveRef,
     multiple,
-    highlightItemOnHover
+    selectedItemTextRef
   } = useSelectRootContext();
-  const highlightTimeout = useTimeout();
   const highlighted = useStore(store, selectors.isActive, listItem.index);
   const selected = useStore(store, selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = useStore(store, selectors.isSelectedByFocus, listItem.index);
@@ -72,7 +69,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   }, [hasRegistered, index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
-      return undefined;
+      return;
     }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
@@ -81,9 +78,13 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     }
     if (selectedCandidate !== undefined && 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,
@@ -93,9 +94,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     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');
@@ -124,29 +122,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     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 || isMouseWithinBounds(event)) {
-        return;
-      }
-      highlightTimeout.start(0, () => {
-        if (store.state.activeIndex === index) {
-          store.set('activeIndex', null);
-        }
-      });
-    },
     onTouchStart() {
       selectionRef.current = {
         allowSelectedMouseUp: false,

package/esm/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/esm/select/item-indicator/SelectItemIndicator.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useSelectItemContext } from "../item/SelectItemContext.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 
 /**
  * Indicates whether the select item is selected.
@@ -38,6 +38,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/esm/select/item-indicator/SelectItemIndicatorDataAttributes.js

@@ -1,4 +1,4 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let SelectItemIndicatorDataAttributes = function (SelectItemIndicatorDataAttributes) {
   /**
    * Present when the indicator is animating in.

package/esm/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/esm/select/item-text/SelectItemText.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useSelectItemContext } from "../item/SelectItemContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A text label of the select item.
@@ -24,6 +24,7 @@ export const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const localRef = React.useCallback(node => {

package/esm/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/esm/select/label/SelectLabel.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
-import { useLabel } from "../../labelable-provider/useLabel.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useLabel } from "../../internals/labelable-provider/useLabel.js";
 import { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { selectors } from "../store.js";
@@ -20,6 +20,7 @@ export const SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/esm/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/esm/select/list/SelectList.js

@@ -5,7 +5,7 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { styleDisableScrollbar } from "../../utils/styles.js";
 import { LIST_FUNCTIONAL_STYLES } from "../popup/utils.js";
 import { selectors } from "../store.js";
@@ -20,6 +20,7 @@ export const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(comp
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/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.