Typeahead

() => {
    const allOptions = [{
      group: 'Group 1',
      items: [
      { value: 'first', title: 'First' },
      { value: 'second', title: 'Second' },
      { value: 'third', title: 'Third' },]
    }, {
      group: 'Group 2',
      items: [
      { value: 'fourth', title: 'fourth', icon: <SvgAdd /> },
      { value: 'fifth', title: 'fifth', icon: <SvgArchive /> },
      { value: 'sixth', title: 'sixth', icon: <SvgZap /> },]
    }]

    const [options, setOptions] = useState(allOptions);
    const [selected, setSelected] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const handleTypeahead = (inputValue) => {
      setIsLoading(true);

      // Replace this with an actual API call
      const delay = setTimeout(() => {
        const lower = inputValue.toLowerCase() || '';

        const isGrouped =
          Array.isArray(allOptions) &&
          allOptions.length > 0 &&
          allOptions[0].hasOwnProperty('group');

        let filtered;

        if (!inputValue) {
          filtered = allOptions;
        } else if (isGrouped) {
          filtered = allOptions
            .map(group => {
              const items = group.items.filter(item =>
                item.title.toLowerCase().includes(lower)
              );
              return items.length > 0 ? { ...group, items } : null;
            })
            .filter(Boolean);
        } else {
          filtered = allOptions.filter(item =>
            item.title.toLowerCase().includes(lower)
          );
        }

        setOptions(filtered);
        setIsLoading(false);
      }, 500);

      return () => clearTimeout(delay);
    };

    const handleChange = (selectedOption) => {
      if (selectedOption && typeof selectedOption !== 'string') {
        setSelected(selectedOption.value);
      } else {
        setSelected(null);
      }
    };

    return (
      <Typeahead
        selectedOptionValue={selected}
        onOptionChange={handleChange}
        onInputValueChange={handleTypeahead}
        options={options}
        placeholder="Search numbers..."
        isLoading={isLoading}
        loadingMessage={<div>Loading numbers</div>}
        emptyResultsMessage="No numbers"
      />
    );

}

<Typeahead
  placeholder="Choose an option"
  isLoading
  loadingMessage={<div>Loading content...</div>}
  options={[]}
/>

<Typeahead
  placeholder="No parent"
  isDisabled
  options={[]}
/>

<Typeahead
  placeholder="Choose an option"
  errorMessage="Sample Error Message"
  options={[
    { value: 'first', title: 'First' },
    { value: 'second', title: 'Second' },
    { value: 'third', title: 'Third' },
  ]}
/>