@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -1,441 +1,460 @@
-import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 'react';
-import clsx from 'clsx';
-import { debounce } from 'ts-debounce';
-import { addDataAttributes } from '../../helpers';
-import { useIsMounted, useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Button } from '../Button';
-import { Checkbox, ICheckboxProps } from '../Checkbox';
-import { SearchInput } from '../SearchInput';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
-import { defaultConvertFunction, getLocale } from './helpers';
-import { IMultiSelectListValues, IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
-import { MultiSelectListStyles, styles } from './MultiSelectList.styles';
-
-export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
-  tweakStyles?: MultiSelectListStyles;
-  value?: Value;
-  isSearchEnabled?: boolean;
-  width?: number | string;
-  localeKey?: IMultiSelectLocaleKey;
-  locale?: Partial<IMultiSelectLocale>;
-  onClose?: () => void;
-  onChange: (val?: Value) => void;
-  options?: Option[];
-  fetchOptions?: (val?: string, page?: number) => Promise<Option[]>;
-  getValueView?: (val: Option) => ReactNode;
-  getValueId?: (val: Option) => string;
-  getValueString?: (val: Option) => string;
-  isGroupingEnabled?: boolean;
-  checkboxPosition?: 'left' | 'right';
-  pageSize?: number;
-  searchMaxLength?: number;
-  testId?: string;
-}
-
-export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Option = string>({
-  value,
-  tweakStyles,
-  data,
-  isSearchEnabled = false,
-  width,
-  localeKey = DEFAULT_LOCALE,
-  locale = MultiSelectLocales[localeKey],
-  onChange,
-  onClose,
-  options,
-  fetchOptions,
-  isGroupingEnabled = isSearchEnabled,
-  getValueView = defaultConvertFunction,
-  getValueId = defaultConvertFunction,
-  getValueString = defaultConvertFunction,
-  checkboxPosition = 'left',
-  pageSize,
-  searchMaxLength,
-  testId,
-}: IMultiSelectListProps<Value, Option>): JSX.Element {
-  const isMounted = useIsMounted();
-  const { classes, componentStyles } = useTheme('MultiSelectList', styles, tweakStyles, { width });
-
-  const tweakCheckboxStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCheckbox');
-
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const chosenValues = value?.include;
-  const chosenValuesIds = useMemo(() => chosenValues?.map(getValueId), [getValueId, chosenValues]);
-
-  const [keyCursorOn, setKeyCursorOn] = useState(0);
-  const [searchValue, setSearchValue] = useState('');
-  // Опции, которые получаем с бека при изменении строки поиска
-  const [allOptions, setAllOptions] = useState<Option[]>([]);
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
-
-  const [activePage, setActivePage] = useState(0);
-  const [isMaxPage, setIsMaxPage] = useState(false);
-
-  const observer = useRef<IntersectionObserver>();
-
-  const unchosenOptions = useMemo(
-    () => allOptions.filter((v) => !chosenValuesIds?.includes(getValueId(v))),
-    [getValueId, allOptions, chosenValuesIds],
-  );
-
-  const handleSearchInputChange = useCallback(
-    async (inputValue?: string) => {
-      if (fetchOptions === undefined) {
-        return;
-      }
-      setIsLoading(true);
-
-      try {
-        const response = await fetchOptions(inputValue?.trim() ?? '');
-        if (isMounted() && response !== undefined) {
-          setAllOptions(response);
-          setActivePage(0);
-          setIsMaxPage(
-            response.length === 0 || (pageSize !== undefined && response.length < pageSize),
-          );
-        }
-      } finally {
-        if (isMounted()) {
-          setIsLoading(false);
-        }
-      }
-    },
-    [fetchOptions, pageSize],
-  );
-
-  const changeSearchValue = useCallback(debounce(handleSearchInputChange), [
-    handleSearchInputChange,
-  ]);
-
-  function handleOnChange(inputValue: string) {
-    setSearchValue(inputValue);
-
-    if (fetchOptions === undefined) {
-      if (options !== undefined) {
-        const lowerSearchValue = inputValue.toLowerCase();
-        setAllOptions(
-          options.filter((o) => getValueString(o).toLowerCase().includes(lowerSearchValue)),
-        );
-      }
-    } else {
-      setIsLoading(true);
-      changeSearchValue(inputValue);
-    }
-  }
-
-  const handleSelectValue = (val: Option[]) => {
-    if (val.length === 0) {
-      onChange(undefined);
-      return;
-    }
-
-    onChange({
-      include: val,
-    } as Value);
-  };
-
-  const handleClear = () => {
-    onChange(undefined);
-  };
-
-  const onSelect: ICheckboxProps<Option>['onSelect'] = (val) => {
-    handleSelectValue(
-      val.isSelected
-        ? [...(chosenValues ?? []), val.value]
-        : chosenValues?.filter((v) => getValueId(v) !== getValueId(val.value)) ?? [],
-    );
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    // TODO: это все очень плохо работает
-    if (event.code === 'Escape') {
-      onChange(value);
-      if (onClose) {
-        onClose();
-      }
-    }
-    if (event.code === 'ArrowDown') {
-      if (keyCursorOn < unchosenOptions.length + (value?.include.length ?? 0) - 1) {
-        setKeyCursorOn(keyCursorOn + 1);
-      }
-    }
-    if (event.code === 'ArrowUp') {
-      if (keyCursorOn >= 1) {
-        setKeyCursorOn(keyCursorOn - 1);
-      }
-    }
-    if (event.code === 'Enter') {
-      if (
-        unchosenOptions[keyCursorOn] === undefined &&
-        (value === undefined || value.include.length === 0)
-      ) {
-        return;
-      }
-      if (value !== undefined) {
-        if (keyCursorOn < value.include.length) {
-          onChange({
-            ...value,
-            include:
-              value.include.filter(
-                (val) => getValueId(val) !== getValueId(value.include[keyCursorOn]),
-              ) ?? [],
-          });
-        } else {
-          onChange({
-            ...value,
-            include: [...value.include, unchosenOptions[keyCursorOn - value.include.length]],
-          });
-        }
-      } else {
-        onChange({
-          include: [unchosenOptions[keyCursorOn]],
-        } as Value);
-      }
-    }
-  };
-
-  const getIsValueChosen = (id: string) => chosenValues?.some((v) => getValueId(v) === id);
-
-  const handleLoadItemsOnScroll = useCallback(
-    async (inputValue?: string, page?: number) => {
-      if (fetchOptions === undefined) {
-        return;
-      }
-
-      setLoadingOptionsOnScroll(true);
-
-      try {
-        const response = await fetchOptions(inputValue ?? '', page ?? 0);
-        if (isMounted()) {
-          if (response.length > 0) {
-            setAllOptions((prevState) => [...prevState, ...response]);
-          }
-          if (response.length === 0 || (pageSize !== undefined && response.length < pageSize)) {
-            setIsMaxPage(true);
-          }
-        }
-      } finally {
-        if (isMounted()) {
-          setLoadingOptionsOnScroll(false);
-        }
-      }
-    },
-    [fetchOptions, getValueId],
-  );
-
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement) => {
-      if (isLoadingOptionsOnScroll || isMaxPage) {
-        return;
-      }
-
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new IntersectionObserver(async (entries) => {
-        if (entries[0].isIntersecting) {
-          await handleLoadItemsOnScroll(searchValue, activePage + 1);
-          if (isMounted()) {
-            setActivePage((prevState) => prevState + 1);
-          }
-        }
-      });
-
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [activePage, handleLoadItemsOnScroll, isLoadingOptionsOnScroll, isMaxPage, searchValue],
-  );
-
-  useEffect(() => {
-    if (fetchOptions === undefined) {
-      setAllOptions(options ?? []);
-      return;
-    }
-
-    const doFetchOptions = async () => {
-      setIsLoading(true);
-
-      try {
-        const response = await fetchOptions('');
-        if (response !== undefined && isMounted()) {
-          if (response.length === 0 || (pageSize !== undefined && response.length < pageSize)) {
-            setIsMaxPage(true);
-          }
-          setAllOptions(response);
-        }
-      } finally {
-        if (isMounted()) {
-          setIsLoading(false);
-        }
-      }
-    };
-    doFetchOptions();
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown, false);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, false);
-    };
-  });
-
-  const mainOptionsList = isGroupingEnabled ? unchosenOptions : allOptions;
-
-  const hasSelectedOptionsGroup =
-    isGroupingEnabled && chosenValues !== undefined && chosenValues.length > 0;
-
-  const shouldShowNothingFoundMessage = !isLoading && allOptions.length === 0;
-
-  const shouldShowAllOptionsLabel =
-    isGroupingEnabled &&
-    unchosenOptions.length > 0 &&
-    chosenValues !== undefined &&
-    chosenValues.length > 0;
-
-  const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
-
-  const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      {isSearchEnabled && (
-        <div className={classes.dropdownInput}>
-          <SearchInput
-            value={searchValue}
-            placeholder={translates.searchPlaceholder}
-            onChange={handleOnChange}
-            tweakStyles={tweakSearchInputStyles}
-            maxLength={searchMaxLength}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
-            shouldFocusOnMount
-          />
-        </div>
-      )}
-      {shouldShowOptionsList && (
-        <div
-          className={classes.list}
-          data-testid={testId !== undefined ? `${testId}-list` : undefined}
-        >
-          {/* Выбранные */}
-          {hasSelectedOptionsGroup && (
-            <>
-              <div
-                className={clsx(
-                  classes.label,
-                  classes.labelChosen,
-                  !isSearchEnabled && classes.withoutTopGap,
-                )}
-              >
-                {translates.chosen}
-              </div>
-              {chosenValues?.map((val) => {
-                const id = getValueId(val);
-                const view = getValueView(val);
-
-                return (
-                  <div
-                    className={clsx(
-                      classes.item,
-                      // keyCursorOn === index && classes.selectedItem,
-                    )}
-                    key={id}
-                  >
-                    <Checkbox
-                      onSelect={onSelect}
-                      isChecked
-                      value={val}
-                      tweakStyles={tweakCheckboxStyles}
-                      labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
-                    >
-                      <div className={classes.option} data-option={id}>
-                        {view}
-                      </div>
-                    </Checkbox>
-                  </div>
-                );
-              })}
-            </>
-          )}
-
-          {!isLoading && (
-            <>
-              {/* Не выбранные (или все если нет группировки) */}
-              {shouldShowAllOptionsLabel && <div className={classes.label}>{translates.all}</div>}
-
-              {mainOptionsList.map((val, index) => {
-                const id = getValueId(val);
-                const view = getValueView(val);
-
-                return (
-                  <div
-                    className={clsx(
-                      classes.item,
-                      // keyCursorOn === index + (value?.include.length ?? 0) &&
-                      //  classes.selectedItem,
-                    )}
-                    ref={
-                      mainOptionsList.length - 1 === index ? initIntersectionObserver : undefined
-                    }
-                    key={id}
-                  >
-                    <Checkbox
-                      onSelect={onSelect}
-                      isChecked={getIsValueChosen(id)}
-                      value={val}
-                      tweakStyles={tweakCheckboxStyles}
-                      labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
-                    >
-                      <div className={classes.option} data-option={id}>
-                        {view}
-                      </div>
-                    </Checkbox>
-                  </div>
-                );
-              })}
-            </>
-          )}
-        </div>
-      )}
-
-      {/* Preloader */}
-      {shouldShowPreloader && (
-        <div className={classes.preloader}>
-          <ThemedPreloader type="dots" />
-        </div>
-      )}
-
-      {/* Nothing found */}
-      {shouldShowNothingFoundMessage && (
-        <div className={classes.nothingFound}>{translates.nothingFound}</div>
-      )}
-
-      {/* Controls */}
-      <div className={classes.panel}>
-        <div className={classes.clear}>
-          <Button
-            onClick={handleClear}
-            size="s"
-            view="text"
-            testId={testId !== undefined ? `${testId}-clear-button` : undefined}
-            tweakStyles={tweakClearButtonStyles}
-          >
-            {translates.clear}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 'react';
+import clsx from 'clsx';
+import { debounce } from 'ts-debounce';
+import { addDataAttributes } from '../../helpers';
+import { useIsMounted, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Button } from '../Button';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
+import { SearchInput } from '../SearchInput';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
+import { defaultConvertFunction, getLocale } from './helpers';
+import { IMultiSelectListValues, IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
+import {
+  useStyles,
+  IMultiSelectListStyles,
+  checkboxStyles,
+  searchInputStyles,
+  clearButtonStyles,
+} from './MultiSelectList.styles';
+
+export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
+  value?: Value;
+  isSearchEnabled?: boolean;
+  width?: number | string;
+  localeKey?: IMultiSelectLocaleKey;
+  locale?: Partial<IMultiSelectLocale>;
+  onClose?: () => void;
+  onChange: (val?: Value) => void;
+  options?: Option[];
+  fetchOptions?: (val?: string, page?: number) => Promise<Option[]>;
+  getValueView?: (val: Option) => ReactNode;
+  getValueId?: (val: Option) => string;
+  getValueString?: (val: Option) => string;
+  isGroupingEnabled?: boolean;
+  checkboxPosition?: 'left' | 'right';
+  pageSize?: number;
+  searchMaxLength?: number;
+}
+
+export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Option = string>({
+  value,
+  tweakStyles,
+  data,
+  isSearchEnabled = false,
+  width = 220,
+  localeKey = DEFAULT_LOCALE,
+  locale = MultiSelectLocales[localeKey],
+  onChange,
+  onClose,
+  options,
+  fetchOptions,
+  isGroupingEnabled = isSearchEnabled,
+  getValueView = defaultConvertFunction,
+  getValueId = defaultConvertFunction,
+  getValueString = defaultConvertFunction,
+  checkboxPosition = 'left',
+  pageSize,
+  searchMaxLength,
+  testId,
+}: IMultiSelectListProps<Value, Option>): JSX.Element {
+  const isMounted = useIsMounted();
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCheckboxStyles = useTweakStyles({
+    innerStyles: checkboxStyles,
+    tweakStyles,
+    className: 'tweakCheckbox',
+    currentComponentName: 'MultiSelectList',
+  });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'MultiSelectList',
+  });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'MultiSelectList',
+  });
+
+  const [keyCursorOn, setKeyCursorOn] = useState(0);
+  const [searchValue, setSearchValue] = useState('');
+  // Опции, которые получаем с бека при изменении строки поиска
+  const [allOptions, setAllOptions] = useState<Option[]>([]);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
+
+  const [activePage, setActivePage] = useState(0);
+  const [isMaxPage, setIsMaxPage] = useState(false);
+
+  const observer = useRef<IntersectionObserver>();
+
+  const chosenValues = value?.include;
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+  const chosenValuesIds = useMemo(() => chosenValues?.map(getValueId), [getValueId, chosenValues]);
+
+  const unchosenOptions = useMemo(
+    () => allOptions.filter((v) => !chosenValuesIds?.includes(getValueId(v))),
+    [getValueId, allOptions, chosenValuesIds],
+  );
+
+  const handleSearchInputChange = useCallback(
+    async (inputValue?: string) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions(inputValue?.trim() ?? '');
+        if (isMounted() && response !== undefined) {
+          setAllOptions(response);
+          setActivePage(0);
+          setIsMaxPage(
+            response.length === 0 || (pageSize !== undefined && response.length < pageSize),
+          );
+        }
+      } finally {
+        if (isMounted()) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [fetchOptions, pageSize],
+  );
+
+  const changeSearchValue = useCallback(debounce(handleSearchInputChange), [
+    handleSearchInputChange,
+  ]);
+
+  function handleOnChange(inputValue: string) {
+    setSearchValue(inputValue);
+
+    if (fetchOptions === undefined) {
+      if (options !== undefined) {
+        const lowerSearchValue = inputValue.toLowerCase();
+        setAllOptions(
+          options.filter((o) => getValueString(o).toLowerCase().includes(lowerSearchValue)),
+        );
+      }
+    } else {
+      setIsLoading(true);
+      changeSearchValue(inputValue);
+    }
+  }
+
+  const handleSelectValue = (val: Option[]) => {
+    if (val.length === 0) {
+      onChange(undefined);
+      return;
+    }
+
+    onChange({
+      include: val,
+    } as Value);
+  };
+
+  const handleClear = () => {
+    onChange(undefined);
+  };
+
+  const onSelect: ICheckboxProps<Option>['onSelect'] = (val) => {
+    handleSelectValue(
+      val.isSelected
+        ? [...(chosenValues ?? []), val.value]
+        : chosenValues?.filter((v) => getValueId(v) !== getValueId(val.value)) ?? [],
+    );
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    // TODO: это все очень плохо работает
+    if (event.code === 'Escape') {
+      onChange(value);
+      if (onClose) {
+        onClose();
+      }
+    }
+    if (event.code === 'ArrowDown') {
+      if (keyCursorOn < unchosenOptions.length + (value?.include.length ?? 0) - 1) {
+        setKeyCursorOn(keyCursorOn + 1);
+      }
+    }
+    if (event.code === 'ArrowUp') {
+      if (keyCursorOn >= 1) {
+        setKeyCursorOn(keyCursorOn - 1);
+      }
+    }
+    if (event.code === 'Enter') {
+      if (
+        unchosenOptions[keyCursorOn] === undefined &&
+        (value === undefined || value.include.length === 0)
+      ) {
+        return;
+      }
+      if (value !== undefined) {
+        if (keyCursorOn < value.include.length) {
+          onChange({
+            ...value,
+            include:
+              value.include.filter(
+                (val) => getValueId(val) !== getValueId(value.include[keyCursorOn]),
+              ) ?? [],
+          });
+        } else {
+          onChange({
+            ...value,
+            include: [...value.include, unchosenOptions[keyCursorOn - value.include.length]],
+          });
+        }
+      } else {
+        onChange({
+          include: [unchosenOptions[keyCursorOn]],
+        } as Value);
+      }
+    }
+  };
+
+  const getIsValueChosen = (id: string) => chosenValues?.some((v) => getValueId(v) === id);
+
+  const handleLoadItemsOnScroll = useCallback(
+    async (inputValue?: string, page?: number) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+
+      setLoadingOptionsOnScroll(true);
+
+      try {
+        const response = await fetchOptions(inputValue ?? '', page ?? 0);
+        if (isMounted()) {
+          if (response.length > 0) {
+            setAllOptions((prevState) => [...prevState, ...response]);
+          }
+          if (response.length === 0 || (pageSize !== undefined && response.length < pageSize)) {
+            setIsMaxPage(true);
+          }
+        }
+      } finally {
+        if (isMounted()) {
+          setLoadingOptionsOnScroll(false);
+        }
+      }
+    },
+    [fetchOptions, getValueId],
+  );
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoadingOptionsOnScroll || isMaxPage) {
+        return;
+      }
+
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new IntersectionObserver(async (entries) => {
+        if (entries[0].isIntersecting) {
+          await handleLoadItemsOnScroll(searchValue, activePage + 1);
+          if (isMounted()) {
+            setActivePage((prevState) => prevState + 1);
+          }
+        }
+      });
+
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [activePage, handleLoadItemsOnScroll, isLoadingOptionsOnScroll, isMaxPage, searchValue],
+  );
+
+  useEffect(() => {
+    if (fetchOptions === undefined) {
+      setAllOptions(options ?? []);
+      return;
+    }
+
+    const doFetchOptions = async () => {
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions('');
+        if (response !== undefined && isMounted()) {
+          if (response.length === 0 || (pageSize !== undefined && response.length < pageSize)) {
+            setIsMaxPage(true);
+          }
+          setAllOptions(response);
+        }
+      } finally {
+        if (isMounted()) {
+          setIsLoading(false);
+        }
+      }
+    };
+    doFetchOptions();
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  });
+
+  const mainOptionsList = isGroupingEnabled ? unchosenOptions : allOptions;
+
+  const hasSelectedOptionsGroup =
+    isGroupingEnabled && chosenValues !== undefined && chosenValues.length > 0;
+
+  const shouldShowNothingFoundMessage = !isLoading && allOptions.length === 0;
+
+  const shouldShowAllOptionsLabel =
+    isGroupingEnabled &&
+    unchosenOptions.length > 0 &&
+    chosenValues !== undefined &&
+    chosenValues.length > 0;
+
+  const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
+
+  const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
+
+  return (
+    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+      {isSearchEnabled && (
+        <div className={classes.dropdownInput}>
+          <SearchInput
+            value={searchValue}
+            placeholder={translates.searchPlaceholder}
+            onChange={handleOnChange}
+            tweakStyles={tweakSearchInputStyles}
+            maxLength={searchMaxLength}
+            testId={testId !== undefined ? `${testId}-search` : undefined}
+            shouldFocusOnMount
+          />
+        </div>
+      )}
+      {shouldShowOptionsList && (
+        <div
+          className={classes.list}
+          data-testid={testId !== undefined ? `${testId}-list` : undefined}
+        >
+          {/* Выбранные */}
+          {hasSelectedOptionsGroup && (
+            <>
+              <div
+                className={clsx(
+                  classes.label,
+                  classes.labelChosen,
+                  !isSearchEnabled && classes.withoutTopGap,
+                )}
+              >
+                {translates.chosen}
+              </div>
+              {chosenValues?.map((val) => {
+                const id = getValueId(val);
+                const view = getValueView(val);
+
+                return (
+                  <div
+                    className={clsx(
+                      classes.item,
+                      // keyCursorOn === index && classes.selectedItem,
+                    )}
+                    key={id}
+                  >
+                    <Checkbox
+                      onSelect={onSelect}
+                      isChecked
+                      value={val}
+                      tweakStyles={tweakCheckboxStyles}
+                      labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                    >
+                      <div className={classes.option} data-option={id}>
+                        {view}
+                      </div>
+                    </Checkbox>
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {!isLoading && (
+            <>
+              {/* Не выбранные (или все если нет группировки) */}
+              {shouldShowAllOptionsLabel && <div className={classes.label}>{translates.all}</div>}
+
+              {mainOptionsList.map((val, index) => {
+                const id = getValueId(val);
+                const view = getValueView(val);
+
+                return (
+                  <div
+                    className={clsx(
+                      classes.item,
+                      // keyCursorOn === index + (value?.include.length ?? 0) &&
+                      //  classes.selectedItem,
+                    )}
+                    ref={
+                      mainOptionsList.length - 1 === index ? initIntersectionObserver : undefined
+                    }
+                    key={id}
+                  >
+                    <Checkbox
+                      onSelect={onSelect}
+                      isChecked={getIsValueChosen(id)}
+                      value={val}
+                      tweakStyles={tweakCheckboxStyles}
+                      labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                    >
+                      <div className={classes.option} data-option={id}>
+                        {view}
+                      </div>
+                    </Checkbox>
+                  </div>
+                );
+              })}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Preloader */}
+      {shouldShowPreloader && (
+        <div className={classes.preloader}>
+          <ThemedPreloader type="dots" />
+        </div>
+      )}
+
+      {/* Nothing found */}
+      {shouldShowNothingFoundMessage && (
+        <div className={classes.nothingFound}>{translates.nothingFound}</div>
+      )}
+
+      {/* Controls */}
+      <div className={classes.panel}>
+        <div className={classes.clear}>
+          <Button
+            onClick={handleClear}
+            size="s"
+            view="text"
+            testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+            tweakStyles={tweakClearButtonStyles}
+          >
+            {translates.clear}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}