@base-ui/react 1.0.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 } 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: 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/content/ScrollAreaContent.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 ScrollAreaContent: React.ForwardRefExoticComponent<ScrollAreaContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaContentState extends ScrollAreaRoot.State {}
 export interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContent.State> {}
 export declare namespace ScrollAreaContent {

package/esm/scroll-area/content/ScrollAreaContent.js

@@ -29,7 +29,16 @@ export const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAr
     if (typeof ResizeObserver === 'undefined') {
       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();
+    });
     if (contentWrapperRef.current) {
       ro.observe(contentWrapperRef.current);
     }

package/esm/scroll-area/corner/ScrollAreaCorner.d.ts

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

package/esm/scroll-area/corner/ScrollAreaCorner.js

@@ -33,7 +33,7 @@ export const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAre
       }
     }, elementProps]
   });
-  if (hiddenState.cornerHidden) {
+  if (hiddenState.corner) {
     return null;
   }
   return element;

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

@@ -1,13 +1,38 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
+declare const DEFAULT_COORDS: {
+  x: number;
+  y: number;
+};
+declare const DEFAULT_SIZE: {
+  width: number;
+  height: number;
+};
+declare const DEFAULT_OVERFLOW_EDGES: {
+  xStart: boolean;
+  xEnd: boolean;
+  yStart: boolean;
+  yEnd: boolean;
+};
+declare const DEFAULT_HIDDEN_STATE: {
+  x: boolean;
+  y: boolean;
+  corner: boolean;
+};
+export type HiddenState = typeof DEFAULT_HIDDEN_STATE;
+export type OverflowEdges = typeof DEFAULT_OVERFLOW_EDGES;
+export type Size = typeof DEFAULT_SIZE;
+export type Coords = typeof DEFAULT_COORDS;
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<ScrollAreaRootProps & React.RefAttributes<HTMLDivElement>>;
+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. */
@@ -29,14 +54,15 @@ 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;
   type Props = ScrollAreaRootProps;
-}
+}
+export {};

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

@@ -13,7 +13,12 @@ import { styleDisableScrollbar } from "../../utils/styles.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { scrollAreaStateAttributesMapping } from "./stateAttributes.js";
 import { contains } from "../../floating-ui-react/utils.js";
+import { useCSPContext } from "../../csp-provider/CSPContext.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_COORDS = {
+  x: 0,
+  y: 0
+};
 const DEFAULT_SIZE = {
   width: 0,
   height: 0
@@ -24,7 +29,11 @@ const DEFAULT_OVERFLOW_EDGES = {
   yStart: false,
   yEnd: false
 };
-
+const DEFAULT_HIDDEN_STATE = {
+  x: false,
+  y: false,
+  corner: false
+};
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
@@ -38,14 +47,22 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     overflowEdgeThreshold: overflowEdgeThresholdProp,
     ...elementProps
   } = componentProps;
+  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const rootId = useBaseUiId();
+  const scrollYTimeout = useTimeout();
+  const scrollXTimeout = useTimeout();
+  const {
+    nonce,
+    disableStyleElements
+  } = useCSPContext();
   const [hovering, setHovering] = React.useState(false);
   const [scrollingX, setScrollingX] = React.useState(false);
   const [scrollingY, setScrollingY] = React.useState(false);
+  const [touchModality, setTouchModality] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
   const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
-  const [touchModality, setTouchModality] = React.useState(false);
   const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
-  const rootId = useBaseUiId();
+  const [hiddenState, setHiddenState] = React.useState(DEFAULT_HIDDEN_STATE);
   const rootRef = React.useRef(null);
   const viewportRef = React.useRef(null);
   const scrollbarYRef = React.useRef(null);
@@ -59,18 +76,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
-  const scrollYTimeout = useTimeout();
-  const scrollXTimeout = useTimeout();
-  const scrollPositionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const [hiddenState, setHiddenState] = React.useState({
-    scrollbarYHidden: false,
-    scrollbarXHidden: false,
-    cornerHidden: false
-  });
-  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const scrollPositionRef = React.useRef(DEFAULT_COORDS);
   const handleScroll = useStableCallback(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
@@ -155,32 +161,31 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
       thumbXRef.current.releasePointerCapture(event.pointerId);
     }
   });
