Function AutocompleteMenu

packages/react/src/Autocomplete/AutocompleteMenu.tsx:119–375

(props: AutocompleteMenuInternalProps<T>)

}

function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>) {
  const autocompleteContext = useContext(AutocompleteContext)
  if (autocompleteContext === null) {
    throw new Error('AutocompleteContext returned null values')
  }
  const {
    activeDescendantRef,
    id,
    inputRef,
    inputValue = '',
    scrollContainerRef,
    setAutocompleteSuggestion,
    setShowMenu,
    setInputValue,
    setIsMenuDirectlyActivated,
    setSelectedItemLength,
    showMenu,
  } = autocompleteContext
  const {
    items,
    selectedItemIds,
    sortOnCloseFn,
    emptyStateText = 'No selectable options',
    addNewItem,
    loading,
    selectionVariant = 'single',
    filterFn,
    'aria-labelledby': ariaLabelledBy,
    onOpenChange,
    onSelectedChange,
    customScrollContainerRef,
  } = props
  const listContainerRef = useRef<HTMLDivElement>(null)
  const allItemsToRenderRef = useRef<T[]>([])
  const [highlightedItem, setHighlightedItem] = useState<T>()
  const [sortedItemIds, setSortedItemIds] = useState<Array<string>>(items.map(({id: itemId}) => itemId))
  const generatedUniqueId = useId(id)

  const selectableItems = useMemo(
    () =>
      items.map(selectableItem => {
        return {
          ...selectableItem,
          role: 'option',
          id: selectableItem.id,
          active: highlightedItem?.id === selectableItem.id,
          selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
          onAction: (item: T) => {
            const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id)
            const newSelectedItemIds = selectedItemIds.includes(item.id)
              ? otherSelectedItemIds
              : [...otherSelectedItemIds, item.id]
            const onSelectedChangeFn = onSelectedChange
              ? onSelectedChange
              : getdefaultCheckedSelectionChange(setInputValue)

            onSelectedChangeFn(
              newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)) as T[],