@snack-uikit/fields 0.16.1-preview-3bc93fc3.0 → 0.16.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.1 (2024-02-27)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.5.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 # 0.16.0 (2024-02-26)
 
 

package/README.md

@@ -337,20 +337,9 @@ const [isOpen, setIsOpen] = useState(false);
 | footer | `ReactNode` | - |  |
 | search | `SearchState` | - |  |
 | autocomplete | `boolean` | - |  |
-| addOptionByEnter | `boolean` | - |  |
-| open | `boolean` | - |  |
-| onOpenChange | `(open: boolean) => void` | - |  |
-| dataError | `boolean` | - |  |
-| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
-| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
-| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
-| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
-| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| dataFiltered | `boolean` | - |  |
 | selection | "single" \| "multiple" | - |  |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
-| removeByBackspace | `boolean` | - |  |
 ## FieldStepper
 ### Props
 | name | type | default value | description |

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

@@ -2,8 +2,6 @@
 export declare const FieldSelectMultiple: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
     loading?: boolean | undefined;
-} & {
-    removeByBackspace?: boolean | undefined;
 } & Omit<import("@snack-uikit/list").SelectionMultipleState, "mode"> & Omit<{
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
@@ -16,7 +14,4 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     footer?: import("react").ReactNode;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
-    addOptionByEnter?: boolean | undefined;
-    open?: boolean | undefined;
-    onOpenChange?(open: boolean): void;
-} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "noDataState" | "noResultsState" | "errorDataState" | "pinTop" | "pinBottom" | "dataFiltered">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+}, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, useFuzzySearch } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
@@ -20,29 +20,26 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, findSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractSelectedMultipleOptions, getArrowIcon, transformOptionsToItems } from './utils';
 const BASE_MIN_WIDTH = 4;
 export const FieldSelectMultiple = forwardRef((_a, ref) => {
-    var _b;
-    var { 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, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange"]);
+    var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, loading, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, validationState = 'default', footer, search, autocomplete = false, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "loading", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "validationState", "footer", "search", "autocomplete", "prefixIcon", "error"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
-    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
+    const [open, setOpen] = useState(false);
     const items = useMemo(() => transformOptionsToItems(options), [options]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
         onChange: onChangeProp,
     });
-    const { selected, itemsWithPlaceholder } = useMemo(() => {
-        const [notSortSelectedOption, placeholder] = findSelectedOptions(items, value);
-        const selectedWithPlaceholder = notSortSelectedOption || placeholder ? (placeholder !== null && placeholder !== void 0 ? placeholder : []).concat(notSortSelectedOption !== null && notSortSelectedOption !== void 0 ? notSortSelectedOption : []) : undefined;
-        const selected = selectedWithPlaceholder
-            ? selectedWithPlaceholder.sort((a, b) => {
+    const selectedOption = useMemo(() => {
+        const notSortSelectedOption = extractSelectedMultipleOptions(options, value);
+        if (notSortSelectedOption) {
+            return notSortSelectedOption.sort((a, b) => {
                 if (b.disabled && !a.disabled) {
                     return 1;
                 }
@@ -50,15 +47,10 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
                     return -1;
                 }
                 return 0;
-            })
-            : undefined;
-        const placeholderItems = placeholder ? placeholder : [];
-        return {
-            selected,
-            itemsWithPlaceholder: placeholderItems.concat(items),
-        };
-    }, [items, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '' }));
+            });
+        }
+    }, [options, value]);
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: String(selectedOption !== null && selectedOption !== void 0 ? selectedOption : '') }));
     const onClear = () => {
         var _a;
         setValue(undefined);
@@ -70,7 +62,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && !disabled && !readonly && Boolean(value === null || value === void 0 ? void 0 : value.length),
+        showClearButton: showClearButton && Boolean(value),
         showCopyButton: false,
         inputRef: localRef,
         onClear,
@@ -82,20 +74,11 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     });
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown) => (e) => {
-        if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
-            if ((selected === null || selected === void 0 ? void 0 : selected.length) && !selected.slice(-1)[0].disabled) {
-                handleItemDelete(selected.pop())();
+        if (e.code === 'Backspace' && inputValue === '') {
+            if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) && !selectedOption.slice(-1)[0].disabled) {
+                handleItemDelete(selectedOption.pop())();
             }
         }
