fix: update restrictValues in useSliderState (#7338)

* [fix] useSliderState return wrong values

* [fix] RangeValue<NumberValue> test

* Revert "[fix] RangeValue<NumberValue> test"

This reverts commit 2fa7bbf.

* [fix]: add useSliderState test case

* add test

---------

Co-authored-by: GitHub <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: Danji-ya

packages/@react-stately/slider/src/useSliderState.ts

@@ -177,8 +177,8 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
   }, [step, maxValue, minValue]);
 
   let restrictValues = useCallback((values: number[]) => values?.map((val, idx) => {
-    let min = idx === 0 ? minValue : val[idx - 1];
-    let max = idx === values.length - 1 ? maxValue : val[idx + 1];
+    let min = idx === 0 ? minValue : values[idx - 1];
+    let max = idx === values.length - 1 ? maxValue : values[idx + 1];
     return snapValueToStep(val, min, max, step);
   }), [minValue, maxValue, step]);
 

packages/@react-stately/slider/test/useSliderState.test.js

@@ -87,6 +87,54 @@ describe('useSliderState', () => {
     expect(result.current.getThumbMinValue(2)).toBe(90);
   });
 
+  it('should round values to nearest step with two thumbs', () => {
+    let result = renderHook(() => useSliderState({
+      minValue: 1,
+      maxValue: 15,
+      step: 2.5,
+      defaultValue: [1, 13],
+      numberFormatter
+    })).result;
+
+    expect(result.current.values).toEqual([1, 13.5]);
+    expect(result.current.getThumbMinValue(1)).toBe(1);
+
+    act(() => result.current.setThumbValue(0, 3));
+    expect(result.current.values).toEqual([3.5, 13.5]);
+    expect(result.current.getThumbMinValue(1)).toBe(3.5);
+    expect(result.current.getThumbMaxValue(0)).toBe(13.5);
+
+    act(() => result.current.setThumbValue(1, 5));
+    expect(result.current.values).toEqual([3.5, 6]);
+    expect(result.current.getThumbMaxValue(0)).toBe(6);
+  });
+
+  it('should round values to nearest step with three thumbs', () => {
+    let result = renderHook(() => useSliderState({
+      minValue: 1,
+      maxValue: 15,
+      step: 2.5,
+      defaultValue: [1, 6, 13],
+      numberFormatter
+    })).result;
+
+    expect(result.current.values).toEqual([1, 6, 13.5]);
+    expect(result.current.getThumbMinValue(1)).toBe(1);
+    expect(result.current.getThumbMinValue(2)).toBe(6);
+
+    act(() => result.current.setThumbValue(0, 3));
+    expect(result.current.values).toEqual([3.5, 6, 13.5]);
+    expect(result.current.getThumbMinValue(2)).toBe(6);
+    expect(result.current.getThumbMinValue(1)).toBe(3.5);
+    expect(result.current.getThumbMaxValue(0)).toBe(6);
+    expect(result.current.getThumbMaxValue(1)).toBe(13.5);
+
+    act(() => result.current.setThumbValue(2, 5));
+    expect(result.current.values).toEqual([3.5, 6, 6]);
+    expect(result.current.getThumbMaxValue(0)).toBe(6);
+    expect(result.current.getThumbMaxValue(1)).toBe(6);
+  });
+
   it('should call onChange and onChangeEnd appropriately', () => {
     let onChangeEndSpy = jest.fn();
     let onChangeSpy = jest.fn();