TS strict all components/types starting with letter 'A' (#3544)

* complete all components and shared types starting with 'A'

Author: snowystinger

packages/@react-spectrum/accordion/src/Accordion.tsx

@@ -54,7 +54,7 @@ interface AccordionItemProps<T> {
 
 function AccordionItem<T>(props: AccordionItemProps<T>) {
   props = useProviderProps(props);
-  let ref = useRef<HTMLButtonElement>();
+  let ref = useRef<HTMLButtonElement>(null);
   let {state, item} = props;
   let {buttonProps, regionProps} = useAccordionItem<T>(props, state, ref);
   let isOpen = state.expandedKeys.has(item.key);

packages/@react-spectrum/accordion/stories/Accordion.stories.tsx

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Story as _Story, Meta} from '@storybook/react';
 import {Accordion, Item} from '../src';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import {SpectrumAccordionProps} from '@react-types/accordion';
 
@@ -20,53 +20,58 @@ type ItemType = {
   title: string
 };
 
-/**
- * Helper type so `bind` returns the actual Story type.
- */
-interface Story<T> extends _Story<T> {
-  bind: (this: ThisParameterType<typeof Function.bind>, thisArg: Parameters<typeof Function.bind>[0], ...argArray: Parameters<typeof Function.bind>[1][]) => _Story<T>
-}
-
 export default {
   title: 'Accordion',
-  component: Accordion
-} as Meta<SpectrumAccordionProps<ItemType>>;
+  component: Accordion,
+  argTypes: {}
+} as ComponentMeta<typeof Accordion>;
+
+export type AccordionStory = ComponentStoryObj<typeof Accordion>;
+
+export const Default: AccordionStory = {
+  args: {
+    items: [
+      {key: 'files', title: 'Your files'},
+      {key: 'shared', title: 'Shared with you'},
+      {key: 'last', title: 'Last item'}
+    ]
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      {(item) => <Item key={(item as ItemType).key} title={(item as ItemType).title}>{(item as ItemType).key}</Item>}
+    </Accordion>
+  )
+};
+
+export const DefaultExpandedKeys: AccordionStory = {
+  args: {...Default.args, defaultExpandedKeys: ['files']},
+  render: Default.render,
+  name: 'defaultExpandedKeys: files'
+};
 
-const AccordionRenderPropsTemplate: Story<SpectrumAccordionProps<ItemType>> = (args) => (
-  <Accordion {...args}>
-    {item => <Item key={item.key} title={item.title}>{item.key}</Item>}
-  </Accordion>
-);
+export const DisabledKeys: AccordionStory = {
+  args: {...Default.args, disabledKeys: ['files', 'shared']},
+  render: Default.render,
+  name: 'disabledKeys: files, shared'
+};
 
-export const Default = AccordionRenderPropsTemplate.bind({});
-Default.storyName = 'default';
-Default.args = {
-  items: [
-    {key: 'files', title: 'Your files'},
-    {key: 'shared', title: 'Shared with you'},
-    {key: 'last', title: 'Last item'}
-  ]
+export const DisabledDefaultExpandedKeys: AccordionStory = {
+  args: {...Default.args, defaultExpandedKeys: ['files'], disabledKeys: ['files', 'shared']},
+  render: Default.render,
+  name: 'defaultExpandedKeys: files, disabledKeys: files, shared'
 };
 
-const AccordionTemplate: Story<SpectrumAccordionProps<ItemType>> = (args) => (
-  <Accordion {...args} >
-    <Item key="files" title="Your files">
-      files
-    </Item>
-    <Item key="shared" title="Shared with you">
-      shared
-    </Item>
-    <Item key="last" title="Last item">
-      last
-    </Item>
-  </Accordion>
-);
+export const ControlledExpandedKeys: AccordionStory = {
+  args: {...Default.args, defaultExpandedKeys: ['files']},
+  render: (args) => <ControlledAccordion {...args} />,
+  name: 'controlled ExpandedKeys'
+};
 
 
-const ControlledAccordionTemplate: Story<SpectrumAccordionProps<ItemType>> = (args) => {
+function ControlledAccordion<T>(props: SpectrumAccordionProps<T>) {
   let [openKeys, setOpenKeys] = useState<Set<React.Key>>(new Set(['files']));
   return (
-    <Accordion {...args} expandedKeys={openKeys} onExpandedChange={setOpenKeys} >
+    <Accordion {...props} expandedKeys={openKeys} onExpandedChange={setOpenKeys} >
       <Item key="files" title="Your files">
         files
       </Item>
@@ -78,23 +83,4 @@ const ControlledAccordionTemplate: Story<SpectrumAccordionProps<ItemType>> = (ar
       </Item>
     </Accordion>
   );
-};
-
-export const DefaultExpandedKeys = AccordionTemplate.bind({});
-DefaultExpandedKeys.storyName = 'defaultExpandedKeys: files';
-DefaultExpandedKeys.args = {defaultExpandedKeys: ['files']};
-
-export const ControlledExpandedKeys = ControlledAccordionTemplate.bind({});
-ControlledExpandedKeys.storyName = 'controlled ExpandedKeys';
-ControlledExpandedKeys.args = {};
-
-export const DisabledKeys = AccordionTemplate.bind({});
-DisabledKeys.storyName = 'disabledKeys: files, shared';
-DisabledKeys.args = {disabledKeys: ['files', 'shared']};
-
-export const DisabledDefaultExpandedKeys =  AccordionTemplate.bind({});
-DisabledDefaultExpandedKeys.storyName = 'defaultExpandedKeys: files, disabledKeys: files, shared';
-DisabledDefaultExpandedKeys.args = {
-  defaultExpandedKeys: ['files'],
-  disabledKeys: ['files', 'shared']
-};
+}

packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx

@@ -27,7 +27,15 @@ import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
 import {mergeProps, useId} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import searchAutocompleteStyles from './searchautocomplete.css';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {setInteractionModality, useHover} from '@react-aria/interactions';
@@ -45,7 +53,7 @@ import {useOverlayTrigger} from '@react-aria/overlays';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useSearchAutocomplete} from '@react-aria/autocomplete';
 
-export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
+function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
@@ -71,7 +79,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
     defaultSelectedKey: undefined
   });
 
