@snack-uikit/fields 0.14.2 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.15.0 (2024-02-23)
+
+
+### Bug Fixes
+
+* **FF-4221:** fix remove disabled & checked items by backspace ([4f0b945](https://github.com/cloud-ru-tech/snack-uikit/commit/4f0b945f4b1878923e5231298474393d6ad412d5))
+
+
+### BREAKING CHANGES
+
+
+* **FF-4221:** replace list package; FieldMultiple select as TagSelect ([10333e9](https://github.com/cloud-ru-tech/snack-uikit/commit/10333e9ca00cb445f7617148ee82c2acfea678e6))
+
+
+
+
 ## 0.14.2 (2024-02-22)
 
 

package/README.md

@@ -302,23 +302,15 @@ const [isOpen, setIsOpen] = useState(false);
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| options* | `Option[]` | - | Массив опций выпадающего списка |
-| selectionMode | "single" \| "multi" | single |  |
-| open | `boolean` | - | Открыт ли выпадающий список |
-| onOpenChange | `(value: boolean) => void` | - | Колбек открытия выпадающего списка |
-| searchable | `boolean` | - | Можно ли искать опции внутри списка |
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| noDataText | `string` | - | Текст отсутствия доступных значений |
-| locale | `Locale` | - | Текущая локаль |
+| options* | `OptionProps[]` | - |  |
 | disabled | `boolean` | false | Является ли поле деактивированным |
-| readonly | `boolean` | false | Является ли поле доступным только для чтения |
+| readonly | `boolean` | false false | Является ли поле доступным только для чтения |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | placeholder | `string` | - | Значение плейсхолдера |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
@@ -328,11 +320,20 @@ const [isOpen, setIsOpen] = useState(false);
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| value | `string \| string[]` | - | Выбранное значение: <br> - одно для single mode <br> - массив для multi mode |
-| onChange | `((value: string) => void) \| ((value: string[]) => void)` | - | Колбек смены значения |
+| loading | `boolean` | - |  |
+| value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
+| onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
+| defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
+| searchable | `boolean` | - |  |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| footer | `ReactNode` | - |  |
+| search | `SearchState` | - |  |
+| autocomplete | `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` | - |  |
-| getSelectedItemsText | `(amount: number) => string` | - | Колбек формирования текста |
 ## FieldStepper
 ### Props
 | name | type | default value | description |

package/dist/components/FieldDecorator/Header.js

@@ -4,5 +4,5 @@ import { Tooltip } from '@snack-uikit/tooltip';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import styles from './styles.module.css';
 export function Header({ label = '', labelTooltip, labelFor, size, required = false, labelTooltipPlacement = 'top', }) {
-    return (_jsx("span", { className: styles.header, "data-size": size, children: label && (_jsxs("span", { className: styles.labelLayout, children: [_jsx("label", { className: styles.label, htmlFor: labelFor, "data-test-id": 'field-decorator__label', children: _jsx(TruncateString, { text: label }) }), required && _jsx("span", { "data-test-id": 'field-decorator__required-sign', children: "*" }), labelTooltip && (_jsx(Tooltip, { tip: labelTooltip, placement: labelTooltipPlacement, "data-test-id": 'field-decorator__label-tooltip', children: _jsx(QuestionSVG, { size: 16, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) }))] })) }));
+    return (_jsx("span", { className: styles.header, "data-size": size, children: label && (_jsxs("span", { className: styles.labelLayout, children: [_jsx("label", { className: styles.label, htmlFor: labelFor, "data-test-id": 'field-decorator__label', children: _jsx(TruncateString, { text: label }) }), required && _jsx("span", { "data-test-id": 'field-decorator__required-sign', children: "*" }), labelTooltip && (_jsx(Tooltip, { tip: labelTooltip, placement: labelTooltipPlacement, "data-test-id": 'field-decorator__label-tooltip', triggerClassName: styles.labelTooltipTrigger, children: _jsx(QuestionSVG, { size: 16, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) }))] })) }));
 }

package/dist/components/FieldDecorator/styles.module.css

@@ -56,8 +56,8 @@
 }
 
 .footer{
+  gap:var(--space-fields-hint-container-gap, 4px);
   display:flex;
-  gap:var(--dimension-050m, 4px);
   justify-content:space-between;
   box-sizing:border-box;
 }
@@ -178,4 +178,10 @@
 }
 .counterCurrentValue[data-limit-exceeded][data-validation=success]{
   color:var(--sys-green-text-light, #67ba6e);
+}
+
+.labelTooltipTrigger{
+  display:flex;
+  align-items:center;
+  height:100%;
 }

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

@@ -1,9 +1,3 @@
 /// <reference types="react" />
-import { SELECTION_MODE } from './constants';
-import { FieldSelectMultiProps, FieldSelectSingleProps } from './types';
-export type FieldSelectProps = ({
-    selectionMode?: typeof SELECTION_MODE.Single;
-} & FieldSelectSingleProps) | ({
-    selectionMode: typeof SELECTION_MODE.Multi;
-} & FieldSelectMultiProps);
+import { FieldSelectProps } from './types';
 export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelect.js

@@ -1,26 +1,14 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { SELECTION_MODE } from './constants';
-import { FieldSelectMulti } from './FieldSelectMulti';
+import { FieldSelectMultiple } from './FieldSelectMultiple';
 import { FieldSelectSingle } from './FieldSelectSingle';
-export const FieldSelect = forwardRef((_a, ref) => {
-    var { selectionMode = SELECTION_MODE.Single } = _a, props = __rest(_a, ["selectionMode"]);
-    switch (selectionMode) {
-        case SELECTION_MODE.Multi:
-            return _jsx(FieldSelectMulti, Object.assign({}, props, { ref: ref }));
-        case SELECTION_MODE.Single:
-        default:
-            return _jsx(FieldSelectSingle, Object.assign({}, props, { ref: ref }));
+import { isFieldSelectMultipleProps, isFieldSelectSingleProps } from './utils';
+export const FieldSelect = forwardRef((props, ref) => {
+    if (isFieldSelectMultipleProps(props)) {
+        return _jsx(FieldSelectMultiple, Object.assign({}, props, { ref: ref }));
     }
+    if (isFieldSelectSingleProps(props)) {
+        return _jsx(FieldSelectSingle, Object.assign({}, props, { ref: ref }));
+    }
+    return null;
 });

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const FieldSelectMultiple: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
+    options: import("./types").OptionProps[];
+    loading?: boolean | undefined;
+} & Omit<import("@snack-uikit/list").SelectionMultipleState, "mode"> & {
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & {
+    options: import("./types").OptionProps[];
+    searchable?: boolean | undefined;
+    showCopyButton?: boolean | undefined;
+    showClearButton?: boolean | undefined;
+    readonly?: boolean | undefined;
+    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    footer?: import("react").ReactNode;
+    search?: import("./types").SearchState | undefined;
+    autocomplete?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -0,0 +1,118 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 { useUncontrolledProp } from 'uncontrollable';
+import { InputPrivate } from '@snack-uikit/input-private';
+import { Droplist, useFuzzySearch } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { FieldDecorator } from '../FieldDecorator';
+import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
+import styles from './styles.module.css';
+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, 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 } = _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"]);
+    const localRef = useRef(null);
+    const inputPlugRef = useRef(null);
+    const contentRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, onChangeProp);
+    const selectedOption = useMemo(() => {
+        const notSortSelectedOption = extractSelectedMultipleOptions(options, value);
+        if (notSortSelectedOption) {
+            return notSortSelectedOption.sort((a, b) => {
+                if (b.disabled && !a.disabled) {
+                    return 1;
+                }
+                if (a.disabled && !b.disabled) {
+                    return -1;
+                }
+                return 0;
+            });
+        }
+    }, [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);
+        onInputValueChange('');
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setOpen(true);
+    };
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+        readonly,
+        size,
+        showClearButton: showClearButton && Boolean(value),
+        showCopyButton,
+        inputRef: localRef,
+        onClear,
+        valueToCopy: String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.map(option => option.option).join(', ')) !== null && _b !== void 0 ? _b : ''),
+    });
+    const commonHandleOnKeyDown = useHandleOnKeyDown({
+        inputKeyDownNavigationHandler,
+        onInputKeyDownProp,
+        setOpen,
+    });
+    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 (!open && prevInputValue.current !== inputValue) {
+            setOpen(true);
+        }
+        commonHandleOnKeyDown(onKeyDown)(e);
+    };
+    const handleOpenChange = (open) => {
+        if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+            setOpen(open);
+            if (!open) {
+                prevInputValue.current = inputValue;
+            }
+            if (open) {
+                prevInputValue.current = '';
+            }
+        }
+    };
+    const handleBlur = (e) => {
+        var _a;
+        if (!open) {
+            onInputValueChange('');
+        }
+        (_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), { 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,
+            }, 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: [selectedOption &&
+                                        selectedOption.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.option), onDelete: !option.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: !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

@@ -1,36 +1,17 @@
 /// <reference types="react" />
-import { Option } from './types';
-export declare const FieldSelectSingle: import("react").ForwardRefExoticComponent<{
+export declare const FieldSelectSingle: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
+    options: import("./types").OptionProps[];
+    loading?: boolean | undefined;
+} & Omit<import("@snack-uikit/list").SelectionSingleState, "mode"> & {
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
-    options: Option[];
-    open?: boolean | undefined;
-    onOpenChange?(value: boolean): void;
+    options: import("./types").OptionProps[];
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;
-    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    noDataText?: string | undefined;
-    locale?: Intl.Locale | undefined;
-} & {
-    disabled?: boolean | undefined;
     readonly?: boolean | undefined;
-    name?: string | undefined;
-    placeholder?: string | undefined;
-    id?: string | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-} & {
-    showHintIcon?: boolean | undefined;
-    validationState?: import("../../types").ValidationState | undefined;
-    hint?: string | undefined;
-    size?: import("@snack-uikit/input-private").Size | undefined;
-    label?: string | undefined;
-    className?: string | undefined;
-    labelTooltip?: string | undefined;
-    required?: boolean | undefined;
-    labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
-} & {
-    value?: string | undefined;
-    onChange?(value: string): void;
+    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    footer?: import("react").ReactNode;
+    search?: import("./types").SearchState | undefined;
+    autocomplete?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -9,68 +9,82 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+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 { useUncontrolledProp } from 'uncontrollable';
-import { selectAll } from '@snack-uikit/input-private';
-import { DEFAULT_LOCALE, EMPTY_OPTION, SELECTION_MODE } from './constants';
-import { FieldSelectBase } from './FieldSelectBase';
-import { getDisplayedValue } from './helpers';
-import { useList } from './hooks';
+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 { FieldDecorator } from '../FieldDecorator';
+import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
+import styles from './styles.module.css';
+import { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
-    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, locale = DEFAULT_LOCALE, open, onOpenChange, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "locale", "open", "onOpenChange", "showCopyButton", "showClearButton"]);
-    const selectionMode = SELECTION_MODE.Single;
-    const [value, setValue] = useUncontrolledProp(valueProp, '', onChange);
-    const selected = useMemo(() => { var _a; return (_a = options.find(option => option.value === value)) !== null && _a !== void 0 ? _a : EMPTY_OPTION; }, [options, value]);
-    const displayedValue = getDisplayedValue({ selectionMode, selected });
-    const [inputValue, setInputValue] = useState(selected.label);
-    const showAdditionalButton = Boolean(value && !disabled);
-    const isChecked = useCallback((option) => selected.value === option.value, [selected.value]);
-    const { isOpen, setIsOpen, localRef, extendedOptions, onInputKeyDown, onInputValueChange, onButtonKeyDown, clearButtonRef, copyButtonRef, showClearButton, showCopyButton, onDroplistFocusLeave, firstDroplistItemRefCallback, } = useList({
-        open,
-        onOpenChange,
-        disabled,
-        readonly,
-        inputValue,
-        setInputValue,
-        searchable,
-        options,
-        isChecked,
-        showCopyButton: showCopyButtonProp,
-        showClearButton: showClearButtonProp,
-        showAdditionalButton,
-    });
-    const handleOpenChange = (isOpen) => {
-        if (isOpen) {
-            searchable && selectAll(localRef.current);
-        }
-        else {
-            setInputValue(displayedValue);
-        }
-        setIsOpen(isOpen);
-    };
-    const handleClear = () => {
+    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 } = _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"]);
+    const localRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, 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]);
+    useEffect(() => {
         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]);
