Function Select

components/select/select.tsx:114–382

({
  checkboxes = false,
  clearable = true,
  disabled = false,
  error = false,
  multiple = false,
  options,
  size = 'medium',
  value,
  label,
  placeholder,
  onChange,
  onClear,
  onDropdownClose,
  onDropdownOpen,
  buttonClassName,
  containerClassName,
  dropdownClassName,
  dropdownPortalContainerId,
  ...rest
}: SelectProps)

}

export function Select({
  checkboxes = false,
  clearable = true,
  disabled = false,
  error = false,
  multiple = false,
  options,
  size = 'medium',
  value,
  label,
  placeholder,
  onChange,
  onClear,
  onDropdownClose,
  onDropdownOpen,
  buttonClassName,
  containerClassName,
  dropdownClassName,
  dropdownPortalContainerId,
  ...rest
}: SelectProps) {
  const buttonId = useId();
  const labelId = useId();
  const buttonRef = useRef<HTMLButtonElement>(null);
  const dropdownRef = useRef<HTMLUListElement>(null);
  const [focusedOption, setFocusedOption] = useState<SelectOptionValue | null>(null);
  const [isOpened, setIsOpened] = useState(false);
  const [isSelected, setIsSelected] = useState<SelectOptionValue[]>(
    options.filter(o => (Array.isArray(value) ? value.includes(o.value) : o.value === value)).map(o => o.value)
  );
  const [showDropdown, setShowDropdown] = useState(false);
  const [dropdownPosition, setDropdownPosition] = useState<Pick<CSSProperties, 'top' | 'left' | 'width'>>({
    top: 0,
    left: 0,
    width: 0,
  });

  useEffect(() => {
    if (isOpened) {
      setShowDropdown(true);
    }
  }, [isOpened]);

  useEffect(() => {
    if (!showDropdown) {
      const timer = setTimeout(() => {
        setIsOpened(false);
      }, 300);

      return () => {
        clearTimeout(timer);
      };
    }
  }, [showDropdown]);

  useLayoutEffect(() => {
    const updateDropdownPosition = () => {
      if (isOpened && buttonRef.current) {