-        if (e.code === 'Enter') {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-        if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-            setValue((value) => (value !== null && value !== void 0 ? value : []).concat(inputValue));
-            onInputValueChange('');
-            prevInputValue.current = '';
-        }
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
         }
@@ -105,16 +88,10 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
             if (!open) {
-                onInputValueChange('');
-                prevInputValue.current = '';
-                if (inputPlugRef.current) {
-                    inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
-                }
+                prevInputValue.current = inputValue;
             }
             if (open) {
-                if (inputPlugRef.current) {
-                    inputPlugRef.current.style.width = 'unset';
-                }
+                prevInputValue.current = '';
             }
         }
     };
@@ -125,21 +102,19 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         }
         (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     };
-    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
-    const result = autocomplete || !searchable || prevInputValue.current === inputValue
-        ? itemsWithPlaceholder
-        : fuzzySearch(inputValue);
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: validationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, selection: {
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), { error: error, required: required, readonly: readonly, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, hint: hint, disabled: disabled, showHintIcon: showHintIcon, size: size, validationState: validationState, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', placement: 'bottom', "data-test-id": 'field-select__list', items: result, triggerElemRef: localRef, scroll: true, marker: true, footer: footer, selection: {
                 mode: 'multiple',
                 value: value,
                 onChange: setValue,
-            }, dataFiltered: (_b = rest.dataFiltered) !== null && _b !== void 0 ? _b : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
+            }, size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, loading: loading, children: ({ onKeyDown }) => {
                 var _a, _b, _c, _d;
-                return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selected &&
-                                        selected.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.content.option), onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id))), _jsx("div", { className: styles.inputWrapper, style: {
+                return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedOption &&
+                                        selectedOption.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.option), onDelete: !option.disabled && !disabled ? handleItemDelete(option) : undefined }, option.value))), _jsx("div", { className: styles.inputWrapper, style: {
                                             minWidth: value
                                                 ? Math.min((_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : BASE_MIN_WIDTH, (_d = (_c = inputPlugRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : BASE_MIN_WIDTH)
                                                 : '100%',
-                                        }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selected || !selected.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: searchable ? inputValue : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: styles.input }) })] }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
-            } })) })));
+                                        }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedOption ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: searchable ? inputValue : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: styles.input }) })] }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
+            } }) })));
 });

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

@@ -14,7 +14,4 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     footer?: import("react").ReactNode;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
-    addOptionByEnter?: boolean | undefined;
-    open?: boolean | undefined;
-    onOpenChange?(open: boolean): void;
-} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "noDataState" | "noResultsState" | "errorDataState" | "pinTop" | "pinBottom" | "dataFiltered"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -11,49 +11,38 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, useFuzzySearch } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, findSelectedOption, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
-    var _b, _c;
-    var { 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, open: openProp, onOpenChange } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "open", "onOpenChange"]);
+    var _b;
+    var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, loading, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, validationState = 'default', footer, search, autocomplete = false, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "loading", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "validationState", "footer", "search", "autocomplete", "prefixIcon", "error"]);
     const localRef = useRef(null);
-    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
+    const [open, setOpen] = useState(false);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
         onChange: onChangeProp,
     });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
