@snack-uikit/chips 0.23.4 → 0.24.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.24.0 (2025-01-22)
+
+
+### Features
+
+* **CORESERV-5847:** add ability to disable fuzzy search on chips ([5016fe7](https://github.com/cloud-ru-tech/snack-uikit/commit/5016fe7989cd363e834dca181b60c870128da72f))
+* **CORESERV-5847:** add optional virtualization to list ([6a05691](https://github.com/cloud-ru-tech/snack-uikit/commit/6a056917c7cd8b56fa432bf4edc804c13feb0a0a))
+
+
+
+
+
 ## 0.23.4 (2025-01-20)
 
 ### Only dependencies have been changed

package/README.md

@@ -124,6 +124,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | tabIndex | `number` | - | HTML tab index |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
@@ -145,6 +146,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | tabIndex | `number` | - | HTML tab index |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
@@ -183,6 +185,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | tabIndex | `number` | - | HTML tab index |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
@@ -220,6 +223,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | tabIndex | `number` | - | HTML tab index |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
@@ -243,6 +247,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | tabIndex | `number` | - | HTML tab index |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
@@ -264,6 +269,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | tabIndex | `number` | - | HTML tab index |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
 | showClearButton | `boolean` | true | Отображение кнопки очистки значения |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
 | dropDownClassName | `string` | - |  |

package/dist/cjs/components/ChipChoice/components/ChipChoiceMultiple.d.ts

@@ -5,4 +5,4 @@ export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps =
     total: number;
     allLabel: string;
 };
-export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, disableFuzzySearch, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChipChoice/components/ChipChoiceMultiple.js

@@ -52,10 +52,11 @@ function ChipChoiceMultiple(_a) {
       dropDownClassName,
       showClearButton = true,
       autoApply = true,
+      disableFuzzySearch = false,
       onApprove,
       onCancel
     } = _a,
-    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "onApprove", "onCancel"]);
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "disableFuzzySearch", "onApprove", "onCancel"]);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     defaultValue,
@@ -88,8 +89,12 @@ function ChipChoiceMultiple(_a) {
     total: Object.keys(flattenOptions).length,
     allLabel: t('allLabel')
   });
-  const fuzzySearch = (0, hooks_1.useFuzzySearch)(options, flatMapOptions);
-  const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+  const optionSearch = (0, hooks_1.useOptionSearch)({
+    options,
+    flatMapOptions,
+    disableFuzzySearch
+  });
+  const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : optionSearch(searchValue), [optionSearch, options, searchValue, searchable, valueToRender]);
   const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
   const clearValue = () => {
     setValue([]);

package/dist/cjs/components/ChipChoice/components/ChipChoiceSingle.d.ts

@@ -5,4 +5,4 @@ export type ChipChoiceSingleValueFormatterProps = {
     allLabel?: string;
 };
 export declare function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps): ItemId | undefined;
-export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, disableFuzzySearch, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChipChoice/components/ChipChoiceSingle.js

@@ -43,11 +43,12 @@ function ChipChoiceSingle(_a) {
       searchable,
       contentRender,
       dropDownClassName,
+      disableFuzzySearch,
       autoApply = true,
       onApprove,
       onCancel
     } = _a,
-    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "autoApply", "onApprove", "onCancel"]);
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel"]);
   const [value, setValue] = (0, utils_1.useValueControl)({
     value: valueProp,
     defaultValue,
@@ -79,8 +80,12 @@ function ChipChoiceSingle(_a) {
     label: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label,
     allLabel: t('allLabel')
   });
-  const fuzzySearch = (0, hooks_1.useFuzzySearch)(options, flatMapOptions);
-  const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+  const optionSearch = (0, hooks_1.useOptionSearch)({
+    options,
+    flatMapOptions,
+    disableFuzzySearch
+  });
+  const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : optionSearch(searchValue), [optionSearch, options, searchValue, searchable, valueToRender]);
   const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
   const clearValue = () => {
     setValue(undefined);

package/dist/cjs/components/ChipChoice/hooks.d.ts

@@ -9,7 +9,12 @@ export declare function useHandleOnKeyDown({ setOpen }: UseHandleOnKeyDownProps)
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export declare function useFuzzySearch<T extends ContentRenderProps = ContentRenderProps>(options: FilterOption<T>[], flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[], minSearchInputLength?: number): (search: string) => FilterOption<T>[];
+export declare function useOptionSearch<T extends ContentRenderProps = ContentRenderProps>({ options, flatMapOptions, minSearchInputLength, disableFuzzySearch, }: {
+    options: FilterOption<T>[];
+    flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[];
+    minSearchInputLength?: number;
+    disableFuzzySearch?: boolean;
+}): (search: string) => FilterOption<T>[];
 type UseAutoApplyProps = {
     autoApply: boolean;
     size: Size;

package/dist/cjs/components/ChipChoice/hooks.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useHandleOnKeyDown = useHandleOnKeyDown;
-exports.useFuzzySearch = useFuzzySearch;
+exports.useOptionSearch = useOptionSearch;
 exports.useAutoApply = useAutoApply;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const fuzzy_search_1 = __importDefault(require("fuzzy-search"));
@@ -46,19 +46,36 @@ const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-function useFuzzySearch(options, flatMapOptions, minSearchInputLength) {
+function useOptionSearch(_ref2) {
+  let {
+    options,
+    flatMapOptions,
+    minSearchInputLength,
+    disableFuzzySearch
+  } = _ref2;
   return (0, react_1.useCallback)(search => {
-    const searcher = new fuzzy_search_1.default(flatMapOptions, ['label', 'contentRenderProps.description', 'contentRenderProps.caption'], {});
-    return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH) ? searcher.search(search) : options;
-  }, [flatMapOptions, minSearchInputLength, options]);
+    if (search.length < (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)) return options;
+    if (disableFuzzySearch) {
+      return options.filter(option => {
+        var _a, _b;
+        const fieldsForSearch = [option.label];
+        if ('contentRenderProps' in option) {
+          fieldsForSearch.push((_a = option === null || option === void 0 ? void 0 : option.contentRenderProps) === null || _a === void 0 ? void 0 : _a.description);
+          fieldsForSearch.push((_b = option === null || option === void 0 ? void 0 : option.contentRenderProps) === null || _b === void 0 ? void 0 : _b.caption);
+        }
+        return fieldsForSearch.filter(v => Boolean(v)).some(value => value.toString().includes(search));
+      });
+    }
+    return new fuzzy_search_1.default(flatMapOptions, ['label', 'contentRenderProps.description', 'contentRenderProps.caption'], {}).search(search);
+  }, [disableFuzzySearch, flatMapOptions, minSearchInputLength, options]);
 }
-function useAutoApply(_ref2) {
+function useAutoApply(_ref3) {
   let {
     autoApply,
     size,
     onApprove,
     onCancel
-  } = _ref2;
+  } = _ref3;
   const {
     t
   } = (0, locale_1.useLocale)('Chips');

package/dist/cjs/components/ChipChoice/types.d.ts

@@ -32,6 +32,11 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
     size?: Size;
     /** Колбек обработки клика */
     onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /**
+     * Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
+     * @default false
+     */
+    disableFuzzySearch?: boolean;
     /** Отображение кнопки очистки значения @default true*/
     showClearButton?: boolean;
     /** Расположение выпадающего меню */

package/dist/esm/components/ChipChoice/components/ChipChoiceMultiple.d.ts

@@ -5,4 +5,4 @@ export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps =
     total: number;
     allLabel: string;
 };
-export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, showClearButton, autoApply, disableFuzzySearch, onApprove, onCancel, ...rest }: ChipChoiceMultipleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipChoice/components/ChipChoiceMultiple.js

@@ -16,7 +16,7 @@ import { useLocale } from '@snack-uikit/locale';
 import { useValueControl } from '@snack-uikit/utils';
 import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
 import { DROPLIST_SIZE_MAP } from '../constants';
-import { useAutoApply, useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { useAutoApply, useHandleOnKeyDown, useOptionSearch } from '../hooks';
 import { kindFlattenOptions } from '../utils';
 import { transformOptionsToItems } from '../utils/options';
 import { ChipChoiceBase } from './ChipChoiceBase';
@@ -31,7 +31,7 @@ const defaultMultiValueLabelFormatter = ({ value, total, allLabel }) => {
     return `${len.toString()}/${total}`;
 };
 export function ChipChoiceMultiple(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton = true, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "onApprove", "onCancel"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton = true, autoApply = true, disableFuzzySearch = false, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "autoApply", "disableFuzzySearch", "onApprove", "onCancel"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -58,8 +58,8 @@ export function ChipChoiceMultiple(_a) {
             total: Object.keys(flattenOptions).length,
             allLabel: t('allLabel'),
         });
-    const fuzzySearch = useFuzzySearch(options, flatMapOptions);
-    const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+    const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
+    const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)), [optionSearch, options, searchValue, searchable, valueToRender]);
     const items = useMemo(() => transformOptionsToItems(result, contentRender), [contentRender, result]);
     const clearValue = () => {
         setValue([]);

package/dist/esm/components/ChipChoice/components/ChipChoiceSingle.d.ts

@@ -5,4 +5,4 @@ export type ChipChoiceSingleValueFormatterProps = {
     allLabel?: string;
 };
 export declare function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps): ItemId | undefined;
-export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({ value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size, label, searchable, contentRender, dropDownClassName, disableFuzzySearch, autoApply, onApprove, onCancel, ...rest }: ChipChoiceSingleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipChoice/components/ChipChoiceSingle.js

@@ -16,7 +16,7 @@ import { useLocale } from '@snack-uikit/locale';
 import { useValueControl } from '@snack-uikit/utils';
 import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
 import { DROPLIST_SIZE_MAP } from '../constants';
-import { useAutoApply, useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { useAutoApply, useHandleOnKeyDown, useOptionSearch } from '../hooks';
 import { kindFlattenOptions } from '../utils';
 import { transformOptionsToItems } from '../utils/options';
 import { ChipChoiceBase } from './ChipChoiceBase';
@@ -24,7 +24,7 @@ export function defaultSingleValueFormatter({ label, allLabel }) {
     return label !== null && label !== void 0 ? label : allLabel;
 }
 export function ChipChoiceSingle(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "autoApply", "onApprove", "onCancel"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, disableFuzzySearch, autoApply = true, onApprove, onCancel } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "disableFuzzySearch", "autoApply", "onApprove", "onCancel"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -47,8 +47,8 @@ export function ChipChoiceSingle(_a) {
     const valueToRender = valueRender
         ? valueRender(selectedOption)
         : defaultSingleValueFormatter({ label: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label, allLabel: t('allLabel') });
-    const fuzzySearch = useFuzzySearch(options, flatMapOptions);
-    const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+    const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
+    const result = useMemo(() => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)), [optionSearch, options, searchValue, searchable, valueToRender]);
     const items = useMemo(() => transformOptionsToItems(result, contentRender), [contentRender, result]);
     const clearValue = () => {
         setValue(undefined);

package/dist/esm/components/ChipChoice/hooks.d.ts

@@ -9,7 +9,12 @@ export declare function useHandleOnKeyDown({ setOpen }: UseHandleOnKeyDownProps)
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export declare function useFuzzySearch<T extends ContentRenderProps = ContentRenderProps>(options: FilterOption<T>[], flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[], minSearchInputLength?: number): (search: string) => FilterOption<T>[];
+export declare function useOptionSearch<T extends ContentRenderProps = ContentRenderProps>({ options, flatMapOptions, minSearchInputLength, disableFuzzySearch, }: {
+    options: FilterOption<T>[];
+    flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[];
+    minSearchInputLength?: number;
+    disableFuzzySearch?: boolean;
+}): (search: string) => FilterOption<T>[];
 type UseAutoApplyProps = {
     autoApply: boolean;
     size: Size;

package/dist/esm/components/ChipChoice/hooks.js

@@ -31,13 +31,25 @@ const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export function useFuzzySearch(options, flatMapOptions, minSearchInputLength) {
+export function useOptionSearch({ options, flatMapOptions, minSearchInputLength, disableFuzzySearch, }) {
     return useCallback((search) => {
-        const searcher = new FuzzySearch(flatMapOptions, ['label', 'contentRenderProps.description', 'contentRenderProps.caption'], {});
-        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-            ? searcher.search(search)
-            : options;
-    }, [flatMapOptions, minSearchInputLength, options]);
+        if (search.length < (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH))
+            return options;
+        if (disableFuzzySearch) {
+            return options.filter(option => {
+                var _a, _b;
+                const fieldsForSearch = [option.label];
+                if ('contentRenderProps' in option) {
+                    fieldsForSearch.push((_a = option === null || option === void 0 ? void 0 : option.contentRenderProps) === null || _a === void 0 ? void 0 : _a.description);
+                    fieldsForSearch.push((_b = option === null || option === void 0 ? void 0 : option.contentRenderProps) === null || _b === void 0 ? void 0 : _b.caption);
+                }
+                return fieldsForSearch
+                    .filter((v) => Boolean(v))
+                    .some(value => value.toString().includes(search));
+            });
+        }
+        return new FuzzySearch(flatMapOptions, ['label', 'contentRenderProps.description', 'contentRenderProps.caption'], {}).search(search);
+    }, [disableFuzzySearch, flatMapOptions, minSearchInputLength, options]);
 }
 export function useAutoApply({ autoApply, size, onApprove, onCancel, }) {
     const { t } = useLocale('Chips');

package/dist/esm/components/ChipChoice/types.d.ts

@@ -32,6 +32,11 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
     size?: Size;
     /** Колбек обработки клика */
     onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /**
+     * Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
+     * @default false
+     */
+    disableFuzzySearch?: boolean;
     /** Отображение кнопки очистки значения @default true*/
     showClearButton?: boolean;
     /** Расположение выпадающего меню */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.23.4",
+  "version": "0.24.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,10 +37,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.5",
-    "@snack-uikit/calendar": "0.11.15",
+    "@snack-uikit/calendar": "0.11.16",
     "@snack-uikit/dropdown": "0.4.2",
     "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/list": "0.22.3",
+    "@snack-uikit/list": "0.23.0",
     "@snack-uikit/loaders": "0.9.0",
     "@snack-uikit/utils": "3.6.0",
     "classnames": "2.5.1",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "137a71cea0541ba2cbe468c3eb73df8bb8ea9ca0"
+  "gitHead": "546ae486452e74e78f65fd9ce0044c13b058872c"
 }

package/src/components/ChipChoice/components/ChipChoiceMultiple.tsx

@@ -6,7 +6,7 @@ import { useValueControl } from '@snack-uikit/utils';
 
 import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
 import { DROPLIST_SIZE_MAP } from '../constants';
-import { useAutoApply, useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { useAutoApply, useHandleOnKeyDown, useOptionSearch } from '../hooks';
 import { ChipChoiceMultipleProps, ContentRenderProps } from '../types';
 import { FlattenOption, kindFlattenOptions } from '../utils';
 import { transformOptionsToItems } from '../utils/options';
@@ -45,6 +45,7 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
   dropDownClassName,
   showClearButton = true,
   autoApply = true,
+  disableFuzzySearch = false,
   onApprove,
   onCancel,
   ...rest
@@ -89,11 +90,11 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
         allLabel: t('allLabel'),
       });
 
-  const fuzzySearch = useFuzzySearch(options, flatMapOptions);
+  const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
 
   const result = useMemo(
-    () => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)),
-    [fuzzySearch, options, searchValue, searchable, valueToRender],
+    () => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)),
+    [optionSearch, options, searchValue, searchable, valueToRender],
   );
   const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
 

