@base-ui/react 1.6.0 → 1.7.0

package/slider/root/SliderRoot.d.ts

@@ -68,7 +68,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    */
   disabled?: boolean | undefined;
   /**
-   * Options to format the input value.
+   * Options to format the value.
    */
   format?: Intl.NumberFormatOptions | undefined;
   /**
@@ -139,12 +139,14 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
   thumbCollisionBehavior?: 'push' | 'swap' | 'none' | undefined;
   /**
    * The value of the slider.
-   * For ranged sliders, provide an array with two values.
+   * For range sliders, provide an array with one value per thumb.
    */
   value?: Value | undefined;
   /**
    * Callback function that is fired when the slider's value changed.
-   * You can pull out the new value by accessing `event.target.value` (any).
+   * Receives the new value as the first argument; the originating event is
+   * available as `eventDetails.event`. The value is also reflected on
+   * `eventDetails.event.target.value` for form integration.
    *
    * The `eventDetails.reason` indicates what triggered the change:
    *

package/slider/root/SliderRoot.js

@@ -10,7 +10,6 @@ var React = _interopRequireWildcard(require("react"));
 var _owner = require("@base-ui/utils/owner");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _warn = require("@base-ui/utils/warn");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
@@ -33,17 +32,8 @@ var _stateAttributesMapping = require("./stateAttributesMapping");
 var _SliderRootContext = require("./SliderRootContext");
 var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
-function getSliderChangeEventReason(event) {
-  return 'key' in event ? _reasons.REASONS.keyboard : _reasons.REASONS.inputChange;
-}
 function areValuesEqual(newValue, oldValue) {
-  if (typeof newValue === 'number' && typeof oldValue === 'number') {
-    return newValue === oldValue;
-  }
-  if (Array.isArray(newValue) && Array.isArray(oldValue)) {
-    return (0, _areArraysEqual.areArraysEqual)(newValue, oldValue);
-  }
-  return false;
+  return newValue === oldValue || Array.isArray(newValue) && Array.isArray(oldValue) && (0, _areArraysEqual.areArraysEqual)(newValue, oldValue);
 }
 
 /**
@@ -112,8 +102,6 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
   const sliderRef = React.useRef(null);
   const controlRef = React.useRef(null);
   const thumbRefs = React.useRef([]);
-  // The input element nested in the pressed thumb.
-  const pressedInputRef = React.useRef(null);
   // The px distance between the pointer and the center of a pressed thumb.
   const pressedThumbCenterOffsetRef = React.useRef(null);
   // The index of the pressed thumb, or the closest thumb if the `Control` was pressed.
@@ -122,8 +110,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
   const pressedThumbIndexRef = React.useRef(-1);
   // The values when the current drag interaction started.
   const pressedValuesRef = React.useRef(null);
-  const lastChangeReasonRef = React.useRef('none');
-  const formatOptionsRef = (0, _useValueAsRef.useValueAsRef)(format);
+  const lastChangeReasonRef = React.useRef(_reasons.REASONS.none);
 
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
@@ -139,19 +126,6 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
       setLastUsedThumbIndex(value);
     }
   });
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, id, valueUnwrapped, undefined, !disabled, nameProp);
-  (0, _useValueChanged.useValueChanged)(valueUnwrapped, () => {
-    clearErrors(name);
-    validation.change(valueUnwrapped);
-    const initialValue = validityData.initialValue;
-    let isDirty;
-    if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
-      isDirty = !(0, _areArraysEqual.areArraysEqual)(valueUnwrapped, initialValue);
-    } else {
-      isDirty = valueUnwrapped !== initialValue;
-    }
-    setDirty(isDirty);
-  });
   const registerFieldControlRef = (0, _useStableCallback.useStableCallback)(element => {
     if (element) {
       controlRef.current = element;
@@ -162,22 +136,33 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     if (!range) {
       return [(0, _clamp.clamp)(valueUnwrapped, min, max)];
     }
-    return valueUnwrapped.slice().sort(_asc.asc);
+    return valueUnwrapped.map(value => (0, _clamp.clamp)(value, min, max)).sort(_asc.asc);
   }, [max, min, range, valueUnwrapped]);
+  const fieldValue = range ? values : values[0];
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, id, fieldValue, undefined, !disabled, nameProp);
+  (0, _useValueChanged.useValueChanged)(fieldValue, () => {
+    clearErrors(name);
+    validation.change(fieldValue);
+    const initialValue = validityData.initialValue;
+    let isDirty;
+    if (Array.isArray(fieldValue) && Array.isArray(initialValue)) {
+      isDirty = !(0, _areArraysEqual.areArraysEqual)(fieldValue, initialValue);
+    } else {
+      isDirty = fieldValue !== initialValue;
+    }
+    setDirty(isDirty);
+  });
   const setValue = (0, _useStableCallback.useStableCallback)((newValue, details) => {
     if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
       return false;
     }
-    const changeDetails = details ?? (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, undefined, undefined, {
-      activeThumbIndex: -1
-    });
 
     // Redefine target to allow name and value to be read.
     // This allows seamless integration with the most popular form libraries.
     // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
     // Clone the event to not override `target` of the original event.
-    const nativeEvent = changeDetails.event;
-    const EventConstructor = nativeEvent.constructor ?? Event;
+    const nativeEvent = details.event;
+    const EventConstructor = nativeEvent.constructor;
     const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
     Object.defineProperty(clonedEvent, 'target', {
       writable: true,
@@ -186,19 +171,19 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
         name
       }
     });
-    changeDetails.event = clonedEvent;
-    onValueChange(newValue, changeDetails);
-    if (changeDetails.isCanceled) {
+    details.event = clonedEvent;
+    onValueChange(newValue, details);
+    if (details.isCanceled) {
       return false;
     }
-    lastChangeReasonRef.current = changeDetails.reason;
+    lastChangeReasonRef.current = details.reason;
     setValueUnwrapped(newValue);
     return true;
   });
   const handleInputChange = (0, _useStableCallback.useStableCallback)((valueInput, index, event) => {
     const newValue = (0, _getSliderValue.getSliderValue)(valueInput, index, min, max, range, values);
     if ((0, _validateMinimumDistance.validateMinimumDistance)(newValue, step, minStepsBetweenValues)) {
-      const reason = getSliderChangeEventReason(event);
+      const reason = 'key' in event ? _reasons.REASONS.keyboard : _reasons.REASONS.inputChange;
       const applied = setValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, event.nativeEvent, undefined, {
         activeThumbIndex: index
       }));
@@ -208,23 +193,28 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
       }
     }
   });
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     if (min >= max) {
       (0, _warn.warn)('Slider `max` must be greater than `min`.');
     }
   }
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!disabled) {
+      return;
+    }
     const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(sliderRef.current));
-    if (disabled && (0, _utils.contains)(sliderRef.current, activeEl)) {
+    if ((0, _utils.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
       activeEl.blur();
     }
-  }, [disabled]);
-  if (disabled && active !== -1) {
-    setActive(-1);
-  }
+    if (active !== -1) {
+      setActive(-1);
+    }
+  }, [active, disabled, setActive]);
   const state = React.useMemo(() => ({
     ...fieldState,
     activeThumbIndex: active,
@@ -243,7 +233,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     disabled,
     dragging,
     validation,
-    formatOptionsRef,
+    format,
     handleInputChange,
     indicatorPosition,
     inset: thumbAlignment !== 'center',
@@ -260,7 +250,6 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     name,
     onValueCommitted,
     orientation,
-    pressedInputRef,
     pressedThumbCenterOffsetRef,
     pressedThumbIndexRef,
     pressedValuesRef,
@@ -277,7 +266,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     thumbMap,
     thumbRefs,
     values
-  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, 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]);
+  }), [active, ariaLabelledby, defaultLabelId, disabled, dragging, validation, format, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, registerFieldControlRef, setActive, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, values]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/slider/root/SliderRoot.mjs

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui/utils/warn';
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
@@ -27,17 +26,8 @@ import { sliderStateAttributesMapping } from "./stateAttributesMapping.mjs";
 import { SliderRootContext } from "./SliderRootContext.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-function getSliderChangeEventReason(event) {
-  return 'key' in event ? REASONS.keyboard : REASONS.inputChange;
-}
 function areValuesEqual(newValue, oldValue) {
-  if (typeof newValue === 'number' && typeof oldValue === 'number') {
-    return newValue === oldValue;
-  }
-  if (Array.isArray(newValue) && Array.isArray(oldValue)) {
-    return areArraysEqual(newValue, oldValue);
-  }
-  return false;
+  return newValue === oldValue || Array.isArray(newValue) && Array.isArray(oldValue) && areArraysEqual(newValue, oldValue);
 }
 
 /**
@@ -106,8 +96,6 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
   const sliderRef = React.useRef(null);
   const controlRef = React.useRef(null);
   const thumbRefs = React.useRef([]);
-  // The input element nested in the pressed thumb.
-  const pressedInputRef = React.useRef(null);
   // The px distance between the pointer and the center of a pressed thumb.
   const pressedThumbCenterOffsetRef = React.useRef(null);
   // The index of the pressed thumb, or the closest thumb if the `Control` was pressed.
@@ -116,8 +104,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
   const pressedThumbIndexRef = React.useRef(-1);
   // The values when the current drag interaction started.
   const pressedValuesRef = React.useRef(null);
-  const lastChangeReasonRef = React.useRef('none');
-  const formatOptionsRef = useValueAsRef(format);
+  const lastChangeReasonRef = React.useRef(REASONS.none);
 
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
@@ -133,19 +120,6 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
       setLastUsedThumbIndex(value);
     }
   });
-  useRegisterFieldControl(validation.inputRef, id, valueUnwrapped, undefined, !disabled, nameProp);
-  useValueChanged(valueUnwrapped, () => {
-    clearErrors(name);
-    validation.change(valueUnwrapped);
-    const initialValue = validityData.initialValue;
-    let isDirty;
-    if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
-      isDirty = !areArraysEqual(valueUnwrapped, initialValue);
-    } else {
-      isDirty = valueUnwrapped !== initialValue;
-    }
-    setDirty(isDirty);
-  });
   const registerFieldControlRef = useStableCallback(element => {
     if (element) {
       controlRef.current = element;
@@ -156,22 +130,33 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     if (!range) {
       return [clamp(valueUnwrapped, min, max)];
     }
-    return valueUnwrapped.slice().sort(asc);
+    return valueUnwrapped.map(value => clamp(value, min, max)).sort(asc);
   }, [max, min, range, valueUnwrapped]);
+  const fieldValue = range ? values : values[0];
+  useRegisterFieldControl(validation.inputRef, id, fieldValue, undefined, !disabled, nameProp);
+  useValueChanged(fieldValue, () => {
+    clearErrors(name);
+    validation.change(fieldValue);
+    const initialValue = validityData.initialValue;
+    let isDirty;
+    if (Array.isArray(fieldValue) && Array.isArray(initialValue)) {
+      isDirty = !areArraysEqual(fieldValue, initialValue);
+    } else {
+      isDirty = fieldValue !== initialValue;
+    }
+    setDirty(isDirty);
+  });
   const setValue = useStableCallback((newValue, details) => {
     if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
       return false;
     }
-    const changeDetails = details ?? createChangeEventDetails(REASONS.none, undefined, undefined, {
-      activeThumbIndex: -1
-    });
 
     // Redefine target to allow name and value to be read.
     // This allows seamless integration with the most popular form libraries.
     // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
     // Clone the event to not override `target` of the original event.
-    const nativeEvent = changeDetails.event;
-    const EventConstructor = nativeEvent.constructor ?? Event;
+    const nativeEvent = details.event;
+    const EventConstructor = nativeEvent.constructor;
     const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
     Object.defineProperty(clonedEvent, 'target', {
       writable: true,
@@ -180,19 +165,19 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
         name
       }
     });
-    changeDetails.event = clonedEvent;
-    onValueChange(newValue, changeDetails);
-    if (changeDetails.isCanceled) {
+    details.event = clonedEvent;
+    onValueChange(newValue, details);
+    if (details.isCanceled) {
       return false;
     }
-    lastChangeReasonRef.current = changeDetails.reason;
+    lastChangeReasonRef.current = details.reason;
     setValueUnwrapped(newValue);
     return true;
   });
   const handleInputChange = useStableCallback((valueInput, index, event) => {
     const newValue = getSliderValue(valueInput, index, min, max, range, values);
     if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
-      const reason = getSliderChangeEventReason(event);
+      const reason = 'key' in event ? REASONS.keyboard : REASONS.inputChange;
       const applied = setValue(newValue, createChangeEventDetails(reason, event.nativeEvent, undefined, {
         activeThumbIndex: index
       }));
@@ -202,23 +187,28 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
       }
     }
   });
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     if (min >= max) {
       warn('Slider `max` must be greater than `min`.');
     }
   }
   useIsoLayoutEffect(() => {
+    if (!disabled) {
+      return;
+    }
     const activeEl = activeElement(ownerDocument(sliderRef.current));
-    if (disabled && contains(sliderRef.current, activeEl)) {
+    if (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
       activeEl.blur();
     }
-  }, [disabled]);
-  if (disabled && active !== -1) {
-    setActive(-1);
-  }
+    if (active !== -1) {
+      setActive(-1);
+    }
+  }, [active, disabled, setActive]);
   const state = React.useMemo(() => ({
     ...fieldState,
     activeThumbIndex: active,
@@ -237,7 +227,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     disabled,
     dragging,
     validation,
-    formatOptionsRef,
+    format,
     handleInputChange,
     indicatorPosition,
     inset: thumbAlignment !== 'center',
@@ -254,7 +244,6 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     name,
     onValueCommitted,
     orientation,
-    pressedInputRef,
     pressedThumbCenterOffsetRef,
     pressedThumbIndexRef,
     pressedValuesRef,
@@ -271,7 +260,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, 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]);
+  }), [active, ariaLabelledby, defaultLabelId, disabled, dragging, validation, format, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, registerFieldControlRef, setActive, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, values]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/slider/root/SliderRootContext.d.mts

@@ -17,7 +17,10 @@ export interface SliderRootContext {
   dragging: boolean;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
-  formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
+  /**
+   * Options to format the value.
+   */
+  format: Intl.NumberFormatOptions | undefined;
   handleInputChange: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
   indicatorPosition: (number | undefined)[];
   inset: boolean;
