@base-ui/react 1.3.0 → 1.4.0

package/esm/select/root/SelectRoot.js

@@ -5,6 +5,7 @@ import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidd
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
+import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -13,6 +14,7 @@ import { useStore, Store } from '@base-ui/utils/store';
 import { useClick, useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
 import { SelectRootContext, SelectFloatingContext } from "./SelectRootContext.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { selectors } from "../store.js";
@@ -20,17 +22,17 @@ import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.j
 import { REASONS } from "../../utils/reasons.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useFormContext } from "../../form/FormContext.js";
-import { useField } from "../../field/useField.js";
-import { stringifyAsValue } from "../../utils/resolveValueLabel.js";
+import { stringifyAsLabel, stringifyAsValue } from "../../utils/resolveValueLabel.js";
 import { EMPTY_ARRAY, EMPTY_OBJECT } from "../../utils/constants.js";
 import { defaultItemEquality, findItemIndex } from "../../utils/itemEquality.js";
 import { useValueChanged } from "../../utils/useValueChanged.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
+import { getMaxScrollOffset, normalizeScrollOffset } from "../../utils/scrollEdges.js";
 import { mergeProps } from "../../merge-props/index.js";
 
 /**
  * Groups all parts of the select.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
@@ -45,6 +47,7 @@ export function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    form,
     autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
@@ -147,6 +150,8 @@ export function SelectRoot(props) {
   const selectedIndex = useStore(store, selectors.selectedIndex);
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
+  const previousOpenMethod = usePreviousValue(openMethod);
+  const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
     if (multiple && Array.isArray(value) && value.length === 0) {
       return '';
@@ -160,13 +165,11 @@ export function SelectRoot(props) {
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = useValueAsRef(store.state.triggerElement);
-  useField({
+  const getFieldValue = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(controlRef, {
     id: generatedId,
-    commit: validation.commit,
     value,
-    controlRef,
-    name,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const initialValueRef = React.useRef(value);
   useIsoLayoutEffect(() => {
@@ -236,7 +239,10 @@ export function SelectRoot(props) {
   });
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
-    store.set('activeIndex', null);
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   useOpenChangeComplete({
@@ -264,10 +270,10 @@ export function SelectRoot(props) {
     if (!scroller) {
       return;
     }
-    const viewportTop = scroller.scrollTop;
-    const viewportBottom = scroller.scrollTop + scroller.clientHeight;
-    const shouldShowUp = viewportTop > 1;
-    const shouldShowDown = viewportBottom < scroller.scrollHeight - 1;
+    const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+    const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+    const shouldShowUp = scrollTop > 0;
+    const shouldShowDown = scrollTop < maxScrollTop;
     if (store.state.scrollUpArrowVisible !== shouldShowUp) {
       store.set('scrollUpArrowVisible', shouldShowUp);
     }
@@ -303,9 +309,7 @@ export function SelectRoot(props) {
       }
       store.set('activeIndex', nextActiveIndex);
     },
-    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
-    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
-    focusItemOnHover: false
+    focusItemOnHover: highlightItemOnHover
   });
   const typeahead = useTypeahead(floatingContext, {
     enabled: !readOnly && !disabled && (open || !multiple),
@@ -354,9 +358,9 @@ export function SelectRoot(props) {
       itemToStringLabel,
       itemToStringValue,
       isItemEqualToValue,
-      openMethod
+      openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, openMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -399,11 +403,12 @@ export function SelectRoot(props) {
       const currentSerializedValue = stringifyAsValue(v, itemToStringValue);
       return /*#__PURE__*/_jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, value, name, itemToStringValue]);
