Function Select

src/components/Select.tsx:39–229

({
  value,
  options,
  onChange,
  onClose,
  multiple = false,
  compareFunction = (a, b) => a === b,
  clearable = false,
  searchable = false,
  placeholder,
  classes,
  displayPlaceholderWhenSelected = false,
  ...props
}: Props<T>)

}

export default function Select<T>({
  value,
  options,
  onChange,
  onClose,
  multiple = false,
  compareFunction = (a, b) => a === b,
  clearable = false,
  searchable = false,
  placeholder,
  classes,
  displayPlaceholderWhenSelected = false,
  ...props
}: Props<T>) {
  const { t } = useTranslations();
  const [query, setQuery] = useState('');

  const isSelected = (valueToCheck: T) => {
    if (multiple && Array.isArray(value)) {
      return value.some((selected) => compareFunction(selected, valueToCheck));
    }
    return compareFunction(value as T, valueToCheck);
  };

  const handleChange = (selected: T | T[]) => {
    setQuery('');
    if (multiple) {
      const selectedArray = Array.isArray(selected) ? selected : [selected];
      onChange(selectedArray);
    } else {
      onChange(selected as T);
    }
  };

  const clear = () => {
    setQuery('');
    if (multiple) {
      onChange([]);
    } else {
      onChange(null);
    }
  };

  const selectedOptions = options.filter((option) => isSelected(option.value));
  const baseDisplayValue = selectedOptions.map((o) => o.label).join(', ');

  const filteredOptions =
    query && searchable
      ? options.filter((option) =>
          String(option.label).toLowerCase().includes(query.toLowerCase())
        )
      : options;

  const placeholderValue =
    placeholder ?? t('components.select.optionPlaceholder');

  const getDisplayValue = () => {
    if (searchable) {