Function Autocomplete

packages/react/src/Autocomplete/Autocomplete.tsx:48–93

({children, id: idProp})

}

const Autocomplete: React.FC<React.PropsWithChildren<{id?: string}>> = ({children, id: idProp}) => {
  const activeDescendantRef = useRef<HTMLElement>(null)
  const scrollContainerRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const [state, dispatch] = useReducer(reducer, initialState)
  const {inputValue, showMenu, autocompleteSuggestion, isMenuDirectlyActivated, selectedItemLength} = state
  const setInputValue = useCallback((value: State['inputValue']) => {
    dispatch({type: 'inputValue', payload: value})
  }, [])
  const setShowMenu = useCallback((value: State['showMenu']) => {
    dispatch({type: 'showMenu', payload: value})
  }, [])
  const setAutocompleteSuggestion = useCallback((value: State['autocompleteSuggestion']) => {
    dispatch({type: 'autocompleteSuggestion', payload: value})
  }, [])
  const setIsMenuDirectlyActivated = useCallback((value: State['isMenuDirectlyActivated']) => {
    dispatch({type: 'isMenuDirectlyActivated', payload: value})
  }, [])
  const setSelectedItemLength = useCallback((value: State['selectedItemLength']) => {
    dispatch({type: 'selectedItemLength', payload: value})
  }, [])
  const id = useId(idProp)

  return (
    <AutocompleteContext.Provider
      value={{
        activeDescendantRef,
        autocompleteSuggestion,
        id,
        inputRef,
        inputValue,
        isMenuDirectlyActivated,
        scrollContainerRef,
        selectedItemLength,
        setAutocompleteSuggestion,
        setInputValue,
        setIsMenuDirectlyActivated,
        setShowMenu,
        setSelectedItemLength,
        showMenu,
      }}
    >
      {children}
    </AutocompleteContext.Provider>
  )
}

export type AutocompleteProps = ComponentProps<typeof Autocomplete>
export type {AutocompleteInputProps} from './AutocompleteInput'