Additional TS StrictMode support (#5305)

* ts strict for react-types l

* react aria tabs

* react aria meter

* react aria radio

* react aria separator

* react aria sidenav

* react aria toggle

* tabs

react types tabs

* yarn lock

* fix ref in sidenav

* layout required

* updates after devon's pr

* remove stale lock file change

---------

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

Author: yihuiliao

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

@@ -14,8 +14,8 @@ import {RadioGroupState} from '@react-stately/radio';
 
 interface RadioGroupData {
   name: string,
-  descriptionId: string,
-  errorMessageId: string,
+  descriptionId: string | undefined,
+  errorMessageId: string | undefined,
   validationBehavior: 'aria' | 'native'
 }
 

packages/@react-aria/sidenav/src/useSideNav.ts

@@ -18,7 +18,7 @@ import {TreeState} from '@react-stately/tree';
 import {useSelectableCollection} from '@react-aria/selection';
 
 interface SideNavAriaOptions<T> extends AriaSideNavProps<T> {
-  layout?: KeyboardDelegate
+  layout: KeyboardDelegate
 }
 
 interface SideNavAria {
@@ -52,7 +52,7 @@ export function useSideNav<T>(props: SideNavAriaOptions<T>, state: TreeState<T>,
       id
     }),
     listProps: {
-      'aria-labelledby': ariaLabeldBy || (ariaLabel ? id : null),
+      'aria-labelledby': ariaLabeldBy || (ariaLabel ? id : undefined),
       role: 'list',
       ...collectionProps
     }

packages/@react-aria/sidenav/src/useSideNavItem.ts

@@ -21,7 +21,7 @@ interface SideNavItemAria {
   listItemLinkProps: AnchorHTMLAttributes<HTMLAnchorElement>
 }
 
-export function useSideNavItem<T>(props: SpectrumSideNavItemProps<T>, state: TreeState<T>, ref: RefObject<HTMLAnchorElement | null>): SideNavItemAria {
+export function useSideNavItem<T>(props: SpectrumSideNavItemProps<T>, state: TreeState<T>, ref: RefObject<HTMLAnchorElement>): SideNavItemAria {
   let {
     item,
     'aria-current': ariaCurrent

packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts

@@ -47,15 +47,15 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
 
   getFirstKey() {
     let key = this.collection.getFirstKey();
-    if (this.disabledKeys.has(key)) {
+    if (key && this.disabledKeys.has(key)) {
       key = this.getNextKey(key);
     }
     return key;
   }
 
   getLastKey() {
     let key = this.collection.getLastKey();
-    if (this.disabledKeys.has(key)) {
+    if (key && this.disabledKeys.has(key)) {
       key = this.getPreviousKey(key);
     }
     return key;

packages/@react-aria/tabs/stories/example.tsx

@@ -16,7 +16,7 @@ import {useTabListState} from '@react-stately/tabs';
 
 export function Tabs({shouldSelectOnPressUp, ...props}) {
   let state = useTabListState(props);
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {tabListProps} = useTabList(props, state, ref);
   return (
     <div style={{height: '150px'}}>
@@ -46,7 +46,7 @@ export function Tabs({shouldSelectOnPressUp, ...props}) {
 
 function Tab({shouldSelectOnPressUp, item, state}) {
   let {key, rendered} = item;
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {tabProps} = useTab({key, shouldSelectOnPressUp}, state, ref);
   let isSelected = state.selectedKey === key;
   let isDisabled = state.disabledKeys.has(key);
@@ -65,7 +65,7 @@ function Tab({shouldSelectOnPressUp, item, state}) {
 }
 
 function TabPanel({state, ...props}) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {tabPanelProps} = useTabPanel(props, state, ref);
   return (
     <div {...tabPanelProps} ref={ref} style={{padding: '10px'}}>

packages/@react-stately/radio/src/useRadioGroupState.ts

@@ -46,13 +46,13 @@ export interface RadioGroupState extends FormValidationState {
   readonly selectedValue: string | null,
 
   /** Sets the selected value. */
-  setSelectedValue(value: string): void,
+  setSelectedValue(value: string | null): void,
 
   /** The value of the last focused radio. */
   readonly lastFocusedValue: string | null,
 
   /** Sets the last focused value. */
-  setLastFocusedValue(value: string): void
+  setLastFocusedValue(value: string | null): void
 }
 
 let instance = Math.round(Math.random() * 10000000000);

tsconfig.json

@@ -35,6 +35,8 @@
         "paths": [
           "./packages/@react-aria/a",
           "./packages/@react-aria/b",
+          "./packages/@react-aria/l",
+          "./packages/@react-aria/meter",
           "./packages/@react-aria/color",
           "./packages/@react-aria/e",
           "./packages/@react-aria/f",
@@ -44,6 +46,12 @@
           "./packages/@react-aria/k",
           "./packages/@react-aria/l",
           "./packages/@react-aria/progress",
+          "./packages/@react-aria/radio",
+          "./packages/@react-aria/searchfield",
+          "./packages/@react-aria/separator",
+          "./packages/@react-aria/sidenav",
+          "./packages/@react-aria/tabs",
+          "./packages/@react-aria/toggle",
           "./packages/@react-aria/q",
           "./packages/@react-aria/searchfield",
           "./packages/@react-aria/w",
@@ -83,12 +91,13 @@
           "./packages/@react-types/divider",
           "./packages/@react-types/illustratedmessage",
           "./packages/@react-types/image",
-          "./packages/@react-types/link",
+          "./packages/@react-types/l",
           "./packages/@react-types/meter",
           "./packages/@react-types/progress",
           "./packages/@react-types/searchfield",
           "./packages/@react-types/shared",
           "./packages/@react-types/statuslight",
+          "./packages/@react-types/tabs",
           "./packages/@react-types/text",
           "./packages/@react-types/tooltip",
           "./packages/@react-types/view",