SearchAutocomplete: fix types (#4305)

* fix SearchAutocomplete types

* fix types

* move icons to spectrum prop

Author: reidbarber

packages/@react-aria/autocomplete/src/index.ts

@@ -10,4 +10,5 @@
  * governing permissions and limitations under the License.
  */
 export {useSearchAutocomplete} from './useSearchAutocomplete';
-export type {AriaSearchAutocompleteProps, SearchAutocompleteAria} from './useSearchAutocomplete';
+export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete';
+export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete';

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -12,26 +12,14 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
+import {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
 import {ComboBoxState} from '@react-stately/combobox';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
 import {InputHTMLAttributes, RefObject} from 'react';
-import {KeyboardDelegate} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import {SearchAutocompleteProps} from '@react-types/autocomplete';
 import {useComboBox} from '@react-aria/combobox';
 import {useSearchField} from '@react-aria/searchfield';
 
-export interface AriaSearchAutocompleteProps<T> extends SearchAutocompleteProps<T> {
-  /** The ref for the input element. */
-  inputRef: RefObject<HTMLInputElement>,
-  /** The ref for the list box popover. */
-  popoverRef: RefObject<HTMLDivElement>,
-  /** The ref for the list box. */
-  listBoxRef: RefObject<HTMLElement>,
-  /** An optional keyboard delegate implementation, to override the default. */
-  keyboardDelegate?: KeyboardDelegate
-}
-
 export interface SearchAutocompleteAria<T> {
   /** Props for the label element. */
   labelProps: DOMAttributes,
@@ -43,13 +31,24 @@ export interface SearchAutocompleteAria<T> {
   clearButtonProps: AriaButtonProps
 }
 
+export interface AriaSearchAutocompleteOptions<T> extends AriaSearchAutocompleteProps<T> {
+  /** The ref for the input element. */
+  inputRef: RefObject<HTMLInputElement>,
+  /** The ref for the list box popover. */
+  popoverRef: RefObject<HTMLDivElement>,
+  /** The ref for the list box. */
+  listBoxRef: RefObject<HTMLElement>,
+  /** An optional keyboard delegate implementation, to override the default. */
+  keyboardDelegate?: KeyboardDelegate
+}
+
 /**
  * Provides the behavior and accessibility implementation for a search autocomplete component.
  * A search autocomplete combines a combobox with a searchfield, allowing users to filter a list of options to items matching a query.
  * @param props - Props for the search autocomplete.
  * @param state - State for the search autocomplete, as returned by `useSearchAutocomplete`.
  */
-export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteProps<T>, state: ComboBoxState<T>): SearchAutocompleteAria<T> {
+export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>, state: ComboBoxState<T>): SearchAutocompleteAria<T> {
   let {
     popoverRef,
     inputRef,

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

@@ -179,7 +179,7 @@ let SearchAutocompleteBase = React.forwardRef(_SearchAutocompleteBase) as <T>(pr
 
 interface SearchAutocompleteInputProps<T> extends SpectrumSearchAutocompleteProps<T> {
   inputProps: InputHTMLAttributes<HTMLInputElement>,
-  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
+  inputRef: RefObject<HTMLInputElement>,
   style?: React.CSSProperties,
   className?: string,
   isOpen?: boolean,

packages/@react-types/autocomplete/src/index.d.ts

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSearchFieldProps} from '@react-types/searchfield';
-import {AsyncLoadable, CollectionBase, LoadingState, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, LoadingState, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared';
 import {Key, ReactElement} from 'react';
 import {MenuTriggerAction} from '@react-types/combobox';
+import {SearchFieldProps} from '@react-types/searchfield';
 
-export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<AriaSearchFieldProps, 'onSubmit'> {
+export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<SearchFieldProps, 'onSubmit' | 'defaultValue' | 'value'> {
   /** The list of SearchAutocomplete items (uncontrolled). */
   defaultItems?: Iterable<T>,
   /** The list of SearchAutocomplete items (controlled). */
@@ -41,12 +41,12 @@ export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<Aria
    * A `key` will be passed if the submission is a selected item (e.g. a user clicks or presses enter on an option).
    * If the input is a custom value, `key` will be null.
    */
-  onSubmit?: (value: string | null, key: Key | null) => void,
-  /** An icon to display at the start of the input. */
-  icon?: ReactElement | null
+  onSubmit?: (value: string | null, key: Key | null) => void
 }
 
-export interface SpectrumSearchAutocompleteProps<T> extends SpectrumTextInputBase, Omit<SearchAutocompleteProps<T>, 'menuTrigger'>, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {
+export interface AriaSearchAutocompleteProps<T> extends SearchAutocompleteProps<T>, DOMProps, AriaLabelingProps {}
+
+export interface SpectrumSearchAutocompleteProps<T> extends SpectrumTextInputBase, Omit<AriaSearchAutocompleteProps<T>, 'menuTrigger'>, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {
   /**
    * The interaction required to display the SearchAutocomplete menu. Note that this prop has no effect on the mobile SearchAutocomplete experience.
    * @default 'input'
@@ -66,5 +66,7 @@ export interface SpectrumSearchAutocompleteProps<T> extends SpectrumTextInputBas
    * @default true
    */
   shouldFlip?: boolean,
-  onLoadMore?: () => void
+  onLoadMore?: () => void,
+  /** An icon to display at the start of the input. */
+  icon?: ReactElement | null
 }