@base-ui/react 1.3.0 → 1.4.0

package/progress/indicator/ProgressIndicatorDataAttributes.js

@@ -10,7 +10,7 @@ let ProgressIndicatorDataAttributes = exports.ProgressIndicatorDataAttributes =
    */
   ProgressIndicatorDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressIndicatorDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/progress/label/ProgressLabel.js

@@ -21,6 +21,7 @@ const ProgressLabel = exports.ProgressLabel = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/progress/label/ProgressLabelDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressLabelDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/progress/label/ProgressLabelDataAttributes.js

@@ -10,7 +10,7 @@ let ProgressLabelDataAttributes = exports.ProgressLabelDataAttributes = /*#__PUR
    */
   ProgressLabelDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressLabelDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/progress/root/ProgressRoot.js

@@ -38,6 +38,7 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/progress/root/ProgressRootDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressRootDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/progress/root/ProgressRootDataAttributes.js

@@ -10,7 +10,7 @@ let ProgressRootDataAttributes = exports.ProgressRootDataAttributes = /*#__PURE_
    */
   ProgressRootDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressRootDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/progress/track/ProgressTrack.js

@@ -20,6 +20,7 @@ const ProgressTrack = exports.ProgressTrack = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/progress/track/ProgressTrackDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressTrackDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/progress/track/ProgressTrackDataAttributes.js

@@ -10,7 +10,7 @@ let ProgressTrackDataAttributes = exports.ProgressTrackDataAttributes = /*#__PUR
    */
   ProgressTrackDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressTrackDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/progress/value/ProgressValue.js

@@ -21,6 +21,7 @@ const ProgressValue = exports.ProgressValue = /*#__PURE__*/React.forwardRef(func
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/progress/value/ProgressValueDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressValueDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/progress/value/ProgressValueDataAttributes.js

@@ -10,7 +10,7 @@ let ProgressValueDataAttributes = exports.ProgressValueDataAttributes = /*#__PUR
    */
   ProgressValueDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressValueDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/radio/indicator/RadioIndicator.js

@@ -22,6 +22,7 @@ const RadioIndicator = exports.RadioIndicator = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/radio/root/RadioRoot.js

@@ -48,6 +48,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     inputRef: inputRefProp,
     nativeButton = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const groupContext = (0, _RadioGroupContext.useRadioGroupContext)();
@@ -55,6 +56,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     disabled: disabledGroup,
     readOnly: readOnlyGroup,
     required: requiredGroup,
+    form: formGroup,
     checkedValue,
     touched = false,
     validation,
@@ -80,6 +82,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
   const readOnly = readOnlyGroup || readOnlyProp;
   const required = requiredGroup || requiredProp;
+  const form = formGroup;
   const checked = groupContext ? checkedValue === value : value === '';
   const serializedValue = React.useMemo(() => (0, _serializeValue.serializeValue)(value), [value]);
   const radioRef = React.useRef(null);
@@ -161,6 +164,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const inputProps = {
     type: 'radio',
     ref: mergedInputRef,
+    form,
     id: hiddenInputId,
     name,
     tabIndex: -1,
@@ -218,12 +222,14 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
       tag: "span",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: refs,
       props: props,
       stateAttributesMapping: _stateAttributesMapping.stateAttributesMapping
     }) : element, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/radio-group/RadioGroup.d.ts

@@ -42,6 +42,11 @@ export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the radio inputs.
+   * Useful when the radio group is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The controlled value of the radio item that should be currently selected.
    *

package/radio-group/RadioGroup.js

@@ -13,8 +13,8 @@ var _useBaseUiId = require("../utils/useBaseUiId");
 var _utils = require("../floating-ui-react/utils");
 var _composite = require("../composite/composite");
 var _CompositeRoot = require("../composite/root/CompositeRoot");
-var _useField = require("../field/useField");
 var _FieldRootContext = require("../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../field/root/useRegisterFieldControl");
 var _constants = require("../field/utils/constants");
 var _FieldsetRootContext = require("../fieldset/root/FieldsetRootContext");
 var _FormContext = require("../form/FormContext");
@@ -40,9 +40,11 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     onValueChange: onValueChangeProp,
     value: externalValue,
     defaultValue,