-    const { selected, itemsWithPlaceholder } = useMemo(() => {
-        const [fonded, placeholder] = findSelectedOption(items, value);
-        return {
-            selected: fonded !== null && fonded !== void 0 ? fonded : placeholder,
-            itemsWithPlaceholder: (placeholder ? [placeholder] : []).concat(items),
-        };
-    }, [items, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: (_b = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _b !== void 0 ? _b : '' }));
+    const selectedOption = useMemo(() => extractSelectedOptions(options, value), [options, value]);
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: String(selectedOption !== null && selectedOption !== void 0 ? selectedOption : '') }));
+    useEffect(() => {
+        var _a;
+        !open && onInputValueChange(String((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _a !== void 0 ? _a : ''));
+    }, [onInputValueChange, open, selectedOption]);
     useEffect(() => {
-        if ((selected === null || selected === void 0 ? void 0 : selected.content.option) && prevInputValue.current !== (selected === null || selected === void 0 ? void 0 : selected.content.option)) {
-            onInputValueChange(selected.content.option);
-            prevInputValue.current = selected === null || selected === void 0 ? void 0 : selected.content.option;
-        }
-    }, [onInputValueChange, selected === null || selected === void 0 ? void 0 : selected.content.option, prevInputValue]);
-    const handleBlur = (e) => {
         var _a, _b;
-        if (!open && (selected === null || selected === void 0 ? void 0 : selected.content.option) !== inputValue) {
-            onInputValueChange((_a = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _a !== void 0 ? _a : '');
-        }
-        (_b = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _b === void 0 ? void 0 : _b.call(rest, e);
-    };
+        onInputValueChange(String((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _a !== void 0 ? _a : ''));
+        prevInputValue.current = String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : '');
+    }, [prevInputValue, onInputValueChange, selectedOption]);
     const onClear = () => {
         var _a;
         setValue('');
@@ -65,11 +54,11 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
+        showClearButton: showClearButton && Boolean(value),
         showCopyButton,
         inputRef: localRef,
         onClear,
-        valueToCopy: (_c = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _c !== void 0 ? _c : '',
+        valueToCopy: String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : ''),
     });
     const commonHandleOnKeyDown = useHandleOnKeyDown({
         inputKeyDownNavigationHandler,
@@ -80,13 +69,6 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
         }
-        if (e.code === 'Enter') {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-        if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-            setValue(inputValue);
-        }
         commonHandleOnKeyDown(onKeyDown)(e);
     };
     const handleSelectionChange = (newValue) => {
@@ -98,22 +80,15 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         }
     };
     const handleOpenChange = (open) => {
-        var _a, _b;
         if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
-            if (!open) {
-                onInputValueChange((_a = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _a !== void 0 ? _a : '');
-                prevInputValue.current = (_b = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _b !== void 0 ? _b : '';
-            }
         }
     };
-    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
-    const result = autocomplete || !searchable || prevInputValue.current === inputValue
-        ? itemsWithPlaceholder
-        : fuzzySearch(inputValue);
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { validationState: validationState, required: required, readonly: readonly, labelFor: id, disabled: disabled, size: size, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, selection: {
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), { error: error, required: required, readonly: readonly, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, hint: hint, disabled: disabled, showHintIcon: showHintIcon, size: size, validationState: validationState, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', placement: 'bottom', "data-test-id": 'field-select__list', items: result, triggerElemRef: localRef, scroll: true, marker: true, footer: footer, selection: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: inputValue, readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) })) })));
+            }, size: size, open: open, onOpenChange: handleOpenChange, loading: loading, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: inputValue, readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown) }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) }) })));
 });

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