+  function handleTouchModalityChange(event) {
+    setTouchModality(event.pointerType === 'touch');
+  }
   function handlePointerEnterOrMove(event) {
-    const isTouch = event.pointerType === 'touch';
-    setTouchModality(isTouch);
-    if (!isTouch) {
+    handleTouchModalityChange(event);
+    if (event.pointerType !== 'touch') {
       const isTargetRootChild = contains(rootRef.current, event.target);
       setHovering(isTargetRootChild);
     }
   }
   const state = 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 props = {
     role: 'presentation',
     onPointerEnter: handlePointerEnterOrMove,
     onPointerMove: handlePointerEnterOrMove,
-    onPointerDown({
-      pointerType
-    }) {
-      setTouchModality(pointerType === 'touch');
-    },
+    onPointerDown: handleTouchModalityChange,
     onPointerLeave() {
       setHovering(false);
     },
@@ -226,10 +231,10 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     setOverflowEdges,
     viewportState: state,
     overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, cornerRef, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, viewportRef, rootRef, scrollbarYRef, scrollbarXRef, thumbYRef, thumbXRef, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
   return /*#__PURE__*/_jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
-    children: [styleDisableScrollbar.element, element]
+    children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
   });
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";

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

@@ -1,22 +1,10 @@
 import * as React from 'react';
-import type { ScrollAreaRoot } from "./ScrollAreaRoot.js";
+import type { Coords, HiddenState, OverflowEdges, ScrollAreaRoot, Size } from "./ScrollAreaRoot.js";
 export interface ScrollAreaRootContext {
-  cornerSize: {
-    width: number;
-    height: number;
-  };
-  setCornerSize: React.Dispatch<React.SetStateAction<{
-    width: number;
-    height: number;
-  }>>;
-  thumbSize: {
-    width: number;
-    height: number;
-  };
-  setThumbSize: React.Dispatch<React.SetStateAction<{
-    width: number;
-    height: number;
-  }>>;
+  cornerSize: Size;
+  setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
+  thumbSize: Size;
+  setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,33 +22,12 @@ export interface ScrollAreaRootContext {
   handlePointerDown: (event: React.PointerEvent) => void;
   handlePointerMove: (event: React.PointerEvent) => void;
   handlePointerUp: (event: React.PointerEvent) => void;
-  handleScroll: (scrollPosition: {
-    x: number;
-    y: number;
-  }) => void;
+  handleScroll: (scrollPosition: Coords) => void;
   rootId: string | undefined;
-  hiddenState: {
-    scrollbarYHidden: boolean;
-    scrollbarXHidden: boolean;
-    cornerHidden: boolean;
-  };
-  setHiddenState: React.Dispatch<React.SetStateAction<{
-    scrollbarYHidden: boolean;
-    scrollbarXHidden: boolean;
-    cornerHidden: boolean;
-  }>>;
-  overflowEdges: {
-    xStart: boolean;
-    xEnd: boolean;
-    yStart: boolean;
-    yEnd: boolean;
-  };
-  setOverflowEdges: React.Dispatch<React.SetStateAction<{
-    xStart: boolean;
-    xEnd: boolean;
-    yStart: boolean;
-    yEnd: boolean;
-  }>>;
+  hiddenState: HiddenState;
+  setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
+  overflowEdges: OverflowEdges;
+  setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
   viewportState: ScrollAreaRoot.State;
   overflowEdgeThreshold: {
     xStart: number;

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

@@ -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 ScrollAreaScrollbar: React.ForwardRefExoticComponent<ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaScrollbarState extends ScrollAreaRoot.State {
   /** Whether the scroll area is being hovered. */
   hovering: boolean;
@@ -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,21 +40,21 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     rootId,
     thumbSize
   } = useScrollAreaRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     hovering,
     scrolling: {
       horizontal: scrollingX,
       vertical: scrollingY
     }[orientation],
     orientation,
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
-  }), [hovering, scrollingX, scrollingY, orientation, hiddenState, overflowEdges]);
+    cornerHidden: hiddenState.corner
+  };
   const direction = useDirection();
   React.useEffect(() => {
     const viewportEl = viewportRef.current;
@@ -180,7 +180,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
   const contextValue = React.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.scrollbarYHidden : hiddenState.scrollbarXHidden;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
   const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;

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";
   /**