-  let buttonRef = useRef<HTMLElement>();
+  let buttonRef = useRef<HTMLDivElement>(null);
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
@@ -82,7 +90,7 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
 
   // Focus the button and show focus ring when clicking on the label
   labelProps.onClick = () => {
-    if (!props.isDisabled) {
+    if (!props.isDisabled && buttonRef.current) {
       buttonRef.current.focus();
       setInteractionModality('keyboard');
     }
@@ -119,10 +127,13 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
       </Tray>
     </>
   );
-});
+}
+
+export let MobileSearchAutocomplete = React.forwardRef(_MobileSearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
+
 
 interface SearchAutocompleteButtonProps extends AriaButtonProps {
-  icon?: ReactElement,
+  icon?: ReactElement | null,
   isQuiet?: boolean,
   isDisabled?: boolean,
   isReadOnly?: boolean,
@@ -135,7 +146,9 @@ interface SearchAutocompleteButtonProps extends AriaButtonProps {
   className?: string
 }
 
-const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteButton(props: SearchAutocompleteButtonProps, ref: RefObject<HTMLElement>) {
+// any type is because we don't want to call useObjectRef because this is an internal component and we know
+// we are always passing an object ref
+const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteButton(props: SearchAutocompleteButtonProps, ref: any) {
   let searchIcon = (
     <Magnifier data-testid="searchicon" />
   );
@@ -173,8 +186,8 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   let clearButton = (
     <ClearButton
       onPress={(e) => {
-        clearInput();
-        props.onPress(e);
+        clearInput?.();
+        props?.onPress?.(e);
       }}
       preventFocus
       aria-label={stringFormatter.format('clear')}
@@ -188,7 +201,6 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
       isDisabled={isDisabled} />
   );
 
-
   let validation = React.cloneElement(validationIcon, {
     UNSAFE_className: classNames(
       textfieldStyles,
@@ -217,7 +229,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
     <div
       {...mergeProps(hoverProps, focusProps, buttonProps)}
       aria-haspopup="dialog"
-      ref={ref as RefObject<HTMLDivElement>}
+      ref={ref}
       style={{...style, outline: 'none'}}
       className={
         classNames(
@@ -303,14 +315,14 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
   );
 });
 
-interface SearchAutocompleteTrayProps extends SpectrumSearchAutocompleteProps<unknown> {
-  state: ComboBoxState<unknown>,
+interface SearchAutocompleteTrayProps<T> extends SpectrumSearchAutocompleteProps<T> {
+  state: ComboBoxState<T>,
   overlayProps: HTMLAttributes<HTMLElement>,
   loadingIndicator?: ReactElement,
   onClose: () => void
 }
 
-function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
+function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
   let searchIcon = (
     <Magnifier data-testid="searchicon" />
   );
@@ -329,15 +341,15 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     onSubmit
   } = props;
 
-  let timeout = useRef(null);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let [showLoading, setShowLoading] = useState(false);
-  let inputRef = useRef<HTMLInputElement>();
-  let popoverRef = useRef<HTMLDivElement>();
-  let listBoxRef = useRef<HTMLDivElement>();
+  let inputRef = useRef<HTMLInputElement>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
   let layout = useListBoxLayout(state);
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
-  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
+  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete<T>(
     {
       ...props,
       keyboardDelegate: layout,
@@ -349,7 +361,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
   );
 
   React.useEffect(() => {
-    focusSafely(inputRef.current);
+    if (inputRef.current) {
+      focusSafely(inputRef.current);
+    }
 
     // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false.
     // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
@@ -421,7 +435,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
       return;
     }
 
-    popoverRef.current.focus();
+    if (popoverRef.current) {
+      popoverRef.current.focus();
+    }
   }, [inputRef, popoverRef, isTouchDown]);
 
   let inputValue = inputProps.value;
@@ -444,8 +460,10 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
     } else if (loadingState !== 'filtering') {
       // If loading is no longer happening, clear any timers and hide the loading circle
       setShowLoading(false);
-      clearTimeout(timeout.current);
-      timeout.current = null;
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
+        timeout.current = null;
+      }
     }
 
     lastInputValue.current = inputValue;
@@ -454,11 +472,17 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
   let onKeyDown = (e) => {
     // Close virtual keyboard, close tray, and fire onSubmit if user hits Enter w/o any focused options
     if (e.key === 'Enter' && state.selectionManager.focusedKey == null) {
-      popoverRef.current.focus();
-      onClose();
-      onSubmit(inputValue.toString(), null);
+      popoverRef.current?.focus();
+      if (onClose) {
+        onClose();
+      }
+      if (onSubmit) {
+        onSubmit(inputValue == null ? null : inputValue.toString(), null);
+      }
     } else {
-      inputProps.onKeyDown(e);
+      if (inputProps.onKeyDown) {
+        inputProps.onKeyDown(e);
+      }
     }
   };
 
@@ -491,9 +515,9 @@ function SearchAutocompleteTray(props: SearchAutocompleteTrayProps) {
           inputRef={inputRef}
           isDisabled={isDisabled}
           isLoading={showLoading && loadingState === 'filtering'}
-          loadingIndicator={loadingState != null && loadingCircle}
+          loadingIndicator={loadingState != null ? loadingCircle : undefined}
           validationState={validationState}
-          wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton}
+          wrapperChildren={((state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly) ? clearButton : undefined}
           icon={icon}
           UNSAFE_className={
             classNames(