@snack-uikit/fields 0.53.2-preview-0a70077b.0 → 0.54.0

package/dist/cjs/components/FieldSelect/hooks/customOption.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldSelectMultipleCustomOption = useFieldSelectMultipleCustomOption;
+exports.useFieldSelectSingleCustomOption = useFieldSelectSingleCustomOption;
+const react_1 = require("react");
+function useResolvedAddCustomOptionTriggers(_ref) {
+  let {
+    addCustomOptionTriggers,
+    addOptionByEnter
+  } = _ref;
+  return (0, react_1.useMemo)(() => {
+    if (addCustomOptionTriggers !== undefined) {
+      return addCustomOptionTriggers;
+    }
+    return addOptionByEnter ? ['enter'] : [];
+  }, [addCustomOptionTriggers, addOptionByEnter]);
+}
+function useFieldSelectMultipleCustomOption(_ref2) {
+  let {
+    addCustomOptionTriggers,
+    addOptionByEnter,
+    inputValue,
+    value,
+    setValue,
+    updateInputValue
+  } = _ref2;
+  const resolvedAddCustomOptionTriggers = useResolvedAddCustomOptionTriggers({
+    addCustomOptionTriggers,
+    addOptionByEnter
+  });
+  const tryCommitCustomOptionFromInput = (0, react_1.useCallback)(trigger => {
+    if (!resolvedAddCustomOptionTriggers.includes(trigger) || inputValue === '') {
+      return;
+    }
+    if (!(value !== null && value !== void 0 ? value : []).includes(inputValue)) {
+      setValue(prev => (prev !== null && prev !== void 0 ? prev : []).concat(inputValue));
+      updateInputValue();
+    }
+  }, [resolvedAddCustomOptionTriggers, inputValue, value, setValue, updateInputValue]);
+  return {
+    resolvedAddCustomOptionTriggers,
+    tryCommitCustomOptionFromInput
+  };
+}
+function useFieldSelectSingleCustomOption(_ref3) {
+  let {
+    addCustomOptionTriggers,
+    addOptionByEnter,
+    inputValue,
+    handleSelectionChange
+  } = _ref3;
+  const resolvedAddCustomOptionTriggers = useResolvedAddCustomOptionTriggers({
+    addCustomOptionTriggers,
+    addOptionByEnter
+  });
+  const tryCommitCustomOptionFromInput = (0, react_1.useCallback)(trigger => {
+    if (!resolvedAddCustomOptionTriggers.includes(trigger) || inputValue === '') {
+      return;
+    }
+    handleSelectionChange(inputValue);
+  }, [resolvedAddCustomOptionTriggers, inputValue, handleSelectionChange]);
+  return {
+    resolvedAddCustomOptionTriggers,
+    tryCommitCustomOptionFromInput
+  };
+}

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

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './customOption';

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./common"), exports);
+__exportStar(require("./customOption"), exports);

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

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

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

@@ -31,9 +31,11 @@ export type SearchState = {
     defaultValue?: string;
     onChange?(value: string): void;
 };
