Merge branch 'main' into at/wizard-integration

Author: TheSonOfThomp

.changeset/useControlled-inferred-types.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/hooks': patch
+---
+
+The type of the returned `value` is now inferred from the types of the parameters in `useControlled`

packages/hooks/src/useControlled/useControlled.spec.tsx

@@ -123,7 +123,7 @@ describe('packages/hooks/useControlled', () => {
   });
 
   describe('Uncontrolled', () => {
-    test('calling without a value sets value to `initialValue`', () => {
+    test('calling without a `controlledValue` sets value to `initialValue`', () => {
       const {
         result: { current },
       } = renderUseControlledHook(undefined, () => {}, 'apple');
@@ -271,5 +271,103 @@ describe('packages/hooks/useControlled', () => {
         expect(input).toHaveValue('carrot');
       });
     });
+
+    // eslint-disable-next-line jest/no-disabled-tests
+    describe.skip('types', () => {
+      test('controlledValue and initial value must be the same type', () => {
+        useControlled(1, jest.fn(), 42);
+        // @ts-expect-error
+        useControlled(1, jest.fn(), 'foo');
+      });
+
+      test('return type is inferred from `controlledValue`', () => {
+        {
+          const { value, updateValue } = useControlled(1);
+          const _N: number = value;
+          // @ts-expect-error
+          const _S: string = value;
+
+          updateValue(5);
+          // @ts-expect-error
+          updateValue('foo');
+        }
+
+        {
+          const { value, updateValue } = useControlled('hello');
+          const _S: string = value;
+          // @ts-expect-error
+          const _N: number = value;
+
+          updateValue('foo');
+          // @ts-expect-error
+          updateValue(5);
+        }
+      });
+
+      test('return type is inferred from `initialValue` if controlledValue is undefined', () => {
+        const { value, updateValue } = useControlled(undefined, () => {}, 1);
+        const _N: number = value;
+        // @ts-expect-error
+        const _S: string = value;
+
+        updateValue(5);
+        // @ts-expect-error
+        updateValue('foo');
+        // @ts-expect-error
+        updateValue(undefined);
+      });
+
+      test('return type is `undefined` if no initial or controlledValue are provided', () => {
+        const { value, updateValue } = useControlled(
+          undefined,
+          _v => {},
+          undefined,
+        );
+        const _A: undefined = value;
+        // @ts-expect-error
+        const _N: number = value;
+        // @ts-expect-error
+        const _S: string = value;
+
+        updateValue(undefined);
+        // @ts-expect-error
+        updateValue(5);
+        // @ts-expect-error
+        updateValue('foo');
+      });
+
+      test('return type is explicit if generic param is provided', () => {
+        {
+          const { value, updateValue } = useControlled<number>(
+            undefined,
+            () => {},
+          );
+          const _N: number = value;
+          // @ts-expect-error
+          const _S: string = value;
+
+          updateValue(5);
+          // @ts-expect-error
+          updateValue('foo');
+          // @ts-expect-error
+          updateValue(undefined);
+        }
+
+        {
+          const { value, updateValue } = useControlled<number | undefined>(
+            undefined,
+            () => {},
+          );
+          const _N: number | undefined = value;
+          // @ts-expect-error
+          const _S: string = value;
+
+          updateValue(5);
+          updateValue(undefined);
+          // @ts-expect-error
+          updateValue('foo');
+        }
+      });
+    });
   });
 });

packages/hooks/src/useControlled/useControlled.ts

@@ -10,11 +10,11 @@ import { ControlledReturnObject } from './useControlled.types';
  *
  * Returns a {@link ControlledReturnObject}
  */
-export const useControlled = <T extends any>(
+export const useControlled = <T extends any = undefined>(
   controlledValue?: T,
-  onChange?: (val?: T) => void,
+  onChange?: (val: T) => void,
   initialValue?: T,
-): ControlledReturnObject<T | undefined> => {
+): ControlledReturnObject<T> => {
   /**
    * isControlled should only be computed once
    */
@@ -23,9 +23,13 @@ export const useControlled = <T extends any>(
 
   /**
    * Keep track of the uncontrolled value state internally
+   *
+   * Note on type assertion:
+   * if `controlledValue` is undefined _and_ `initialValue` is also undefined,
+   * then T is necessarily `undefined`, so asserting `(initialValue as T)` is safe
    */
-  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(
-    initialValue,
+  const [uncontrolledValue, setUncontrolledValue] = useState<T>(
+    !isUndefined(controlledValue) ? controlledValue : (initialValue as T),
   );
 
   /**
@@ -34,7 +38,7 @@ export const useControlled = <T extends any>(
    * If the component is controlled, it will return the controlled value.
    */
   const value = useMemo(
-    () => (isControlled ? controlledValue : uncontrolledValue),
+    () => (isControlled ? (controlledValue as T) : uncontrolledValue),
     [isControlled, uncontrolledValue, controlledValue],
   );
 
@@ -45,7 +49,7 @@ export const useControlled = <T extends any>(
    *
    * onChange callback is called if provided.
    */
-  const updateValue = (newVal: T | undefined) => {
+  const updateValue = (newVal: T) => {
     if (!isControlled) {
       setUncontrolledValue(newVal);
     }

packages/hooks/src/useControlled/useControlled.types.ts

@@ -9,7 +9,7 @@ export interface ControlledReturnObject<T extends any> {
    * Either updates the uncontrolled value,
    * or calls the provided `onChange` callback
    */
-  updateValue: (newVal?: T) => void;
+  updateValue: (newVal: T) => void;
 
   /**
    * A setter for the internal value.

packages/hooks/src/useControlledValue/useControlledValue.ts

@@ -16,7 +16,7 @@ export const useControlledValue = <T>(
   controlledValue?: T,
   changeHandler?: ChangeEventHandler<any> | null,
   initialValue?: T,
-): ControlledValueReturnObject<T | undefined> => {
+): ControlledValueReturnObject<T> => {
   // Use the new useControlled hook under the hood
   const { isControlled, value, setUncontrolledValue } = useControlled(
     controlledValue,