@snack-uikit/fields 0.16.1 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.17.0 (2024-02-27)
+
+
+### Bug Fixes
+
+* **FF-4324:** fix infinite response in actocomplete mode ([ad19e0c](https://github.com/cloud-ru-tech/snack-uikit/commit/ad19e0cb6e91b4dda12bc34a3f55fe823f508602))
+* **FF-4324:** fix value dec value as value === max ([a8bb974](https://github.com/cloud-ru-tech/snack-uikit/commit/a8bb9747f31864ea616fef6b9e2166047faceae7))
+
+
+### Features
+
+* **FF-4323:** add not found items from value ([a924867](https://github.com/cloud-ru-tech/snack-uikit/commit/a92486740ce4de274ff7331fd9dbf67a9f1a39da))
+* **FF-4324:** add appearance to tags view in muliple select ([1ce6b81](https://github.com/cloud-ru-tech/snack-uikit/commit/1ce6b817714bf6fb35e394338ab0083fa92ca44f))
+
+
+
+
+
 ## 0.16.1 (2024-02-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -337,9 +337,20 @@ 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/FieldDecorator/utils.d.ts

@@ -0,0 +1,15 @@
+import { FieldDecoratorProps } from './FieldDecorator';
+export declare function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps>>({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, hint, disabled, showHintIcon, size, validationState, }: T): {
+    error: string | undefined;
+    required: boolean | undefined;
+    readonly: boolean | undefined;
+    label: string | undefined;
+    labelTooltip: string | undefined;
+    labelTooltipPlacement: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
+    labelFor: string | undefined;
+    hint: string | undefined;
+    disabled: boolean | undefined;
+    showHintIcon: boolean | undefined;
+    size: import("@snack-uikit/input-private").Size | undefined;
+    validationState: import("../../types").ValidationState | undefined;
+};

package/dist/components/FieldDecorator/utils.js

@@ -0,0 +1,16 @@
+export function extractFieldDecoratorProps({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, hint, disabled, showHintIcon, size, validationState, }) {
+    return {
+        error,
+        required,
+        readonly,
+        label,
+        labelTooltip,
+        labelTooltipPlacement,
+        labelFor,
+        hint,
+        disabled,
+        showHintIcon,
+        size,
+        validationState,
+    };
+}

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

@@ -2,6 +2,8 @@
 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 & {
@@ -14,4 +16,7 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     footer?: import("react").ReactNode;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
-}, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+    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>>;

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, useState } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, useFuzzySearch } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
@@ -20,26 +20,30 @@ 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 { extractSelectedMultipleOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractListProps, findSelectedOptions, getArrowIcon, mapOptionToAppearance, transformOptionsToItems, } from './utils';
 const BASE_MIN_WIDTH = 4;
 export const FieldSelectMultiple = forwardRef((_a, ref) => {
-    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"]);
+    var _b, _c, _d;
+    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"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
-    const [open, setOpen] = useState(false);
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const mapItemsToTagAppearance = useMemo(() => mapOptionToAppearance(options), [options]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
         onChange: onChangeProp,
     });
-    const selectedOption = useMemo(() => {
-        const notSortSelectedOption = extractSelectedMultipleOptions(options, value);
-        if (notSortSelectedOption) {
-            return notSortSelectedOption.sort((a, b) => {
+    const { selected, itemsWithPlaceholder, disabledSelected } = 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) => {
                 if (b.disabled && !a.disabled) {
                     return 1;
                 }
@@ -47,13 +51,21 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
                     return -1;
                 }
                 return 0;
-            });
-        }
-    }, [options, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: String(selectedOption !== null && selectedOption !== void 0 ? selectedOption : '') }));
+            })
+            : undefined;
+        const placeholderItems = placeholder ? placeholder : [];
+        const disabledSelected = selected === null || selected === void 0 ? void 0 : selected.filter((item) => item.disabled);
+        return {
+            selected,
+            disabledSelected,
+            itemsWithPlaceholder: placeholderItems.concat(items),
+        };
+    }, [items, value]);
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '' }));
     const onClear = () => {
         var _a;
-        setValue(undefined);
+        const disabledValues = disabledSelected === null || disabledSelected === void 0 ? void 0 : disabledSelected.map(item => item.id);
+        setValue(disabledValues);
         onInputValueChange('');
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setOpen(true);
@@ -62,7 +74,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && Boolean(value),
+        showClearButton: showClearButton && !disabled && !readonly && ((_b = value === null || value === void 0 ? void 0 : value.length) !== null && _b !== void 0 ? _b : 0) > ((_c = disabledSelected === null || disabledSelected === void 0 ? void 0 : disabledSelected.length) !== null && _c !== void 0 ? _c : 0),
         showCopyButton: false,
         inputRef: localRef,
         onClear,
@@ -74,11 +86,20 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     });
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown) => (e) => {
-        if (e.code === 'Backspace' && inputValue === '') {
-            if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) && !selectedOption.slice(-1)[0].disabled) {
-                handleItemDelete(selectedOption.pop())();
+        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 === '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);
         }