+/** События, по которым произвольное значение из строки поиска фиксируется в значении поля */
+export type FieldSelectMultipleAddCustomOptionTrigger = 'enter' | 'blur' | 'space' | 'comma';
+export type FieldSelectSingleAddCustomOptionTrigger = Extract<FieldSelectMultipleAddCustomOptionTrigger, 'enter' | 'blur'>;
 export type FieldSelectPrivateProps = InputProps & WrapperProps & {
     options: OptionProps[];
-    /** Отображать ли состояние загрузки данных в поле и списке */
     loading?: boolean;
     /** Произвольный префикс для поля */
     prefix?: ReactNode;
@@ -65,6 +67,9 @@ type FiledSelectCommonProps = WithSupportProps<{
     widthStrategy?: DroplistProps['widthStrategy'];
     search?: SearchState;
     autocomplete?: boolean;
+    /**
+     * @deprecated Используйте `addCustomOptionTriggers`
+     */
     addOptionByEnter?: boolean;
     open?: boolean;
     /** Включить нечеткий поиск  */
@@ -76,10 +81,22 @@ type FiledSelectCommonProps = WithSupportProps<{
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 }> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered' | 'untouchableScrollbars' | 'scrollToSelectedItem' | 'virtualized' | 'scrollRef' | 'scrollContainerRef' | 'onScroll'>;
-export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
+export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps & {
+    /**
+     * Триггеры фиксации произвольного значения из строки поиска в режиме `single`.
+     * Если передан, имеет приоритет над устаревшим `addOptionByEnter`.
+     */
+    addCustomOptionTriggers?: FieldSelectSingleAddCustomOptionTrigger[];
+};
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;
-} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton' | 'onCopyButtonClick'>;
+} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton' | 'onCopyButtonClick'> & {
+    /**
+     * Триггеры фиксации произвольного значения из строки поиска в режиме `multiple`.
+     * Если передан, имеет приоритет над устаревшим `addOptionByEnter`.
+     */
+    addCustomOptionTriggers?: FieldSelectMultipleAddCustomOptionTrigger[];
+};
 export type FieldSelectProps = (FieldSelectSingleProps & {
     selection?: 'single';
 }) | (FieldSelectMultipleProps & {

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

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+import { FieldSelectMultipleAddCustomOptionTrigger } from '../types';
+export declare const getCustomOptionTriggerByCode: (code: KeyboardEvent<HTMLInputElement>["code"]) => FieldSelectMultipleAddCustomOptionTrigger | undefined;
+export declare const shouldHandleCustomOptionTrigger: (trigger: FieldSelectMultipleAddCustomOptionTrigger | undefined, availableTriggers: FieldSelectMultipleAddCustomOptionTrigger[]) => trigger is FieldSelectMultipleAddCustomOptionTrigger;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldHandleCustomOptionTrigger = exports.getCustomOptionTriggerByCode = void 0;
+const getCustomOptionTriggerByCode = code => {
+  switch (code) {
+    case 'Enter':
+      return 'enter';
+    case 'Space':
+      return 'space';
+    case 'Comma':
+      return 'comma';
+    default:
+      return undefined;
+  }
+};
+exports.getCustomOptionTriggerByCode = getCustomOptionTriggerByCode;
+const shouldHandleCustomOptionTrigger = (trigger, availableTriggers) => trigger ? availableTriggers.includes(trigger) : false;
+exports.shouldHandleCustomOptionTrigger = shouldHandleCustomOptionTrigger;

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

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

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

@@ -28,4 +28,6 @@ __exportStar(require("./options"), exports);
 __exportStar(require("./updateItems"), exports);
 __exportStar(require("./getArrowIcon"), exports);
 __exportStar(require("./getValueByPath"), exports);
-__exportStar(require("./checkisSearchUnavailable"), exports);
+__exportStar(require("./checkisSearchUnavailable"), exports);
+__exportStar(require("./customOption"), exports);
+__exportStar(require("./filterItemsByFlattenIds"), exports);

package/dist/cjs/components/FieldText/FieldText.d.ts

@@ -32,5 +32,5 @@ type FieldTextOwnProps = {
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<Required<InputPrivateProps>, "inputMode"> & Pick<InputPrivateProps, "id" | "name" | "onPaste" | "onFocus" | "onBlur" | "onKeyDown" | "disabled" | "placeholder" | "readonly" | "autoFocus" | "autoComplete" | "maxLength" | "spellCheck" | "pattern"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<Required<InputPrivateProps>, "inputMode"> & Pick<InputPrivateProps, "id" | "name" | "onPaste" | "onFocus" | "onBlur" | "onKeyDown" | "disabled" | "readonly" | "placeholder" | "autoFocus" | "autoComplete" | "maxLength" | "spellCheck" | "pattern"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/cjs/components/FieldTextArea/FieldTextArea.d.ts

@@ -30,5 +30,5 @@ type FieldTextAreaOwnProps = {
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "id" | "name" | "onFocus" | "onBlur" | "onKeyDown" | "disabled" | "placeholder" | "readonly" | "autoFocus" | "inputMode" | "maxLength" | "spellCheck"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "id" | "name" | "onFocus" | "onBlur" | "onKeyDown" | "disabled" | "readonly" | "placeholder" | "autoFocus" | "inputMode" | "maxLength" | "spellCheck"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -1,4 +1,3 @@
-export * from './FieldAdd';
 export * from './FieldColor';
 export * from './FieldDate';
 export * from './FieldDecorator';

package/dist/cjs/components/index.js

@@ -22,7 +22,6 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./FieldAdd"), exports);
 __exportStar(require("./FieldColor"), exports);
 __exportStar(require("./FieldDate"), exports);
 __exportStar(require("./FieldDecorator"), exports);

package/dist/cjs/helperComponents/ButtonFieldList/ButtonFieldList.d.ts

@@ -1,4 +1,4 @@
 import { ButtonFieldProps } from '../ButtonField';
-export declare const ButtonFieldList: import("react").ForwardRefExoticComponent<Omit<ButtonFieldProps, "hasArrow" | "arrowOpen"> & Pick<import("@snack-uikit/list").DroplistProps, "search" | "items" | "scroll" | "open" | "onOpenChange"> & {
+export declare const ButtonFieldList: import("react").ForwardRefExoticComponent<Omit<ButtonFieldProps, "hasArrow" | "arrowOpen"> & Pick<import("@snack-uikit/list").DroplistProps, "search" | "open" | "onOpenChange" | "items" | "scroll"> & {
     selection?: Omit<import("@snack-uikit/list").SelectionSingleState, "mode">;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/FieldSecure/FieldSecure.d.ts

@@ -23,5 +23,5 @@ type FieldSecureOwnProps = {
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "id" | "name" | "onFocus" | "onBlur" | "disabled" | "placeholder" | "readonly" | "autoFocus" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "id" | "name" | "onFocus" | "onBlur" | "disabled" | "readonly" | "placeholder" | "autoFocus" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -28,4 +28,6 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton" | "onCopyButtonClick"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton" | "onCopyButtonClick"> & {
+    addCustomOptionTriggers?: import("./types").FieldSelectMultipleAddCustomOptionTrigger[];
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/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, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
@@ -22,9 +22,9 @@ import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
-import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
+import { useButtons, useFieldSelectMultipleCustomOption, useHandleDeleteItem, useHandleOnKeyDown, useSearch, useSearchInput, } from './hooks';
 import styles from './styles.module.css';
-import { checkisSearchUnavailable, extractListProps, getArrowIcon, updateMultipleItems } from './utils';
+import { checkisSearchUnavailable, extractListProps, getArrowIcon, getCustomOptionTriggerByCode, shouldHandleCustomOptionTrigger, updateMultipleItems, } from './utils';
 const BASE_MIN_WIDTH = 4;
 const defaultSelectedOptionFormatter = item => 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -32,7 +32,7 @@ const defaultSelectedOptionFormatter = item =>
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectMultiple = forwardRef((props, ref) => {
     var _a;
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, autoFocus } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter", "autoFocus"]);
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, addCustomOptionTriggers, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, autoFocus } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "addCustomOptionTriggers", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter", "autoFocus"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -45,6 +45,14 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
     const [{ selectedItems, items = [] }, setItems] = useState(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
     const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter,
         resetSearchOnOptionSelection }));
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = useFieldSelectMultipleCustomOption({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        inputValue,
+        value,
+        setValue,
+        updateInputValue,
+    });
     const prefixSettings = usePrefix({ prefix, disabled });
     const postfixSettings = usePostfix({ postfix, disabled });
     useLayoutEffect(() => {
@@ -73,6 +81,12 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
         setOpen,
     });
     const handleItemDelete = useHandleDeleteItem(setValue);
+    const handleTagDelete = useCallback((option) => () => {
+        var _a;
+        const deleteItemHandler = handleItemDelete(option);
+        deleteItemHandler();
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [handleItemDelete]);
     const handleOnKeyDown = (onKeyDown) => (e) => {
         if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
             if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && !selectedItems.slice(-1)[0].disabled) {
@@ -82,11 +96,14 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
         if (e.code === 'Enter') {
             e.stopPropagation();
             e.preventDefault();
+            tryCommitCustomOptionFromInput('enter');
         }
-        if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-            if (!(value !== null && value !== void 0 ? value : []).includes(inputValue)) {
-                setValue((value) => (value !== null && value !== void 0 ? value : []).concat(inputValue));
-                updateInputValue();
+        else {
+            const customOptionTrigger = getCustomOptionTriggerByCode(e.code);
+            if (shouldHandleCustomOptionTrigger(customOptionTrigger, resolvedAddCustomOptionTriggers)) {
+                e.stopPropagation();
+                e.preventDefault();
+                tryCommitCustomOptionFromInput(customOptionTrigger);
             }
         }
         if (!open && prevInputValue.current !== inputValue) {
@@ -112,6 +129,7 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
     const handleBlur = (e) => {
         var _a;
         if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
+            tryCommitCustomOptionFromInput('blur');
             updateInputValue();
             (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         }
@@ -154,7 +172,7 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
                 return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: fieldValidationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: (prefixIcon || prefixSettings.show) && (_jsxs(_Fragment, { children: [prefixIcon, prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })] })), children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedItems &&
                                         selectedItems.map(option => {
                                             var _a;
-                                            return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined, className: styles.tag, "data-disabled": disabled || undefined }, option.id));
+                                            return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleTagDelete(option) : undefined, className: styles.tag, "data-disabled": disabled || 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)

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

@@ -26,4 +26,6 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState"> & {
+    addCustomOptionTriggers?: import("./types").FieldSelectSingleAddCustomOptionTrigger[];
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -21,15 +21,15 @@ import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
-import { useButtons, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
+import { useButtons, useFieldSelectSingleCustomOption, useHandleOnKeyDown, useSearch, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { checkisSearchUnavailable, extractListProps, getArrowIcon, updateItems } from './utils';
+import { checkisSearchUnavailable, extractListProps, getArrowIcon, shouldHandleCustomOptionTrigger, updateItems, } from './utils';
 const defaultSelectedOptionFormatter = item => 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectSingle = forwardRef((props, ref) => {
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, prefix, postfix, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onCopyButtonClick, autoFocus } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "resetSearchOnOptionSelection", "onCopyButtonClick", "autoFocus"]);
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, prefix, postfix, addOptionByEnter = false, addCustomOptionTriggers: addCustomOptionTriggersProp, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onCopyButtonClick, autoFocus } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "addCustomOptionTriggers", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "resetSearchOnOptionSelection", "onCopyButtonClick", "autoFocus"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
@@ -77,13 +77,6 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
         onCopyButtonClick,
         valueToCopy: selectedOptionFormatter(selectedItem),
     });
-    const handleBlur = (e) => {
-        var _a;
-        if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
-            updateInputValue(selectedItem);
-            (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-        }
-    };
     const commonHandleOnKeyDown = useHandleOnKeyDown({
         inputKeyDownNavigationHandler,
         onInputKeyDownProp,
@@ -97,6 +90,25 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
             setValue(newValue);
         }
     }, [setOpen, setValue]);
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = useFieldSelectSingleCustomOption({
+        addCustomOptionTriggers: addCustomOptionTriggersProp,
+        addOptionByEnter,
+        inputValue,
+        handleSelectionChange,
+    });
+    const handleBlur = (e) => {
+        var _a;
+        if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
+            const commitOnBlur = shouldHandleCustomOptionTrigger('blur', resolvedAddCustomOptionTriggers) && inputValue !== '';
+            if (commitOnBlur) {
+                tryCommitCustomOptionFromInput('blur');
+            }
+            else {
+                updateInputValue(selectedItem);
+            }
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        }
+    };
     const handleOnKeyDown = (onKeyDown) => (e) => {
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
@@ -104,16 +116,14 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
         if (e.code === 'Enter') {
             e.stopPropagation();
             e.preventDefault();
-        }
-        if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-            handleSelectionChange(inputValue);
+            tryCommitCustomOptionFromInput('enter');
         }
         commonHandleOnKeyDown(onKeyDown)(e);
     };
     const handleOpenChange = (open) => {
         if (isBrowser() && !readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
-            if (!open) {
+            if (!open && !shouldHandleCustomOptionTrigger('blur', resolvedAddCustomOptionTriggers)) {
                 updateInputValue(selectedItem);
             }
         }

package/dist/esm/components/FieldSelect/{hooks.d.ts → hooks/common.d.ts}

@@ -1,7 +1,7 @@
 import { KeyboardEvent, KeyboardEventHandler, MouseEvent, RefObject } from 'react';
 import { Handler } from 'uncontrollable';
 import { ItemProps } from '@snack-uikit/list';
-import { ItemWithId, SearchState, SelectedOptionFormatter } from './types';
+import { ItemWithId, SearchState, SelectedOptionFormatter } from '../types';
 type UseHandleOnKeyDownProps = {
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
     onInputKeyDownProp: KeyboardEventHandler<HTMLInputElement> | undefined;

package/dist/esm/components/FieldSelect/{hooks.js → hooks/common.js}

@@ -2,10 +2,9 @@ import FuzzySearch from 'fuzzy-search';
 import { useCallback, useMemo, useRef } from 'react';
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { isAccordionItemProps, isNextListItemProps, kindFlattenItems, } from '@snack-uikit/list';
-import { useCopyButton, useValueControl } from '../../hooks';
-import { extractChildIds } from './legacy';
-import { getValueByPath, isBaseOptionProps } from './utils';
-import { filterItemsByFlattenIds } from './utils/filterItemsByFlattenIds';
+import { useCopyButton, useValueControl } from '../../../hooks';
+import { extractChildIds } from '../legacy';
+import { filterItemsByFlattenIds, getValueByPath, isBaseOptionProps } from '../utils';
 export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
     return useCallback((onKeyDown) => (e) => {
         if (e.code === 'Space') {

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

@@ -0,0 +1,26 @@
+import { Handler } from 'uncontrollable';
+import { SelectionSingleValueType } from '@snack-uikit/list';
+import { FieldSelectMultipleAddCustomOptionTrigger } from '../types';
+type UseResolvedAddCustomOptionTriggersParams = {
+    addCustomOptionTriggers?: FieldSelectMultipleAddCustomOptionTrigger[];
+    addOptionByEnter: boolean;
+};
+type UseFieldSelectMultipleCustomOptionParams = UseResolvedAddCustomOptionTriggersParams & {
+    inputValue: string;
+    value: SelectionSingleValueType[] | undefined;
+    setValue: Handler;
+    updateInputValue: () => void;
+};
+export declare function useFieldSelectMultipleCustomOption({ addCustomOptionTriggers, addOptionByEnter, inputValue, value, setValue, updateInputValue, }: UseFieldSelectMultipleCustomOptionParams): {
+    resolvedAddCustomOptionTriggers: FieldSelectMultipleAddCustomOptionTrigger[];
+    tryCommitCustomOptionFromInput: (trigger: FieldSelectMultipleAddCustomOptionTrigger) => void;
+};
+type UseFieldSelectSingleCustomOptionParams = UseResolvedAddCustomOptionTriggersParams & {
+    inputValue: string;
+    handleSelectionChange: (value: SelectionSingleValueType) => void;
+};
+export declare function useFieldSelectSingleCustomOption({ addCustomOptionTriggers, addOptionByEnter, inputValue, handleSelectionChange, }: UseFieldSelectSingleCustomOptionParams): {
+    resolvedAddCustomOptionTriggers: FieldSelectMultipleAddCustomOptionTrigger[];
+    tryCommitCustomOptionFromInput: (trigger: FieldSelectMultipleAddCustomOptionTrigger) => void;
+};
+export {};

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

@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from 'react';
+function useResolvedAddCustomOptionTriggers({ addCustomOptionTriggers, addOptionByEnter, }) {
+    return useMemo(() => {
+        if (addCustomOptionTriggers !== undefined) {
+            return addCustomOptionTriggers;
+        }
+        return addOptionByEnter ? ['enter'] : [];
+    }, [addCustomOptionTriggers, addOptionByEnter]);
+}
+export function useFieldSelectMultipleCustomOption({ addCustomOptionTriggers, addOptionByEnter, inputValue, value, setValue, updateInputValue, }) {
+    const resolvedAddCustomOptionTriggers = useResolvedAddCustomOptionTriggers({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+    });
+    const tryCommitCustomOptionFromInput = useCallback((trigger) => {
+        if (!resolvedAddCustomOptionTriggers.includes(trigger) || inputValue === '') {
+            return;
+        }
+        if (!(value !== null && value !== void 0 ? value : []).includes(inputValue)) {
+            setValue((prev) => (prev !== null && prev !== void 0 ? prev : []).concat(inputValue));
+            updateInputValue();
+        }
+    }, [resolvedAddCustomOptionTriggers, inputValue, value, setValue, updateInputValue]);
+    return { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput };
+}
+export function useFieldSelectSingleCustomOption({ addCustomOptionTriggers, addOptionByEnter, inputValue, handleSelectionChange, }) {
+    const resolvedAddCustomOptionTriggers = useResolvedAddCustomOptionTriggers({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+    });
+    const tryCommitCustomOptionFromInput = useCallback((trigger) => {
+        if (!resolvedAddCustomOptionTriggers.includes(trigger) || inputValue === '') {
+            return;
+        }
+        handleSelectionChange(inputValue);
+    }, [resolvedAddCustomOptionTriggers, inputValue, handleSelectionChange]);
+    return { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput };
+}

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

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './customOption';

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

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './customOption';

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

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

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

@@ -31,9 +31,11 @@ export type SearchState = {
     defaultValue?: string;
     onChange?(value: string): void;
 };
+/** События, по которым произвольное значение из строки поиска фиксируется в значении поля */
+export type FieldSelectMultipleAddCustomOptionTrigger = 'enter' | 'blur' | 'space' | 'comma';
+export type FieldSelectSingleAddCustomOptionTrigger = Extract<FieldSelectMultipleAddCustomOptionTrigger, 'enter' | 'blur'>;
 export type FieldSelectPrivateProps = InputProps & WrapperProps & {
     options: OptionProps[];
-    /** Отображать ли состояние загрузки данных в поле и списке */
     loading?: boolean;
     /** Произвольный префикс для поля */
     prefix?: ReactNode;
@@ -65,6 +67,9 @@ type FiledSelectCommonProps = WithSupportProps<{
     widthStrategy?: DroplistProps['widthStrategy'];
     search?: SearchState;
     autocomplete?: boolean;
+    /**
+     * @deprecated Используйте `addCustomOptionTriggers`
+     */
     addOptionByEnter?: boolean;
     open?: boolean;
     /** Включить нечеткий поиск  */
@@ -76,10 +81,22 @@ type FiledSelectCommonProps = WithSupportProps<{
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
 }> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered' | 'untouchableScrollbars' | 'scrollToSelectedItem' | 'virtualized' | 'scrollRef' | 'scrollContainerRef' | 'onScroll'>;
-export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
+export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps & {
+    /**
+     * Триггеры фиксации произвольного значения из строки поиска в режиме `single`.
+     * Если передан, имеет приоритет над устаревшим `addOptionByEnter`.
+     */
+    addCustomOptionTriggers?: FieldSelectSingleAddCustomOptionTrigger[];
+};
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;
-} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton' | 'onCopyButtonClick'>;
+} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton' | 'onCopyButtonClick'> & {
+    /**
+     * Триггеры фиксации произвольного значения из строки поиска в режиме `multiple`.
+     * Если передан, имеет приоритет над устаревшим `addOptionByEnter`.
+     */
+    addCustomOptionTriggers?: FieldSelectMultipleAddCustomOptionTrigger[];
+};
 export type FieldSelectProps = (FieldSelectSingleProps & {
     selection?: 'single';
 }) | (FieldSelectMultipleProps & {

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

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+import { FieldSelectMultipleAddCustomOptionTrigger } from '../types';
+export declare const getCustomOptionTriggerByCode: (code: KeyboardEvent<HTMLInputElement>["code"]) => FieldSelectMultipleAddCustomOptionTrigger | undefined;
+export declare const shouldHandleCustomOptionTrigger: (trigger: FieldSelectMultipleAddCustomOptionTrigger | undefined, availableTriggers: FieldSelectMultipleAddCustomOptionTrigger[]) => trigger is FieldSelectMultipleAddCustomOptionTrigger;