+  }, [multiple, value, form, name, itemToStringValue]);
   return /*#__PURE__*/_jsx(SelectRootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsxs(SelectFloatingContext.Provider, {
@@ -414,7 +419,6 @@ export function SelectRoot(props) {
             // Move focus to the trigger element when the hidden input is focused.
             store.state.triggerElement?.focus({
               // Supported in Chrome from 144 (January 2026)
-              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
               focusVisible: true
             });
           },
@@ -424,7 +428,7 @@ export function SelectRoot(props) {
             if (event.nativeEvent.defaultPrevented) {
               return;
             }
-            const nextValue = event.target.value;
+            const nextValue = event.currentTarget.value;
             const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
             function handleChange() {
               if (multiple) {
@@ -434,8 +438,15 @@ export function SelectRoot(props) {
 
               // Handle single selection: match against registered values using serialization
               const matchingValue = valuesRef.current.find(v => {
-                const candidate = stringifyAsValue(v, itemToStringValue);
-                if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                // Try matching by value first (e.g., "US" for country code)
+                const candidateValue = stringifyAsValue(v, itemToStringValue);
+                if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                  return true;
+                }
+                // Also try matching by label for browser autofill compatibility
+                // (browsers autofill with displayed text like "United States", not the underlying value)
+                const candidateLabel = stringifyAsLabel(v, itemToStringLabel);
+                if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                   return true;
                 }
                 return false;
@@ -453,6 +464,7 @@ export function SelectRoot(props) {
           }
         }),
         id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
         name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
@@ -462,7 +474,8 @@ export function SelectRoot(props) {
         ref: ref,
         style: name ? visuallyHiddenInput : visuallyHidden,
         tabIndex: -1,
-        "aria-hidden": true
+        "aria-hidden": true,
+        suppressHydrationWarning: true
       }), hiddenInputs]
     })
   });

package/esm/select/scroll-arrow/SelectScrollArrow.js

