@base-ui/react 1.0.0 → 1.2.0

package/esm/scroll-area/thumb/ScrollAreaThumb.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * The draggable part of the the scrollbar that indicates the current scroll position.
+ * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaThumbState {
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: ('horizontal' | 'vertical') | undefined;
 }
 export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumb.State> {}
 export declare namespace ScrollAreaThumb {

package/esm/scroll-area/thumb/ScrollAreaThumb.js

@@ -7,7 +7,7 @@ import { ScrollAreaScrollbarCssVars } from "../scrollbar/ScrollAreaScrollbarCssV
 import { useRenderElement } from "../../utils/useRenderElement.js";
 
 /**
- * The draggable part of the the scrollbar that indicates the current scroll position.
+ * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
@@ -30,9 +30,9 @@ export const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollArea
   const {
     orientation
   } = useScrollAreaScrollbarContext();
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
     state,

package/esm/scroll-area/utils/scrollEdges.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function normalizeScrollOffset(value: number, max: number): number;

package/esm/scroll-area/utils/scrollEdges.js

@@ -0,0 +1,22 @@
+import { clamp } from "../../utils/clamp.js";
+export const SCROLL_EDGE_TOLERANCE_PX = 1;
+export function normalizeScrollOffset(value, max) {
+  if (max <= 0) {
+    return 0;
+  }
+  const clamped = clamp(value, 0, max);
+  const startDistance = clamped;
+  const endDistance = max - clamped;
+  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  if (withinStartTolerance && withinEndTolerance) {
+    return startDistance <= endDistance ? 0 : max;
+  }
+  if (withinStartTolerance) {
+    return 0;
+  }
+  if (withinEndTolerance) {
+    return max;
+  }
+  return clamped;
+}

package/esm/scroll-area/viewport/ScrollAreaViewport.d.ts

@@ -7,7 +7,7 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewport.State> {}
 export interface ScrollAreaViewportState extends ScrollAreaRoot.State {}
 export declare namespace ScrollAreaViewport {

package/esm/scroll-area/viewport/ScrollAreaViewport.js

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { isWebKit } from '@base-ui/utils/detectBrowser';
@@ -17,6 +16,7 @@ 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";
 
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
@@ -74,6 +74,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     thumbYRef,
     thumbXRef,
     cornerRef,
+    cornerSize,
     setCornerSize,
     setThumbSize,
     rootId,
@@ -83,13 +84,15 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     setHovering,
     setOverflowEdges,
     overflowEdges,
-    overflowEdgeThreshold
+    overflowEdgeThreshold,
+    scrollingX,
+    scrollingY
   } = useScrollAreaRootContext();
   const direction = useDirection();
   const programmaticScrollRef = React.useRef(true);
   const scrollEndTimeout = useTimeout();
   const waitForAnimationsTimeout = useTimeout();
-  function computeThumbPositionHandler() {
+  const computeThumbPosition = useStableCallback(() => {
     const viewportEl = viewportRef.current;
     const scrollbarYEl = scrollbarYRef.current;
     const scrollbarXEl = scrollbarXRef.current;
@@ -117,25 +120,40 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     let scrollLeftFromStart = 0;
     let scrollLeftFromEnd = 0;
     if (!scrollbarXHidden) {
+      let rawScrollLeftFromStart = 0;
       if (direction === 'rtl') {
-        scrollLeftFromStart = clamp(-scrollLeft, 0, maxScrollLeft);
+        rawScrollLeftFromStart = clamp(-scrollLeft, 0, maxScrollLeft);
       } else {
-        scrollLeftFromStart = clamp(scrollLeft, 0, maxScrollLeft);
+        rawScrollLeftFromStart = clamp(scrollLeft, 0, maxScrollLeft);
       }
+      scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
       scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
     }
-    const scrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
+    const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
+    const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
     const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+    let nextCornerWidth = 0;
+    let nextCornerHeight = 0;
+    if (!scrollbarXHidden && !scrollbarYHidden) {
+      nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+      nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+    }
+
+    // Only subtract corner size from scrollbar dimensions if the corner hasn't been sized yet.
+    // Once sized, the layout will already account for it.
+    const cornerNotYetSized = cornerSize.width === 0 && cornerSize.height === 0;
+    const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+    const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
     const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x');
     const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y');
     const thumbXOffset = getOffset(thumbXEl, 'margin', 'x');
     const thumbYOffset = getOffset(thumbYEl, 'margin', 'y');
     const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
     const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
-    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth, idealNextWidth) : idealNextWidth;
-    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight, idealNextHeight) : idealNextHeight;
+    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
     const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
     const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
     setThumbSize(prevSize => {
@@ -171,11 +189,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       const thumbOffsetX = direction === 'rtl' ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
       thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
     }
-    const clampedScrollLeftStart = clamp(scrollLeftFromStart, 0, maxScrollLeft);
-    const clampedScrollLeftEnd = clamp(scrollLeftFromEnd, 0, maxScrollLeft);
-    const clampedScrollTopStart = clamp(scrollTopFromStart, 0, maxScrollTop);
-    const clampedScrollTopEnd = clamp(scrollTopFromEnd, 0, maxScrollTop);
-    const overflowMetricsPx = [[ScrollAreaViewportCssVars.scrollAreaOverflowXStart, clampedScrollLeftStart], [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, clampedScrollLeftEnd], [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, clampedScrollTopStart], [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, clampedScrollTopEnd]];
+    const overflowMetricsPx = [[ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd], [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]];
     for (const [cssVar, value] of overflowMetricsPx) {
       viewportEl.style.setProperty(cssVar, `${value}px`);
     }
@@ -186,30 +200,28 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
           height: 0
         });
       } else if (!scrollbarXHidden && !scrollbarYHidden) {
-        const width = scrollbarYEl?.offsetWidth || 0;
-        const height = scrollbarXEl?.offsetHeight || 0;
         setCornerSize({
-          width,
-          height
+          width: nextCornerWidth,
+          height: nextCornerHeight
         });
       }
     }
     setHiddenState(prevState => {
       const cornerHidden = scrollbarYHidden || scrollbarXHidden;
-      if (prevState.scrollbarYHidden === scrollbarYHidden && prevState.scrollbarXHidden === scrollbarXHidden && prevState.cornerHidden === cornerHidden) {
+      if (prevState.y === scrollbarYHidden && prevState.x === scrollbarXHidden && prevState.corner === cornerHidden) {
         return prevState;
       }
       return {
-        scrollbarYHidden,
-        scrollbarXHidden,
-        cornerHidden
+        y: scrollbarYHidden,
+        x: scrollbarXHidden,
+        corner: cornerHidden
       };
     });
     const nextOverflowEdges = {
-      xStart: !scrollbarXHidden && clampedScrollLeftStart > overflowEdgeThreshold.xStart,
-      xEnd: !scrollbarXHidden && clampedScrollLeftEnd > overflowEdgeThreshold.xEnd,
-      yStart: !scrollbarYHidden && clampedScrollTopStart > overflowEdgeThreshold.yStart,
-      yEnd: !scrollbarYHidden && clampedScrollTopEnd > overflowEdgeThreshold.yEnd
+      xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
+      xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
+      yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
+      yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
     };
     setOverflowEdges(prev => {
       if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
@@ -217,17 +229,20 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       }
       return nextOverflowEdges;
     });
-  }
-  const computeThumbPosition = useStableCallback(() => {
-    ReactDOM.flushSync(computeThumbPositionHandler);
   });
   useIsoLayoutEffect(() => {
     if (!viewportRef.current) {
       return undefined;
     }
     removeCSSVariableInheritance();
-    const cleanup = onVisible(viewportRef.current, computeThumbPosition);
-    return cleanup;
+    let hasInitialized = false;
+    return onVisible(viewportRef.current, () => {
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
   }, [computeThumbPosition, viewportRef]);
   useIsoLayoutEffect(() => {
     // Wait for scrollbar-related refs to be set
@@ -245,7 +260,16 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
-    const ro = new ResizeObserver(computeThumbPosition);
+    let hasInitialized = false;
+    const ro = new ResizeObserver(() => {
+      // ResizeObserver fires once upon observing, so we skip the initial call
+      // to avoid double-calculating the thumb position on mount.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
     ro.observe(viewport);
 
     // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
@@ -256,9 +280,13 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
     // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
     waitForAnimationsTimeout.start(0, () => {
-      Promise.all(viewport.getAnimations({
+      const animations = viewport.getAnimations({
         subtree: true
-      }).map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
+      });
+      if (animations.length === 0) {
+        return;
+      }
+      Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
       ro.disconnect();
@@ -274,7 +302,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       'data-id': `${rootId}-viewport`
     }),
     // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
-    ...((!hiddenState.scrollbarXHidden || !hiddenState.scrollbarYHidden) && {
+    ...((!hiddenState.x || !hiddenState.y) && {
       tabIndex: 0
     }),
     className: styleDisableScrollbar.className,
@@ -310,14 +338,15 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     onKeyDown: handleUserInteraction
   };
   const viewportState = React.useMemo(() => ({
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    scrolling: scrollingX || scrollingY,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
-  }), [hiddenState.scrollbarXHidden, hiddenState.scrollbarYHidden, hiddenState.cornerHidden, overflowEdges]);
+    cornerHidden: hiddenState.corner
+  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,

package/esm/scroll-area/viewport/ScrollAreaViewportContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ScrollAreaViewportContext = /*#__PURE__*/React.createContext(undefined);

package/esm/scroll-area/viewport/ScrollAreaViewportDataAttributes.d.ts

@@ -1,4 +1,8 @@
 export declare enum ScrollAreaViewportDataAttributes {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  scrolling = "data-scrolling",
   /**
    * Present when the scroll area content is wider than the viewport.
    */

package/esm/scroll-area/viewport/ScrollAreaViewportDataAttributes.js

@@ -1,4 +1,8 @@
 export let ScrollAreaViewportDataAttributes = /*#__PURE__*/function (ScrollAreaViewportDataAttributes) {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  ScrollAreaViewportDataAttributes["scrolling"] = "data-scrolling";
   /**
    * Present when the scroll area content is wider than the viewport.
    */

package/esm/select/arrow/SelectArrow.d.ts

@@ -7,7 +7,7 @@ import type { Align, Side } from "../../utils/useAnchorPositioning.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectArrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectArrow: React.ForwardRefExoticComponent<Omit<SelectArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectArrowState {
   /**
    * Whether the select popup is currently open.

package/esm/select/arrow/SelectArrow.js

@@ -37,12 +37,12 @@ export const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(co
     alignItemWithTriggerActive
   } = useSelectPositionerContext();
   const open = useStore(store, selectors.open, true);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [arrowRef, forwardedRef],

package/esm/select/arrow/SelectArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let SelectArrowDataAttributes = function (SelectArrowDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectArrowDataAttributes["side"] = "data-side";
+  SelectArrowDataAttributes[SelectArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectArrowDataAttributes["align"] = "data-align";
+  SelectArrowDataAttributes[SelectArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the select arrow is uncentered.
    */

package/esm/select/backdrop/SelectBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectBackdrop: React.ForwardRefExoticComponent<SelectBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectBackdrop: React.ForwardRefExoticComponent<Omit<SelectBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectBackdropState {
   open: boolean;
   transitionStatus: TransitionStatus;

package/esm/select/backdrop/SelectBackdrop.js

@@ -30,10 +30,10 @@ export const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackd
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const transitionStatus = useStore(store, selectors.transitionStatus);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/select/group/SelectGroup.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupState {}
 export interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroup.State> {}
 export declare namespace SelectGroup {

package/esm/select/group/SelectGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const SelectGroupContext = /*#__PURE__*/React.createContext(undefined);

package/esm/select/group-label/SelectGroupLabel.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectGroupLabel: React.ForwardRefExoticComponent<SelectGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupLabelState {}
 export interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabel.State> {}
 export declare namespace SelectGroupLabel {

package/esm/select/icon/SelectIcon.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectIconState {
   /**
    * Whether the select popup is currently open.

package/esm/select/icon/SelectIcon.js

@@ -23,9 +23,9 @@ export const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(comp
     store
   } = useSelectRootContext();
   const open = useStore(store, selectors.open);
-  const state = React.useMemo(() => ({
+  const state = {
     open
-  }), [open]);
+  };
   const element = useRenderElement('span', componentProps, {
     state,
     ref: forwardedRef,

package/esm/select/item/SelectItem.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItem: React.NamedExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.NamedExoticComponent<Omit<SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface SelectItemState {
   /**
    * Whether the item should ignore user interaction.
@@ -32,13 +32,13 @@ export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUICompon
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Specifies the text label to use when the item is matched during keyboard text navigation.
    *
    * Defaults to the item text content if not provided.
    */
-  label?: string;
+  label?: string | undefined;
 }
 export declare namespace SelectItem {
   type State = SelectItemState;

package/esm/select/item/SelectItem.js

@@ -27,7 +27,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
@@ -53,7 +53,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   } = useSelectRootContext();
   const highlightTimeout = useTimeout();
   const highlighted = useStore(store, selectors.isActive, listItem.index);
-  const selected = useStore(store, selectors.isSelected, listItem.index, value);
+  const selected = useStore(store, selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = useStore(store, selectors.isSelectedByFocus, listItem.index);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
   const index = listItem.index;
@@ -65,30 +65,30 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       return undefined;
     }
     const values = valuesRef.current;
-    values[index] = value;
+    values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, value, valuesRef]);
+  }, [hasRegistered, index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
       return undefined;
     }
     const selectedValue = store.state.value;
-    let candidate = selectedValue;
+    let selectedCandidate = selectedValue;
     if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
-      candidate = selectedValue[selectedValue.length - 1];
+      selectedCandidate = selectedValue[selectedValue.length - 1];
     }
-    if (candidate !== undefined && compareItemEquality(candidate, value, isItemEqualToValue)) {
+    if (selectedCandidate !== undefined && compareItemEquality(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
     return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, value]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -112,23 +112,22 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     const selectedValue = store.state.value;
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const nextValue = selected ? removeItem(currentValue, value, isItemEqualToValue) : [...currentValue, value];
+      const nextValue = selected ? removeItem(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
       setValue(nextValue, createChangeEventDetails(REASONS.itemPress, event));
     } else {
-      setValue(value, createChangeEventDetails(REASONS.itemPress, event));
+      setValue(itemValue, createChangeEventDetails(REASONS.itemPress, event));
       setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
     }
   }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
-    'aria-disabled': disabled || undefined,
     tabIndex: highlighted ? 0 : -1,
     onFocus() {
       store.set('activeIndex', index);
     },
     onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null) {
+      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
         store.set('activeIndex', index);
       }
     },

package/esm/select/item/SelectItemContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const SelectItemContext = /*#__PURE__*/React.createContext(undefined);

package/esm/select/item-indicator/SelectItemIndicator.d.ts

@@ -7,7 +7,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectItemIndicatorState {
   selected: boolean;
   transitionStatus: TransitionStatus;
@@ -15,7 +15,7 @@ export interface SelectItemIndicatorState {
 export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicator.State> {
   children?: React.ReactNode;
   /** Whether to keep the HTML element in the DOM when the item is not selected. */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectItemIndicator {
   type State = SelectItemIndicatorState;

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

@@ -49,10 +49,10 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
     transitionStatus,
     setMounted
   } = useTransitionStatus(selected);
-  const state = React.useMemo(() => ({
+  const state = {
     selected,
     transitionStatus
-  }), [selected, transitionStatus]);
+  };
   const element = useRenderElement('span', componentProps, {
     ref: [forwardedRef, indicatorRef],
     state,

package/esm/select/item-text/SelectItemText.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItemText: React.NamedExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItemText: React.NamedExoticComponent<Omit<SelectItemTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectItemTextState {}
 export interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemText.State> {}
 export declare namespace SelectItemText {

package/esm/select/list/SelectList.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectList: React.ForwardRefExoticComponent<SelectListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectList: React.ForwardRefExoticComponent<Omit<SelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectListProps extends BaseUIComponentProps<'div', SelectList.State> {}
 export interface SelectListState {}
 export declare namespace SelectList {