@@ -88,10 +109,16 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
             if (!open) {
-                prevInputValue.current = inputValue;
+                onInputValueChange('');
+                prevInputValue.current = '';
+                if (inputPlugRef.current) {
+                    inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
+                }
             }
             if (open) {
-                prevInputValue.current = '';
+                if (inputPlugRef.current) {
+                    inputPlugRef.current.style.width = 'unset';
+                }
             }
         }
     };
@@ -102,19 +129,21 @@ 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(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: {
+    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: {
                 mode: 'multiple',
                 value: value,
                 onChange: setValue,
-            }, size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, loading: loading, children: ({ onKeyDown }) => {
+            }, dataFiltered: (_d = rest.dataFiltered) !== null && _d !== void 0 ? _d : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, 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: [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: {
+                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), appearance: option.id ? mapItemsToTagAppearance[option === null || option === void 0 ? void 0 : option.id] : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id))), _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: !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 })] }) }));
-            } }) })));
+                                        }, 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 })] }) }));
+            } })) })));
 });

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

@@ -14,4 +14,7 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     footer?: import("react").ReactNode;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
+    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>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -11,38 +11,49 @@ 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, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useRef } 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 { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractListProps, findSelectedOption, getArrowIcon, transformOptionsToItems } from './utils';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
-    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"]);
+    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"]);
     const localRef = useRef(null);
-    const [open, setOpen] = useState(false);
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
         onChange: onChangeProp,
     });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
-    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]);
+    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 : '' }));
     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;
-        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]);
+        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);
+    };
     const onClear = () => {
         var _a;
         setValue('');
@@ -54,11 +65,11 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && Boolean(value),
+        showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
         showCopyButton,
         inputRef: localRef,
         onClear,
-        valueToCopy: String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : ''),
+        valueToCopy: (_c = selected === null || selected === void 0 ? void 0 : selected.content.option) !== null && _c !== void 0 ? _c : '',
     });
     const commonHandleOnKeyDown = useHandleOnKeyDown({
         inputKeyDownNavigationHandler,
@@ -69,6 +80,13 @@ 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) => {
@@ -80,15 +98,22 @@ 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(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: {
+    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: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, 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 })] })] })) }) })));
+            }, 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 })] })] })) })) })));
 });

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

@@ -1,6 +1,6 @@
 import { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react';
 import { Handler } from 'uncontrollable';
-import { OptionProps, SearchState } from './types';
+import { ItemWithId, 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): (option?: OptionProps) => () => void;
+export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWithId) => () => void;
 export {};

package/dist/components/FieldSelect/hooks.js

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

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

@@ -1,13 +1,14 @@
 import { ReactElement } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { AccordionItemProps, BaseItemProps, GroupItemProps, ListProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionProps | NestListOptionProps;
 export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
 export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> & BaseItemProps['content'] & {
     value: string | number;
-};
+} & Pick<TagProps, 'appearance'>;
 export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & {
     options: OptionProps[];
 };
@@ -48,12 +49,18 @@ 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 & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
+    removeByBackspace?: boolean;
+} & 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,15 @@
 import { Size } from '@snack-uikit/input-private';
-import { ItemProps } from '@snack-uikit/list';
-import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectSingleProps, GroupOptionProps, NestListOptionProps, OptionProps, OptionWithoutGroup } from './types';
+import { DroplistProps, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
+import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectProps, FieldSelectSingleProps, GroupOptionProps, ItemWithId, NestListOptionProps, OptionProps } 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 mapOptionToAppearance(options: OptionProps[]): Record<string | number, TagProps['appearance'] | undefined>;
 export declare function transformOptionsToItems(options: OptionProps[]): ItemProps[];
-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 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 isFieldSelectMultipleProps(props: any): props is FieldSelectMultipleProps;
 export declare function isFieldSelectSingleProps(props: any): props is FieldSelectSingleProps;
 export declare function getArrowIcon({ size, open }: {
@@ -17,3 +19,4 @@ 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>;