Incremental TS Strict stately - utils (#3926)

* Incremental TS Strict stately - utils

Author: snowystinger

packages/@react-stately/selection/src/useMultipleSelectionState.ts

@@ -119,7 +119,7 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
   };
 }
 
-function convertSelection(selection: 'all' | Iterable<Key>, defaultValue?: Selection): 'all' | Selection {
+function convertSelection(selection: 'all' | Iterable<Key>, defaultValue?: Selection): 'all' | Set<Key> {
   if (!selection) {
     return defaultValue;
   }

packages/@react-stately/utils/src/number.ts

@@ -18,7 +18,9 @@ export function clamp(value: number, min: number = -Infinity, max: number = Infi
   return newValue;
 }
 
-export function snapValueToStep(value: number, min: number, max: number, step: number): number {
+export function snapValueToStep(value: number, min: number | undefined, max: number | undefined, step: number): number {
+  min = Number(min);
+  max = Number(max);
   let remainder = ((value - (isNaN(min) ? 0 : min)) % step);
   let snappedValue = Math.abs(remainder) * 2 >= step
     ? value + Math.sign(remainder) * (step - Math.abs(remainder))

packages/@react-stately/utils/src/useControlledState.ts

@@ -12,11 +12,9 @@
 
 import {useCallback, useEffect, useRef, useState} from 'react';
 
-export function useControlledState<T>(
-  value: T,
-  defaultValue: T,
-  onChange: (value: T, ...args: any[]) => void
-): [T, (value: T, ...args: any[]) => void]  {
+export function useControlledState<T, C = T>(value: T, defaultValue: T | undefined, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
+export function useControlledState<T, C = T>(value: T | undefined, defaultValue: T, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
+export function useControlledState<T, C = T>(value: T, defaultValue: T, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void] {
   let [stateValue, setStateValue] = useState(value || defaultValue);
 
   let isControlledRef = useRef(value !== undefined);

packages/@react-stately/utils/test/number.test.js renamed to packages/@react-stately/utils/test/number.test.ts

@@ -23,7 +23,7 @@ describe('useControlledState tests', function () {
 
   it('can handle default setValue behavior, wont invoke onChange for the same value twice in a row', () => {
     let onChangeSpy = jest.fn();
-    let {result} = renderHook(() => useControlledState(undefined, 'defaultValue', onChangeSpy));
+    let {result} = renderHook(() => useControlledState<string>(undefined, 'defaultValue', onChangeSpy));
     let [value, setValue] = result.current;
     expect(value).toBe('defaultValue');
     expect(onChangeSpy).not.toHaveBeenCalled();
@@ -54,7 +54,7 @@ describe('useControlledState tests', function () {
 
   it('using NaN will only trigger onChange once', () => {
     let onChangeSpy = jest.fn();
-    let {result} = renderHook(() => useControlledState(undefined, undefined, onChangeSpy));
+    let {result} = renderHook(() => useControlledState<number | undefined>(undefined, undefined, onChangeSpy));
     let [value, setValue] = result.current;
     expect(value).not.toBeDefined();
     expect(onChangeSpy).not.toHaveBeenCalled();
@@ -70,13 +70,15 @@ describe('useControlledState tests', function () {
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
 
+  // @deprecated - ignore TS
   it('can handle callback setValue behavior', () => {
     let onChangeSpy = jest.fn();
     let consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-    let {result} = renderHook(() => useControlledState(undefined, 'defaultValue', onChangeSpy));
+    let {result} = renderHook(() => useControlledState<string>(undefined, 'defaultValue', onChangeSpy));
     let [value, setValue] = result.current;
     expect(value).toBe('defaultValue');
     expect(onChangeSpy).not.toHaveBeenCalled();
+    // @ts-ignore
     act(() => setValue((prevValue) => {
       expect(prevValue).toBe('defaultValue');
       return 'newValue';
@@ -116,7 +118,7 @@ describe('useControlledState tests', function () {
 
   it('can handle controlled setValue behavior', () => {
     let onChangeSpy = jest.fn();
-    let {result} = renderHook(() => useControlledState('controlledValue', 'defaultValue', onChangeSpy));
+    let {result} = renderHook(() => useControlledState<string>('controlledValue', 'defaultValue', onChangeSpy));
     let [value, setValue] = result.current;
     expect(value).toBe('controlledValue');
     expect(onChangeSpy).not.toHaveBeenCalled();
@@ -134,6 +136,7 @@ describe('useControlledState tests', function () {
     expect(onChangeSpy).not.toHaveBeenCalled();
   });
 
+  // @deprecated - ignore TS
   it('can handle controlled callback setValue behavior', () => {
     let onChangeSpy = jest.fn();
     let consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
@@ -142,6 +145,7 @@ describe('useControlledState tests', function () {
     expect(value).toBe('controlledValue');
     expect(onChangeSpy).not.toHaveBeenCalled();
 
+    // @ts-ignore
     act(() => setValue((prevValue) => {
       expect(prevValue).toBe('controlledValue');
       return 'newValue';
@@ -152,6 +156,7 @@ describe('useControlledState tests', function () {
 
     onChangeSpy.mockClear();
 
+    // @ts-ignore
     act(() => setValue((prevValue) => {
       expect(prevValue).toBe('controlledValue');
       return 'controlledValue';
@@ -162,6 +167,7 @@ describe('useControlledState tests', function () {
     expect(consoleWarnSpy).toHaveBeenLastCalledWith('We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320');
   });
 
+  // @deprecated - ignore TS
   it('can handle controlled callback setValue behavior after prop change', () => {
     let onChangeSpy = jest.fn();
     let propValue = 'controlledValue';
@@ -175,6 +181,7 @@ describe('useControlledState tests', function () {
     rerender();
     [value, setValue] = result.current;
 
+    // @ts-ignore
     act(() => setValue((prevValue) => {
       expect(prevValue).toBe('updated');
       return 'newValue';
@@ -185,6 +192,7 @@ describe('useControlledState tests', function () {
 
     onChangeSpy.mockClear();
 
+    // @ts-ignore
     act(() => setValue((prevValue) => {
       expect(prevValue).toBe('updated');
       return 'updated';
@@ -213,6 +221,7 @@ describe('useControlledState tests', function () {
     let [value] = result.current;
     expect(value).toBe('controlledValue');
     expect(onChangeSpy).not.toHaveBeenCalled();
+    // @ts-ignore this is an invalid case anyways
     rerender({value: undefined, defaultValue: 'defaultValue', onChange: onChangeSpy});
     expect(consoleWarnSpy).toHaveBeenLastCalledWith('WARN: A component changed from controlled to uncontrolled.');
   });
@@ -233,6 +242,7 @@ describe('useControlledState tests', function () {
     let [value] = result.current;
     expect(value).toBe('defaultValue');
     expect(onChangeSpy).not.toHaveBeenCalled();
+    // @ts-ignore this is an invalid case anyways
     rerender({value: 'controlledValue', defaultValue: 'defaultValue', onChange: onChangeSpy});
     expect(consoleWarnSpy).toHaveBeenLastCalledWith('WARN: A component changed from uncontrolled to controlled.');
   });
@@ -323,7 +333,7 @@ describe('useControlledState tests', function () {
     let resolve;
     const AsyncChild = React.lazy(() => new Promise((r) => {resolve = r;}));
     function Test(props) {
-      let [value, setValue] = useControlledState(undefined, 1, props.onChange);
+      let [value, setValue] = useControlledState<number>(undefined, 1, props.onChange);
       let [showChild, setShowChild] = useState(false);
       let [isPending, startTransition] = React.useTransition();
 

packages/@react-stately/utils/test/useControlledState.test.js renamed to packages/@react-stately/utils/test/useControlledState.test.tsx

@@ -49,6 +49,7 @@
           "./packages/@react-spectrum/text",
           "./packages/@react-spectrum/view",
           "./packages/@react-spectrum/well",
+          "./packages/@react-stately/utils",
           "./packages/@react-types/a",
           "./packages/@react-types/b",
           "./packages/@react-types/checkbox",