@true-engineering/true-react-common-ui-kit 3.50.0 → 3.51.0

package/src/components/Select/Select.tsx

@@ -1,667 +1,665 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  ChangeEvent,
-  CSSProperties,
-  FocusEvent,
-  FormEvent,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-  SyntheticEvent,
-  Ref,
-} from 'react';
-import { Portal } from 'react-overlays';
-import clsx from 'clsx';
-import { debounce } from 'ts-debounce';
-import {
-  createFilter,
-  getTestId,
-  isEmpty,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { hasExactParent } from '../../helpers';
-import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { IDropdownWithPopperOptions, ICommonProps } from '../../types';
-import { renderIcon, IIcon } from '../Icon';
-import { Input, IInputProps } from '../Input';
-import { SearchInput, ISearchInputProps } from '../SearchInput';
-import { SelectList } from './components';
-import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
-import {
-  defaultCompareFunction,
-  defaultConvertFunction,
-  defaultIsOptionDisabled,
-  getDefaultConvertToIdFunction,
-} from './helpers';
-import { IMultipleSelectValue } from './types';
-import { getInputStyles, searchInputStyles, useStyles, ISelectStyles } from './Select.styles';
-
-export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
-    ICommonProps<ISelectStyles> {
-  header?: ReactNode;
-  footer?: ReactNode;
-  defaultOptionLabel?: ReactNode;
-  allOptionsLabel?: string;
-  noMatchesLabel?: string;
-  loadingLabel?: ReactNode;
-  /** @default 'normal' */
-  optionsMode?: 'search' | 'dynamic' | 'normal';
-  /** @default 400 */
-  debounceTime?: number;
-  /** @default 0 */
-  minSymbolsCountToOpenList?: number;
-  dropdownOptions?: IDropdownWithPopperOptions;
-  /** @default 'chevron-down' */
-  dropdownIcon?: IIcon;
-  options: Value[] | Readonly<Value[]>;
-  value: Value | undefined;
-  /** @default true */
-  shouldScrollToList?: boolean;
-  isMultiSelect?: false;
-  searchInput?: {
-    /** @default false */
-    shouldRenderInList?: boolean;
-    ref?: Ref<HTMLInputElement>;
-  } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
-  isOptionDisabled?: (option: Value) => boolean;
-  onChange: (
-    value: Value | undefined,
-    event:
-      | MouseEvent<HTMLElement>
-      | KeyboardEvent
-      | ChangeEvent<HTMLElement>
-      | FormEvent<HTMLElement>,
-  ) => void; // подумать как возвращать индекс
-  onBlur?: (event: Event | SyntheticEvent) => void;
-  onType?: (value: string) => Promise<void>;
-  optionsFilter?: (options: Value[], query: string) => Value[];
-  onOpen?: () => void;
-  compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
-  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
-  convertValueToString?: (value: Value) => string | undefined;
-  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
-  convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
-  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
-  convertValueToId?: (value: Value) => string | undefined;
-}
-
-export interface IMultipleSelectProps<Value>
-  extends Omit<
-    ISelectProps<Value>,
-    'value' | 'onChange' | 'compareValuesOnChange' | 'isMultiSelect'
-  > {
-  isMultiSelect: true;
-  value: IMultipleSelectValue<Value> | undefined;
-  onChange: (
-    value: IMultipleSelectValue<Value> | undefined,
-    event:
-      | MouseEvent<HTMLElement>
-      | KeyboardEvent
-      | ChangeEvent<HTMLElement>
-      | FormEvent<HTMLElement>,
-  ) => void;
-  compareValuesOnChange?: (
-    v1?: IMultipleSelectValue<Value>,
-    v2?: IMultipleSelectValue<Value>,
-  ) => boolean;
-}
-
-export function Select<Value>(
-  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
-): JSX.Element {
-  const {
-    options,
-    isMultiSelect,
-    value,
-    header,
-    footer,
-    defaultOptionLabel,
-    allOptionsLabel,
-    debounceTime = 400,
-    optionsMode = 'normal',
-    noMatchesLabel,
-    loadingLabel,
-    tweakStyles,
-    testId,
-    isActive,
-    isReadonly,
-    isDisabled,
-    dropdownOptions,
-    minSymbolsCountToOpenList = 0,
-    dropdownIcon = 'chevron-down',
-    shouldScrollToList = true,
-    searchInput,
-    iconType,
-    onChange,
-    onFocus,
-    onBlur,
-    onType,
-    onOpen,
-    isOptionDisabled = defaultIsOptionDisabled,
-    compareValuesOnChange = defaultCompareFunction,
-    convertValueToString = defaultConvertFunction,
-    convertValueToId,
-    convertValueToReactNode,
-    optionsFilter,
-    ...inputProps
-  } = props;
-  const classes = useStyles({ theme: tweakStyles });
-
-  const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } =
-    searchInput ?? {};
-  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
-  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: getInputStyles({ hasReadonlyInput, isMultiSelect }),
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'Select',
-  });
-
-  const tweakSearchInputStyles = useTweakStyles({
-    innerStyles: searchInputStyles,
-    tweakStyles,
-    className: 'tweakSearchInput',
-    currentComponentName: 'Select',
-  });
-
-  const tweakSelectListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakSelectList',
-    currentComponentName: 'Select',
-  });
-
-  const isMounted = useIsMounted();
-  const [isListOpen, setIsListOpen] = useState(false);
-  const [areOptionsLoading, setAreOptionsLoading] = useState(false);
-  const hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
-
-  const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
-  const [searchValue, setSearchValue] = useState('');
-  // если мы ввели что то в строку поиска - то этот булеан будет отключаться
-  // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
-  const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
-
-  const root = useRef<HTMLDivElement>(null);
-  const inputWrapper = useRef<HTMLDivElement>(null);
-  const list = useRef<HTMLDivElement>(null);
-  const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
-
-  const strValue = isMultiSelect ? value?.[0] : value;
-  const shouldShowAllOption =
-    isMultiSelect && isStringNotEmpty(allOptionsLabel) && searchValue === '';
-
-  const filteredOptions = useMemo(() => {
-    if (optionsMode !== 'search') {
-      return options;
-    }
-
-    const filter =
-      optionsFilter ?? createFilter<Value>((option) => [convertValueToString(option) ?? '']);
-
-    return filter(options as Value[], searchValue);
-  }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
-
-  const availableOptions = useMemo(
-    () => options.filter((option) => !isOptionDisabled(option)),
-    [options, isOptionDisabled],
-  );
-
-  const areAllOptionsSelected = isMultiSelect && value?.length === availableOptions.length;
-  const shouldShowMultiSelectCounter =
-    isMultiSelect && isNotEmpty(value) && value.length > 1 && !areAllOptionsSelected;
-
-  const optionsIndexesForNavigation = useMemo(() => {
-    const result: number[] = [];
-    if (shouldShowDefaultOption && hasDefaultOption) {
-      result.push(DEFAULT_OPTION_INDEX);
-    }
-    if (shouldShowAllOption) {
-      result.push(ALL_OPTION_INDEX);
-    }
-    return result.concat(
-      filteredOptions.reduce((acc, cur, i) => {
-        if (!isOptionDisabled(cur)) {
-          acc.push(i);
-        }
-        return acc;
-      }, [] as number[]),
-    );
-  }, [
-    filteredOptions,
-    hasDefaultOption,
-    isOptionDisabled,
-    shouldShowAllOption,
-    shouldShowDefaultOption,
-  ]);
-
-  const stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : undefined;
-  // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
-  const showedStringValue =
-    areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
-
-  const convertToId = useCallback(
-    (v: Value) => (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(v),
-    [convertValueToId, convertValueToString],
-  );
-
-  const getDropdownOffset = () => {
-    if (isEmpty(input.current) || inputProps.errorPosition === 'top') {
-      return 0;
-    }
-
-    // Высота элемента inputWrapper у компонента Input
-    return input.current.parentElement?.offsetHeight ?? 0;
-  };
-
-  const closeList = useCallback(() => {
-    setIsListOpen(false);
-    setSearchValue('');
-    setShouldShowDefaultOption(true);
-
-    if (!dropdownOptions?.shouldUsePopper) {
-      root.current?.style.removeProperty('--dropdown-offset');
-    }
-  }, [dropdownOptions?.shouldUsePopper]);
-
-  const handleListClose = useCallback(
-    (event: Event | SyntheticEvent) => {
-      if (!isListOpen) {
-        return;
-      }
-
-      closeList();
-      onBlur?.(event);
-    },
-    [isListOpen, closeList, onBlur],
-  );
-
-  const handleListOpen = () => {
-    if (isReadonly) {
-      return;
-    }
-
-    if (!isListOpen) {
-      setIsListOpen(true);
-
-      if (!dropdownOptions?.shouldUsePopper) {
-        root.current?.style.setProperty('--dropdown-offset', `${getDropdownOffset()}px`);
-      }
-    }
-  };
-
-  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    onFocus?.(event);
-    handleListOpen();
-  };
-
-  const handleOnClick = () => {
-    handleListOpen();
-  };
-
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
-    // например minSymbolsCount
-    if (isListOpen && !isOpen) {
-      handleListClose(event);
-      return;
-    }
-
-    if (
-      !isNotEmpty(event.relatedTarget) ||
-      !isNotEmpty(list.current) ||
-      !isNotEmpty(inputWrapper.current)
-    ) {
-      return;
-    }
-
-    const isActionInsideSelect =
-      hasExactParent(event.relatedTarget, list.current) ||
-      hasExactParent(event.relatedTarget, inputWrapper.current);
-
-    // Ничего не делаем, если клик был внутри селекта
-    if (!isActionInsideSelect) {
-      handleListClose(event);
-    }
-  };
-
-  const handleChange = useCallback(
-    (
-      newValue: Value | IMultipleSelectValue<Value> | undefined,
-      event:
-        | MouseEvent<HTMLElement>
-        | KeyboardEvent
-        | ChangeEvent<HTMLElement>
-        | FormEvent<HTMLElement>,
-    ) => {
-      // Тут беда с типами, сорри
-      if (!compareValuesOnChange(value as never, newValue as never)) {
-        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
-      }
-    },
-    [value, compareValuesOnChange, onChange],
-  );
-
-  const handleOptionSelect = useCallback(
-    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
-      handleListClose(event);
-      input.current?.blur();
-    },
-    [handleChange, handleListClose, filteredOptions],
-  );
-
-  // MultiSelect
-  const handleToggleOptionCheckbox = useCallback(
-    (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => {
-      if (!isMultiSelect) {
-        return;
-      }
-
-      // Если выбрана не дефолтная опция, которая сетит андеф
-      if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
-        handleChange(undefined, event);
-        return;
-      }
-      if (index === ALL_OPTION_INDEX && isSelected) {
-        handleChange(availableOptions as IMultipleSelectValue<Value>, event);
-        return;
-      }
-      const option = filteredOptions[index];
-      handleChange(
-        isSelected
-          ? // Добавляем
-            ([...(value ?? []), option] as IMultipleSelectValue<Value>)
-          : // Убираем
-            value?.filter((o) => convertToId(o) !== convertToId(option)),
-        event,
-      );
-    },
-    [isMultiSelect, filteredOptions, handleChange, value, availableOptions, convertToId],
-  );
-
-  const handleOnType = useCallback(
-    async (v: string) => {
-      if (onType === undefined) {
-        return;
-      }
-      if (isMounted()) {
-        setAreOptionsLoading(true);
-      }
-      await onType(v);
-      if (isMounted()) {
-        setAreOptionsLoading(false);
-      }
-      if (optionsMode === 'dynamic') {
-        setShouldShowDefaultOption(v === '');
-      }
-    },
-    [isMounted, onType, optionsMode],
-  );
-
-  const debounceHandleOnType = useMemo(
-    () => debounce(handleOnType, debounceTime, { isImmediate: debounceTime === 0 }),
-    [handleOnType, debounceTime],
-  );
-
-  const handleInputChange = (v: string, event: FormEvent<HTMLElement>) => {
-    if (onType !== undefined) {
-      debounceHandleOnType(v);
-    }
-
-    if (optionsMode !== 'dynamic') {
-      setShouldShowDefaultOption(v === '');
-    }
-
-    if (v === '' && !hasSearchInputInList) {
-      handleChange(undefined, event);
-    }
-
-    setSearchValue(v);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (!isListOpen) {
-      return;
-    }
-
-    event.stopPropagation();
-    const curIndexInNavigation = optionsIndexesForNavigation.findIndex(
-      (index) => index === focusedListCellIndex,
-    );
-
-    switch (event.code) {
-      case 'Enter':
-      case 'NumpadEnter': {
-        let indexToSelect = focusedListCellIndex;
-
-        // если осталась одна опция в списке,
-        // то выбираем ее нажатием на enter
-        if (indexToSelect === DEFAULT_OPTION_INDEX && filteredOptions.length === 1) {
-          indexToSelect = 0;
-        }
-
-        if (isMultiSelect) {
-          let isThisValueAlreadySelected: boolean | undefined;
-          if (indexToSelect === ALL_OPTION_INDEX) {
-            isThisValueAlreadySelected = areAllOptionsSelected;
-          } else {
-            // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
-            const option = filteredOptions[indexToSelect];
-            const valueIdToSelect = convertToId(option);
-            isThisValueAlreadySelected =
-              value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
-          }
-          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
-        } else {
-          handleOptionSelect(indexToSelect, event);
-        }
-        break;
-      }
-
-      case 'ArrowDown': {
-        // чтобы убрать перемещение курсора в инпуте
-        event.preventDefault();
-        const targetIndexInNavigation =
-          (curIndexInNavigation + 1) % optionsIndexesForNavigation.length;
-        setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
-        break;
-      }
-
-      case 'ArrowUp': {
-        // чтобы убрать перемещение курсора в инпуте
-        event.preventDefault();
-        const targetIndexInNavigation =
-          (curIndexInNavigation - 1 + optionsIndexesForNavigation.length) %
-          optionsIndexesForNavigation.length;
-        setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
-        break;
-      }
-    }
-  };
-
-  const onArrowClick = () => {
-    if (isListOpen) {
-      input.current?.blur();
-      closeList();
-    } else {
-      input.current?.focus();
-    }
-  };
-
-  useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
-
-  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
-
-  const isOpen =
-    // Пользователь пытается открыть лист
-    isListOpen &&
-    // Нам есть что показать:
-    // Есть опции
-    (filteredOptions.length > 0 ||
-      // Дефолтная опция
-      (defaultOptionLabel !== undefined && !hasEnoughSymbolsToSearch) ||
-      // Текст "Загрузка..."
-      inputProps.isLoading ||
-      // Текст "Совпадений не найдено"
-      noMatchesLabel !== undefined ||
-      // У нас есть инпут с поиском внутри листа
-      hasSearchInputInList) &&
-    // Последняя проверка на случай, если мы че то ищем в опциях
-    (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
-
-  // Эти значения ставятся в false по дефолту также в useDropdown
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-  } = dropdownOptions ?? {};
-
-  const popperData = useDropdown({
-    isOpen,
-    onDropdownClose: handleListClose,
-    referenceElement: input.current?.parentElement ?? inputWrapper.current,
-    dropdownElement: list.current,
-    options: dropdownOptions,
-    dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],
-  });
-
-  useEffect(() => {
-    const focusedCellIndex = isNotEmpty(strValue)
-      ? optionsIndexesForNavigation.find((index) => {
-          const option = filteredOptions[index];
-          return isNotEmpty(option) && convertToId(option) === convertToId(strValue);
-        })
-      : undefined;
-
-    setFocusedListCellIndex(focusedCellIndex ?? optionsIndexesForNavigation[0]);
-  }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
-
-  useEffect(() => {
-    if (isOpen) {
-      onOpen?.();
-    }
-  }, [isOpen]);
-
-  const searchInputEl = hasSearchInputInList && (
-    <SearchInput
-      value={searchValue}
-      onChange={handleInputChange}
-      tweakStyles={tweakSearchInputStyles}
-      placeholder="Поиск"
-      {...searchInputProps}
-    />
-  );
-
-  // Т.к. используется для проверки на пустой элемент `isReactNodeNotEmpty` внутри `SelectList`, то
-  // он пропускает React.Fragment
-  const customHeader = (isReactNodeNotEmpty(searchInputEl) || isReactNodeNotEmpty(header)) && (
-    <>
-      {searchInputEl}
-      {header}
-    </>
-  );
-
-  const listEl = (
-    <div
-      className={clsx(classes.listWrapper, {
-        [classes.withoutPopper]: !shouldUsePopper,
-        [classes.listWrapperInBody]: shouldRenderInBody,
-      })}
-      ref={list}
-      style={popperData?.styles.popper as CSSProperties}
-      tabIndex={0}
-      onBlur={handleBlur} // обработка для Tab из списка
-      {...popperData?.attributes.popper}
-    >
-      {isOpen && (
-        <SelectList
-          options={filteredOptions}
-          defaultOptionLabel={hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel}
-          allOptionsLabel={shouldShowAllOption && allOptionsLabel}
-          areAllOptionsSelected={areAllOptionsSelected}
-          customListHeader={customHeader}
-          customListFooter={footer}
-          noMatchesLabel={noMatchesLabel}
-          focusedIndex={focusedListCellIndex}
-          activeValue={value}
-          isLoading={inputProps.isLoading}
-          loadingLabel={loadingLabel}
-          tweakStyles={tweakSelectListStyles}
-          testId={getTestId(testId, 'list')}
-          isMultiSelect={isMultiSelect}
-          // скролл не работает с включеным поппером
-          shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}
-          isOptionDisabled={isOptionDisabled}
-          convertValueToString={convertValueToString}
-          convertValueToReactNode={convertValueToReactNode}
-          convertValueToId={convertToId}
-          onOptionSelect={handleOptionSelect}
-          onToggleCheckbox={handleToggleOptionCheckbox}
-        />
-      )}
-    </div>
-  );
-
-  const multiSelectCounterWithIcon =
-    shouldShowMultiSelectCounter || isNotEmpty(iconType) ? (
-      <>
-        {shouldShowMultiSelectCounter && (
-          <div className={classes.counter}>(+{value.length - 1})</div>
-        )}
-        {isNotEmpty(iconType) && <div className={classes.icon}>{renderIcon(iconType)}</div>}
-      </>
-    ) : undefined;
-
-  return (
-    <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
-      <div
-        className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
-        onClick={isDisabled || isReadonly ? undefined : handleOnClick}
-        ref={inputWrapper}
-      >
-        <Input
-          value={
-            searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
-          }
-          onChange={handleInputChange}
-          isActive={isListOpen || isActive}
-          isReadonly={hasReadonlyInput}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          isDisabled={isDisabled}
-          ref={input}
-          isLoading={areOptionsLoading}
-          tweakStyles={tweakInputStyles}
-          testId={testId}
-          iconType={isMultiSelect ? multiSelectCounterWithIcon : iconType}
-          {...inputProps}
-        />
-        <div
-          onMouseDown={(event: MouseEvent) => {
-            event.preventDefault();
-          }}
-          onClick={onArrowClick}
-          className={clsx(classes.arrow, isOpen && classes.activeArrow)}
-        >
-          {renderIcon(dropdownIcon)}
-        </div>
-      </div>
-      {shouldUsePopper ? (
-        <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
-          <>{listEl}</>
-        </Portal>
-      ) : (
-        <>{isOpen && listEl}</>
-      )}
-    </div>
-  );
-}
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  SyntheticEvent,
+  Ref,
+} from 'react';
+import { Portal } from 'react-overlays';
+import clsx from 'clsx';
+import { debounce } from 'ts-debounce';
+import {
+  createFilter,
+  getTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { hasExactParent } from '../../helpers';
+import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { IDropdownWithPopperOptions, ICommonProps } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
+import { Input, IInputProps } from '../Input';
+import { SearchInput, ISearchInputProps } from '../SearchInput';
+import { SelectList } from './components';
+import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
+import {
+  defaultCompareFunction,
+  defaultConvertFunction,
+  defaultIsOptionDisabled,
+  getDefaultConvertToIdFunction,
+} from './helpers';
+import { IMultipleSelectValue } from './types';
+import { getInputStyles, searchInputStyles, useStyles, ISelectStyles } from './Select.styles';
+
+export interface ISelectProps<Value>
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
+    ICommonProps<ISelectStyles> {
+  header?: ReactNode;
+  footer?: ReactNode;
+  defaultOptionLabel?: ReactNode;
+  allOptionsLabel?: string;
+  noMatchesLabel?: string;
+  loadingLabel?: ReactNode;
+  /** @default 'normal' */
+  optionsMode?: 'search' | 'dynamic' | 'normal';
+  /** @default 400 */
+  debounceTime?: number;
+  /** @default 0 */
+  minSymbolsCountToOpenList?: number;
+  dropdownOptions?: IDropdownWithPopperOptions;
+  /** @default 'chevron-down' */
+  dropdownIcon?: IIcon;
+  options: Value[] | Readonly<Value[]>;
+  value: Value | undefined;
+  /** @default true */
+  shouldScrollToList?: boolean;
+  isMultiSelect?: false;
+  searchInput?: {
+    /** @default false */
+    shouldRenderInList?: boolean;
+    ref?: Ref<HTMLInputElement>;
+  } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
+  isOptionDisabled?: (option: Value) => boolean;
+  onChange: (
+    value: Value | undefined,
+    event:
+      | MouseEvent<HTMLElement>
+      | KeyboardEvent
+      | ChangeEvent<HTMLElement>
+      | FormEvent<HTMLElement>,
+  ) => void; // подумать как возвращать индекс
+  onBlur?: (event: Event | SyntheticEvent) => void;
+  onType?: (value: string) => Promise<void>;
+  optionsFilter?: (options: Value[], query: string) => Value[];
+  onOpen?: () => void;
+  compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
+  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
+  convertValueToString?: (value: Value) => string | undefined;
+  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
+  convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
+  /** @description Функция должна быть мемоизирована с целью избежания ререндера */
+  convertValueToId?: (value: Value) => string | undefined;
+}
+
+export interface IMultipleSelectProps<Value>
+  extends Omit<
+    ISelectProps<Value>,
+    'value' | 'onChange' | 'compareValuesOnChange' | 'isMultiSelect'
+  > {
+  isMultiSelect: true;
+  value: IMultipleSelectValue<Value> | undefined;
+  onChange: (
+    value: IMultipleSelectValue<Value> | undefined,
+    event:
+      | MouseEvent<HTMLElement>
+      | KeyboardEvent
+      | ChangeEvent<HTMLElement>
+      | FormEvent<HTMLElement>,
+  ) => void;
+  compareValuesOnChange?: (
+    v1?: IMultipleSelectValue<Value>,
+    v2?: IMultipleSelectValue<Value>,
+  ) => boolean;
+}
+
+export function Select<Value>(
+  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
+): JSX.Element {
+  const {
+    options,
+    isMultiSelect,
+    value,
+    header,
+    footer,
+    defaultOptionLabel,
+    allOptionsLabel,
+    debounceTime = 400,
+    optionsMode = 'normal',
+    noMatchesLabel,
+    loadingLabel,
+    tweakStyles,
+    testId,
+    isActive,
+    isReadonly,
+    isDisabled,
+    dropdownOptions,
+    minSymbolsCountToOpenList = 0,
+    dropdownIcon = 'chevron-down',
+    shouldScrollToList = true,
+    searchInput,
+    iconType,
+    onChange,
+    onFocus,
+    onBlur,
+    onType,
+    onOpen,
+    isOptionDisabled = defaultIsOptionDisabled,
+    compareValuesOnChange = defaultCompareFunction,
+    convertValueToString = defaultConvertFunction,
+    convertValueToId,
+    convertValueToReactNode,
+    optionsFilter,
+    ...inputProps
+  } = props;
+  const classes = useStyles({ theme: tweakStyles });
+
+  const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } =
+    searchInput ?? {};
+  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
+  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: getInputStyles({ hasReadonlyInput, isMultiSelect }),
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'Select',
+  });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'Select',
+  });
+
+  const tweakSelectListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakSelectList',
+    currentComponentName: 'Select',
+  });
+
+  const isMounted = useIsMounted();
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [areOptionsLoading, setAreOptionsLoading] = useState(false);
+  const hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
+
+  const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
+  const [searchValue, setSearchValue] = useState('');
+  // если мы ввели что то в строку поиска - то этот булеан будет отключаться
+  // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
+  const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
+
+  const root = useRef<HTMLDivElement>(null);
+  const inputWrapper = useRef<HTMLDivElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
+
+  const strValue = isMultiSelect ? value?.[0] : value;
+  const shouldShowAllOption =
+    isMultiSelect && isStringNotEmpty(allOptionsLabel) && searchValue === '';
+
+  const filteredOptions = useMemo(() => {
+    if (optionsMode !== 'search') {
+      return options;
+    }
+
+    const filter =
+      optionsFilter ?? createFilter<Value>((option) => [convertValueToString(option) ?? '']);
+
+    return filter(options as Value[], searchValue);
+  }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
+
+  const availableOptions = useMemo(
+    () => options.filter((option) => !isOptionDisabled(option)),
+    [options, isOptionDisabled],
+  );
+
+  const areAllOptionsSelected = isMultiSelect && value?.length === availableOptions.length;
+  const shouldShowMultiSelectCounter =
+    isMultiSelect && isNotEmpty(value) && value.length > 1 && !areAllOptionsSelected;
+
+  const optionsIndexesForNavigation = useMemo(() => {
+    const result: number[] = [];
+    if (shouldShowDefaultOption && hasDefaultOption) {
+      result.push(DEFAULT_OPTION_INDEX);
+    }
+    if (shouldShowAllOption) {
+      result.push(ALL_OPTION_INDEX);
+    }
+    return result.concat(
+      filteredOptions.reduce((acc, cur, i) => {
+        if (!isOptionDisabled(cur)) {
+          acc.push(i);
+        }
+        return acc;
+      }, [] as number[]),
+    );
+  }, [
+    filteredOptions,
+    hasDefaultOption,
+    isOptionDisabled,
+    shouldShowAllOption,
+    shouldShowDefaultOption,
+  ]);
+
+  const stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : undefined;
+  // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
+  const showedStringValue =
+    areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
+
+  const convertToId = useCallback(
+    (v: Value) => (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(v),
+    [convertValueToId, convertValueToString],
+  );
+
+  const getDropdownOffset = () => {
+    if (inputProps.errorPosition === 'top') {
+      return 0;
+    }
+
+    return inputWrapper.current?.offsetHeight ?? 0;
+  };
+
+  const closeList = useCallback(() => {
+    setIsListOpen(false);
+    setSearchValue('');
+    setShouldShowDefaultOption(true);
+
+    if (!dropdownOptions?.shouldUsePopper) {
+      root.current?.style.removeProperty('--dropdown-offset');
+    }
+  }, [dropdownOptions?.shouldUsePopper]);
+
+  const handleListClose = useCallback(
+    (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
+      closeList();
+      onBlur?.(event);
+    },
+    [isListOpen, closeList, onBlur],
+  );
+
+  const handleListOpen = () => {
+    if (isReadonly) {
+      return;
+    }
+
+    if (!isListOpen) {
+      setIsListOpen(true);
+
+      if (!dropdownOptions?.shouldUsePopper) {
+        root.current?.style.setProperty('--dropdown-offset', `${getDropdownOffset()}px`);
+      }
+    }
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    onFocus?.(event);
+    handleListOpen();
+  };
+
+  const handleOnClick = () => {
+    handleListOpen();
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
+    // например minSymbolsCount
+    if (isListOpen && !isOpen) {
+      handleListClose(event);
+      return;
+    }
+
+    if (
+      !isNotEmpty(event.relatedTarget) ||
+      !isNotEmpty(list.current) ||
+      !isNotEmpty(inputWrapper.current)
+    ) {
+      return;
+    }
+
+    const isActionInsideSelect =
+      hasExactParent(event.relatedTarget, list.current) ||
+      hasExactParent(event.relatedTarget, inputWrapper.current);
+
+    // Ничего не делаем, если клик был внутри селекта
+    if (!isActionInsideSelect) {
+      handleListClose(event);
+    }
+  };
+
+  const handleChange = useCallback(
+    (
+      newValue: Value | IMultipleSelectValue<Value> | undefined,
+      event:
+        | MouseEvent<HTMLElement>
+        | KeyboardEvent
+        | ChangeEvent<HTMLElement>
+        | FormEvent<HTMLElement>,
+    ) => {
+      // Тут беда с типами, сорри
+      if (!compareValuesOnChange(value as never, newValue as never)) {
+        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
+      }
+    },
+    [value, compareValuesOnChange, onChange],
+  );
+
+  const handleOptionSelect = useCallback(
+    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
+      handleChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
+      handleListClose(event);
+      input.current?.blur();
+    },
+    [handleChange, handleListClose, filteredOptions],
+  );
+
+  // MultiSelect
+  const handleToggleOptionCheckbox = useCallback(
+    (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => {
+      if (!isMultiSelect) {
+        return;
+      }
+
+      // Если выбрана не дефолтная опция, которая сетит андеф
+      if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
+        handleChange(undefined, event);
+        return;
+      }
+      if (index === ALL_OPTION_INDEX && isSelected) {
+        handleChange(availableOptions as IMultipleSelectValue<Value>, event);
+        return;
+      }
+      const option = filteredOptions[index];
+      handleChange(
+        isSelected
+          ? // Добавляем
+            ([...(value ?? []), option] as IMultipleSelectValue<Value>)
+          : // Убираем
+            value?.filter((o) => convertToId(o) !== convertToId(option)),
+        event,
+      );
+    },
+    [isMultiSelect, filteredOptions, handleChange, value, availableOptions, convertToId],
+  );
+
+  const handleOnType = useCallback(
+    async (v: string) => {
+      if (onType === undefined) {
+        return;
+      }
+      if (isMounted()) {
+        setAreOptionsLoading(true);
+      }
+      await onType(v);
+      if (isMounted()) {
+        setAreOptionsLoading(false);
+      }
+      if (optionsMode === 'dynamic') {
+        setShouldShowDefaultOption(v === '');
+      }
+    },
+    [isMounted, onType, optionsMode],
+  );
+
+  const debounceHandleOnType = useMemo(
+    () => debounce(handleOnType, debounceTime, { isImmediate: debounceTime === 0 }),
+    [handleOnType, debounceTime],
+  );
+
+  const handleInputChange = (v: string, event: FormEvent<HTMLElement>) => {
+    if (onType !== undefined) {
+      debounceHandleOnType(v);
+    }
+
+    if (optionsMode !== 'dynamic') {
+      setShouldShowDefaultOption(v === '');
+    }
+
+    if (v === '' && !hasSearchInputInList) {
+      handleChange(undefined, event);
+    }
+
+    setSearchValue(v);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!isListOpen) {
+      return;
+    }
+
+    event.stopPropagation();
+    const curIndexInNavigation = optionsIndexesForNavigation.findIndex(
+      (index) => index === focusedListCellIndex,
+    );
+
+    switch (event.code) {
+      case 'Enter':
+      case 'NumpadEnter': {
+        let indexToSelect = focusedListCellIndex;
+
+        // если осталась одна опция в списке,
+        // то выбираем ее нажатием на enter
+        if (indexToSelect === DEFAULT_OPTION_INDEX && filteredOptions.length === 1) {
+          indexToSelect = 0;
+        }
+
+        if (isMultiSelect) {
+          let isThisValueAlreadySelected: boolean | undefined;
+          if (indexToSelect === ALL_OPTION_INDEX) {
+            isThisValueAlreadySelected = areAllOptionsSelected;
+          } else {
+            // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
+            const option = filteredOptions[indexToSelect];
+            const valueIdToSelect = convertToId(option);
+            isThisValueAlreadySelected =
+              value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
+          }
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
+        } else {
+          handleOptionSelect(indexToSelect, event);
+        }
+        break;
+      }
+
+      case 'ArrowDown': {
+        // чтобы убрать перемещение курсора в инпуте
+        event.preventDefault();
+        const targetIndexInNavigation =
+          (curIndexInNavigation + 1) % optionsIndexesForNavigation.length;
+        setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
+        break;
+      }
+
+      case 'ArrowUp': {
+        // чтобы убрать перемещение курсора в инпуте
+        event.preventDefault();
+        const targetIndexInNavigation =
+          (curIndexInNavigation - 1 + optionsIndexesForNavigation.length) %
+          optionsIndexesForNavigation.length;
+        setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
+        break;
+      }
+    }
+  };
+
+  const onArrowClick = () => {
+    if (isListOpen) {
+      input.current?.blur();
+      closeList();
+    } else {
+      input.current?.focus();
+    }
+  };
+
+  useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
+
+  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
+
+  const isOpen =
+    // Пользователь пытается открыть лист
+    isListOpen &&
+    // Нам есть что показать:
+    // Есть опции
+    (filteredOptions.length > 0 ||
+      // Дефолтная опция
+      (defaultOptionLabel !== undefined && !hasEnoughSymbolsToSearch) ||
+      // Текст "Загрузка..."
+      inputProps.isLoading ||
+      // Текст "Совпадений не найдено"
+      noMatchesLabel !== undefined ||
+      // У нас есть инпут с поиском внутри листа
+      hasSearchInputInList) &&
+    // Последняя проверка на случай, если мы че то ищем в опциях
+    (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
+
+  // Эти значения ставятся в false по дефолту также в useDropdown
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+  } = dropdownOptions ?? {};
+
+  const popperData = useDropdown({
+    isOpen,
+    onDropdownClose: handleListClose,
+    referenceElement: input.current?.parentElement?.parentElement ?? inputWrapper.current,
+    dropdownElement: list.current,
+    options: dropdownOptions,
+    dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],
+  });
+
+  useEffect(() => {
+    const focusedCellIndex = isNotEmpty(strValue)
+      ? optionsIndexesForNavigation.find((index) => {
+          const option = filteredOptions[index];
+          return isNotEmpty(option) && convertToId(option) === convertToId(strValue);
+        })
+      : undefined;
+
+    setFocusedListCellIndex(focusedCellIndex ?? optionsIndexesForNavigation[0]);
+  }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen?.();
+    }
+  }, [isOpen]);
+
+  const searchInputEl = hasSearchInputInList && (
+    <SearchInput
+      value={searchValue}
+      onChange={handleInputChange}
+      tweakStyles={tweakSearchInputStyles}
+      placeholder="Поиск"
+      {...searchInputProps}
+    />
+  );
+
+  // Т.к. используется для проверки на пустой элемент `isReactNodeNotEmpty` внутри `SelectList`, то
+  // он пропускает React.Fragment
+  const customHeader = (isReactNodeNotEmpty(searchInputEl) || isReactNodeNotEmpty(header)) && (
+    <>
+      {searchInputEl}
+      {header}
+    </>
+  );
+
+  const listEl = (
+    <div
+      className={clsx(classes.listWrapper, {
+        [classes.withoutPopper]: !shouldUsePopper,
+        [classes.listWrapperInBody]: shouldRenderInBody,
+      })}
+      ref={list}
+      style={popperData?.styles.popper as CSSProperties}
+      tabIndex={0}
+      onBlur={handleBlur} // обработка для Tab из списка
+      {...popperData?.attributes.popper}
+    >
+      {isOpen && (
+        <SelectList
+          options={filteredOptions}
+          defaultOptionLabel={hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel}
+          allOptionsLabel={shouldShowAllOption && allOptionsLabel}
+          areAllOptionsSelected={areAllOptionsSelected}
+          customListHeader={customHeader}
+          customListFooter={footer}
+          noMatchesLabel={noMatchesLabel}
+          focusedIndex={focusedListCellIndex}
+          activeValue={value}
+          isLoading={inputProps.isLoading}
+          loadingLabel={loadingLabel}
+          tweakStyles={tweakSelectListStyles}
+          testId={getTestId(testId, 'list')}
+          isMultiSelect={isMultiSelect}
+          // скролл не работает с включеным поппером
+          shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}
+          isOptionDisabled={isOptionDisabled}
+          convertValueToString={convertValueToString}
+          convertValueToReactNode={convertValueToReactNode}
+          convertValueToId={convertToId}
+          onOptionSelect={handleOptionSelect}
+          onToggleCheckbox={handleToggleOptionCheckbox}
+        />
+      )}
+    </div>
+  );
+
+  const multiSelectCounterWithIcon =
+    shouldShowMultiSelectCounter || isNotEmpty(iconType) ? (
+      <>
+        {shouldShowMultiSelectCounter && (
+          <div className={classes.counter}>(+{value.length - 1})</div>
+        )}
+        {isNotEmpty(iconType) && <div className={classes.icon}>{renderIcon(iconType)}</div>}
+      </>
+    ) : undefined;
+
+  return (
+    <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
+      <div
+        className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
+        onClick={isDisabled || isReadonly ? undefined : handleOnClick}
+        ref={inputWrapper}
+      >
+        <Input
+          value={
+            searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
+          }
+          onChange={handleInputChange}
+          isActive={isListOpen || isActive}
+          isReadonly={hasReadonlyInput}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          isDisabled={isDisabled}
+          ref={input}
+          isLoading={areOptionsLoading}
+          tweakStyles={tweakInputStyles}
+          testId={testId}
+          iconType={isMultiSelect ? multiSelectCounterWithIcon : iconType}
+          {...inputProps}
+        />
+        <div
+          onMouseDown={(event: MouseEvent) => {
+            event.preventDefault();
+          }}
+          onClick={onArrowClick}
+          className={clsx(classes.arrow, isOpen && classes.activeArrow)}
+        >
+          {renderIcon(dropdownIcon)}
+        </div>
+      </div>
+      {shouldUsePopper ? (
+        <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
+          <>{listEl}</>
+        </Portal>
+      ) : (
+        <>{isOpen && listEl}</>
+      )}
+    </div>
+  );
+}