+    form,
     name: nameProp,
     inputRef: inputRefProp,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -125,13 +127,11 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     }
     return undefined;
   });
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => checkedValue ?? null);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     id,
-    commit: validation.commit,
     value: checkedValue,
-    controlRef,
-    name,
-    getValue: () => checkedValue ?? null
+    getValue: getFieldValue
   });
   (0, _useValueChanged.useValueChanged)(checkedValue, () => {
     clearErrors(name);
@@ -159,6 +159,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     ...fieldState,
     checkedValue,
     disabled,
+    form,
     validation,
     name,
     onValueChange,
@@ -169,7 +170,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, form, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,
@@ -201,6 +202,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       props: [defaultProps, validation.getValidationProps, elementProps],
       refs: [forwardedRef],

package/radio-group/RadioGroupContext.d.ts

@@ -6,6 +6,7 @@ export interface RadioGroupContext<Value> {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
   required: boolean | undefined;
+  form: string | undefined;
   name: string | undefined;
   checkedValue: Value | undefined;
   setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;

package/scroll-area/content/ScrollAreaContent.js

@@ -22,6 +22,7 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const contentWrapperRef = React.useRef(null);

package/scroll-area/corner/ScrollAreaCorner.js

@@ -19,6 +19,7 @@ const ScrollAreaCorner = exports.ScrollAreaCorner = /*#__PURE__*/React.forwardRe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/scroll-area/root/ScrollAreaRoot.js

@@ -51,6 +51,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     render,
     className,
     overflowEdgeThreshold: overflowEdgeThresholdProp,
+    style,
     ...elementProps
   } = componentProps;
   const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);

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

@@ -29,7 +29,7 @@ export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', Sc
    */
   orientation?: 'vertical' | 'horizontal' | undefined;
   /**
-   * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
+   * Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
    * @default false
    */
   keepMounted?: boolean | undefined;

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollAreaScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _utils = require("../../floating-ui-react/utils");
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _ScrollAreaScrollbarContext = require("./ScrollAreaScrollbarContext");
 var _useRenderElement = require("../../utils/useRenderElement");
@@ -28,6 +30,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     className,
     orientation = 'vertical',
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -95,12 +98,9 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
         viewportEl.scrollLeft += event.deltaX;
       }
     }