@@ -9,6 +9,7 @@ import { useSelectPositionerContext } from "../positioner/SelectPositionerContex
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { getMaxScrollOffset, normalizeScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.js";
 import { selectors } from "../store.js";
 
 /**
@@ -18,10 +19,12 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   const {
     render,
     className,
+    style,
     direction,
     keepMounted = false,
     ...elementProps
   } = componentProps;
+  const isUp = direction === 'up';
   const {
     store,
     popupRef,
@@ -34,14 +37,14 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
     scrollDownArrowRef,
     scrollUpArrowRef
   } = useSelectPositionerContext();
-  const visibleSelector = direction === 'up' ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
+  const visibleSelector = isUp ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
   const stateVisible = useStore(store, visibleSelector);
   const openMethod = useStore(store, selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
   const timeout = useTimeout();
-  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
   const {
     transitionStatus,
     setMounted
@@ -75,7 +78,7 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   };
   const defaultProps = {
     'aria-hidden': true,
-    children: direction === 'up' ? '▲' : '▼',
+    children: isUp ? '▲' : '▼',
     style: {
       position: 'absolute'
     },
@@ -91,72 +94,25 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
         }
         store.set('activeIndex', null);
         handleScrollArrowVisibility();
-        const isScrolledToTop = scroller.scrollTop === 0;
-        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
-        const list = listRef.current;
+        const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+        const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+        const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
+        const items = listRef.current;
+        if (scrollTop !== scroller.scrollTop) {
+          scroller.scrollTop = scrollTop;
+        }
 
         // Fallback when there are no items registered yet.
-        if (list.length === 0) {
-          if (direction === 'up') {
-            store.set('scrollUpArrowVisible', !isScrolledToTop);
-          } else {
-            store.set('scrollDownArrowVisible', !isScrolledToBottom);
-          }
+        if (items.length === 0) {
+          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
         }
-        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+        if (isScrolledToEdge) {
           timeout.clear();
           return;
         }
-        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
-          const items = listRef.current;
+        if (items.length > 0) {
           const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
-          if (direction === 'up') {
-            let firstVisibleIndex = 0;
-            const scrollTop = scroller.scrollTop + scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemTop = item.offsetTop;
-                if (itemTop >= scrollTop) {
-                  firstVisibleIndex = i;
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.max(0, firstVisibleIndex - 1);
-            if (targetIndex < firstVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
-              }
-            } else {
-              // Already at the first item; ensure we reach the absolute top to account for group labels.
-              scroller.scrollTop = 0;
-            }
-          } else {
-            let lastVisibleIndex = items.length - 1;
-            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemBottom = item.offsetTop + item.offsetHeight;
-                if (itemBottom > scrollBottom) {
-                  lastVisibleIndex = Math.max(0, i - 1);
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
-            if (targetIndex > lastVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
-              }
-            } else {
-              // Already at the last item; ensure we reach the true bottom.
-              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-            }
-          }
+          scroller.scrollTop = getTargetScrollTop(items, isUp, scrollTop, scroller.clientHeight, scrollArrowHeight, maxScrollTop);
         }
         timeout.start(40, scrollNextItem);
       }
@@ -177,4 +133,32 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   }
   return element;
 });
-if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+function getTargetScrollTop(items, isUp, scrollTop, clientHeight, scrollArrowHeight, maxScrollTop) {
+  if (isUp) {
+    let firstVisibleIndex = 0;
+    const visibleTop = scrollTop + scrollArrowHeight - SCROLL_EDGE_TOLERANCE_PX;
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      if (item && item.offsetTop >= visibleTop) {
+        firstVisibleIndex = i;
+        break;
+      }
+    }
+    const targetIndex = Math.max(0, firstVisibleIndex - 1);
+    const targetItem = items[targetIndex];
+    return targetIndex < firstVisibleIndex && targetItem ? normalizeScrollOffset(targetItem.offsetTop - scrollArrowHeight, maxScrollTop) : 0;
+  }
+  let lastVisibleIndex = items.length - 1;
+  const visibleBottom = scrollTop + clientHeight - scrollArrowHeight + SCROLL_EDGE_TOLERANCE_PX;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item && item.offsetTop + item.offsetHeight > visibleBottom) {
+      lastVisibleIndex = Math.max(0, i - 1);
+      break;
+    }
+  }
+  const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+  const targetItem = items[targetIndex];
+  return targetIndex > lastVisibleIndex && targetItem ? normalizeScrollOffset(targetItem.offsetTop + targetItem.offsetHeight - clientHeight + scrollArrowHeight, maxScrollTop) : maxScrollTop;
+}

package/esm/select/trigger/SelectTrigger.js

@@ -44,6 +44,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/value/SelectValue.js

@@ -22,6 +22,7 @@ export const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(co
     render,
     children: childrenProp,
     placeholder,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/separator/Separator.js

@@ -14,6 +14,7 @@ export const Separator = /*#__PURE__*/React.forwardRef(function SeparatorCompone
     className,
     render,
     orientation = 'horizontal',
+    style,
     ...elementProps
   } = componentProps;
   const state = {

package/esm/separator/SeparatorDataAttributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum SeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = "data-orientation",
+}

package/esm/separator/SeparatorDataAttributes.js

@@ -0,0 +1,8 @@
+export let SeparatorDataAttributes = /*#__PURE__*/function (SeparatorDataAttributes) {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  SeparatorDataAttributes["orientation"] = "data-orientation";
+  return SeparatorDataAttributes;
+}({});

package/esm/slider/control/SliderControl.js

@@ -2,11 +2,12 @@
 
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { activeElement, contains } from "../../floating-ui-react/utils.js";
+import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { clamp } from "../../utils/clamp.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
@@ -70,6 +71,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   const {
     render: renderProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -228,8 +230,15 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     }
   });
   const focusThumb = useStableCallback(thumbIndex => {
-    thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]')?.focus({
-      preventScroll: true
+    const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
+    if (!input) {
+      return;
+    }
+    input.focus({
+      preventScroll: true,
+      // Prevent pointer-driven focus rings in browsers that support this option.
+      // Supported in Chrome from 144+.
+      focusVisible: false
     });
   });
   const handleTouchMove = useStableCallback(nativeEvent => {
@@ -328,11 +337,11 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     if (!control) {
       return () => stopListening();
     }
-    control.addEventListener('touchstart', handleTouchStart, {
+    const unsubscribeTouchStart = addEventListener(control, 'touchstart', handleTouchStart, {
       passive: true
     });
     return () => {
-      control.removeEventListener('touchstart', handleTouchStart);
+      unsubscribeTouchStart();
       focusFrame.cancel();
       stopListening();
     };
@@ -349,7 +358,8 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       ['data-base-ui-slider-control']: renderBeforeHydration ? '' : undefined,
       onPointerDown(event) {
         const control = controlRef.current;
-        if (!control || disabled || event.defaultPrevented || !isElement(event.target) ||
+        const target = getTarget(event.nativeEvent);
+        if (!control || disabled || event.defaultPrevented || !isElement(target) ||
         // Only handle left clicks
         event.button !== 0) {
           return;
@@ -392,8 +402,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
         doc.addEventListener('pointerup', handleTouchEnd, {
           once: true
         });
-      },
-      tabIndex: -1
+      }
     }, elementProps],
     stateAttributesMapping: sliderStateAttributesMapping
   });

package/esm/slider/indicator/SliderIndicator.js

@@ -1,18 +1,18 @@
 'use client';
 
 import * as React from 'react';
-import { useOnMount } from '@base-ui/utils/useOnMount';
 import { valueToPercent } from "../../utils/valueToPercent.js";
+import { useIsHydrating } from "../../utils/useIsHydrating.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
-function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
   const visibility = start === undefined || range && end === undefined ? 'hidden' : undefined;
   const startEdge = vertical ? 'bottom' : 'insetInlineStart';
   const mainSide = vertical ? 'height' : 'width';
   const crossSide = vertical ? 'width' : 'height';
   const styles = {
-    visibility: renderBeforeHydration && !mounted ? 'hidden' : visibility,
+    visibility: renderBeforeHydration && hydrating ? 'hidden' : visibility,
     position: vertical ? 'absolute' : 'relative',
     [crossSide]: 'inherit'
   };
@@ -56,6 +56,7 @@ export const SliderIndicator = /*#__PURE__*/React.forwardRef(function SliderIndi
   const {
     render,
     className,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const {
@@ -68,11 +69,10 @@ export const SliderIndicator = /*#__PURE__*/React.forwardRef(function SliderIndi
     state,
     values
   } = useSliderRootContext();
-  const [isMounted, setIsMounted] = React.useState(false);
-  useOnMount(() => setIsMounted(true));
+  const isHydrating = useIsHydrating();
   const vertical = orientation === 'vertical';
   const range = values.length > 1;
-  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isMounted) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
+  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/slider/label/SliderLabel.js

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

package/esm/slider/root/SliderRoot.d.ts

@@ -57,7 +57,7 @@ export interface SliderRootState extends FieldRootState {
 }
 export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', SliderRootState> {
   /**
-   * The uncontrolled value of the slider when it’s initially rendered.
+   * The uncontrolled value of the slider when it's initially rendered.
    *
    * To render a controlled slider, use the `value` prop instead.
    */
@@ -97,6 +97,11 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the slider inputs.
+   * Useful when the slider is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The component orientation.
    * @default 'horizontal'

package/esm/slider/root/SliderRoot.js

@@ -13,10 +13,10 @@ import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { clamp } from "../../utils/clamp.js";
 import { areArraysEqual } from "../../utils/areArraysEqual.js";
-import { activeElement } from "../../floating-ui-react/utils.js";
+import { activeElement, contains } from "../../floating-ui-react/utils.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
-import { useField } from "../../field/useField.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { resolveAriaLabelledBy, getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
@@ -60,6 +60,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     max = 100,
     min = 0,
     minStepsBetweenValues = 0,
+    form,
     name: nameProp,
     onValueChange: onValueChangeProp,
     onValueCommitted: onValueCommittedProp,
@@ -68,6 +69,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     thumbCollisionBehavior = 'push',
     thumbAlignment = 'center',
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
@@ -133,13 +135,9 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
       setLastUsedThumbIndex(value);
     }
   });
-  useField({
+  useRegisterFieldControl(controlRef, {
     id,
-    commit: validation.commit,
-    value: valueUnwrapped,
-    controlRef,
-    name,
-    getValue: () => valueUnwrapped
+    value: valueUnwrapped
   });
   useValueChanged(valueUnwrapped, () => {
     clearErrors(name);
@@ -219,7 +217,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
   }
   useIsoLayoutEffect(() => {
     const activeEl = activeElement(ownerDocument(sliderRef.current));
-    if (disabled && activeEl && sliderRef.current?.contains(activeEl)) {
+    if (disabled && contains(sliderRef.current, activeEl)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
@@ -257,6 +255,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     lastUsedThumbIndex,
     lastChangedValueRef,
     lastChangeReasonRef,
+    form,
     locale,
     max,
     min,
@@ -281,7 +280,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     thumbMap,
     thumbRefs,
     values
-  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
+  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/esm/slider/root/SliderRootContext.d.ts

@@ -48,6 +48,7 @@ export interface SliderRootContext {
    * The minimum steps between values in a range slider.
    */
   minStepsBetweenValues: number;
+  form: string | undefined;
   name: string | undefined;
   /**
    * Function to be called when drag ends and the pointer is released.