Combobox

To implement the Combobox pattern, you will need the following:

• Select (1 piece)
• Input (1 piece)

import { Box } from '@semcore/ui/base-components';
import Input from '@semcore/ui/input';
import Select from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const options = Array(12)
  .fill(0)
  .map((_, i) => ({
    value: `${i}:00`.padStart(5, '0'),
    title: `${i}:00`.padStart(5, '0'),
  }));

const Demo = () => {
  const [highlightedIndex, setHighlightedIndex] = React.useState<number | null>(null);
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const exactValueIndex = options.findIndex((option) => option.value === value);

    if (exactValueIndex > -1) {
      setHighlightedIndex(exactValueIndex);
    }
  }, [value]);

  const handleHighlightedIndexChange = (index: number | null) => {
    setHighlightedIndex(index);
  };

  return (
    <>
      <Text tag='label' size={200} htmlFor='release-time-picker'>
        Release time
      </Text>
      <Box mt={2}>
        <Select
          interaction='focus'
          onChange={setValue}
          value={value}
          highlightedIndex={highlightedIndex}
          onHighlightedIndexChange={handleHighlightedIndexChange}
        >
          <Select.Trigger tag={Input} w={150}>
            {() => <Input.Value value={value} onChange={setValue} id='release-time-picker' />}
          </Select.Trigger>
          <Select.Menu>
            {options.map((option) => (
              <Select.Option value={option.value} key={option.value}>
                {option.title}
              </Select.Option>
            ))}
          </Select.Menu>
        </Select>
      </Box>
    </>
  );
};

export default Demo;

AutoSuggest with async suggestions

import { Box } from '@semcore/ui/base-components';
import { AutoSuggest } from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import React from 'react';

import { suggestions } from './autosuggest_sync_example.tsx';

const fakeFetch = async (query: string, signal: AbortSignal): Promise<string[]> => {
  if (!query) return [];

  if (signal.aborted) {
    return [];
  }

  return new Promise((resolve) => {
    const onAbort = () => {
      signal.removeEventListener('abort', onAbort);
      resolve([]);
    };
    signal.addEventListener('abort', onAbort);

    setTimeout(() => {
      signal.removeEventListener('abort', onAbort);

      resolve(suggestions.filter((breed) => breed.toLowerCase().includes(query.toLowerCase())));
    }, 2000);
  });
};

const Demo = () => {
  const [query, setQuery] = React.useState('');

  return (
    <Box>
      <Text tag='label' size={200} htmlFor='async-autosuggest'>
        ASYNC Your pet breed
      </Text>
      <Box mt={2} w={300}>
        <AutoSuggest
          value={query}
          id='async-autosuggest'
          onChange={setQuery}
          suggestions={fakeFetch}
        />
      </Box>
    </Box>
  );
};

export default Demo;

AutoSuggest with prepeared list of suggestions

import { Box } from '@semcore/ui/base-components';
import { AutoSuggest } from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import React from 'react';

export const suggestions = [
  'persian',
  'maine coon',
  'ragdoll',
  'sphynx',
  'siamese',
  'bengal',
  'british shorthair',
  'abyssinian',
  'birman',
  'oriental shorthair',
  'scottish fold',
  'devon rex',
  'norwegian forest',
  'siberian',
  'russian blue',
  'savannah',
  'american shorthair',
  'exotic shorthair',
  'ragamuffin',
  'balinese',
];

const Demo = () => {
  const [query, setQuery] = React.useState('');

  return (
    <Box>
      <Text tag='label' size={200} htmlFor='sync-autosuggest'>
        SYNC Your pet breed
      </Text>
      <Box mt={2} w={300}>
        <AutoSuggest
          value={query}
          id='sync-autosuggest'
          onChange={setQuery}
          suggestions={suggestions}
        />
      </Box>
    </Box>
  );
};

export default Demo;