@cloud-ru/ds-fields 2.2.3-preview-f436e22b.0 → 2.2.3-preview-a0540d7f.0

package/dist/cjs/components/FieldSelect/utils/filter.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFuzzyMatch = isFuzzyMatch;
+exports.filterItems = filterItems;
+const extract_1 = require("./extract");
+// Subsequence-fuzzy: символы запроса должны встречаться в строке в исходном порядке.
+// Пример: query=`lge` matches `Large` (L → r → arg → e).
+function isFuzzyMatch(haystack, needle) {
+    if (!needle) {
+        return true;
+    }
+    let i = 0;
+    for (const ch of haystack) {
+        if (ch === needle[i]) {
+            i += 1;
+            if (i === needle.length) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function filterItems(items, query, fuzzy) {
+    if (!query) {
+        return items;
+    }
+    const q = query.toLowerCase();
+    const matches = (item) => {
+        const text = (0, extract_1.extractSearchText)(item).toLowerCase();
+        return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
+    };
+    const walk = (list) => list.flatMap(item => {
+        if ('items' in item && Array.isArray(item.items)) {
+            const filteredChildren = walk(item.items);
+            return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren }] : [];
+        }
+        return matches(item) ? [item] : [];
+    });
+    return walk(items);
+}

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

@@ -0,0 +1,6 @@
+export * from './customOption';
+export * from './extract';
+export * from './filter';
+export * from './items';
+export * from './selection';
+export * from './tagSize';

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

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./customOption"), exports);
+__exportStar(require("./extract"), exports);
+__exportStar(require("./filter"), exports);
+__exportStar(require("./items"), exports);
+__exportStar(require("./selection"), exports);
+__exportStar(require("./tagSize"), exports);

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

@@ -0,0 +1,9 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { FieldSelectItem } from '../types';
+import { WithIdContent } from './extract';
+export declare function flatten(items: FieldSelectItem[]): WithIdContent[];
+export declare function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined;
+/** Айтем для выбранного значения, которого нет в `items` (кастомная опция, ленивая подгрузка). */
+export declare function createPlaceholderItem(id: ItemId): FieldSelectItem;
+/** Выбранные id, которых нет в дереве айтемов — в дроплист их нужно добавить отдельно. */
+export declare function getMissingSelectedItems(selectedIds: ItemId[], allItems: FieldSelectItem[]): FieldSelectItem[];

package/dist/cjs/components/FieldSelect/utils/items.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flatten = flatten;
+exports.findItem = findItem;
+exports.createPlaceholderItem = createPlaceholderItem;
+exports.getMissingSelectedItems = getMissingSelectedItems;
+function flatten(items) {
+    const out = [];
+    for (const item of items) {
+        out.push(item);
+        if ('items' in item && Array.isArray(item.items)) {
+            out.push(...flatten(item.items));
+        }
+    }
+    return out;
+}
+function findItem(items, id) {
+    for (const item of flatten(items)) {
+        if (item.id === id) {
+            return item;
+        }
+    }
+    return undefined;
+}
+/** Айтем для выбранного значения, которого нет в `items` (кастомная опция, ленивая подгрузка). */
+function createPlaceholderItem(id) {
+    return { id, content: { label: String(id) } };
+}
+/** Выбранные id, которых нет в дереве айтемов — в дроплист их нужно добавить отдельно. */
+function getMissingSelectedItems(selectedIds, allItems) {
+    if (selectedIds.length === 0) {
+        return [];
+    }
+    const existingIds = new Set();
+    for (const item of flatten(allItems)) {
+        if (item.id !== undefined) {
+            existingIds.add(item.id);
+        }
+    }
+    const missing = [];
+    for (const id of selectedIds) {
+        if (id !== '' && !existingIds.has(id)) {
+            missing.push(createPlaceholderItem(id));
+        }
+    }
+    return missing;
+}

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

@@ -0,0 +1,11 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { FieldSelectMultipleProps, Selection } from '../types';
+export declare function isMultiple(props: {
+    selection?: Selection;
+}): props is FieldSelectMultipleProps;
+/** Выбранные id в нормализованном виде: массив и для `single`, и для `multiple`. */
+export declare function getSelectedIds(params: {
+    multiple: boolean;
+    multipleValue: ItemId[];
+    singleValue: ItemId | undefined;
+}): ItemId[];

package/dist/cjs/components/FieldSelect/utils/selection.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMultiple = isMultiple;
+exports.getSelectedIds = getSelectedIds;
+const constants_1 = require("../constants");
+function isMultiple(props) {
+    return props.selection === constants_1.SELECTION_MODE.Multiple;
+}
+/** Выбранные id в нормализованном виде: массив и для `single`, и для `multiple`. */
+function getSelectedIds(params) {
+    if (params.multiple) {
+        return params.multipleValue;
+    }
+    if (params.singleValue === undefined) {
+        return [];
+    }
+    return [params.singleValue];
+}

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

@@ -0,0 +1,4 @@
+import { Size } from '@cloud-ru/ds-field-decorator';
+import { Size as TagSize } from '@cloud-ru/ds-tag';
+/** Соответствие размера поля размеру чипа выбранного значения (`selection='multiple'`). */
+export declare const TAG_SIZE_MAP: Record<Size, TagSize>;

package/dist/cjs/components/FieldSelect/utils/tagSize.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAG_SIZE_MAP = void 0;
+/** Соответствие размера поля размеру чипа выбранного значения (`selection='multiple'`). */
+exports.TAG_SIZE_MAP = { s: 'xs', m: 'xs', l: 's' };

package/dist/esm/components/FieldSelect/FieldSelect.js

@@ -3,7 +3,7 @@ import { ChevronDownSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InputPrivate, useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
 import { Droplist } from '@cloud-ru/ds-list';
 import { Tag } from '@cloud-ru/ds-tag';
-import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { isBrowser, useLayoutEffect } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
@@ -14,18 +14,22 @@ import { TEST_IDS } from '../../constants.js';
 import { useAdaptiveAutoFocus } from '../../hooks/index.js';
 import { copyTextToClipboard, getAcrylicProps, preventSlotMouseDown, stopSlotClickPropagation, toInputSize, useCopyButton, } from '../shared/index.js';
 import fieldStyles from '../shared/styles.module.css';
+import { useCustomOption } from './hooks.js';
 import styles from './styles.module.css';
-import { extractAppearance, extractLabel, filterItems, findItem, flatten, isMultiple, TAG_SIZE_MAP, } from './utils.js';
+import { extractAppearance, extractLabel, filterItems, findItem, flatten, getMissingSelectedItems, getSelectedIds, isMultiple, TAG_SIZE_MAP, } from './utils/index.js';
 export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     const { label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = TEST_IDS.fieldSelect, } = props;
     const multiple = isMultiple(props);
     const chips = multiple ? (props.chips ?? true) : false;
     const removeByBackspace = multiple ? (props.removeByBackspace ?? true) : false;
     const closeDroplistOnItemClick = props.closeDroplistOnItemClick ?? !multiple;
+    const allowCustomOption = props.allowCustomOption === true;
+    const addCustomOptionTriggers = allowCustomOption ? props.addCustomOptionTriggers : undefined;
     const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
     const inputRef = useRef(null);
     // Отдельный ref на реальный <input>: `inputRef.current` перезаписывается span-обёрткой PopoverPrivate.
     const inputElementRef = useRef(null);
+    const restoreInputFocusRef = useRef(false);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
     const contentRef = useRef(null);
@@ -67,16 +71,20 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     }, [multiple, props.value, multipleLocal]);
     const effectiveValidationState = useMemo(() => (error ? VALIDATION_STATE.Error : validationState), [error, validationState]);
     const allItems = useMemo(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
+    const selectedIds = useMemo(() => getSelectedIds({ multiple, multipleValue, singleValue }), [multiple, multipleValue, singleValue]);
+    // Выбранное, которого нет в `items` (кастом по allowCustomOption, ленивая подгрузка) — в список, не только в чип.
+    const missingSelectedItems = useMemo(() => getMissingSelectedItems(selectedIds, allItems), [selectedIds, allItems]);
+    const itemsWithPlaceholders = useMemo(() => (missingSelectedItems.length > 0 ? [...missingSelectedItems, ...items] : items), [missingSelectedItems, items]);
     // Выбранное значение переживает смену `items` (серверный поиск, ленивая подгрузка).
     const seenItems = useRef(new Map());
     const resolveItem = useMemo(() => {
-        for (const item of flatten(allItems)) {
+        for (const item of flatten([...missingSelectedItems, ...allItems])) {
             if (item.id !== undefined) {
                 seenItems.current.set(item.id, item);
             }
         }
-        return (id) => findItem(allItems, id) ?? seenItems.current.get(id);
-    }, [allItems]);
+        return (id) => findItem(allItems, id) ?? findItem(missingSelectedItems, id) ?? seenItems.current.get(id);
+    }, [allItems, missingSelectedItems]);
     const selectedPairs = useMemo(() => {
         if (!multiple || multipleValue.length === 0) {
             return [];
@@ -131,13 +139,13 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         syncedLabelRef.current = selectedLabel;
         setInputValue(selectedLabel);
     }, [selectedLabel, typing, resetSearchOnOptionSelection, setInputValue]);
-    // При autocomplete фильтрует сервер — items берутся как есть.
+    // При autocomplete фильтрует сервер — items берутся как есть, плюс выбранное вне списка.
     const filteredItems = useMemo(() => {
         if (!searchable || autocomplete || !typing) {
-            return items;
+            return itemsWithPlaceholders;
         }
-        return filterItems(items, inputValue, enableFuzzySearch);
-    }, [searchable, autocomplete, typing, items, inputValue, enableFuzzySearch]);
+        return filterItems(itemsWithPlaceholders, inputValue, enableFuzzySearch);
+    }, [searchable, autocomplete, typing, itemsWithPlaceholders, inputValue, enableFuzzySearch]);
     const filteredPinTop = useMemo(() => {
         if (!searchable || autocomplete || !typing || !pinTop) {
             return pinTop;
@@ -150,22 +158,7 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         return filterItems(pinBottom, inputValue, enableFuzzySearch);
     }, [searchable, autocomplete, typing, pinBottom, inputValue, enableFuzzySearch]);
-    const handleOpenChange = useCallback((next) => {
-        // readonly/disabled поле открывать нельзя, закрывать — можно.
-        if (next && (disabled || readOnly))
-            return;
-        if (openProp === undefined) {
-            setOpenLocal(next);
-        }
-        onOpenChange?.(next);
-        if (!next) {
-            setTyping(false);
-            if (resetSearchOnOptionSelection) {
-                setInputValue(selectedLabel);
-            }
-        }
-    }, [openProp, onOpenChange, disabled, readOnly, resetSearchOnOptionSelection, setInputValue, selectedLabel]);
-    const handleSingleChange = (next) => {
+    const handleSingleChange = useCallback((next) => {
         if (multiple) {
             return;
         }
@@ -174,11 +167,12 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         props.onChange?.(next);
         setTyping(false);
-    };
-    const handleMultipleChange = (next) => {
+    }, [multiple, props]);
+    const handleMultipleChange = useCallback((next) => {
         if (!multiple) {
             return;
         }
+        restoreInputFocusRef.current = isBrowser() && inputElementRef.current === document.activeElement;
         if (props.value === undefined) {
             setMultipleLocal(next);
         }
@@ -189,8 +183,57 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
                 setInputValue('');
             }
         }
-    };
+    }, [multiple, props, searchable, resetSearchOnOptionSelection, setInputValue]);
+    const resetCustomOptionSearch = useCallback(() => {
+        setTyping(false);
+        if (resetSearchOnOptionSelection) {
+            setInputValue(multiple ? '' : selectedLabel);
+        }
+    }, [resetSearchOnOptionSelection, setInputValue, multiple, selectedLabel]);
+    const { listRef, suppressCloseCommit, enableCloseCommit, tryCommitOnClose, tryCommitOnBlur, tryCommitFromKeyboard, handleListSingleChange, handleListMultipleChange, } = useCustomOption({
+        allowCustomOption,
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        multiple,
+        inputValue,
+        typing,
+        multipleValue,
+        commitSingle: handleSingleChange,
+        commitMultiple: handleMultipleChange,
+        resetSearch: resetCustomOptionSearch,
+        inputElementRef,
+        clearButtonRef,
+        copyButtonRef,
+        footerActiveElementsRefs,
+    });
+    const handleOpenChange = useCallback((next) => {
+        // readonly/disabled поле открывать нельзя, закрывать — можно.
+        if (next && (disabled || readOnly))
+            return;
+        if (openProp === undefined) {
+            setOpenLocal(next);
+        }
+        onOpenChange?.(next);
+        if (!next) {
+            setTyping(false);
+            const committed = tryCommitOnClose();
+            // Кастомная опция не зафиксирована — вернуть лейбл выбранного значения.
+            if (resetSearchOnOptionSelection && !committed) {
+                setInputValue(selectedLabel);
+            }
+        }
+    }, [
+        openProp,
+        onOpenChange,
+        disabled,
+        readOnly,
+        resetSearchOnOptionSelection,
+        setInputValue,
+        selectedLabel,
+        tryCommitOnClose,
+    ]);
     const handleInputChange = (next) => {
+        enableCloseCommit();
         setInputValue(next);
         setTyping(true);
         if (!open) {
@@ -289,19 +332,12 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         if (event.key === 'Escape' && open) {
             event.preventDefault();
+            suppressCloseCommit();
             handleOpenChange(false);
         }
-        if (addOptionByEnter && event.key === 'Enter' && inputValue !== '') {
-            // Введённый текст становится новым значением (создание опции «на лету»).
+        if (tryCommitFromKeyboard(event)) {
             event.preventDefault();
-            if (multiple) {
-                if (!multipleValue.includes(inputValue)) {
-                    handleMultipleChange([...multipleValue, inputValue]);
-                }
-            }
-            else {
-                handleSingleChange(inputValue);
-            }
+            event.stopPropagation();
             return;
         }
         if (event.key === 'Enter' && !open) {
@@ -314,6 +350,11 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
             removeChip(last);
         }
     };
+    const handleTriggerKeyDownCapture = (event) => {
+        if (event.key === 'Escape') {
+            suppressCloseCommit();
+        }
+    };
     const handleTriggerMouseEnter = useCallback(() => {
         if (!readOnly && !disabled) {
             setHover(true);
@@ -338,14 +379,28 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         }
         onFocusProp?.(event);
     }, [searchable, onFocusProp]);
-    const handleInputBlur = useCallback((event) => {
+    const handleInputBlur = (event) => {
         setFocusVisible(false);
+        const blurResult = tryCommitOnBlur(event);
+        // Закрытый список не получит onOpenChange — вернуть лейбл выбранного значения.
+        // Клик по айтему открытого списка даёт relatedTarget === null, восстановление делает закрытие.
+        if (resetSearchOnOptionSelection && blurResult === 'skipped' && (!open || event.relatedTarget !== null)) {
+            setTyping(false);
+            setInputValue(selectedLabel);
+        }
         onBlurProp?.(event);
-    }, [onBlurProp]);
+    };
     const droplistSelection = multiple
-        ? { mode: 'multiple', value: multipleValue, onChange: handleMultipleChange }
-        : { mode: 'single', value: singleValue, onChange: handleSingleChange };
+        ? { mode: 'multiple', value: multipleValue, onChange: handleListMultipleChange }
+        : { mode: 'single', value: singleValue, onChange: handleListSingleChange };
     const hasChips = chips && selectedPairs.length > 0;
+    useLayoutEffect(() => {
+        if (!restoreInputFocusRef.current) {
+            return;
+        }
+        restoreInputFocusRef.current = false;
+        inputElementRef.current?.focus();
+    }, [multipleValue.length]);
     // minWidth поискового input'а = ширина введённого текста (`.inputPlug`), но не больше строки чипов.
     // Замер до paint, иначе input мигает при вводе.
     useLayoutEffect(() => {
@@ -358,11 +413,11 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
         setChipInputMinWidth(Math.min(content, Math.max(plug, SEARCH_INPUT_PLUG_MIN_WIDTH)));
     }, [hasChips, inputValue, selectedPairs.length]);
     const searchInputField = (_jsx(InputPrivate, { ref: mergeRefs(ref, inputRef, inputElementRef), className: cn(fieldStyles.fieldInput, !searchable && styles.readonlyCursor), value: inputValue, onChange: searchable ? handleInputChange : undefined, placeholder: selectedLabel || hasChips ? '' : placeholder, disabled: disabled, readonly: !searchable || readOnly, id: id, name: name, autoFocus: resolvedAutoFocus, tabIndex: inputTabIndex, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleTriggerKeyDown, "data-test-id": TEST_IDS.fieldSelectInput }));
-    const searchInput = hasChips ? (_jsx("div", { className: styles.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField })) : (_jsx("div", { className: fieldStyles.inputArea, children: searchInputField }));
+    const searchInput = hasChips ? (_jsx("div", { className: styles.inputWrapper, style: { minWidth: chipInputMinWidth }, children: searchInputField }, 'search-input')) : (_jsx("div", { className: fieldStyles.inputArea, children: searchInputField }));
     const trigger = (
     // Focusable-элемент — InputPrivate внутри, обёртка только собирает combobox.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsxs("div", { className: cn(fieldStyles.fieldWrapper, styles.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onClick: handleTriggerClick, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
+    _jsxs("div", { className: cn(fieldStyles.fieldWrapper, styles.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || open || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, onKeyDownCapture: handleTriggerKeyDownCapture, onClick: handleTriggerClick, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
                             validationState: effectiveValidationState,
                             disabled,
                             readonly: readOnly,
@@ -371,5 +426,5 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
                         }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [iconBefore && _jsx("div", { className: fieldStyles.iconSlot, children: iconBefore }), _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), hasChips ? (_jsxs("div", { className: styles.chipsRow, ref: contentRef, "data-test-id": TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => (_jsx(Tag, { label: formatPair(pair), size: TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), postfixButtons && (
                                 // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                                 _jsx("span", { className: fieldStyles.postfixButtonsSlot, onMouseDown: preventSlotMouseDown, onClick: stopSlotClickPropagation, children: postfixButtons })), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix })] }), _jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.chevron, "data-open": open || undefined, "aria-hidden": true, children: _jsx(ChevronDownSVG, {}) }) })] }) })] }));
-    return (_jsx(FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: _jsx(Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
+    return (_jsx(FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: _jsx(Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, listRef: listRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
 });

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

@@ -2,3 +2,14 @@ export declare const SELECTION_MODE: {
     readonly Single: "single";
     readonly Multiple: "multiple";
 };
+/** События, по которым произвольный ввод фиксируется как выбранная опция. */
+export declare const ADD_CUSTOM_OPTION_TRIGGER: {
+    readonly Enter: "enter";
+    readonly Blur: "blur";
+    readonly Space: "space";
+    readonly Comma: "comma";
+};
+/** Триггеры по умолчанию для `selection='single'` при `allowCustomOption`. */
+export declare const ADD_CUSTOM_OPTION_TRIGGERS_SINGLE: readonly ["enter", "blur"];
+/** Триггеры по умолчанию для `selection='multiple'` при `allowCustomOption`. */
+export declare const ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE: readonly ["enter", "blur", "space", "comma"];

package/dist/esm/components/FieldSelect/constants.js

@@ -2,3 +2,22 @@ export const SELECTION_MODE = {
     Single: 'single',
     Multiple: 'multiple',
 };
+/** События, по которым произвольный ввод фиксируется как выбранная опция. */
+export const ADD_CUSTOM_OPTION_TRIGGER = {
+    Enter: 'enter',
+    Blur: 'blur',
+    Space: 'space',
+    Comma: 'comma',
+};
+/** Триггеры по умолчанию для `selection='single'` при `allowCustomOption`. */
+export const ADD_CUSTOM_OPTION_TRIGGERS_SINGLE = [
+    ADD_CUSTOM_OPTION_TRIGGER.Enter,
+    ADD_CUSTOM_OPTION_TRIGGER.Blur,
+];
+/** Триггеры по умолчанию для `selection='multiple'` при `allowCustomOption`. */
+export const ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE = [
+    ADD_CUSTOM_OPTION_TRIGGER.Enter,
+    ADD_CUSTOM_OPTION_TRIGGER.Blur,
+    ADD_CUSTOM_OPTION_TRIGGER.Space,
+    ADD_CUSTOM_OPTION_TRIGGER.Comma,
+];

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

@@ -0,0 +1,33 @@
+import { ItemId } from '@cloud-ru/ds-list';
+import { FocusEvent, KeyboardEvent, RefObject } from 'react';
+import { FieldSelectAddCustomOptionTrigger } from './types.js';
+/** Результат blur: фокус остался внутри поля, ввод зафиксирован, или коммитить было нечего. */
+type CustomOptionBlurResult = 'inside' | 'committed' | 'skipped';
+type UseCustomOptionParams = {
+    allowCustomOption: boolean;
+    addCustomOptionTriggers: readonly FieldSelectAddCustomOptionTrigger[] | undefined;
+    addOptionByEnter: boolean;
+    multiple: boolean;
+    inputValue: string;
+    typing: boolean;
+    multipleValue: ItemId[];
+    commitSingle(value: ItemId | undefined): void;
+    commitMultiple(value: ItemId[]): void;
+    resetSearch(): void;
+    inputElementRef: RefObject<HTMLInputElement | null>;
+    clearButtonRef: RefObject<HTMLButtonElement | null>;
+    copyButtonRef: RefObject<HTMLButtonElement | null>;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+};
+/** Фиксация произвольного ввода как выбранной опции: триггеры, blur, закрытие списка. */
+export declare function useCustomOption({ allowCustomOption, addCustomOptionTriggers, addOptionByEnter, multiple, inputValue, typing, multipleValue, commitSingle, commitMultiple, resetSearch, inputElementRef, clearButtonRef, copyButtonRef, footerActiveElementsRefs, }: UseCustomOptionParams): {
+    listRef: RefObject<HTMLElement>;
+    suppressCloseCommit: () => void;
+    enableCloseCommit: () => void;
+    tryCommitOnClose: () => boolean;
+    tryCommitOnBlur: (event: FocusEvent<HTMLInputElement>) => CustomOptionBlurResult;
+    tryCommitFromKeyboard: (event: KeyboardEvent<HTMLInputElement>) => boolean;
+    handleListSingleChange: (next: ItemId | undefined) => void;
+    handleListMultipleChange: (next: ItemId[]) => void;
+};
+export {};

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

@@ -0,0 +1,92 @@
+import { isBrowser } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo, useRef } from 'react';
+import { ADD_CUSTOM_OPTION_TRIGGER, ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE, ADD_CUSTOM_OPTION_TRIGGERS_SINGLE, } from './constants.js';
+import { getCustomOptionTriggerByCode, isCustomOptionBlurInsideField, resolveAddCustomOptionTriggers, shouldCommitCustomOptionOnClose, shouldHandleCustomOptionTrigger, } from './utils/index.js';
+/** Фиксация произвольного ввода как выбранной опции: триггеры, blur, закрытие списка. */
+export function useCustomOption({ allowCustomOption, addCustomOptionTriggers, addOptionByEnter, multiple, inputValue, typing, multipleValue, commitSingle, commitMultiple, resetSearch, inputElementRef, clearButtonRef, copyButtonRef, footerActiveElementsRefs, }) {
+    const listRef = useRef(null);
+    const skipCloseCommitRef = useRef(false);
+    const skipBlurCommitRef = useRef(false);
+    const resolvedTriggers = useMemo(() => resolveAddCustomOptionTriggers({
+        allowCustomOption,
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        defaultTriggers: multiple ? ADD_CUSTOM_OPTION_TRIGGERS_MULTIPLE : ADD_CUSTOM_OPTION_TRIGGERS_SINGLE,
+    }), [allowCustomOption, addCustomOptionTriggers, addOptionByEnter, multiple]);
+    const tryCommit = useCallback((trigger) => {
+        if (!typing || !shouldHandleCustomOptionTrigger(trigger, resolvedTriggers) || inputValue === '') {
+            return false;
+        }
+        if (multiple) {
+            if (multipleValue.includes(inputValue)) {
+                resetSearch();
+            }
+            else {
+                commitMultiple([...multipleValue, inputValue]);
+            }
+        }
+        else {
+            commitSingle(inputValue);
+        }
+        return true;
+    }, [typing, resolvedTriggers, inputValue, multiple, multipleValue, commitMultiple, commitSingle, resetSearch]);
+    const suppressCloseCommit = useCallback(() => {
+        skipCloseCommitRef.current = true;
+        skipBlurCommitRef.current = true;
+    }, []);
+    const enableCloseCommit = useCallback(() => {
+        skipCloseCommitRef.current = false;
+        skipBlurCommitRef.current = false;
+    }, []);
+    const tryCommitOnClose = useCallback(() => {
+        const skipped = skipCloseCommitRef.current;
+        const shouldCommit = shouldCommitCustomOptionOnClose({
+            skip: skipped,
+            inputElement: inputElementRef.current,
+            activeElement: isBrowser() ? document.activeElement : null,
+        });
+        if (skipped) {
+            queueMicrotask(() => {
+                skipCloseCommitRef.current = false;
+            });
+        }
+        return shouldCommit && tryCommit(ADD_CUSTOM_OPTION_TRIGGER.Blur);
+    }, [inputElementRef, tryCommit]);
+    const tryCommitOnBlur = useCallback((event) => {
+        if (skipBlurCommitRef.current) {
+            skipBlurCommitRef.current = false;
+            return 'skipped';
+        }
+        if (isCustomOptionBlurInsideField(event.relatedTarget, [
+            listRef.current,
+            clearButtonRef.current,
+            copyButtonRef.current,
+            ...(footerActiveElementsRefs?.map(ref => ref.current) ?? []),
+        ])) {
+            return 'inside';
+        }
+        return tryCommit(ADD_CUSTOM_OPTION_TRIGGER.Blur) ? 'committed' : 'skipped';
+    }, [clearButtonRef, copyButtonRef, footerActiveElementsRefs, tryCommit]);
+    const tryCommitFromKeyboard = useCallback((event) => {
+        const trigger = getCustomOptionTriggerByCode(event.code, event.key);
+        return trigger !== undefined && tryCommit(trigger);
+    }, [tryCommit]);
+    const handleListSingleChange = useCallback((next) => {
+        skipCloseCommitRef.current = true;
+        commitSingle(next);
+    }, [commitSingle]);
+    const handleListMultipleChange = useCallback((next) => {
+        skipCloseCommitRef.current = true;
+        commitMultiple(next);
+    }, [commitMultiple]);
+    return {
+        listRef,
+        suppressCloseCommit,
+        enableCloseCommit,
+        tryCommitOnClose,
+        tryCommitOnBlur,
+        tryCommitFromKeyboard,
+        handleListSingleChange,
+        handleListMultipleChange,
+    };
+}