@true-engineering/true-react-common-ui-kit 2.1.0 → 2.1.1

package/src/components/Select/Select.tsx

@@ -1,634 +1,575 @@
-import {
-  ReactNode,
-  FocusEvent,
-  KeyboardEvent,
-  MouseEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  SyntheticEvent,
-} from 'react';
-import { Styles } from 'jss';
-import clsx from 'clsx';
-import merge from 'lodash-es/merge';
-import { debounce } from 'ts-debounce';
-import { Portal } from 'react-overlays';
-import { SelectList } from './SelectList';
-import { IInputProps, Input } from '../Input';
-import { IIconType, Icon } from '../Icon';
-import {
-  useIsMounted,
-  useTheme,
-  useOnClickOutsideWithRef,
-  useDropdown,
-  useTweakStyles,
-} from '../../hooks';
-import { IDropdownWithPopperOptions } from '../../types';
-import {
-  createFilter,
-  getTestId,
-  hasExactParent,
-  isNotEmpty,
-  isStringNotEmpty,
-} from '../../helpers';
-import {
-  defaultConvertFunction,
-  defaultCompareFunction,
-  defaultIsOptionDisabled,
-  getDefaultConvertToIdFunction,
-  isMultiSelectValue,
-} from './helpers';
-import { SelectStyles, styles } from './Select.styles';
-import { ISearchInputProps, SearchInput } from '../SearchInput';
-import { IMultipleSelectValue } from './types';
-import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
-import { renderIcon } from '../../helpers/snippets';
-
-export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
-  tweakStyles?: SelectStyles;
-  defaultOptionLabel?: string;
-  allOptionsLabel?: string;
-  noMatchesLabel?: string;
-  loadingLabel?: ReactNode;
-  optionsMode?: 'search' | 'dynamic' | 'normal';
-  debounceTime?: number;
-  minSymbolsCountToOpenList?: number;
-  dropdownOptions?: IDropdownWithPopperOptions;
-  dropdownIcon?: IIconType;
-  options: Value[];
-  value: Value | undefined;
-  shouldScrollToList?: boolean;
-  isMultiSelect?: boolean;
-  searchInput?: { shouldRenderInList: true } & Pick<
-    ISearchInputProps,
-    'placeholder'
-  >;
-  isOptionDisabled?(option: Value): boolean;
-  onChange(value?: Value): 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;
-  // Для избежания проблем юзайте useCallback на эти функции
-  // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
-  convertValueToString?(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-  convertValueToId?(value: Value): string | undefined;
-}
-
-export interface IMultipleSelectProps<Value>
-  extends Omit<
-    ISelectProps<Value>,
-    'value' | 'onChange' | 'compareValuesOnChange'
-  > {
-  isMultiSelect: true;
-  value: IMultipleSelectValue<Value> | undefined;
-  onChange(value?: IMultipleSelectValue<Value>): void;
-  compareValuesOnChange?(
-    v1?: IMultipleSelectValue<Value>,
-    v2?: IMultipleSelectValue<Value>,
-  ): boolean;
-}
-
-export function Select<Value>(
-  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
-): JSX.Element {
-  const {
-    options,
-    value,
-    defaultOptionLabel,
-    allOptionsLabel,
-    debounceTime = 400,
-    optionsMode = 'normal',
-    noMatchesLabel,
-    loadingLabel,
-    tweakStyles,
-    testId,
-    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, componentStyles } = useTheme('Select', styles, tweakStyles);
-  const isMounted = useIsMounted();
-  const [isListOpen, setIsListOpen] = useState(false);
-  const [areOptionsLoading, setAreOptionsLoading] = useState(false);
-  const hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
-
-  const [focusedListCellIndex, setFocusedListCellIndex] =
-    useState(DEFAULT_OPTION_INDEX);
-  const [searchValue, setSearchValue] = useState('');
-  // если мы ввели что то в строку поиска - то этот булеан будет отключаться
-  // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
-  const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
-
-  const inputWrapper = useRef<HTMLDivElement>(null);
-  const list = useRef<HTMLDivElement>(null);
-  const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
-
-  const shouldRenderSearchInputInList =
-    searchInput?.shouldRenderInList === true;
-  const hasSearchInputInList =
-    optionsMode !== 'normal' && shouldRenderSearchInputInList;
-
-  const isMultiSelect = isMultiSelectValue(props, value);
-  const strValue = isMultiSelect ? value?.[0] : value;
-  const shouldShowAllOption =
-    isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === '';
-
-  const filteredOptions = useMemo(() => {
-    if (optionsMode !== 'search') {
-      return options;
-    }
-
-    const filter =
-      optionsFilter ??
-      createFilter<Value>((option) => [convertValueToString(option) ?? '']);
-
-    return filter(options, searchValue);
-  }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
-
-  const availableOptions = useMemo(
-    () => options.filter((o) => !isOptionDisabled(o)),
-    [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]);
-
-  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 handleListClose = useCallback(
-    (event: Event | SyntheticEvent) => {
-      setIsListOpen(false);
-      setSearchValue('');
-      setShouldShowDefaultOption(true);
-      onBlur?.(event);
-    },
-    [onBlur],
-  );
-
-  const handleListOpen = () => {
-    if (!isListOpen) {
-      setIsListOpen(true);
-    }
-  };
-
-  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 handleOnChange = useCallback(
-    (newValue: Value | IMultipleSelectValue<Value> | undefined) => {
-      // Тут беда с типами, сорри
-      if (!compareValuesOnChange(value as never, newValue as never)) {
-        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined);
-      }
-    },
-    [value, compareValuesOnChange, onChange],
-  );
-
-  const handleOptionSelect = useCallback(
-    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(
-        index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index],
-      );
-      handleListClose(event);
-      input.current?.blur();
-    },
-    [handleOnChange, handleListClose, filteredOptions],
-  );
-
-  // MultiSelect
-  const handleToggleOptionCheckbox = useCallback(
-    (index: number, isSelected: boolean) => {
-      if (!isMultiSelect) {
-        return;
-      }
-
-      // Если выбрана не дефолтная опция, которая сетит андеф
-      if (
-        index === DEFAULT_OPTION_INDEX ||
-        (index === ALL_OPTION_INDEX && !isSelected)
-      ) {
-        handleOnChange(undefined);
-        return;
-      }
-      if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(availableOptions as IMultipleSelectValue<Value>);
-        return;
-      }
-      const option = filteredOptions[index];
-      handleOnChange(
-        isSelected
-          ? // Добавляем
-            ([...(value ?? []), option] as IMultipleSelectValue<Value>)
-          : // Убираем
-            value?.filter((o) => convertToId(o) !== convertToId(option)),
-      );
-    },
-    [handleOnChange, filteredOptions, isMultiSelect, value],
-  );
-
-  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 === '');
-      }
-    },
-    [onType, optionsMode],
-  );
-
-  const debounceHandleOnType = useCallback(
-    debounce(handleOnType, debounceTime),
-    [handleOnType, debounceTime],
-  );
-
-  const handleInputChange = (v: string) => {
-    if (onType !== undefined) {
-      debounceHandleOnType(v);
-    }
-
-    if (optionsMode !== 'dynamic') {
-      setShouldShowDefaultOption(v === '');
-    }
-
-    if (v === '' && !hasSearchInputInList) {
-      handleOnChange(undefined);
-    }
-
-    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;
-          if (indexToSelect === ALL_OPTION_INDEX) {
-            isThisValueAlreadySelected = areAllOptionsSelected;
-          } else {
-            // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
-            const valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
-            isThisValueAlreadySelected =
-              value?.some((opt) => convertToId(opt) === valueIdToSelect) ??
-              false;
-          }
-          handleToggleOptionCheckbox(
-            indexToSelect,
-            !isThisValueAlreadySelected,
-          );
-        } 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();
-    } 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);
-
-  const hasReadonlyInput =
-    isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
-
-  const tweakInputStyles = useMemo(
-    () =>
-      merge(
-        {},
-        componentStyles.tweakInput,
-        { ...(hasReadonlyInput && { input: { cursor: 'pointer' } }) },
-        { ...(isMultiSelect && { inputIcon: { width: 'auto' } }) },
-        tweakStyles?.tweakInput,
-      ) as Styles,
-    [tweakStyles?.tweakInput, hasReadonlyInput],
-  );
-
-  const tweakSearchInputStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakSearchInput',
-  );
-
-  // Эти значения ставятся в false по дефолту также в useDropdown
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-  } = dropdownOptions ?? {};
-
-  const popperData = useDropdown({
-    isOpen,
-    onDropdownClose: handleListClose,
-    referenceElement: inputWrapper.current,
-    dropdownElement: list.current,
-    options: dropdownOptions,
-    dependenciesForPositionUpdating: [
-      inputProps.isLoading,
-      filteredOptions.length,
-    ],
-  });
-
-  useEffect(() => {
-    setFocusedListCellIndex(
-      optionsIndexesForNavigation.find(
-        (index) =>
-          isNotEmpty(strValue) &&
-          isNotEmpty(filteredOptions[index]) &&
-          convertToId(filteredOptions[index]) === convertToId(strValue),
-      ) ?? optionsIndexesForNavigation[0],
-    );
-  }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
-
-  useEffect(() => {
-    if (isOpen) {
-      onOpen?.();
-    }
-  }, [isOpen]);
-
-  const listEl = (
-    <div
-      className={clsx(classes.listWrapper, {
-        [classes.withoutPopper]: !shouldUsePopper,
-        [classes.listWrapperInBody]: shouldRenderInBody,
-      })}
-      ref={list}
-      style={popperData?.styles.popper as Styles}
-      onBlur={handleBlur} // обработка для Tab из списка
-      {...popperData?.attributes.popper}
-    >
-      {isOpen && (
-        <SelectList
-          options={filteredOptions}
-          defaultOptionLabel={
-            hasDefaultOption && shouldShowDefaultOption
-              ? defaultOptionLabel
-              : undefined
-          }
-          allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
-          areAllOptionsSelected={areAllOptionsSelected}
-          customListHeader={
-            hasSearchInputInList ? (
-              <SearchInput
-                value={searchValue}
-                onChange={handleInputChange}
-                tweakStyles={tweakSearchInputStyles}
-                placeholder="Поиск"
-                {...searchInput}
-              />
-            ) : undefined
-          }
-          noMatchesLabel={noMatchesLabel}
-          focusedIndex={focusedListCellIndex}
-          activeValue={value}
-          isLoading={inputProps.isLoading}
-          loadingLabel={loadingLabel}
-          tweakStyles={tweakStyles?.tweakSelectList as Styles}
-          testId={getTestId(testId, 'list')}
-          // скролл не работает с включеным поппером
-          shouldScrollToList={
-            shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll
-          }
-          isOptionDisabled={isOptionDisabled}
-          convertValueToString={convertValueToString}
-          convertValueToReactNode={convertValueToReactNode}
-          convertValueToId={convertToId}
-          onOptionSelect={handleOptionSelect}
-          onToggleCheckbox={
-            isMultiSelect ? handleToggleOptionCheckbox : undefined
-          }
-        />
-      )}
-    </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}>
-      <div
-        className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
-        onClick={isDisabled ? undefined : handleOnClick}
-        ref={inputWrapper}
-      >
-        <Input
-          value={
-            searchValue !== '' && !shouldRenderSearchInputInList
-              ? searchValue
-              : showedStringValue
-          }
-          onChange={handleInputChange}
-          isActive={isListOpen}
-          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)}
-        >
-          <Icon type={dropdownIcon} />
-        </div>
-      </div>
-      {shouldUsePopper ? (
-        <Portal
-          container={shouldRenderInBody ? document.body : inputWrapper.current}
-        >
-          <>{listEl}</>
-        </Portal>
-      ) : (
-        <>{isOpen && listEl}</>
-      )}
-    </div>
-  );
-}
+import {
+  ReactNode,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  SyntheticEvent,
+} from 'react';
+import { Portal } from 'react-overlays';
+import clsx from 'clsx';
+import { Styles } from 'jss';
+import merge from 'lodash-es/merge';
+import { debounce } from 'ts-debounce';
+import {
+  createFilter,
+  getTestId,
+  hasExactParent,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '../../helpers';
+import { renderIcon } from '../../helpers/snippets';
+import {
+  useIsMounted,
+  useTheme,
+  useOnClickOutsideWithRef,
+  useDropdown,
+  useTweakStyles,
+} from '../../hooks';
+import { IDropdownWithPopperOptions } from '../../types';
+import { IIconType, Icon } from '../Icon';
+import { IInputProps, Input } from '../Input';
+import { ISearchInputProps, SearchInput } from '../SearchInput';
+import { SelectStyles, styles } from './Select.styles';
+import { SelectList } from './SelectList';
+import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
+import {
+  defaultConvertFunction,
+  defaultCompareFunction,
+  defaultIsOptionDisabled,
+  getDefaultConvertToIdFunction,
+  isMultiSelectValue,
+} from './helpers';
+import { IMultipleSelectValue } from './types';
+
+export interface ISelectProps<Value>
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
+  tweakStyles?: SelectStyles;
+  defaultOptionLabel?: string;
+  allOptionsLabel?: string;
+  noMatchesLabel?: string;
+  loadingLabel?: ReactNode;
+  optionsMode?: 'search' | 'dynamic' | 'normal';
+  debounceTime?: number;
+  minSymbolsCountToOpenList?: number;
+  dropdownOptions?: IDropdownWithPopperOptions;
+  dropdownIcon?: IIconType;
+  options: Value[];
+  value: Value | undefined;
+  shouldScrollToList?: boolean;
+  isMultiSelect?: boolean;
+  searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
+  isOptionDisabled?(option: Value): boolean;
+  onChange(value?: Value): 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;
+  // Для избежания проблем юзайте useCallback на эти функции
+  // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
+  convertValueToString?(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
+  convertValueToId?(value: Value): string | undefined;
+}
+
+export interface IMultipleSelectProps<Value>
+  extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
+  isMultiSelect: true;
+  value: IMultipleSelectValue<Value> | undefined;
+  onChange(value?: IMultipleSelectValue<Value>): void;
+  compareValuesOnChange?(
+    v1?: IMultipleSelectValue<Value>,
+    v2?: IMultipleSelectValue<Value>,
+  ): boolean;
+}
+
+export function Select<Value>(
+  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
+): JSX.Element {
+  const {
+    options,
+    value,
+    defaultOptionLabel,
+    allOptionsLabel,
+    debounceTime = 400,
+    optionsMode = 'normal',
+    noMatchesLabel,
+    loadingLabel,
+    tweakStyles,
+    testId,
+    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, componentStyles } = useTheme('Select', styles, tweakStyles);
+  const isMounted = useIsMounted();
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [areOptionsLoading, setAreOptionsLoading] = useState(false);
+  const hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
+
+  const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
+  const [searchValue, setSearchValue] = useState('');
+  // если мы ввели что то в строку поиска - то этот булеан будет отключаться
+  // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
+  const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
+
+  const inputWrapper = useRef<HTMLDivElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
+
+  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
+  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
+
+  const isMultiSelect = isMultiSelectValue(props, value);
+  const strValue = isMultiSelect ? value?.[0] : value;
+  const shouldShowAllOption = isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === '';
+
+  const filteredOptions = useMemo(() => {
+    if (optionsMode !== 'search') {
+      return options;
+    }
+
+    const filter =
+      optionsFilter ?? createFilter<Value>((option) => [convertValueToString(option) ?? '']);
+
+    return filter(options, searchValue);
+  }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
+
+  const availableOptions = useMemo(
+    () => options.filter((o) => !isOptionDisabled(o)),
+    [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]);
+
+  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 handleListClose = useCallback(
+    (event: Event | SyntheticEvent) => {
+      setIsListOpen(false);
+      setSearchValue('');
+      setShouldShowDefaultOption(true);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
+
+  const handleListOpen = () => {
+    if (!isListOpen) {
+      setIsListOpen(true);
+    }
+  };
+
+  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 handleOnChange = useCallback(
+    (newValue: Value | IMultipleSelectValue<Value> | undefined) => {
+      // Тут беда с типами, сорри
+      if (!compareValuesOnChange(value as never, newValue as never)) {
+        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined);
+      }
+    },
+    [value, compareValuesOnChange, onChange],
+  );
+
+  const handleOptionSelect = useCallback(
+    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
+      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index]);
+      handleListClose(event);
+      input.current?.blur();
+    },
+    [handleOnChange, handleListClose, filteredOptions],
+  );
+
+  // MultiSelect
+  const handleToggleOptionCheckbox = useCallback(
+    (index: number, isSelected: boolean) => {
+      if (!isMultiSelect) {
+        return;
+      }
+
+      // Если выбрана не дефолтная опция, которая сетит андеф
+      if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
+        handleOnChange(undefined);
+        return;
+      }
+      if (index === ALL_OPTION_INDEX && isSelected) {
+        handleOnChange(availableOptions as IMultipleSelectValue<Value>);
+        return;
+      }
+      const option = filteredOptions[index];
+      handleOnChange(
+        isSelected
+          ? // Добавляем
+            ([...(value ?? []), option] as IMultipleSelectValue<Value>)
+          : // Убираем
+            value?.filter((o) => convertToId(o) !== convertToId(option)),
+      );
+    },
+    [handleOnChange, filteredOptions, isMultiSelect, value],
+  );
+
+  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 === '');
+      }
+    },
+    [onType, optionsMode],
+  );
+
+  const debounceHandleOnType = useCallback(debounce(handleOnType, debounceTime), [
+    handleOnType,
+    debounceTime,
+  ]);
+
+  const handleInputChange = (v: string) => {
+    if (onType !== undefined) {
+      debounceHandleOnType(v);
+    }
+
+    if (optionsMode !== 'dynamic') {
+      setShouldShowDefaultOption(v === '');
+    }
+
+    if (v === '' && !hasSearchInputInList) {
+      handleOnChange(undefined);
+    }
+
+    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;
+          if (indexToSelect === ALL_OPTION_INDEX) {
+            isThisValueAlreadySelected = areAllOptionsSelected;
+          } else {
+            // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
+            const valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
+            isThisValueAlreadySelected =
+              value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
+          }
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+        } 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();
+    } 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);
+
+  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
+
+  const tweakInputStyles = useMemo(
+    () =>
+      merge(
+        {},
+        componentStyles.tweakInput,
+        { ...(hasReadonlyInput && { input: { cursor: 'pointer' } }) },
+        { ...(isMultiSelect && { inputIcon: { width: 'auto' } }) },
+        tweakStyles?.tweakInput,
+      ) as Styles,
+    [tweakStyles?.tweakInput, hasReadonlyInput],
+  );
+
+  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
+
+  // Эти значения ставятся в false по дефолту также в useDropdown
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+  } = dropdownOptions ?? {};
+
+  const popperData = useDropdown({
+    isOpen,
+    onDropdownClose: handleListClose,
+    referenceElement: inputWrapper.current,
+    dropdownElement: list.current,
+    options: dropdownOptions,
+    dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],
+  });
+
+  useEffect(() => {
+    setFocusedListCellIndex(
+      optionsIndexesForNavigation.find(
+        (index) =>
+          isNotEmpty(strValue) &&
+          isNotEmpty(filteredOptions[index]) &&
+          convertToId(filteredOptions[index]) === convertToId(strValue),
+      ) ?? optionsIndexesForNavigation[0],
+    );
+  }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen?.();
+    }
+  }, [isOpen]);
+
+  const listEl = (
+    <div
+      className={clsx(classes.listWrapper, {
+        [classes.withoutPopper]: !shouldUsePopper,
+        [classes.listWrapperInBody]: shouldRenderInBody,
+      })}
+      ref={list}
+      style={popperData?.styles.popper as Styles}
+      onBlur={handleBlur} // обработка для Tab из списка
+      {...popperData?.attributes.popper}
+    >
+      {isOpen && (
+        <SelectList
+          options={filteredOptions}
+          defaultOptionLabel={
+            hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : undefined
+          }
+          allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
+          areAllOptionsSelected={areAllOptionsSelected}
+          customListHeader={
+            hasSearchInputInList ? (
+              <SearchInput
+                value={searchValue}
+                onChange={handleInputChange}
+                tweakStyles={tweakSearchInputStyles}
+                placeholder="Поиск"
+                {...searchInput}
+              />
+            ) : undefined
+          }
+          noMatchesLabel={noMatchesLabel}
+          focusedIndex={focusedListCellIndex}
+          activeValue={value}
+          isLoading={inputProps.isLoading}
+          loadingLabel={loadingLabel}
+          tweakStyles={tweakStyles?.tweakSelectList as Styles}
+          testId={getTestId(testId, 'list')}
+          // скролл не работает с включеным поппером
+          shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}
+          isOptionDisabled={isOptionDisabled}
+          convertValueToString={convertValueToString}
+          convertValueToReactNode={convertValueToReactNode}
+          convertValueToId={convertToId}
+          onOptionSelect={handleOptionSelect}
+          onToggleCheckbox={isMultiSelect ? handleToggleOptionCheckbox : undefined}
+        />
+      )}
+    </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}>
+      <div
+        className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
+        onClick={isDisabled ? undefined : handleOnClick}
+        ref={inputWrapper}
+      >
+        <Input
+          value={
+            searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
+          }
+          onChange={handleInputChange}
+          isActive={isListOpen}
+          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)}
+        >
+          <Icon type={dropdownIcon} />
+        </div>
+      </div>
+      {shouldUsePopper ? (
+        <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
+          <>{listEl}</>
+        </Portal>
+      ) : (
+        <>{isOpen && listEl}</>
+      )}
+    </div>
+  );
+}