@@ -1,6 +1,6 @@
 import { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react';
 import { Handler } from 'uncontrollable';
-import { ItemWithId, SearchState } from './types';
+import { OptionProps, SearchState } from './types';
 type UseHandleOnKeyDownProps = {
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
     onInputKeyDownProp: KeyboardEventHandler<HTMLInputElement> | undefined;
@@ -26,5 +26,5 @@ export declare function useSearchInput({ value, onChange, defaultValue }: Search
     onInputValueChange: Handler;
     prevInputValue: import("react").MutableRefObject<string>;
 };
-export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWithId) => () => void;
+export declare function useHandleDeleteItem(setValue: Handler): (option?: OptionProps) => () => void;
 export {};

package/dist/components/FieldSelect/hooks.js

@@ -1,8 +1,9 @@
 import { useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import { extractChildIds, isAccordionItemProps, isNextListItemProps, } from '@snack-uikit/list';
-import { useCopyButton, useValueControl } from '../../hooks';
-import { isBaseOptionProps } from './utils';
+import { extractChildIds } from '@snack-uikit/list/dist/utils';
+import { useCopyButton } from '../../hooks';
+import { isAccordionOptionProps, isBaseOptionProps, isNextListOptionProps, transformOptionsToItems } from './utils';
 export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
     return useCallback((onKeyDown) => (e) => {
         if (e.code === 'Space') {
@@ -50,23 +51,22 @@ export function useButtons({ readonly, showClearButton, showCopyButton, size, on
     return { buttons, inputKeyDownNavigationHandler, buttonsRefs };
 }
 export function useSearchInput({ value, onChange, defaultValue }) {
-    const [inputValue = '', onInputValueChange] = useValueControl({ value, onChange, defaultValue });
+    const [inputValue, onInputValueChange] = useUncontrolledProp(value, defaultValue !== null && defaultValue !== void 0 ? defaultValue : '', onChange);
     const prevInputValue = useRef(inputValue);
     return { inputValue, onInputValueChange, prevInputValue };
 }
 export function useHandleDeleteItem(setValue) {
-    return useCallback((item) => () => {
-        var _a;
-        if (!item) {
+    return useCallback((option) => () => {
+        if (!option) {
             return;
         }
-        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-            const removeIds = extractChildIds({ items: item.items }).concat((_a = item.id) !== null && _a !== void 0 ? _a : '');
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const removeIds = extractChildIds({ items: transformOptionsToItems(option.options) }).concat(option.value);
             setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => !removeIds.includes(v !== null && v !== void 0 ? v : '')));
             return;
         }
-        if (isBaseOptionProps(item)) {
-            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => v !== item.id));
+        if (isBaseOptionProps(option)) {
+            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => v !== option.value));
         }
     }, [setValue]);
 }

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

@@ -48,18 +48,12 @@ type FiledSelectCommonProps = WithSupportProps<{
     footer?: ListProps['footer'];
     search?: SearchState;
     autocomplete?: boolean;
-    addOptionByEnter?: boolean;
-    open?: boolean;
-    onOpenChange?(open: boolean): void;
-}> & Pick<ListProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'>;
+}>;
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
-export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
-    removeByBackspace?: boolean;
-} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
 export type FieldSelectProps = (FieldSelectSingleProps & {
     selection?: 'single';
 }) | (FieldSelectMultipleProps & {
     selection: 'multiple';
 });
-export type ItemWithId = BaseItemProps | AccordionItemProps | NextListItemProps;
 export {};

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

@@ -1,13 +1,13 @@
 import { Size } from '@snack-uikit/input-private';
-import { DroplistProps, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
-import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectProps, FieldSelectSingleProps, GroupOptionProps, ItemWithId, NestListOptionProps, OptionProps } from './types';
+import { ItemProps } from '@snack-uikit/list';
+import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectSingleProps, GroupOptionProps, NestListOptionProps, OptionProps, OptionWithoutGroup } from './types';
 export declare function isBaseOptionProps(option: any): option is BaseOptionProps;
 export declare function isAccordionOptionProps(option: any): option is AccordionOptionProps;
 export declare function isNextListOptionProps(option: any): option is NestListOptionProps;
 export declare function isGroupOptionProps(option: any): option is GroupOptionProps;
 export declare function transformOptionsToItems(options: OptionProps[]): ItemProps[];
-export declare function findSelectedOption(items: ItemProps[], value: SelectionSingleValueType): [ItemWithId | undefined, ItemWithId | undefined];
-export declare function findSelectedOptions(items: ItemProps[], value: SelectionSingleValueType[] | undefined): [ItemWithId[] | undefined, ItemWithId[] | undefined];
+export declare function extractSelectedOptions(options: OptionProps[], value: string | number | undefined): OptionWithoutGroup | undefined;
+export declare function extractSelectedMultipleOptions(options: OptionProps[], value?: (string | number | undefined)[]): OptionWithoutGroup[] | undefined;
 export declare function isFieldSelectMultipleProps(props: any): props is FieldSelectMultipleProps;
 export declare function isFieldSelectSingleProps(props: any): props is FieldSelectSingleProps;
 export declare function getArrowIcon({ size, open }: {
@@ -17,4 +17,3 @@ export declare function getArrowIcon({ size, open }: {
     ArrowIcon: ({ size, ...props }: import("@snack-uikit/icons/dist/components/interface-icons/chevronUp").ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
     arrowIconSize: 16 | 24;
 };
-export declare function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }: Partial<FieldSelectProps>): Partial<DroplistProps>;

package/dist/components/FieldSelect/utils.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
-import { flattenItems } from '@snack-uikit/list';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isBaseOptionProps(option) {
     return !('options' in option);
@@ -42,34 +41,60 @@ export function transformOptionsToItems(options) {
         return Object.assign(Object.assign({ 'data-test-id': 'field-select__list-option-' + option.value }, rest), { id: value, content: { option: contentOption, caption, description } });
     });
 }
-export function findSelectedOption(items, value) {
-    const flatten = flattenItems(items);
-    if (!value) {
-        return [undefined, undefined];
+export function extractSelectedOptions(options, value) {
+    for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { value: optionValue } = option;
+            if (optionValue === value) {
+                return option;
+            }
+            const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                return selectedOptionFromNestedOptions;
+            }
+        }
+        if (isGroupOptionProps(option)) {
+            const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                return selectedOptionFromNestedOptions;
+            }
+        }
+        if (isBaseOptionProps(option)) {
+            if (option.value === value) {
+                return option;
+            }
+        }
     }
