@base-ui/react 1.1.0 → 1.2.0

package/esm/radio-group/RadioGroup.js

@@ -2,10 +2,7 @@
 
 import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
-import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
-import { NOOP } from "../utils/noop.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { contains } from "../floating-ui-react/utils.js";
 import { SHIFT } from "../composite/composite.js";
@@ -16,10 +13,9 @@ import { fieldValidityMapping } from "../field/utils/constants.js";
 import { useFieldsetRootContext } from "../fieldset/root/FieldsetRootContext.js";
 import { useFormContext } from "../form/FormContext.js";
 import { useLabelableContext } from "../labelable-provider/LabelableContext.js";
-import { mergeProps } from "../merge-props/index.js";
 import { useValueChanged } from "../utils/useValueChanged.js";
 import { RadioGroupContext } from "./RadioGroupContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const MODIFIER_KEYS = [SHIFT];
 
 /**
@@ -81,11 +77,48 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     setCheckedValueUnwrapped(value);
   });
   const controlRef = React.useRef(null);
-  const registerControlRef = useStableCallback(element => {
-    if (controlRef.current == null && element != null) {
+  const groupInputRef = React.useRef(null);
+  const firstEnabledInputRef = React.useRef(null);
+  function setInputRef(hiddenInput) {
+    let cleanup = undefined;
+    if (inputRefProp) {
+      if (typeof inputRefProp === 'function') {
+        cleanup = inputRefProp(hiddenInput);
+      } else {
+        inputRefProp.current = hiddenInput;
+      }
+    }
+    groupInputRef.current = hiddenInput;
+    validation.inputRef.current = hiddenInput;
+    return cleanup;
+  }
+  const registerControlRef = useStableCallback((element, isDisabled = false) => {
+    if (!element) {
+      return;
+    }
+    if (isDisabled) {
+      if (controlRef.current === element) {
+        controlRef.current = null;
+      }
+      return;
+    }
+    if (controlRef.current == null) {
       controlRef.current = element;
     }
   });
+  const registerInputRef = useStableCallback(input => {
+    if (!input || input.disabled) {
+      return undefined;
+    }
+    if (!firstEnabledInputRef.current) {
+      firstEnabledInputRef.current = input;
+    }
+    const currentInput = groupInputRef.current;
+    if (input.checked || currentInput == null || currentInput.disabled) {
+      return setInputRef(input);
+    }
+    return undefined;
+  });
   useField({
     id,
     commit: validation.commit,
@@ -103,58 +136,19 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     } else {
       validation.commit(checkedValue, true);
     }
-  });
-  const [touched, setTouched] = React.useState(false);
-  const onBlur = useStableCallback(event => {
-    if (!contains(event.currentTarget, event.relatedTarget)) {
-      setFieldTouched(true);
-      setFocused(false);
-      if (validationMode === 'onBlur') {
-        validation.commit(checkedValue);
-      }
+    const fallbackInput = firstEnabledInputRef.current;
+    if (checkedValue == null && fallbackInput && !fallbackInput.disabled) {
+      setInputRef(fallbackInput);
     }
   });
-  const onKeyDownCapture = useStableCallback(event => {
-    if (event.key.startsWith('Arrow')) {
-      setFieldTouched(true);
-      setTouched(true);
-      setFocused(true);
-    }
-  });
-  const serializedCheckedValue = React.useMemo(() => {
-    if (checkedValue == null) {
-      return ''; // avoid uncontrolled -> controlled error
-    }
-    if (typeof checkedValue === 'string') {
-      return checkedValue;
-    }
-    return JSON.stringify(checkedValue);
-  }, [checkedValue]);
-  const mergedInputRef = useMergedRefs(validation.inputRef, inputRefProp);
-  const inputProps = mergeProps({
-    value: serializedCheckedValue,
-    ref: mergedInputRef,
-    id,
-    name: serializedCheckedValue ? name : undefined,
-    disabled,
-    readOnly,
-    required,
-    'aria-labelledby': elementProps['aria-labelledby'] ?? fieldsetContext?.legendId,
-    'aria-hidden': true,
-    tabIndex: -1,
-    style: name ? visuallyHiddenInput : visuallyHidden,
-    onChange: NOOP,
-    // suppress a Next.js error
-    onFocus() {
-      controlRef.current?.focus();
-    }
-  }, validation.getInputValidationProps);
-  const state = React.useMemo(() => ({
+  const [touched, setTouched] = React.useState(false);
+  const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
+  const state = {
     ...fieldState,
     disabled: disabled ?? false,
     required: required ?? false,
     readOnly: readOnly ?? false
-  }), [fieldState, disabled, readOnly, required]);
+  };
   const contextValue = React.useMemo(() => ({
     ...fieldState,
     checkedValue,
@@ -164,26 +158,41 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     onValueChange,
     readOnly,
     registerControlRef,
+    registerInputRef,
     required,
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,
     'aria-disabled': disabled || undefined,
     'aria-readonly': readOnly || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledby,
     onFocus() {
       setFocused(true);
     },
-    onBlur,
-    onKeyDownCapture
+    onBlur(event) {
+      if (!contains(event.currentTarget, event.relatedTarget)) {
+        setFieldTouched(true);
+        setFocused(false);
+        if (validationMode === 'onBlur') {
+          validation.commit(checkedValue);
+        }
+      }
+    },
+    onKeyDownCapture(event) {
+      if (event.key.startsWith('Arrow')) {
+        setFieldTouched(true);
+        setTouched(true);
+        setFocused(true);
+      }
+    }
   };
-  return /*#__PURE__*/_jsxs(RadioGroupContext.Provider, {
+  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
-    children: [/*#__PURE__*/_jsx(CompositeRoot, {
+    children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
       state: state,
@@ -192,9 +201,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
       stateAttributesMapping: fieldValidityMapping,
       enableHomeAndEndKeys: false,
       modifierKeys: MODIFIER_KEYS
-    }), /*#__PURE__*/_jsx("input", {
-      ...inputProps
-    })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") RadioGroup.displayName = "RadioGroup";

package/esm/radio-group/RadioGroupContext.d.ts

@@ -2,18 +2,19 @@ import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
-export interface RadioGroupContext {
+export interface RadioGroupContext<Value> {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
   required: boolean | undefined;
   name: string | undefined;
-  checkedValue: unknown;
-  setCheckedValue: (value: unknown, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
-  onValueChange: (value: unknown, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
+  checkedValue: Value | undefined;
+  setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
+  onValueChange: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
-  validation?: UseFieldValidationReturnValue;
-  registerControlRef: (element: HTMLElement | null) => void;
+  validation?: UseFieldValidationReturnValue | undefined;
+  registerControlRef: (element: HTMLElement | null, disabled?: boolean) => void;
+  registerInputRef: (element: HTMLInputElement | null) => void;
 }
-export declare const RadioGroupContext: React.Context<RadioGroupContext>;
-export declare function useRadioGroupContext(): RadioGroupContext;
+export declare const RadioGroupContext: React.Context<RadioGroupContext<any> | undefined>;
+export declare function useRadioGroupContext(): RadioGroupContext<any> | undefined;

package/esm/radio-group/RadioGroupContext.js

@@ -1,19 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { NOOP } from "../utils/noop.js";
-export const RadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: undefined,
-  readOnly: undefined,
-  required: undefined,
-  name: undefined,
-  checkedValue: '',
-  setCheckedValue: NOOP,
-  onValueChange: NOOP,
-  touched: false,
-  setTouched: NOOP,
-  registerControlRef: NOOP
-});
+export const RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") RadioGroupContext.displayName = "RadioGroupContext";
 export function useRadioGroupContext() {
   return React.useContext(RadioGroupContext);

package/esm/scroll-area/root/ScrollAreaRoot.d.ts

@@ -31,6 +31,8 @@ export type Coords = typeof DEFAULT_COORDS;
  */
 export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaRootState {
+  /** Whether the scroll area is being scrolled. */
+  scrolling: boolean;
   /** Whether horizontal overflow is present. */
   hasOverflowX: boolean;
   /** Whether vertical overflow is present. */
@@ -52,12 +54,12 @@ export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollA
    * Accepts a single number for all edges or an object to configure them individually.
    * @default 0
    */
-  overflowEdgeThreshold?: number | Partial<{
+  overflowEdgeThreshold?: (number | Partial<{
     xStart: number;
     xEnd: number;
     yStart: number;
     yEnd: number;
-  }>;
+  }>) | undefined;
 }
 export declare namespace ScrollAreaRoot {
   type State = ScrollAreaRootState;

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -172,6 +172,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     }
   }
   const state = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
     hasOverflowX: !hiddenState.x,
     hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
@@ -179,7 +180,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
-  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
+  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const props = {
     role: 'presentation',
     onPointerEnter: handlePointerEnterOrMove,

package/esm/scroll-area/root/ScrollAreaRootContext.js

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

package/esm/scroll-area/root/ScrollAreaRootDataAttributes.d.ts

@@ -1,4 +1,8 @@
 export declare enum ScrollAreaRootDataAttributes {
+  /**
+   * 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/root/ScrollAreaRootDataAttributes.js

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

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts

@@ -21,12 +21,12 @@ export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', Sc
    * Whether the scrollbar controls vertical or horizontal scroll.
    * @default 'vertical'
    */
-  orientation?: 'vertical' | 'horizontal';
+  orientation?: ('vertical' | 'horizontal') | undefined;
   /**
    * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ScrollAreaScrollbar {
   type State = ScrollAreaScrollbarState;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -40,7 +40,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     rootId,
     thumbSize
   } = useScrollAreaRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     hovering,
     scrolling: {
       horizontal: scrollingX,
@@ -54,7 +54,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
-  }), [hovering, scrollingX, scrollingY, orientation, hiddenState, overflowEdges]);
+  };
   const direction = useDirection();
   React.useEffect(() => {
     const viewportEl = viewportRef.current;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbarContext.js

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

package/esm/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.d.ts

@@ -9,7 +9,7 @@ export declare enum ScrollAreaScrollbarDataAttributes {
    */
   hovering = "data-hovering",
   /**
-   * Present when the users scrolls inside the scroll area.
+   * Present when the user scrolls inside the scroll area.
    */
   scrolling = "data-scrolling",
   /**

package/esm/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.js

@@ -9,7 +9,7 @@ export let ScrollAreaScrollbarDataAttributes = /*#__PURE__*/function (ScrollArea
    */
   ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
   /**
-   * Present when the users scrolls inside the scroll area.
+   * Present when the user scrolls inside the scroll area.
    */
   ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
   /**

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

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 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

@@ -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.js

@@ -16,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.
@@ -83,7 +84,9 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     setHovering,
     setOverflowEdges,
     overflowEdges,
-    overflowEdgeThreshold
+    overflowEdgeThreshold,
+    scrollingX,
+    scrollingY
   } = useScrollAreaRootContext();
   const direction = useDirection();
   const programmaticScrollRef = React.useRef(true);
@@ -117,14 +120,17 @@ 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;
@@ -183,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`);
     }
@@ -216,10 +218,10 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       };
     });
     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) {
@@ -284,7 +286,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       if (animations.length === 0) {
         return;
       }
-      Promise.all(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
+      Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
       ro.disconnect();
@@ -336,6 +338,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     onKeyDown: handleUserInteraction
   };
   const viewportState = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
     hasOverflowX: !hiddenState.x,
     hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
@@ -343,7 +346,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
-  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
+  }), [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.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.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/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/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

@@ -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;