-    scrollbarEl.addEventListener('wheel', handleWheel, {
+    return (0, _addEventListener.addEventListener)(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-    return () => {
-      scrollbarEl.removeEventListener('wheel', handleWheel);
-    };
   }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
   const props = {
     ...(rootId && {
@@ -110,9 +110,12 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
       if (event.button !== 0) {
         return;
       }
+      const target = (0, _utils.getTarget)(event.nativeEvent);
+      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
 
-      // Ignore clicks on thumb
-      if (event.currentTarget !== event.target) {
+      // Ignore clicks on thumb, including cases where React retargets the
+      // synthetic event to the track host across a shadow boundary.
+      if (thumb && (0, _utils.contains)(thumb, target)) {
         return;
       }
       if (!viewportRef.current) {

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -21,6 +21,7 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -19,16 +19,13 @@ var _getOffset = require("../utils/getOffset");
 var _constants = require("../constants");
 var _clamp = require("../../utils/clamp");
 var _styles = require("../../utils/styles");
-var _onVisible = require("../utils/onVisible");
 var _stateAttributes = require("../root/stateAttributes");
 var _ScrollAreaViewportCssVars = require("./ScrollAreaViewportCssVars");
-var _scrollEdges = require("../utils/scrollEdges");
+var _scrollEdges = require("../../utils/scrollEdges");
 var _jsxRuntime = require("react/jsx-runtime");
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 let scrollAreaOverflowVarsRegistered = false;
-const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined';
-
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
  * improves rendering performance in complex scroll areas with deep subtrees.
@@ -71,6 +68,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -240,16 +238,10 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!viewportRef.current) {
-      return undefined;
+      return;
     }
     removeCSSVariableInheritance();
-    if (HAS_RESIZE_OBSERVER) {
-      return undefined;
-    }
-    return (0, _onVisible.onVisible)(viewportRef.current, () => {
-      computeThumbPosition();
-    });
-  }, [computeThumbPosition, viewportRef]);
+  }, [viewportRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
     queueMicrotask(computeThumbPosition);
@@ -263,7 +255,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
   }, [viewportRef, setHovering]);
   React.useEffect(() => {
     const viewport = viewportRef.current;
-    if (!HAS_RESIZE_OBSERVER || !viewport) {
+    if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
     let hasInitialized = false;

package/select/arrow/SelectArrow.js

@@ -29,6 +29,7 @@ const SelectArrow = exports.SelectArrow = /*#__PURE__*/React.forwardRef(function
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/backdrop/SelectBackdrop.js

@@ -28,6 +28,7 @@ const SelectBackdrop = exports.SelectBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/group/SelectGroup.js

@@ -20,6 +20,7 @@ const SelectGroup = exports.SelectGroup = /*#__PURE__*/React.forwardRef(function
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/select/group-label/SelectGroupLabel.js

@@ -22,6 +22,7 @@ const SelectGroupLabel = exports.SelectGroupLabel = /*#__PURE__*/React.forwardRe
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/icon/SelectIcon.js

@@ -22,6 +22,7 @@ const SelectIcon = exports.SelectIcon = /*#__PURE__*/React.forwardRef(function S
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/item/SelectItem.js

@@ -9,8 +9,6 @@ exports.SelectItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
-var _isMouseWithinBounds = require("@base-ui/utils/isMouseWithinBounds");
-var _useTimeout = require("@base-ui/utils/useTimeout");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
@@ -36,6 +34,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     label,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -52,11 +51,9 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     selectionRef,
     typingRef,
     valuesRef,
-    keyboardActiveRef,
     multiple,
-    highlightItemOnHover
+    selectedItemTextRef
   } = (0, _SelectRootContext.useSelectRootContext)();
-  const highlightTimeout = (0, _useTimeout.useTimeout)();
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, listItem.index);
   const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = (0, _store.useStore)(store, _store2.selectors.isSelectedByFocus, listItem.index);
@@ -77,7 +74,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   }, [hasRegistered, index, itemValue, valuesRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!hasRegistered) {
-      return undefined;
+      return;
     }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
@@ -86,9 +83,13 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     }
     if (selectedCandidate !== undefined && (0, _itemEquality.compareItemEquality)(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
+      // Make sure SelectPopup can measure the selected item on first open.
+      // SelectItemText can still update this ref later when focus moves.
+      if (textRef.current) {
+        selectedItemTextRef.current = textRef.current;
+      }
     }
-    return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
   const state = {
     disabled,
     selected,
@@ -98,9 +99,6 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     active: highlighted,
     selected
   });
-  // With our custom `focusItemOnHover` implementation, this interferes with the logic and can
-  // cause the index state to be stuck when leaving the select popup.
-  rootProps.onFocus = undefined;
   rootProps.id = undefined;
   const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
@@ -129,29 +127,6 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     role: 'option',
     'aria-selected': selected,
     tabIndex: highlighted ? 0 : -1,
-    onFocus() {
-      store.set('activeIndex', index);
-    },
-    onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseMove() {
-      if (highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseLeave(event) {
-      if (!highlightItemOnHover || keyboardActiveRef.current || (0, _isMouseWithinBounds.isMouseWithinBounds)(event)) {
-        return;
-      }
-      highlightTimeout.start(0, () => {
-        if (store.state.activeIndex === index) {
-          store.set('activeIndex', null);
-        }
-      });
-    },
     onTouchStart() {
       selectionRef.current = {
         allowSelectedMouseUp: false,

package/select/item-indicator/SelectItemIndicator.js

@@ -43,6 +43,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/select/item-text/SelectItemText.js

@@ -29,6 +29,7 @@ const SelectItemText = exports.SelectItemText = /*#__PURE__*/React.memo(/*#__PUR
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const localRef = React.useCallback(node => {

package/select/label/SelectLabel.js

@@ -25,6 +25,7 @@ const SelectLabel = exports.SelectLabel = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/select/list/SelectList.js

@@ -25,6 +25,7 @@ const SelectList = exports.SelectList = /*#__PURE__*/React.forwardRef(function S
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {