@snack-uikit/fields 0.25.3-preview-4ab4d581.0 → 0.26.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.26.0 (2024-09-17)
+
+
+### Features
+
+* **FF-00:** add autocomplete to FieldText ([76c21fa](https://github.com/cloud-ru-tech/snack-uikit/commit/76c21fa78b8177c4025bdace62fd1fbd66526726))
+* **PDS-750:** Added simple search to field select ([dda75ec](https://github.com/cloud-ru-tech/snack-uikit/commit/dda75ecdffd9b6fa90adad40c90a842357aee78a))
+
+
+
+
+
 ## 0.25.2 (2024-09-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -158,6 +158,7 @@ const [isOpen, setIsOpen] = useState(false);
   size='s'
   validationState='error'
   prefixIcon={<PlaceholderSVG />}
+  enableFuzzySearch={true}
 />;
 ```
 ## Особенности работы FieldStepper-a
@@ -379,6 +380,7 @@ FieldStepper в основном предназначен для работы с
 | autocomplete | `boolean` | - |  |
 | addOptionByEnter | `boolean` | - |  |
 | open | `boolean` | - |  |
+| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | onOpenChange | `(open: boolean) => void` | - |  |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -21,6 +21,7 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     autocomplete?: boolean;
     addOptionByEnter?: boolean;
     open?: boolean;
+    enableFuzzySearch?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 } & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -22,10 +22,9 @@ import { useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
-import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
-import { useFuzzySearch } from './legacy';
+import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, getArrowIcon, updateMultipleItems } from './utils';
+import { checkisSearchUnavailable, extractListProps, getArrowIcon, updateMultipleItems } from './utils';
 const BASE_MIN_WIDTH = 4;
 const defaultSelectedOptionFormatter = item => 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -33,7 +32,7 @@ const defaultSelectedOptionFormatter = item =>
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectMultiple = forwardRef((props, ref) => {
     var _a;
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter"]);
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -114,8 +113,13 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
             (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         }
     };
-    const fuzzySearch = useFuzzySearch(items);
-    const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
+    const searchFunction = useSearch(items, enableFuzzySearch);
+    const isSearchUnavailable = checkisSearchUnavailable({
+        autocomplete,
+        searchable,
+        isSameValue: prevInputValue.current === inputValue,
+    });
+    const result = isSearchUnavailable ? items : searchFunction(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
     return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, triggerElemRef: localRef, trigger: 'click', selection: {
                 mode: 'multiple',

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -19,6 +19,7 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     autocomplete?: boolean;
     addOptionByEnter?: boolean;
     open?: boolean;
+    enableFuzzySearch?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 } & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -21,16 +21,16 @@ import { useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
-import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
-import { useFuzzySearch } from './legacy';
+import { useButtons, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, getArrowIcon, updateItems } from './utils';
+import { checkisSearchUnavailable, extractListProps, getArrowIcon, updateItems } from './utils';
 const defaultSelectedOptionFormatter = item => 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectSingle = forwardRef((props, ref) => {
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter"]);
+    var _a;
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
@@ -39,7 +39,10 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
         onChange: onChangeProp,
     });
     const [{ selectedItem, items = [] }, setItems] = useState(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
-    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: selectedOptionFormatter(selectedItem), selectedOptionFormatter }));
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        defaultValue: (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _a !== void 0 ? _a : '', selectedOptionFormatter }));
     const prevSelectedItem = useRef(selectedItem);
     useLayoutEffect(() => {
         setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
@@ -115,10 +118,13 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
             }
         }
     };
-    const fuzzySearch = useFuzzySearch(items);
-    const result = autocomplete || !searchable || selectedOptionFormatter(selectedItem) === inputValue
-        ? items
-        : fuzzySearch(inputValue);
+    const filterFunction = useSearch(items, enableFuzzySearch);
+    const isSearchUnavailable = checkisSearchUnavailable({
+        autocomplete,
+        searchable,
+        isSameValue: selectedOptionFormatter(selectedItem) === inputValue,
+    });
+    const result = isSearchUnavailable ? items : filterFunction(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
     return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, selection: {
                 mode: 'single',

package/dist/components/FieldSelect/hooks.d.ts

@@ -1,5 +1,6 @@
 import { KeyboardEvent, KeyboardEventHandler, MouseEvent, RefObject } from 'react';
 import { Handler } from 'uncontrollable';
+import { ItemProps } from '@snack-uikit/list';
 import { ItemWithId, SearchState, SelectedOptionFormatter } from './types';
 type UseHandleOnKeyDownProps = {
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
@@ -31,4 +32,8 @@ export declare function useSearchInput({ value, onChange, defaultValue, selected
     updateInputValue: (selectedItem?: ItemWithId) => void;
 };
 export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWithId) => (e?: MouseEvent<HTMLButtonElement>) => void;
+/**
+ * Четкий и нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export declare function useSearch(items: ItemProps[], enableFuzzySearch?: boolean): (search: string) => import("@snack-uikit/list/dist/components/Items").Item[] | import("@snack-uikit/list/dist/components/Items").FlattenItem[];
 export {};

package/dist/components/FieldSelect/hooks.js

@@ -1,11 +1,10 @@
+import FuzzySearch from 'fuzzy-search';
 import { useCallback, useMemo, useRef } from 'react';
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import { 
-// extractChildIds,
-isAccordionItemProps, isNextListItemProps, } from '@snack-uikit/list';
+import { isAccordionItemProps, isNextListItemProps, kindFlattenItems, } from '@snack-uikit/list';
 import { useCopyButton, useValueControl } from '../../hooks';
 import { extractChildIds } from './legacy';
-import { isBaseOptionProps } from './utils';
+import { getValueByPath, isBaseOptionProps } from './utils';
 export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
     return useCallback((onKeyDown) => (e) => {
         if (e.code === 'Space') {
@@ -84,3 +83,25 @@ export function useHandleDeleteItem(setValue) {
         }
     }, [setValue]);
 }
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
+const COMMON_FIELDS_TO_SEARCH = ['content.option', 'content.caption', 'content.description'];
+/**
+ * Четкий и нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useSearch(items, enableFuzzySearch = true) {
+    const flattenItems = useMemo(() => {
+        const { flattenItems } = kindFlattenItems({ items });
+        return Object.values(flattenItems);
+    }, [items]);
+    const filterFunction = useCallback((search) => {
+        if (!enableFuzzySearch) {
+            return flattenItems.filter(item => [...COMMON_FIELDS_TO_SEARCH, 'label'].some(key => {
+                const value = getValueByPath(item, key);
+                return value.toLowerCase().includes(search.toLowerCase());
+            }));
+        }
+        const searcher = new FuzzySearch(flattenItems, COMMON_FIELDS_TO_SEARCH, {});
+        return searcher.search(search);
+    }, [enableFuzzySearch, flattenItems]);
+    return useCallback((search) => (search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? filterFunction(search) : items), [filterFunction, items]);
+}

package/dist/components/FieldSelect/legacy/index.d.ts

@@ -1,3 +1,2 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
 export { extractChildIds, flattenItems } from './utils';

package/dist/components/FieldSelect/legacy/index.js

@@ -1,3 +1,2 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
 export { extractChildIds, flattenItems } from './utils';

package/dist/components/FieldSelect/types.d.ts

@@ -60,6 +60,8 @@ type FiledSelectCommonProps = WithSupportProps<{
     autocomplete?: boolean;
     addOptionByEnter?: boolean;
     open?: boolean;
+    /** Включить нечеткий поиск  */
+    enableFuzzySearch?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 }> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered' | 'untouchableScrollbars'>;

package/dist/components/FieldSelect/utils/checkisSearchUnavailable.d.ts

@@ -0,0 +1,7 @@
+type CheckIsSearchUnavailableParams = {
+    autocomplete: boolean;
+    searchable: boolean;
+    isSameValue: boolean;
+};
+export declare function checkisSearchUnavailable({ autocomplete, searchable, isSameValue }: CheckIsSearchUnavailableParams): boolean;
+export {};

package/dist/components/FieldSelect/utils/checkisSearchUnavailable.js

@@ -0,0 +1,3 @@
+export function checkisSearchUnavailable({ autocomplete, searchable, isSameValue }) {
+    return autocomplete || !searchable || isSameValue;
+}

package/dist/components/FieldSelect/utils/getValueByPath.d.ts

@@ -0,0 +1 @@
+export declare function getValueByPath(item: Record<string, unknown>, path: string): string;

package/dist/components/FieldSelect/utils/getValueByPath.js

@@ -0,0 +1,17 @@
+export function getValueByPath(item, path) {
+    const keys = path.split('.');
+    const firstFieldName = keys[0];
+    if (!item[firstFieldName]) {
+        return '';
+    }
+    if (keys.length > 1) {
+        return getValueByPath(item[firstFieldName], keys.slice(1, keys.length).join('.'));
+    }
+    if (path in item) {
+        const value = item[path];
+        if (typeof value === 'string' || typeof value === 'number') {
+            return value.toString() || '';
+        }
+    }
+    return '';
+}

package/dist/components/FieldSelect/utils/index.d.ts

@@ -3,3 +3,5 @@ export * from './extractListProps';
 export * from './options';
 export * from './updateItems';
 export * from './getArrowIcon';
+export * from './getValueByPath';
+export * from './checkisSearchUnavailable';

package/dist/components/FieldSelect/utils/index.js

@@ -3,3 +3,5 @@ export * from './extractListProps';
 export * from './options';
 export * from './updateItems';
 export * from './getArrowIcon';
+export * from './getValueByPath';
+export * from './checkisSearchUnavailable';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.25.3-preview-4ab4d581.0",
+  "version": "0.26.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0d52e9b583e9a990834cd94ec67277bdd27651c1"
+  "gitHead": "b5dbc02c777773140b597e9c3268a9424f8608d8"
 }

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -12,11 +12,10 @@ import { useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
-import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
-import { useFuzzySearch } from './legacy';
+import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
 import styles from './styles.module.scss';
 import { FieldSelectMultipleProps, ItemWithId, SelectedOptionFormatter } from './types';
-import { extractListProps, getArrowIcon, updateMultipleItems } from './utils';
+import { checkisSearchUnavailable, extractListProps, getArrowIcon, updateMultipleItems } from './utils';
 
 const BASE_MIN_WIDTH = 4;
 
@@ -48,6 +47,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     addOptionByEnter = false,
     untouchableScrollbars = false,
     open: openProp,
+    enableFuzzySearch = true,
     onOpenChange,
     selectedOptionFormatter = defaultSelectedOptionFormatter,
     ...rest
@@ -158,8 +158,13 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     }
   };
 
-  const fuzzySearch = useFuzzySearch(items);
-  const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
+  const searchFunction = useSearch(items, enableFuzzySearch);
+  const isSearchUnavailable = checkisSearchUnavailable({
+    autocomplete,
+    searchable,
+    isSameValue: prevInputValue.current === inputValue,
+  });
+  const result = isSearchUnavailable ? items : searchFunction(inputValue);
 
   const fieldValidationState = getValidationState({ validationState, error: rest.error });
 

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -21,11 +21,10 @@ import { useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
-import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
-import { useFuzzySearch } from './legacy';
+import { useButtons, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
 import styles from './styles.module.scss';
 import { FieldSelectSingleProps, ItemWithId, SelectedOptionFormatter } from './types';
-import { extractListProps, getArrowIcon, updateItems } from './utils';
+import { checkisSearchUnavailable, extractListProps, getArrowIcon, updateItems } from './utils';
 
 const defaultSelectedOptionFormatter: SelectedOptionFormatter = item =>
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -58,6 +57,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     open: openProp,
     onOpenChange,
     selectedOptionFormatter = defaultSelectedOptionFormatter,
+    enableFuzzySearch = true,
     ...rest
   } = props;
   const localRef = useRef<HTMLInputElement>(null);
@@ -75,7 +75,9 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
 
   const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput({
     ...search,
-    defaultValue: selectedOptionFormatter(selectedItem), 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    defaultValue: selectedItem?.content.option ?? '',
     selectedOptionFormatter,
   });
 
@@ -175,11 +177,13 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     }
   };
 
-  const fuzzySearch = useFuzzySearch(items);
-  const result =
-    autocomplete || !searchable || selectedOptionFormatter(selectedItem) === inputValue
-      ? items
-      : fuzzySearch(inputValue);
+  const filterFunction = useSearch(items, enableFuzzySearch);
+  const isSearchUnavailable = checkisSearchUnavailable({
+    autocomplete,
+    searchable,
+    isSameValue: selectedOptionFormatter(selectedItem) === inputValue,
+  });
+  const result = isSearchUnavailable ? items : filterFunction(inputValue);
 
   const fieldValidationState = getValidationState({ validationState, error: rest.error });
 

package/src/components/FieldSelect/hooks.ts

@@ -1,18 +1,20 @@
+import FuzzySearch from 'fuzzy-search';
 import { KeyboardEvent, KeyboardEventHandler, MouseEvent, RefObject, useCallback, useMemo, useRef } from 'react';
 import { Handler } from 'uncontrollable';
 
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import {
-  // extractChildIds,
   isAccordionItemProps,
   isNextListItemProps,
+  ItemProps,
+  kindFlattenItems,
   SelectionSingleValueType,
 } from '@snack-uikit/list';
 
 import { useCopyButton, useValueControl } from '../../hooks';
 import { extractChildIds } from './legacy';
 import { ItemWithId, SearchState, SelectedOptionFormatter } from './types';
-import { isBaseOptionProps } from './utils';
+import { getValueByPath, isBaseOptionProps } from './utils';
 
 type UseHandleOnKeyDownProps = {
   inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
@@ -156,3 +158,40 @@ export function useHandleDeleteItem(setValue: Handler) {
     [setValue],
   );
 }
+
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
+const COMMON_FIELDS_TO_SEARCH = ['content.option', 'content.caption', 'content.description'];
+
+/**
+ * Четкий и нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useSearch(items: ItemProps[], enableFuzzySearch: boolean = true) {
+  const flattenItems = useMemo(() => {
+    const { flattenItems } = kindFlattenItems({ items });
+
+    return Object.values(flattenItems);
+  }, [items]);
+
+  const filterFunction = useCallback(
+    (search: string) => {
+      if (!enableFuzzySearch) {
+        return flattenItems.filter(item =>
+          [...COMMON_FIELDS_TO_SEARCH, 'label'].some(key => {
+            const value = getValueByPath(item, key);
+
+            return value.toLowerCase().includes(search.toLowerCase());
+          }),
+        );
+      }
+
+      const searcher = new FuzzySearch(flattenItems, COMMON_FIELDS_TO_SEARCH, {});
+      return searcher.search(search);
+    },
+    [enableFuzzySearch, flattenItems],
+  );
+
+  return useCallback(
+    (search: string) => (search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? filterFunction(search) : items),
+    [filterFunction, items],
+  );
+}

package/src/components/FieldSelect/legacy/index.ts

@@ -1,3 +1,2 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
 export { extractChildIds, flattenItems } from './utils';

package/src/components/FieldSelect/types.ts

@@ -116,6 +116,9 @@ type FiledSelectCommonProps = WithSupportProps<{
 
   open?: boolean;
 
+  /** Включить нечеткий поиск  */
+  enableFuzzySearch?: boolean;
+
   onOpenChange?(open: boolean): void;
 
   selectedOptionFormatter?: SelectedOptionFormatter;

package/src/components/FieldSelect/utils/checkisSearchUnavailable.ts

@@ -0,0 +1,9 @@
+type CheckIsSearchUnavailableParams = {
+  autocomplete: boolean;
+  searchable: boolean;
+  isSameValue: boolean;
+};
+
+export function checkisSearchUnavailable({ autocomplete, searchable, isSameValue }: CheckIsSearchUnavailableParams) {
+  return autocomplete || !searchable || isSameValue;
+}

package/src/components/FieldSelect/utils/getValueByPath.ts

@@ -0,0 +1,22 @@
+export function getValueByPath(item: Record<string, unknown>, path: string): string {
+  const keys = path.split('.');
+  const firstFieldName = keys[0];
+
+  if (!item[firstFieldName]) {
+    return '';
+  }
+
+  if (keys.length > 1) {
+    return getValueByPath(item[firstFieldName] as Record<string, unknown>, keys.slice(1, keys.length).join('.'));
+  }
+
+  if (path in item) {
+    const value = item[path];
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      return value.toString() || '';
+    }
+  }
+
+  return '';
+}

package/src/components/FieldSelect/utils/index.ts

@@ -3,3 +3,5 @@ export * from './extractListProps';
 export * from './options';
 export * from './updateItems';
 export * from './getArrowIcon';
+export * from './getValueByPath';
+export * from './checkisSearchUnavailable';

package/dist/components/FieldSelect/legacy/hooks.d.ts

@@ -1,5 +0,0 @@
-import { ItemProps } from '@snack-uikit/list';
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
-export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => import("@snack-uikit/list/dist/components/Items").Item[] | import("@snack-uikit/list/dist/components/Items").FlattenItem[];

package/dist/components/FieldSelect/legacy/hooks.js

@@ -1,19 +0,0 @@
-import FuzzySearch from 'fuzzy-search';
-import { useCallback, useMemo } from 'react';
-import { kindFlattenItems } from '@snack-uikit/list';
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
-export function useFuzzySearch(items, minSearchInputLength) {
-    const flattenItems = useMemo(() => {
-        const { flattenItems } = kindFlattenItems({ items });
-        return Object.values(flattenItems);
-    }, [items]);
-    return useCallback((search) => {
-        const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description'], {});
-        return search.length >= (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-            ? searcher.search(search)
-            : items;
-    }, [flattenItems, items, minSearchInputLength]);
-}

package/src/components/FieldSelect/legacy/hooks.ts

@@ -1,28 +0,0 @@
-import FuzzySearch from 'fuzzy-search';
-import { useCallback, useMemo } from 'react';
-
-import { ItemProps, kindFlattenItems } from '@snack-uikit/list';
-
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
-
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
-export function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number) {
-  const flattenItems = useMemo(() => {
-    const { flattenItems } = kindFlattenItems({ items });
-
-    return Object.values(flattenItems);
-  }, [items]);
-
-  return useCallback(
-    (search: string) => {
-      const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description'], {});
-
-      return search.length >= (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-        ? searcher.search(search)
-        : items;
-    },
-    [flattenItems, items, minSearchInputLength],
-  );
-}