TS Strict for react-aria Checkbox (#5467)

* TS Strict Checkbox

Author: ryo-manba

packages/@react-aria/checkbox/src/useCheckbox.ts

@@ -55,7 +55,7 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     // indeterminate is a property, but it can only be set via javascript
     // https://css-tricks.com/indeterminate-checkboxes/
     if (inputRef.current) {
-      inputRef.current.indeterminate = isIndeterminate;
+      inputRef.current.indeterminate = !!isIndeterminate;
     }
   });
 

packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

@@ -17,6 +17,7 @@ import {CheckboxGroupState} from '@react-stately/checkbox';
 import {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form';
 import {RefObject, useEffect, useRef} from 'react';
 import {useToggleState} from '@react-stately/toggle';
+import {ValidationResult} from '@react-types/shared';
 
 /**
  * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.
@@ -78,7 +79,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
       displayValidation,
       resetValidation: state.resetValidation,
       commitValidation: state.commitValidation,
-      updateValidation(v) {
+      updateValidation(v: ValidationResult) {
         nativeValidation.current = v;
         updateValidation();
       }

packages/@react-aria/checkbox/src/utils.ts

@@ -13,9 +13,9 @@
 import {CheckboxGroupState} from '@react-stately/checkbox';
 
 interface CheckboxGroupData {
-  name: string,
-  descriptionId: string,
-  errorMessageId: string,
+  name?: string,
+  descriptionId?: string,
+  errorMessageId?: string,
   validationBehavior: 'aria' | 'native'
 }
 

packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

@@ -18,7 +18,7 @@ import {useCheckboxGroup, useCheckboxGroupItem} from '../';
 import userEvent from '@testing-library/user-event';
 
 function Checkbox({checkboxGroupState, ...props}: AriaCheckboxGroupItemProps & { checkboxGroupState: CheckboxGroupState }) {
-  const ref = useRef<HTMLInputElement>();
+  const ref = useRef<HTMLInputElement>(null);
   const {children} = props;
   const {inputProps} = useCheckboxGroupItem(props, checkboxGroupState, ref);
   return <label><input ref={ref} {...inputProps} />{children}</label>;
@@ -128,7 +128,7 @@ describe('useCheckboxGroup', () => {
 
     let labelId = checkboxGroup.getAttribute('aria-labelledby');
     expect(labelId).toBeDefined();
-    let label = document.getElementById(labelId);
+    let label = document.getElementById(labelId!);
     expect(label).toHaveTextContent('Favorite Pet');
   });
 

tsconfig.json

@@ -35,6 +35,7 @@
         "paths": [
           "./packages/@react-aria/a",
           "./packages/@react-aria/b",
+          "./packages/@react-aria/checkbox",
           "./packages/@react-aria/l",
           "./packages/@react-aria/meter",
           "./packages/@react-aria/color",