+    const onClear = () => {
+        var _a;
         setValue('');
-        setInputValue('');
-        if (required) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setIsOpen(true);
-        }
-        else {
-            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-            setIsOpen(false);
+        onInputValueChange('');
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setOpen(true);
+    };
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+        readonly,
+        size,
+        showClearButton: showClearButton && Boolean(value),
+        showCopyButton,
+        inputRef: localRef,
+        onClear,
+        valueToCopy: String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : ''),
+    });
+    const commonHandleOnKeyDown = useHandleOnKeyDown({
+        inputKeyDownNavigationHandler,
+        onInputKeyDownProp,
+        setOpen,
+    });
+    const handleOnKeyDown = (onKeyDown) => (e) => {
+        if (!open && prevInputValue.current !== inputValue) {
+            setOpen(true);
         }
+        commonHandleOnKeyDown(onKeyDown)(e);
     };
-    const handleChange = (option) => () => {
+    const handleSelectionChange = (newValue) => {
         var _a;
-        setValue(option.value);
-        setInputValue(option.label);
-        setIsOpen(false);
+        setValue(newValue);
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (newValue) {
+            setOpen(false);
+        }
     };
-    useEffect(() => {
-        setInputValue(selected.label);
-    }, [selected]);
-    return (_jsx(FieldSelectBase, Object.assign({}, rest, { ref: ref, localRef: localRef, selectionMode: selectionMode, options: extendedOptions, selected: selected, disabled: disabled, readonly: readonly, required: required, searchable: searchable, onChange: handleChange, onClear: handleClear, valueToCopy: displayedValue, inputValue: searchable ? inputValue : displayedValue, onInputValueChange: onInputValueChange, onInputKeyDown: onInputKeyDown, clearButtonRef: clearButtonRef, copyButtonRef: copyButtonRef, onButtonKeyDown: onButtonKeyDown, open: isOpen, onOpenChange: handleOpenChange, locale: locale, showCopyButton: showCopyButton, showClearButton: showClearButton, onDroplistFocusLeave: onDroplistFocusLeave, firstDroplistItemRefCallback: firstDroplistItemRefCallback })));
+    const handleOpenChange = (open) => {
+        if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+            setOpen(open);
+        }
+    };
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), { 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, 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

@@ -0,0 +1,30 @@
+import { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react';
+import { Handler } from 'uncontrollable';
+import { OptionProps, SearchState } from './types';
+type UseHandleOnKeyDownProps = {
+    inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
+    onInputKeyDownProp: KeyboardEventHandler<HTMLInputElement> | undefined;
+    setOpen(open: boolean): void;
+};
+export declare function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }: UseHandleOnKeyDownProps): (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => void;
+type UseButtonsProps = {
+    readonly: boolean;
+    showClearButton: boolean;
+    showCopyButton: boolean;
+    size: 's' | 'm' | 'l';
+    onClear(): void;
+    inputRef: RefObject<HTMLInputElement>;
+    valueToCopy?: string;
+};
+export declare function useButtons({ readonly, showClearButton, showCopyButton, size, onClear, inputRef, valueToCopy, }: UseButtonsProps): {
+    buttons: import("react/jsx-runtime").JSX.Element;
+    inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
+    buttonsRefs: (Element | null)[];
+};
+export declare function useSearchInput({ value, onChange, defaultValue }: SearchState): {
+    inputValue: string;
+    onInputValueChange: Handler;
+    prevInputValue: import("react").MutableRefObject<string>;
+};
+export declare function useHandleDeleteItem(setValue: Handler): (option?: OptionProps) => () => void;
+export {};

package/dist/components/FieldSelect/hooks.js

@@ -0,0 +1,72 @@
+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';
+export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
+    return useCallback((onKeyDown) => (e) => {
+        if (e.code === 'Space') {
+            e.stopPropagation();
+        }
+        else {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        }
+        if (e.code === 'ArrowUp') {
+            setOpen(false);
+        }
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+            e.preventDefault();
+        }
+        if (e.key === 'Tab') {
+            setOpen(false);
+        }
+        inputKeyDownNavigationHandler(e);
+        onInputKeyDownProp === null || onInputKeyDownProp === void 0 ? void 0 : onInputKeyDownProp(e);
+    }, [inputKeyDownNavigationHandler, onInputKeyDownProp, setOpen]);
+}
+export function useButtons({ readonly, showClearButton, showCopyButton, size, onClear, inputRef, valueToCopy = '', }) {
+    const clearButtonRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const buttonsRefs = [copyButtonRef.current, clearButtonRef.current];
+    const clearButtonSettings = useClearButton({
+        clearButtonRef,
+        showClearButton: !readonly && showClearButton,
+        size,
+        onClear,
+    });
+    const copyButtonSettings = useCopyButton({
+        copyButtonRef,
+        showCopyButton: readonly && showCopyButton,
+        size,
+        valueToCopy,
+    });
+    const { onInputKeyDown: inputKeyDownNavigationHandler, buttons } = useButtonNavigation({
+        inputRef,
+        buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        onButtonKeyDown: undefined,
+        readonly,
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    return { buttons, inputKeyDownNavigationHandler, buttonsRefs };
+}
+export function useSearchInput({ 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((option) => () => {
+        if (!option) {
+            return;
+        }
+        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(option)) {
+            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => v !== option.value));
+        }
+    }, [setValue]);
+}

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

@@ -1 +1,2 @@
-export * from './FieldSelect';
+export { FieldSelect } from './FieldSelect';
+export type { FieldSelectSingleProps, FieldSelectMultipleProps, FieldSelectProps, OptionProps, BaseOptionProps, AccordionOptionProps, NestListOptionProps, GroupOptionProps, } from './types';

package/dist/components/FieldSelect/index.js

@@ -1 +1 @@
-export * from './FieldSelect';
+export { FieldSelect } from './FieldSelect';