[Slider] Narrow the type of value in callbacks

packages/react/src/slider/root/SliderRoot.spec.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { expectType } from '#test-utils';
+import { Slider } from '@base-ui-components/react/slider';
+
+const value: number = 25;
+const array = [25];
+
+const singleValueWithOnValueChange = (
+  <Slider.Root value={value} onValueChange={(v) => expectType<number, typeof v>(v)} />
+);
+const singleDefaultValueWithOnValueChange = (
+  <Slider.Root defaultValue={25} onValueChange={(v) => expectType<number, typeof v>(v)} />
+);
+
+const arrayValueWithOnValueChange = (
+  <Slider.Root value={array} onValueChange={(v) => expectType<number[], typeof v>(v)} />
+);
+const arrayDefaultValueWithOnValueChange = (
+  <Slider.Root defaultValue={[25]} onValueChange={(v) => expectType<number[], typeof v>(v)} />
+);
+
+const singleValueWithOnValueCommitted = (
+  <Slider.Root value={value} onValueCommitted={(v) => expectType<number, typeof v>(v)} />
+);
+const singleDefaultValueWithOnValueCommitted = (
+  <Slider.Root defaultValue={25} onValueCommitted={(v) => expectType<number, typeof v>(v)} />
+);
+
+const arrayValueWithOnValueCommitted = (
+  <Slider.Root value={array} onValueCommitted={(v) => expectType<number[], typeof v>(v)} />
+);
+const arrayDefaultValueWithOnValueCommitted = (
+  <Slider.Root defaultValue={[25]} onValueCommitted={(v) => expectType<number[], typeof v>(v)} />
+);
+
+const singleValueExplicitTypeAnnotation = (
+  <Slider.Root<number> onValueChange={(v) => expectType<number, typeof v>(v)} />
+);
+const arrayValueExplicitTypeAnnotation = (
+  <Slider.Root<number[]> onValueChange={(v) => expectType<number[], typeof v>(v)} />
+);

packages/react/src/slider/root/SliderRoot.tsx

@@ -18,8 +18,8 @@ import { useFieldRootContext } from '../../field/root/FieldRootContext';
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-const SliderRoot = React.forwardRef(function SliderRoot(
-  props: SliderRoot.Props,
+const SliderRoot = React.forwardRef(function SliderRoot<Value extends number | readonly number[]>(
+  props: SliderRoot.Props<Value>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -59,8 +59,9 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     min,
     minStepsBetweenValues,
     name: nameProp ?? '',
-    onValueChange: onValueChangeProp ?? NOOP,
-    onValueCommitted: onValueCommittedProp ?? NOOP,
+    onValueChange: (onValueChangeProp as useSliderRoot.Parameters['onValueChange']) ?? NOOP,
+    onValueCommitted:
+      (onValueCommittedProp as useSliderRoot.Parameters['onValueCommitted']) ?? NOOP,
     orientation,
     rootRef: forwardedRef,
     step,
@@ -118,7 +119,14 @@ const SliderRoot = React.forwardRef(function SliderRoot(
       <CompositeList elementsRef={slider.thumbRefs}>{renderElement()}</CompositeList>
     </SliderRootContext.Provider>
   );
-});
+}) as {
+  <Value extends number | readonly number[]>(
+    props: SliderRoot.Props<Value> & {
+      ref?: React.RefObject<HTMLDivElement>;
+    },
+  ): React.JSX.Element;
+  propTypes?: any;
+};
 
 export namespace SliderRoot {
   export interface State extends FieldRoot.State {
@@ -157,7 +165,7 @@ export namespace SliderRoot {
     values: readonly number[];
   }
 
-  export interface Props
+  export interface Props<Value extends number | readonly number[] = number | readonly number[]>
     extends Partial<
         Pick<
           useSliderRoot.Parameters,
@@ -166,8 +174,6 @@ export namespace SliderRoot {
           | 'min'
           | 'minStepsBetweenValues'
           | 'name'
-          | 'onValueChange'
-          | 'onValueCommitted'
           | 'orientation'
           | 'largeStep'
           | 'step'
@@ -179,7 +185,7 @@ export namespace SliderRoot {
      *
      * To render a controlled slider, use the `value` prop instead.
      */
-    defaultValue?: number | readonly number[];
+    defaultValue?: Value;
     /**
      * Whether the component should ignore user interaction.
      * @default false
@@ -197,10 +203,30 @@ export namespace SliderRoot {
      * The value of the slider.
      * For ranged sliders, provide an array with two values.
      */
-    value?: number | readonly number[];
+    value?: Value;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     *
+     * @param {number | number[]} value The new value.
+     * @param {Event} event The corresponding event that initiated the change.
+     * You can pull out the new value by accessing `event.target.value` (any).
+     * @param {number} activeThumbIndex Index of the currently moved thumb.
+     */
+    onValueChange?: (
+      value: Value extends number ? number : Value,
+      event: Event,
+      activeThumbIndex: number,
+    ) => void;
+    /**
+     * Callback function that is fired when the `pointerup` is triggered.
+     *
+     * @param {number | number[]} value The new value.
+     * @param {Event} event The corresponding event that initiated the change.
+     * **Warning**: This is a generic event not a change event.
+     */
+    onValueCommitted?: (value: Value extends number ? number : Value, event: Event) => void;
   }
 }
-
 export { SliderRoot };
 
 SliderRoot.propTypes /* remove-proptypes */ = {
@@ -288,7 +314,7 @@ SliderRoot.propTypes /* remove-proptypes */ = {
   /**
    * Callback function that is fired when the slider's value changed.
    *
-   * @param {number | readonly number[]} value The new value.
+   * @param {number | number[]} value The new value.
    * @param {Event} event The corresponding event that initiated the change.
    * You can pull out the new value by accessing `event.target.value` (any).
    * @param {number} activeThumbIndex Index of the currently moved thumb.

packages/react/test/index.ts

@@ -1,3 +1,3 @@
 export { createRenderer } from './createRenderer';
 export { describeConformance } from './describeConformance';
-export { isJSDOM } from './utils';
+export * from './utils';

packages/react/test/utils.ts

@@ -2,3 +2,20 @@
  * Whether the test runs in JSDOM environment
  */
 export const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+// https://stackoverflow.com/questions/53807517/how-to-test-if-two-types-are-exactly-the-same
+export type IfEquals<T, U, Y = unknown, N = never> =
+  (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? Y : N;
+
+/**
+ * Issues a type error if `Expected` is not identical to `Actual`.
+ *
+ * `Expected` should be declared when invoking `expectType`.
+ * `Actual` should almost always we be a `typeof value` statement.
+ *
+ * @example `expectType<number | string, typeof value>(value)`
+ * TypeScript issues a type error since `value is not assignable to never`.
+ * This means `typeof value` is not identical to `number | string`
+ * @param _actual
+ */
+export function expectType<Expected, Actual>(_actual: IfEquals<Actual, Expected, Actual>): void {}