@@ -58,7 +61,6 @@ export interface SliderRootContext {
    * @default 'horizontal'
    */
   orientation: Orientation;
-  pressedInputRef: React.RefObject<HTMLInputElement | null>;
   pressedThumbCenterOffsetRef: React.RefObject<number | null>;
   pressedThumbIndexRef: React.RefObject<number>;
   pressedValuesRef: React.RefObject<readonly number[] | null>;
@@ -73,7 +75,7 @@ export interface SliderRootContext {
    * and drag interactions. Returns `true` when the value was applied, or `false`
    * when it was invalid (NaN), unchanged, or the change was canceled.
    */
-  setValue: (newValue: number | number[], details?: SliderRoot.ChangeEventDetails) => boolean;
+  setValue: (newValue: number | number[], details: SliderRoot.ChangeEventDetails) => boolean;
   state: SliderRootState;
   /**
    * The step increment of the slider when incrementing or decrementing. It will snap
@@ -82,7 +84,7 @@ export interface SliderRootContext {
    */
   step: number;
   thumbCollisionBehavior: 'push' | 'swap' | 'none';
-  thumbMap: Map<Node, CompositeMetadata<ThumbMetadata> | null>;
+  thumbMap: Map<Node, CompositeMetadata<ThumbMetadata>>;
   thumbRefs: React.RefObject<(HTMLElement | null)[]>;
   /**
    * The value(s) of the slider

package/slider/root/SliderRootContext.d.ts

@@ -17,7 +17,10 @@ export interface SliderRootContext {
   dragging: boolean;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
-  formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
+  /**
+   * Options to format the value.
+   */
+  format: Intl.NumberFormatOptions | undefined;
   handleInputChange: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
   indicatorPosition: (number | undefined)[];
   inset: boolean;
@@ -58,7 +61,6 @@ export interface SliderRootContext {
    * @default 'horizontal'
    */
   orientation: Orientation;
-  pressedInputRef: React.RefObject<HTMLInputElement | null>;
   pressedThumbCenterOffsetRef: React.RefObject<number | null>;
   pressedThumbIndexRef: React.RefObject<number>;
   pressedValuesRef: React.RefObject<readonly number[] | null>;
@@ -73,7 +75,7 @@ export interface SliderRootContext {
    * and drag interactions. Returns `true` when the value was applied, or `false`
    * when it was invalid (NaN), unchanged, or the change was canceled.
    */
-  setValue: (newValue: number | number[], details?: SliderRoot.ChangeEventDetails) => boolean;
+  setValue: (newValue: number | number[], details: SliderRoot.ChangeEventDetails) => boolean;
   state: SliderRootState;
   /**
    * The step increment of the slider when incrementing or decrementing. It will snap
@@ -82,7 +84,7 @@ export interface SliderRootContext {
    */
   step: number;
   thumbCollisionBehavior: 'push' | 'swap' | 'none';
-  thumbMap: Map<Node, CompositeMetadata<ThumbMetadata> | null>;
+  thumbMap: Map<Node, CompositeMetadata<ThumbMetadata>>;
   thumbRefs: React.RefObject<(HTMLElement | null)[]>;
   /**
    * The value(s) of the slider

package/slider/root/stateAttributesMapping.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sliderStateAttributesMapping = void 0;
 var _constants = require("../../internals/field-constants/constants");
+const nullMapping = () => null;
 const sliderStateAttributesMapping = exports.sliderStateAttributesMapping = {
-  activeThumbIndex: () => null,
-  max: () => null,
-  min: () => null,
-  minStepsBetweenValues: () => null,
-  step: () => null,
-  values: () => null,
+  activeThumbIndex: nullMapping,
+  max: nullMapping,
+  min: nullMapping,
+  minStepsBetweenValues: nullMapping,
+  step: nullMapping,
+  values: nullMapping,
   ..._constants.fieldValidityMapping
 };

package/slider/root/stateAttributesMapping.mjs

@@ -1,10 +1,11 @@
 import { fieldValidityMapping } from "../../internals/field-constants/constants.mjs";
+const nullMapping = () => null;
 export const sliderStateAttributesMapping = {
-  activeThumbIndex: () => null,
-  max: () => null,
-  min: () => null,
-  minStepsBetweenValues: () => null,
-  step: () => null,
-  values: () => null,
+  activeThumbIndex: nullMapping,
+  max: nullMapping,
+  min: nullMapping,
+  minStepsBetweenValues: nullMapping,
+  step: nullMapping,
+  values: nullMapping,
   ...fieldValidityMapping
 };