@base-ui/react 1.0.0 → 1.2.0

package/radio-group/RadioGroup.js

@@ -8,10 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
-var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
-var _noop = require("../utils/noop");
 var _useBaseUiId = require("../utils/useBaseUiId");
 var _utils = require("../floating-ui-react/utils");
 var _composite = require("../composite/composite");
@@ -22,7 +19,6 @@ var _constants = require("../field/utils/constants");
 var _FieldsetRootContext = require("../fieldset/root/FieldsetRootContext");
 var _FormContext = require("../form/FormContext");
 var _LabelableContext = require("../labelable-provider/LabelableContext");
-var _mergeProps = require("../merge-props");
 var _useValueChanged = require("../utils/useValueChanged");
 var _RadioGroupContext = require("./RadioGroupContext");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -87,11 +83,48 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     setCheckedValueUnwrapped(value);
   });
   const controlRef = React.useRef(null);
-  const registerControlRef = (0, _useStableCallback.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 = (0, _useStableCallback.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 = (0, _useStableCallback.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;
+  });
   (0, _useField.useField)({
     id,
     commit: validation.commit,
@@ -109,58 +142,19 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     } else {
       validation.commit(checkedValue, true);
     }
-  });
-  const [touched, setTouched] = React.useState(false);
-  const onBlur = (0, _useStableCallback.useStableCallback)(event => {
-    if (!(0, _utils.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 = (0, _useStableCallback.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 = (0, _useMergedRefs.useMergedRefs)(validation.inputRef, inputRefProp);
-  const inputProps = (0, _mergeProps.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.visuallyHidden,
-    onChange: _noop.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,
@@ -170,26 +164,41 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     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 (!(0, _utils.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__*/(0, _jsxRuntime.jsxs)(_RadioGroupContext.RadioGroupContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.RadioGroupContext.Provider, {
     value: contextValue,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
       state: state,
@@ -198,9 +207,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
       stateAttributesMapping: _constants.fieldValidityMapping,
       enableHomeAndEndKeys: false,
       modifierKeys: MODIFIER_KEYS
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
-    })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") RadioGroup.displayName = "RadioGroup";

package/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/radio-group/RadioGroupContext.js

@@ -8,19 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroupContext = void 0;
 exports.useRadioGroupContext = useRadioGroupContext;
 var React = _interopRequireWildcard(require("react"));
-var _noop = require("../utils/noop");
-const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: undefined,
-  readOnly: undefined,
-  required: undefined,
-  name: undefined,
-  checkedValue: '',
-  setCheckedValue: _noop.NOOP,
-  onValueChange: _noop.NOOP,
-  touched: false,
-  setTouched: _noop.NOOP,
-  registerControlRef: _noop.NOOP
-});
+const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") RadioGroupContext.displayName = "RadioGroupContext";
 function useRadioGroupContext() {
   return React.useContext(RadioGroupContext);

package/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/scroll-area/content/ScrollAreaContent.js

@@ -35,7 +35,16 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
     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/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/scroll-area/corner/ScrollAreaCorner.js

@@ -38,7 +38,7 @@ const ScrollAreaCorner = exports.ScrollAreaCorner = /*#__PURE__*/React.forwardRe
       }
     }, elementProps]
   });
-  if (hiddenState.cornerHidden) {
+  if (hiddenState.corner) {
     return null;
   }
   return element;

package/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/scroll-area/root/ScrollAreaRoot.js

@@ -19,7 +19,12 @@ var _styles = require("../../utils/styles");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _stateAttributes = require("./stateAttributes");
 var _utils = require("../../floating-ui-react/utils");
+var _CSPContext = require("../../csp-provider/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_COORDS = {
+  x: 0,
+  y: 0
+};
 const DEFAULT_SIZE = {
   width: 0,
   height: 0
@@ -30,7 +35,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.
@@ -44,14 +53,22 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     overflowEdgeThreshold: overflowEdgeThresholdProp,
     ...elementProps
   } = componentProps;
+  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const rootId = (0, _useBaseUiId.useBaseUiId)();
+  const scrollYTimeout = (0, _useTimeout.useTimeout)();
+  const scrollXTimeout = (0, _useTimeout.useTimeout)();
+  const {
+    nonce,
+    disableStyleElements
+  } = (0, _CSPContext.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 = (0, _useBaseUiId.useBaseUiId)();
+  const [hiddenState, setHiddenState] = React.useState(DEFAULT_HIDDEN_STATE);
   const rootRef = React.useRef(null);
   const viewportRef = React.useRef(null);
   const scrollbarYRef = React.useRef(null);
@@ -65,18 +82,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
-  const scrollYTimeout = (0, _useTimeout.useTimeout)();
-  const scrollXTimeout = (0, _useTimeout.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 = (0, _useStableCallback.useStableCallback)(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
@@ -161,32 +167,31 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
       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 = (0, _utils.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);
     },
@@ -232,10 +237,10 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     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__*/(0, _jsxRuntime.jsxs)(_ScrollAreaRootContext.ScrollAreaRootContext.Provider, {
     value: contextValue,
-    children: [_styles.styleDisableScrollbar.element, element]
+    children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), element]
   });
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";

package/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/scroll-area/root/ScrollAreaRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/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/scroll-area/root/ScrollAreaRootDataAttributes.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollAreaRootDataAttributes = void 0;
 let ScrollAreaRootDataAttributes = exports.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/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/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -46,21 +46,21 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     rootId,
     thumbSize
   } = (0, _ScrollAreaRootContext.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 = (0, _DirectionContext.useDirection)();
   React.useEffect(() => {
     const viewportEl = viewportRef.current;
@@ -186,7 +186,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
   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/scroll-area/scrollbar/ScrollAreaScrollbarContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/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/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.js

@@ -15,7 +15,7 @@ let ScrollAreaScrollbarDataAttributes = exports.ScrollAreaScrollbarDataAttribute
    */
   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";
   /**