downshift-useSelect.tsx

import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { useSelect } from 'downshift';
import { DropdownProps } from 'lib/types/dropdown';
import { forwardRef } from 'react';

export const Dropdown = forwardRef<HTMLButtonElement, DropdownProps<string>>(
  ({ onChange, error, label, items, initialSelectedItem }, ref) => {
    const {
      getLabelProps,
      selectedItem,
      highlightedIndex,
      isOpen,
      getToggleButtonProps,
      getItemProps,
      getMenuProps,
    } = useSelect({
      initialSelectedItem,
      items,
      onSelectedItemChange: ({ selectedItem }) => onChange(selectedItem),
    });

    return (
      <div className='relative'>
        <label
          {...getLabelProps()}
          className='flex items-center justify-between text-xs tracking-tight'
        >
          <span>{label}</span>
          {error && (
            <span className='text-xs text-red-500 font-medium'>
              {error.message}
            </span>
          )}
        </label>
        <button
          {...getToggleButtonProps({ ref })}
          type='button'
          className='flex w-full mt-1 relative justify-between items-center bg-white text-xs focus:outline-none p-3 shadow focus:ring-2 focus:ring-blue-800'
        >
          <span>{selectedItem ? selectedItem : 'Seleccionar'}</span>
          {!isOpen ? (
            <FontAwesomeIcon icon={faChevronDown} className='h-4 w-4' />
          ) : (
            <FontAwesomeIcon icon={faChevronUp} className='h-4 w-4' />
          )}
        </button>
        <ul
          {...getMenuProps()}
          className='absolute max-h-80  z-10 w-full text-xs overflow-scroll bg-white divide-y focus:outline-none'
        >
          {isOpen &&
            items.map((item, index) => {
              return (
                <li
                  {...getItemProps({ item, index })}
                  key={item}
                  className={classNames('p-3 shadow cursor-pointer', {
                    'bg-slate-300': highlightedIndex === index,
                    'bg-slate-400 font-medium': selectedItem === item,
                  })}
                >
                  {item}
                </li>
              );
            })}
        </ul>
      </div>
    );
  }
);