-    const foundItem = flatten.find(item => String(item.id) === String(value));
-    const placeholderItem = { id: value, content: { option: String(value) } };
-    return [foundItem, !foundItem ? placeholderItem : undefined];
+    return undefined;
 }
-export function findSelectedOptions(items, value) {
-    const flatten = flattenItems(items);
-    if (!value || !(value === null || value === void 0 ? void 0 : value.length)) {
-        return [undefined, undefined];
-    }
-    let foundItems;
-    let placeholderItems;
-    value.forEach(value => {
-        if (flatten) {
-            const [found, placeholder] = findSelectedOption(flatten, value);
-            if (found || foundItems) {
-                foundItems = (foundItems !== null && foundItems !== void 0 ? foundItems : []).concat(found !== null && found !== void 0 ? found : []);
+export function extractSelectedMultipleOptions(options, value) {
+    let selectedOptions = [];
+    for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { value: optionValue } = option;
+            if (value === null || value === void 0 ? void 0 : value.includes(optionValue)) {
+                selectedOptions.push(option);
             }
-            if (placeholder || placeholderItems) {
-                placeholderItems = (placeholderItems !== null && placeholderItems !== void 0 ? placeholderItems : []).concat(placeholder !== null && placeholder !== void 0 ? placeholder : []);
+            const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
             }
         }
-    });
-    return [foundItems, placeholderItems];
+        if (isGroupOptionProps(option)) {
+            const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+            }
+        }
+        if (isBaseOptionProps(option)) {
+            if (value === null || value === void 0 ? void 0 : value.includes(option.value)) {
+                selectedOptions.push(option);
+            }
+        }
+    }
+    return selectedOptions.length ? selectedOptions : undefined;
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isFieldSelectMultipleProps(props) {
@@ -85,20 +110,3 @@ export function getArrowIcon({ size, open }) {
         arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
     };
 }
-export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }) {
-    return {
-        dataError,
-        noDataState,
-        noResultsState,
-        errorDataState,
-        pinTop,
-        pinBottom,
-        dataFiltered,
-        loading,
-        trigger: 'clickAndFocusVisible',
-        placement: 'bottom',
-        'data-test-id': 'field-select__list',
-        scroll: true,
-        marker: true,
-    };
-}

package/dist/hooks/useValueControl.js

@@ -1,6 +1,6 @@
 import { useUncontrolledProp } from 'uncontrollable';
 export function useValueControl({ value, onChange, defaultValue }) {
-    return useUncontrolledProp(value, defaultValue, (newValue) => {
+    return useUncontrolledProp(value, value !== null && value !== void 0 ? value : defaultValue, (newValue) => {
         const newState = typeof newValue === 'function' ? newValue(value) : newValue;
         onChange === null || onChange === void 0 ? void 0 : onChange(newState);
     });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.16.1-preview-3bc93fc3.0",
+  "version": "0.16.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,13 +34,13 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.9-preview-3bc93fc3.0",
+    "@snack-uikit/droplist": "0.13.8",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
-    "@snack-uikit/list": "0.4.2-preview-3bc93fc3.0",
+    "@snack-uikit/list": "0.5.0",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/slider": "0.1.4",
-    "@snack-uikit/tag": "0.8.1-preview-3bc93fc3.0",
+    "@snack-uikit/tag": "0.8.0",
     "@snack-uikit/tooltip": "0.12.1",
     "@snack-uikit/truncate-string": "0.4.9",
     "@snack-uikit/utils": "3.2.0",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "a2fa7717157c8a23fa1fc6b64c67c7b2d9dfc39c"
+  "gitHead": "bfdd4a8e3c077eab0d45e177172a62b6dcbda06b"
 }