Function Autocomplete

packages/react-aria-components/src/Autocomplete.tsx:76–122

(props: AutocompleteProps<T>)

 * An autocomplete allows users to search or filter a list of suggestions.
 */
export function Autocomplete<T>(props: AutocompleteProps<T>): JSX.Element {
  let ctx = useSlottedContext(AutocompleteContext, props.slot);
  props = mergeProps(ctx, props);
  let {filter, disableAutoFocusFirst} = props;
  let state = useAutocompleteState(props);
  let inputRef = useRef<HTMLInputElement | null>(null);
  let collectionRef = useRef<HTMLElement>(null);
  let {
    inputProps,
    collectionProps,
    collectionRef: mergedCollectionRef,
    filter: filterFn
  } = useAutocomplete(
    {
      ...removeDataAttributes(props),
      filter,
      disableAutoFocusFirst,
      inputRef,
      collectionRef
    },
    state
  );

  return (
    <Provider
      values={[
        [AutocompleteStateContext, state],
        [
          FieldInputContext,
          {
            ...inputProps,
            ref: inputRef
          }
        ],
        [
          SelectableCollectionContext,
          {
            ...collectionProps,
            filter: filterFn,
            ref: mergedCollectionRef
          }
        ]
      ]}>
      {props.children}
    </Provider>
  );
}