@true-engineering/true-react-common-ui-kit 1.6.0 → 1.8.0

package/src/components/Select/Select.tsx

@@ -1,514 +1,510 @@
-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';
-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 { getTestId, hasExactParent, isNotEmpty } from '../../helpers';
-import {
-  defaultConvertFunction,
-  defaultCompareFunction,
-  getActiveValueIndex,
-  defaultIsOptionDisabled,
-} from './helpers';
-import { SelectStyles, styles } from './Select.styles';
-import { ISearchInputProps, SearchInput } from '../SearchInput';
-
-export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
-  tweakStyles?: SelectStyles;
-  defaultOptionLabel?: string;
-  noMatchesLabel?: string;
-  loadingLabel?: ReactNode;
-  optionsMode?: 'search' | 'dynamic' | 'normal';
-  debounceTime?: number;
-  minSymbolsCountToOpenList?: number;
-  dropdownOptions?: IDropdownWithPopperOptions;
-  dropdownIcon?: IIconType;
-  options: Value[];
-  value: Value | undefined;
-  shouldScrollToList?: boolean;
-  searchInput?: { shouldRenderInList: true } & Pick<
-    ISearchInputProps,
-    'placeholder'
-  >;
-  isOptionDisabled?(option: Value): boolean;
-  onChange(value: Value | undefined): void; // подумать как возвращать индекс
-  onBlur?(event: Event | SyntheticEvent): void;
-  onType?(value: string): Promise<void>;
-  optionsFilter?(options: Value[], query: string): Value[];
-  onOpen?(): void;
-  compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
-  // Для избежания проблем юзайте useCallback на эти функции
-  // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
-  convertValueToString?(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-  convertValueToId?(value: Value): string | undefined;
-}
-
-export function Select<Value>({
-  options,
-  value,
-  defaultOptionLabel,
-  debounceTime = 400,
-  optionsMode = 'normal',
-  noMatchesLabel,
-  loadingLabel,
-  tweakStyles,
-  testId,
-  isDisabled,
-  dropdownOptions,
-  minSymbolsCountToOpenList = 0,
-  dropdownIcon = 'chevron-down',
-  shouldScrollToList = true,
-  searchInput,
-  onChange,
-  onFocus,
-  onBlur,
-  onType,
-  onOpen,
-  isOptionDisabled = defaultIsOptionDisabled,
-  compareValuesOnChange = defaultCompareFunction,
-  convertValueToString = defaultConvertFunction,
-  convertValueToId,
-  convertValueToReactNode,
-  optionsFilter,
-  ...inputProps
-}: ISelectProps<Value>): JSX.Element {
-  const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
-  const isMounted = useIsMounted();
-  const [isListOpen, setIsListOpen] = useState(false);
-  const [areOptionsLoading, setAreOptionsLoading] = useState(false);
-  const hasDefaultOption = defaultOptionLabel !== undefined;
-
-  const [focusedListCellIndex, setFocusedListCellIndex] = useState(-1);
-  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 stringValue = isNotEmpty(value)
-    ? convertValueToString(value)
-    : undefined;
-
-  const filteredOptions = useMemo(() => {
-    if (optionsMode !== 'search') {
-      return options;
-    }
-    if (isNotEmpty(optionsFilter)) {
-      return optionsFilter(options, searchValue);
-    }
-    const lowerCaseValue = searchValue?.toLowerCase();
-    return options.filter((option) => {
-      const convertedOption = convertValueToString(option);
-      return (
-        convertedOption !== undefined &&
-        convertedOption.toLowerCase().includes(lowerCaseValue)
-      );
-    });
-  }, [optionsMode, optionsFilter, options, convertValueToString, searchValue]);
-
-  useEffect(() => {
-    setFocusedListCellIndex(
-      getActiveValueIndex(filteredOptions, value, convertValueToString),
-    );
-  }, [filteredOptions, value, 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 as Element, list.current) ||
-      hasExactParent(event.relatedTarget as Element, inputWrapper.current);
-
-    // Ниче не делаем если клик был внутри селекта
-    if (!isActionInsideSelect) {
-      handleListClose(event);
-    }
-  };
-
-  const handleOnChange = useCallback(
-    (newValue: Value | undefined) => {
-      const areValuesEqual = compareValuesOnChange(value, newValue);
-      if (areValuesEqual) {
-        return;
-      }
-      onChange(newValue);
-    },
-    [value, compareValuesOnChange, onChange],
-  );
-
-  const handleOptionSelect = useCallback(
-    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(index === -1 ? undefined : filteredOptions[index]);
-      handleListClose(event);
-      input.current?.blur();
-    },
-    [handleOnChange, handleListClose, filteredOptions],
-  );
-
-  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();
-
-    switch (event.code) {
-      case 'Enter':
-      case 'NumpadEnter': {
-        let indexToClick = focusedListCellIndex;
-
-        // если осталось одна опция в списке,
-        // то выбираем ее нажатием на enter
-        if (indexToClick === -1 && filteredOptions.length === 1) {
-          indexToClick = 0;
-        }
-
-        handleOptionSelect(indexToClick, event);
-        break;
-      }
-
-      case 'ArrowDown': {
-        // чтобы убрать перемещение курсора в инпуте
-        event.preventDefault();
-        let newIndex: number = focusedListCellIndex ?? -1;
-        // ищем первый незадизейбленный вариант, либо дефолтную опцию
-        for (let i = newIndex; i < newIndex + filteredOptions.length; i++) {
-          const targetIndex = (i + 1) % filteredOptions.length;
-          if (
-            shouldShowDefaultOption &&
-            hasDefaultOption &&
-            newIndex > -1 &&
-            targetIndex === 0
-          ) {
-            newIndex = -1;
-            break;
-          }
-          if (!isOptionDisabled(filteredOptions[targetIndex])) {
-            newIndex = targetIndex;
-            break;
-          }
-        }
-        setFocusedListCellIndex(newIndex);
-        break;
-      }
-
-      case 'ArrowUp': {
-        // чтобы убрать перемещение курсора в инпуте
-        event.preventDefault();
-        const newIndex: number =
-          (focusedListCellIndex ?? -1) === -1 ? 0 : focusedListCellIndex;
-        // ищем первый незадизейбленный вариант, либо дефолтную опцию
-        for (let i = newIndex; i > newIndex - filteredOptions.length; i--) {
-          const targetIndex = (i > 0 ? i : filteredOptions.length + i) - 1;
-          if (
-            shouldShowDefaultOption &&
-            hasDefaultOption &&
-            focusedListCellIndex !== -1 &&
-            targetIndex === filteredOptions.length - 1
-          ) {
-            // не выносить сет наружу (приведет к багу)
-            setFocusedListCellIndex(-1);
-            break;
-          }
-          if (!isOptionDisabled(filteredOptions[targetIndex])) {
-            // не выносить сет наружу (приведет к багу)
-            setFocusedListCellIndex(targetIndex);
-            break;
-          }
-        }
-        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 { isReadonly = true } = inputProps;
-  const shouldUsePointerCursor =
-    (optionsMode === 'normal' || shouldRenderSearchInputInList) && isReadonly;
-
-  const tweakInputStyles = useMemo(
-    () =>
-      merge(
-        {},
-        componentStyles.tweakInput,
-        {
-          ...(shouldUsePointerCursor
-            ? { input: { cursor: 'pointer' } }
-            : undefined),
-        },
-        tweakStyles?.tweakInput,
-      ) as Styles,
-    [tweakStyles?.tweakInput, shouldUsePointerCursor],
-  );
-
-  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(() => {
-    if (isOpen && onOpen !== undefined) {
-      onOpen();
-    }
-  }, [isOpen, onOpen]);
-
-  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
-          }
-          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={convertValueToId}
-          onOptionClick={handleOptionSelect}
-        />
-      )}
-    </div>
-  );
-
-  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
-              : stringValue
-          }
-          onChange={handleInputChange}
-          isActive={isListOpen}
-          isReadonly={optionsMode === 'normal' || shouldRenderSearchInputInList}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          isDisabled={isDisabled}
-          ref={input}
-          isLoading={areOptionsLoading}
-          tweakStyles={tweakInputStyles}
-          testId={testId}
-          {...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 { Styles } from 'jss';
+import clsx from 'clsx';
+import { merge } from 'lodash';
+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 { getTestId, hasExactParent, isNotEmpty } from '../../helpers';
+import {
+  defaultConvertFunction,
+  defaultCompareFunction,
+  getActiveValueIndex,
+  defaultIsOptionDisabled,
+} from './helpers';
+import { SelectStyles, styles } from './Select.styles';
+import { ISearchInputProps, SearchInput } from '../SearchInput';
+
+export interface ISelectProps<Value>
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
+  tweakStyles?: SelectStyles;
+  defaultOptionLabel?: string;
+  noMatchesLabel?: string;
+  loadingLabel?: ReactNode;
+  optionsMode?: 'search' | 'dynamic' | 'normal';
+  debounceTime?: number;
+  minSymbolsCountToOpenList?: number;
+  dropdownOptions?: IDropdownWithPopperOptions;
+  dropdownIcon?: IIconType;
+  options: Value[];
+  value: Value | undefined;
+  shouldScrollToList?: boolean;
+  searchInput?: { shouldRenderInList: true } & Pick<
+    ISearchInputProps,
+    'placeholder'
+  >;
+  isOptionDisabled?(option: Value): boolean;
+  onChange(value: Value | undefined): void; // подумать как возвращать индекс
+  onBlur?(event: Event | SyntheticEvent): void;
+  onType?(value: string): Promise<void>;
+  optionsFilter?(options: Value[], query: string): Value[];
+  onOpen?(): void;
+  compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
+  // Для избежания проблем юзайте useCallback на эти функции
+  // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
+  convertValueToString?(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
+  convertValueToId?(value: Value): string | undefined;
+}
+
+export function Select<Value>({
+  options,
+  value,
+  defaultOptionLabel,
+  debounceTime = 400,
+  optionsMode = 'normal',
+  noMatchesLabel,
+  loadingLabel,
+  tweakStyles,
+  testId,
+  isReadonly,
+  isDisabled,
+  dropdownOptions,
+  minSymbolsCountToOpenList = 0,
+  dropdownIcon = 'chevron-down',
+  shouldScrollToList = true,
+  searchInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onType,
+  onOpen,
+  isOptionDisabled = defaultIsOptionDisabled,
+  compareValuesOnChange = defaultCompareFunction,
+  convertValueToString = defaultConvertFunction,
+  convertValueToId,
+  convertValueToReactNode,
+  optionsFilter,
+  ...inputProps
+}: ISelectProps<Value>): JSX.Element {
+  const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
+  const isMounted = useIsMounted();
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [areOptionsLoading, setAreOptionsLoading] = useState(false);
+  const hasDefaultOption = defaultOptionLabel !== undefined;
+
+  const [focusedListCellIndex, setFocusedListCellIndex] = useState(-1);
+  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 stringValue = isNotEmpty(value)
+    ? convertValueToString(value)
+    : undefined;
+
+  const filteredOptions = useMemo(() => {
+    if (optionsMode !== 'search') {
+      return options;
+    }
+    if (isNotEmpty(optionsFilter)) {
+      return optionsFilter(options, searchValue);
+    }
+    const lowerCaseValue = searchValue?.toLowerCase();
+    return options.filter((option) => {
+      const convertedOption = convertValueToString(option);
+      return (
+        convertedOption !== undefined &&
+        convertedOption.toLowerCase().includes(lowerCaseValue)
+      );
+    });
+  }, [optionsMode, optionsFilter, options, convertValueToString, searchValue]);
+
+  useEffect(() => {
+    setFocusedListCellIndex(
+      getActiveValueIndex(filteredOptions, value, convertValueToString),
+    );
+  }, [filteredOptions, value, 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 as Element, list.current) ||
+      hasExactParent(event.relatedTarget as Element, inputWrapper.current);
+
+    // Ниче не делаем если клик был внутри селекта
+    if (!isActionInsideSelect) {
+      handleListClose(event);
+    }
+  };
+
+  const handleOnChange = useCallback(
+    (newValue: Value | undefined) => {
+      const areValuesEqual = compareValuesOnChange(value, newValue);
+      if (areValuesEqual) {
+        return;
+      }
+      onChange(newValue);
+    },
+    [value, compareValuesOnChange, onChange],
+  );
+
+  const handleOptionSelect = useCallback(
+    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
+      handleOnChange(index === -1 ? undefined : filteredOptions[index]);
+      handleListClose(event);
+      input.current?.blur();
+    },
+    [handleOnChange, handleListClose, filteredOptions],
+  );
+
+  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();
+
+    switch (event.code) {
+      case 'Enter':
+      case 'NumpadEnter': {
+        let indexToClick = focusedListCellIndex;
+
+        // если осталось одна опция в списке,
+        // то выбираем ее нажатием на enter
+        if (indexToClick === -1 && filteredOptions.length === 1) {
+          indexToClick = 0;
+        }
+
+        handleOptionSelect(indexToClick, event);
+        break;
+      }
+
+      case 'ArrowDown': {
+        // чтобы убрать перемещение курсора в инпуте
+        event.preventDefault();
+        let newIndex: number = focusedListCellIndex ?? -1;
+        // ищем первый незадизейбленный вариант, либо дефолтную опцию
+        for (let i = newIndex; i < newIndex + filteredOptions.length; i++) {
+          const targetIndex = (i + 1) % filteredOptions.length;
+          if (
+            shouldShowDefaultOption &&
+            hasDefaultOption &&
+            newIndex > -1 &&
+            targetIndex === 0
+          ) {
+            newIndex = -1;
+            break;
+          }
+          if (!isOptionDisabled(filteredOptions[targetIndex])) {
+            newIndex = targetIndex;
+            break;
+          }
+        }
+        setFocusedListCellIndex(newIndex);
+        break;
+      }
+
+      case 'ArrowUp': {
+        // чтобы убрать перемещение курсора в инпуте
+        event.preventDefault();
+        const newIndex: number =
+          (focusedListCellIndex ?? -1) === -1 ? 0 : focusedListCellIndex;
+        // ищем первый незадизейбленный вариант, либо дефолтную опцию
+        for (let i = newIndex; i > newIndex - filteredOptions.length; i--) {
+          const targetIndex = (i > 0 ? i : filteredOptions.length + i) - 1;
+          if (
+            shouldShowDefaultOption &&
+            hasDefaultOption &&
+            focusedListCellIndex !== -1 &&
+            targetIndex === filteredOptions.length - 1
+          ) {
+            // не выносить сет наружу (приведет к багу)
+            setFocusedListCellIndex(-1);
+            break;
+          }
+          if (!isOptionDisabled(filteredOptions[targetIndex])) {
+            // не выносить сет наружу (приведет к багу)
+            setFocusedListCellIndex(targetIndex);
+            break;
+          }
+        }
+        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' } }) },
+        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(() => {
+    if (isOpen && onOpen !== undefined) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
+
+  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
+          }
+          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={convertValueToId}
+          onOptionClick={handleOptionSelect}
+        />
+      )}
+    </div>
+  );
+
+  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
+              : stringValue
+          }
+          onChange={handleInputChange}
+          isActive={isListOpen}
+          isReadonly={hasReadonlyInput}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          isDisabled={isDisabled}
+          ref={input}
+          isLoading={areOptionsLoading}
+          tweakStyles={tweakInputStyles}
+          testId={testId}
+          {...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>
+  );
+}