MultipleSelect

Демо данные
const items = [
    { title: 'Абхазия', value: 'ABH' },
    { title: 'Армения', value: 'ARM' },
    { title: 'Беларусь', value: 'BLR' },
    { title: 'Вьетнам', value: 'VNM' },
    { title: 'Грузия', value: 'GEO' },
    { title: 'Египет', value: 'EGY' },
    { title: 'Индия', value: 'IND' },
    { title: 'Казахстан', value: 'KAZ' },
    { title: 'Китай', value: 'CHN' },
    { title: 'Мальдивы', value: 'MDV' },
    { title: 'ОАЭ', value: 'ARE' },
    { title: 'Таиланд', value: 'THA' },
    { title: 'Турция', value: 'TUR' },
    { title: 'Узбекистан', value: 'UZB' },
];

Базовое использование

<MultipleSelect
      items={items}
      placeholder="Placeholder"
  />
  <MultipleSelect
      items={items}
      selectedItems={items.slice(0,1)}
      placeholder="Добавить маршрут"
      selectLimit={3}
      noticeText="Одновременно можно выбрать максимум 3 страны"
  />

Выключенное состояние

<MultipleSelect
      items={items}
      placeholder="Добавить маршрут"
      noticeText="Одновременно можно выбрать максимум 3 страны"
      selectLimit={3}
      disabled
  />
  <MultipleSelect
      items={items}
      selectedItems={items.slice(0,3)}
      noticeText="Одновременно можно выбрать максимум 3 страны"
      disabled
  />

Пользовательская функция поиска

<MultipleSelect
      items={items}
      placeholder="Код страны (например, BLR)"
      customSearchFilter={(item, query) => item.value === query}
  />

Контролируемое состояние

<DemoMultipleSelectWrapper>
      {({ items, selectedItems, onSelect, onSearch }) => (
          <MultipleSelect
              isControlled
              items={items}
              selectedItems={selectedItems}
              placeholder="Добавить маршрут"
              selectLimit={3}
              onSelect={onSelect}
              onSearch={onSearch}
              searchDelay={250}
          />
      )}
  </DemoSelectWrapper>

Код DemoMultipleSelectWrapper
const searchItems = (items: ItemType[], query: string): ItemType[] => {
    if (!query) {
        return items;
    }

    const queryString = query.toLowerCase();

    return items.filter(item => item.title?.toLowerCase().includes(queryString));
};

const DemoMultipleSelectWrapper: React.FC<ISelectWrapperProps> = ({ children }) => {
    const [currentItems, setCurrentItems] = React.useState<ItemType[]>(items);
    const [selectedItems, setSelectedItems] = React.useState<ItemType[]>([]);


    const handleSearch = React.useCallback(
        (query: string) => {
            const matchesItems = searchItems(items, query);

            setCurrentItems(matchesItems);
        },
        [],
    );

    const handleSelect = React.useCallback(
        (items: ItemType[]) => {
            setSelectedItems(items);
        },
        [],
    );

    return (
        <div style={selectWrapperStyle}>
            {children({
                onSelect: handleSelect,
                onSearch: handleSearch,
                items: currentItems,
                selectedItems,
            })}
        </div>
    );
};