TS strict random assortment (#5560)

* TS strict smattering

Author: snowystinger

packages/@react-aria/color/test/useColorField.test.js

@@ -42,9 +42,9 @@ describe('useColorField', function () {
     expect(inputProps['aria-valuetext']).toBeNull();
     expect(inputProps['aria-valuemin']).toBeNull();
     expect(inputProps['aria-valuemax']).toBeNull();
-    expect(inputProps['aria-required']).toBeNull();
-    expect(inputProps['aria-disabled']).toBeNull();
-    expect(inputProps['aria-readonly']).toBeNull();
+    expect(inputProps['aria-required']).toBeUndefined();
+    expect(inputProps['aria-disabled']).toBeUndefined();
+    expect(inputProps['aria-readonly']).toBeUndefined();
     expect(inputProps['aria-invalid']).toBeUndefined();
     expect(inputProps.disabled).toBe(false);
     expect(inputProps.readOnly).toBe(false);

packages/@react-aria/numberfield/test/useNumberField.test.ts

@@ -27,7 +27,7 @@ describe('useNumberField hook', () => {
       expect(inputProps.disabled).toBeFalsy();
       expect(inputProps.readOnly).toBeFalsy();
       expect(inputProps['aria-invalid']).toBeUndefined();
-      expect(inputProps['aria-required']).toBeNull();
+      expect(inputProps['aria-required']).toBeUndefined();
       expect(inputProps['aria-valuenow']).toBeNull();
       expect(inputProps['aria-valuetext']).toBeNull();
       expect(inputProps['aria-valuemin']).toBeNull();

packages/@react-aria/spinbutton/src/useSpinButton.ts

@@ -73,41 +73,41 @@ export function useSpinButton(
       case 'PageUp':
         if (onIncrementPage) {
           e.preventDefault();
-          onIncrementPage();
+          onIncrementPage?.();
           break;
         }
       // fallthrough!
       case 'ArrowUp':
       case 'Up':
         if (onIncrement) {
           e.preventDefault();
-          onIncrement();
+          onIncrement?.();
         }
         break;
       case 'PageDown':
         if (onDecrementPage) {
           e.preventDefault();
-          onDecrementPage();
+          onDecrementPage?.();
           break;
         }
       // fallthrough
       case 'ArrowDown':
       case 'Down':
         if (onDecrement) {
           e.preventDefault();
-          onDecrement();
+          onDecrement?.();
         }
         break;
       case 'Home':
         if (onDecrementToMin) {
           e.preventDefault();
-          onDecrementToMin();
+          onDecrementToMin?.();
         }
         break;
       case 'End':
         if (onIncrementToMax) {
           e.preventDefault();
-          onIncrementToMax();
+          onIncrementToMax?.();
         }
         break;
     }
@@ -126,23 +126,23 @@ export function useSpinButton(
   // This ensures that macOS VoiceOver announces it as "minus" even with other characters between the minus sign
   // and the number (e.g. currency symbol). Otherwise it announces nothing because it assumes the character is a hyphen.
   // In addition, replace the empty string with the word "Empty" so that iOS VoiceOver does not read "50%" for an empty field.
-  textValue = textValue === '' ? stringFormatter.format('Empty') : (textValue || `${value}`).replace('-', '\u2212');
+  let ariaTextValue = textValue === '' ? stringFormatter.format('Empty') : (textValue || `${value}`).replace('-', '\u2212');
 
   useEffect(() => {
     if (isFocused.current) {
       clearAnnouncer('assertive');
-      announce(textValue, 'assertive');
+      announce(ariaTextValue, 'assertive');
     }
-  }, [textValue]);
+  }, [ariaTextValue]);
 
   const onIncrementPressStart = useEffectEvent(
     (initialStepDelay: number) => {
       clearAsync();
-      onIncrement();
+      onIncrement?.();
       // Start spinning after initial delay
       _async.current = window.setTimeout(
         () => {
-          if (isNaN(maxValue) || isNaN(value) || value < maxValue) {
+          if ((maxValue === undefined || isNaN(maxValue)) || (value === undefined || isNaN(value)) || value < maxValue) {
             onIncrementPressStart(60);
           }
         },
@@ -154,11 +154,11 @@ export function useSpinButton(
   const onDecrementPressStart = useEffectEvent(
     (initialStepDelay: number) => {
       clearAsync();
-      onDecrement();
+      onDecrement?.();
       // Start spinning after initial delay
       _async.current = window.setTimeout(
         () => {
-          if (isNaN(minValue) || isNaN(value) || value > minValue) {
+          if ((minValue === undefined || isNaN(minValue)) || (value === undefined || isNaN(value)) || value > minValue) {
             onDecrementPressStart(60);
           }
         },
@@ -176,13 +176,13 @@ export function useSpinButton(
   return {
     spinButtonProps: {
       role: 'spinbutton',
-      'aria-valuenow': !isNaN(value) ? value : null,
-      'aria-valuetext': textValue,
+      'aria-valuenow': value !== undefined && !isNaN(value) ? value : undefined,
+      'aria-valuetext': ariaTextValue,
       'aria-valuemin': minValue,
       'aria-valuemax': maxValue,
-      'aria-disabled': isDisabled || null,
-      'aria-readonly': isReadOnly || null,
-      'aria-required': isRequired || null,
+      'aria-disabled': isDisabled || undefined,
+      'aria-readonly': isReadOnly || undefined,
+      'aria-required': isRequired || undefined,
       onKeyDown,
       onFocus,
       onBlur

packages/@react-aria/steplist/src/useStepListItem.ts

@@ -51,7 +51,7 @@ export function useStepListItem<T>(props: AriaStepListItemProps, state: StepList
       event.stopPropagation();
     }
 
-    itemProps.onKeyDown(event);
+    itemProps.onKeyDown?.(event);
   };
 
   return {

packages/@react-aria/tag/src/useTag.ts

@@ -58,22 +58,23 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
 
   // We want the group to handle keyboard navigation between tags.
   delete rowProps.onKeyDownCapture;
-  delete states.descriptionProps;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {descriptionProps: _, ...stateWithoutDescription} = states;
 
   let onKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Delete' || e.key === 'Backspace') {
       e.preventDefault();
       if (state.selectionManager.isSelected(item.key)) {
-        onRemove(new Set(state.selectionManager.selectedKeys));
+        onRemove?.(new Set(state.selectionManager.selectedKeys));
       } else {
-        onRemove(new Set([item.key]));
+        onRemove?.(new Set([item.key]));
       }
     }
   };
 
-  let modality: string = useInteractionModality();
+  let modality = useInteractionModality();
   if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
-    modality = 'touch';
+    modality = 'pointer';
   }
   let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
   let descProps = useDescription(description);
@@ -99,7 +100,7 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
       'aria-errormessage': props['aria-errormessage'],
       'aria-label': props['aria-label']
     }),
-    ...states,
+    ...stateWithoutDescription,
     allowsRemoving: !!onRemove
   };
 }

packages/@react-aria/tag/src/useTagGroup.ts

@@ -91,7 +91,7 @@ export function useTagGroup<T>(props: AriaTagGroupOptions<T>, state: ListState<T
   // If the last tag is removed, focus the container.
   let prevCount = useRef(state.collection.size);
   useEffect(() => {
-    if (prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) {
+    if (ref.current && prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) {
       ref.current.focus();
     }
     prevCount.current = state.collection.size;

packages/@react-spectrum/inlinealert/src/InlineAlert.tsx

@@ -66,8 +66,8 @@ function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement
   };
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/inlinealert');
-  let Icon = null;
-  let iconAlt: string;
+  let Icon: typeof React.Component | null = null;
+  let iconAlt: string = '';
   if (variant in ICONS) {
     Icon = ICONS[variant];
     iconAlt = stringFormatter.format(variant);

packages/@react-stately/steplist/src/useStepListState.ts

@@ -21,7 +21,7 @@ export interface StepListProps<T> extends CollectionBase<T>, SingleSelection {
   /** The key of the initially last completed step (uncontrolled). */
   defaultLastCompletedStep?: Key,
   /** Callback for when the last completed step changes. */
-  onLastCompletedStepChange?: (key: Key) => void,
+  onLastCompletedStepChange?: (key: Key | null) => void,
   /** Whether the step list is disabled. Steps will not be focusable or interactive. */
   isDisabled?: boolean,
   /** Whether the step list is read only. Steps will be focusable but non-interactive. */
@@ -38,25 +38,29 @@ export interface StepListState<T> extends SingleSelectListState<T> {
 export function useStepListState<T extends object>(props: StepListProps<T>): StepListState<T> {
   let state = useSingleSelectListState<T>(props);
 
-  let [lastCompletedStep, setLastCompletedStep] = useControlledState<Key>(props.lastCompletedStep, props.defaultLastCompletedStep, props.onLastCompletedStepChange);
+  let [lastCompletedStep, setLastCompletedStep] = useControlledState<Key | null>(props.lastCompletedStep, props.defaultLastCompletedStep ?? null, props.onLastCompletedStepChange);
   const {setSelectedKey: realSetSelectedKey, selectedKey, collection} = state;
   const {indexMap, keysLinkedList} = useMemo(() => buildKeysMaps(collection), [collection]);
   const selectedIdx = indexMap.get(selectedKey);
 
-  const isCompleted = useCallback((step: Key) => {
+  const isCompleted = useCallback((step: Key | null | undefined) => {
     if (step === undefined) {
       return false;
     }
 
-    return indexMap.get(step) <= indexMap.get(lastCompletedStep);
+    return (step !== null &&
+      lastCompletedStep !== null &&
+      indexMap.has(step) &&
+      indexMap.has(lastCompletedStep) &&
+      indexMap.get(step)! <= indexMap.get(lastCompletedStep)!);
   }, [indexMap, lastCompletedStep]);
 
   const findDefaultSelectedKey = useCallback((collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) => {
-    let selectedKey = null;
-    if (collection) {
+    let selectedKey: Key | null = null;
+    if (collection && collection.size > 0) {
       selectedKey = collection.getFirstKey();
       // loop over keys until we find one that isn't completed or disabled and select that
-      while (selectedKey !== collection.getLastKey() && (disabledKeys.has(selectedKey) || isCompleted(selectedKey))) {
+      while (selectedKey !== collection.getLastKey() && selectedKey && (disabledKeys.has(selectedKey) || isCompleted(selectedKey))) {
         selectedKey = collection.getKeyAfter(selectedKey);
       }
     }
@@ -66,18 +70,21 @@ export function useStepListState<T extends object>(props: StepListProps<T>): Ste
 
   useEffect(() => {
     // Ensure a step is always selected (in case no selected key was specified or if selected item was deleted from collection)
-    let selectedKey = state.selectedKey;
+    let selectedKey: Key | null = state.selectedKey;
     if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
       selectedKey = findDefaultSelectedKey(state.collection, state.disabledKeys);
-      state.selectionManager.replaceSelection(selectedKey);
+      if (selectedKey !== null) {
+        state.selectionManager.replaceSelection(selectedKey);
+      }
     }
 
     if (state.selectionManager.focusedKey == null) {
       state.selectionManager.setFocusedKey(selectedKey);
     }
 
-    if (selectedIdx > 0 && selectedIdx > (indexMap.get(lastCompletedStep) ?? -1) + 1) {
-      setLastCompletedStep(keysLinkedList.get(selectedKey));
+    let lcs = (lastCompletedStep !== null ? indexMap.get(lastCompletedStep) : -1) ?? -1;
+    if (selectedIdx !== undefined && selectedIdx > 0 && selectedIdx > lcs + 1 && selectedKey !== null && keysLinkedList.has(selectedKey)) {
+      setLastCompletedStep(keysLinkedList.get(selectedKey)!);
     }
   });
 
@@ -111,11 +118,11 @@ export function useStepListState<T extends object>(props: StepListProps<T>): Ste
   };
 }
 
-function buildKeysMaps<T>(coll: Collection<Node<T>>): { indexMap: Map<Key, number>, keysLinkedList: Map<Key, Key> } {
+function buildKeysMaps<T>(coll: Collection<Node<T>>) {
   const indexMap = new Map<Key, number>();
-  const keysLinkedList = new Map<Key, Key>();
+  const keysLinkedList = new Map<Key, Key | undefined>();
   let i = 0;
-  let prev: Node<T> = undefined;
+  let prev: Node<T> | undefined = undefined;
   for (const item of coll) {
     indexMap.set(item.key, i);
     keysLinkedList.set(item.key, prev?.key);

tsconfig.json

@@ -56,9 +56,12 @@
           "./packages/@react-aria/searchfield",
           "./packages/@react-aria/separator",
           "./packages/@react-aria/sidenav",
+          "./packages/@react-aria/spinbutton",
           "./packages/@react-aria/ssr",
+          "./packages/@react-aria/steplist",
           "./packages/@react-aria/switch",
           "./packages/@react-aria/tabs",
+          "./packages/@react-aria/tag",
           "./packages/@react-aria/toggle",
           "./packages/@react-aria/visually-hidden",
           "./packages/@react-aria/w",
@@ -76,6 +79,7 @@
           "./packages/@react-spectrum/form",
           "./packages/@react-spectrum/icon",
           "./packages/@react-spectrum/illustratedmessage",
+          "./packages/@react-spectrum/inlinealert",
           "./packages/@react-spectrum/image",
           "./packages/@react-spectrum/label",
           "./packages/@react-spectrum/link",
@@ -102,6 +106,7 @@
           "./packages/@react-stately/overlays",
           "./packages/@react-stately/pagination",
           "./packages/@react-stately/searchfield",
+          "./packages/@react-stately/steplist",
           "./packages/@react-stately/radio",
           "./packages/@react-stately/toggle",
           "./packages/@react-stately/utils",