package/src/components/ChipChoice/components/ChipChoiceSingle.tsx

@@ -6,7 +6,7 @@ import { useValueControl } from '@snack-uikit/utils';
 
 import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
 import { DROPLIST_SIZE_MAP } from '../constants';
-import { useAutoApply, useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { useAutoApply, useHandleOnKeyDown, useOptionSearch } from '../hooks';
 import { ChipChoiceSingleProps, ContentRenderProps } from '../types';
 import { FlattenOption, kindFlattenOptions } from '../utils';
 import { transformOptionsToItems } from '../utils/options';
@@ -32,6 +32,7 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
   searchable,
   contentRender,
   dropDownClassName,
+  disableFuzzySearch,
   autoApply = true,
   onApprove,
   onCancel,
@@ -73,11 +74,11 @@ export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderPro
     ? valueRender(selectedOption)
     : defaultSingleValueFormatter({ label: selectedOption?.label, allLabel: t('allLabel') });
 
-  const fuzzySearch = useFuzzySearch(options, flatMapOptions);
+  const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
 
   const result = useMemo(
-    () => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)),
-    [fuzzySearch, options, searchValue, searchable, valueToRender],
+    () => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)),
+    [optionSearch, options, searchValue, searchable, valueToRender],
   );
   const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
 

package/src/components/ChipChoice/hooks.tsx

@@ -2,7 +2,7 @@ import FuzzySearch from 'fuzzy-search';
 import { KeyboardEvent, KeyboardEventHandler, useCallback } from 'react';
 
 import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
-import { DroplistProps } from '@snack-uikit/list';
+import { DroplistProps, ItemId } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 
 import { CHIP_CHOICE_TEST_IDS } from '../../constants';
@@ -47,24 +47,43 @@ const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export function useFuzzySearch<T extends ContentRenderProps = ContentRenderProps>(
-  options: FilterOption<T>[],
-  flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[],
-  minSearchInputLength?: number,
-) {
+export function useOptionSearch<T extends ContentRenderProps = ContentRenderProps>({
+  options,
+  flatMapOptions,
+  minSearchInputLength,
+  disableFuzzySearch,
+}: {
+  options: FilterOption<T>[];
+  flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[];
+  minSearchInputLength?: number;
+  disableFuzzySearch?: boolean;
+}) {
   return useCallback(
     (search: string) => {
-      const searcher = new FuzzySearch(
+      if (search.length < (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)) return options;
+
+      if (disableFuzzySearch) {
+        return options.filter(option => {
+          const fieldsForSearch = [option.label];
+
+          if ('contentRenderProps' in option) {
+            fieldsForSearch.push(option?.contentRenderProps?.description);
+            fieldsForSearch.push(option?.contentRenderProps?.caption);
+          }
+
+          return fieldsForSearch
+            .filter((v): v is ItemId => Boolean(v))
+            .some(value => value.toString().includes(search));
+        });
+      }
+
+      return new FuzzySearch(
         flatMapOptions,
         ['label', 'contentRenderProps.description', 'contentRenderProps.caption'],
         {},
-      );
-
-      return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-        ? searcher.search(search)
-        : options;
+      ).search(search);
     },
-    [flatMapOptions, minSearchInputLength, options],
+    [disableFuzzySearch, flatMapOptions, minSearchInputLength, options],
   );
 }
 

package/src/components/ChipChoice/types.ts

@@ -74,6 +74,11 @@ export type ChipChoiceCommonProps = WithSupportProps<
     size?: Size;
     /** Колбек обработки клика */
     onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /**
+     * Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
+     * @default false
+     */
+    disableFuzzySearch?: boolean;
     /** Отображение кнопки очистки значения @default true*/
     showClearButton?: boolean;
     /** Расположение выпадающего меню */