@cloud-ru/uikit-product-mobile-fields 2.0.15 → 2.0.16-preview-b1a595e8.0

package/dist/cjs/components/MobileFieldSelect/MobileFieldSelectMultiple.js

@@ -39,7 +39,7 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-ignore
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 exports.MobileFieldSelectMultiple = (0, react_1.forwardRef)((_a, ref) => {
-    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, addCustomOptionTriggers, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "addCustomOptionTriggers", "open", "onOpenChange", "selectedOptionFormatter"]);
     const { t } = (0, uikit_product_locale_1.useLocale)('MobileFields');
     const localRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
@@ -53,6 +53,14 @@ exports.MobileFieldSelectMultiple = (0, react_1.forwardRef)((_a, ref) => {
     const { flattenItems } = (0, react_1.useMemo)(() => (0, list_1.kindFlattenItems)({ items }), [items]);
     const searchable = (searchableProp && Object.values(flattenItems).length > 5) || autocomplete || Boolean(addOptionByEnter);
     const { inputValue, setInputValue, prevInputValue, updateInputValue } = (0, hooks_2.useSearchInput)(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter }));
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = (0, fields_1.useFieldSelectMultipleCustomOption)({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        inputValue,
+        value,
+        setValue,
+        updateInputValue,
+    });
     const prefixSettings = (0, hooks_1.usePrefix)({ prefix, disabled });
     const postfixSettings = (0, hooks_1.usePostfix)({ postfix, disabled });
     (0, utils_1.useLayoutEffect)(() => {
@@ -90,11 +98,14 @@ exports.MobileFieldSelectMultiple = (0, react_1.forwardRef)((_a, 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 = (0, fields_1.getCustomOptionTriggerByCode)(e.code);
+            if ((0, fields_1.shouldHandleCustomOptionTrigger)(customOptionTrigger, resolvedAddCustomOptionTriggers)) {
+                e.stopPropagation();
+                e.preventDefault();
+                tryCommitCustomOptionFromInput(customOptionTrigger);
             }
         }
         if (!open && prevInputValue.current !== inputValue) {
@@ -122,6 +133,9 @@ exports.MobileFieldSelectMultiple = (0, react_1.forwardRef)((_a, ref) => {
             (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         }
     };
+    const handleSearchBlur = () => {
+        tryCommitCustomOptionFromInput('blur');
+    };
     const searcher = (0, legacy_1.useSearch)(items, enableFuzzySearch);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : searcher(inputValue);
     const fieldValidationState = (0, getValidationState_1.getValidationState)({ validationState, error: rest.error });
@@ -130,6 +144,7 @@ exports.MobileFieldSelectMultiple = (0, react_1.forwardRef)((_a, ref) => {
                     value: inputValue,
                     onChange: setInputValue,
                     onKeyDown: handleOnKeyDown(),
+                    onBlur: handleSearchBlur,
                 }
                 : undefined, contentRender: (_a) => {
                 var { content } = _a, rest = __rest(_a, ["content"]);

package/dist/cjs/components/MobileFieldSelect/MobileFieldSelectSingle.js

@@ -35,7 +35,7 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 exports.MobileFieldSelectSingle = (0, react_1.forwardRef)((_a, ref) => {
-    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, addOptionByEnter = false, addCustomOptionTriggers, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "addCustomOptionTriggers", "open", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = (0, react_1.useRef)(null);
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = (0, utils_1.useValueControl)({
@@ -83,6 +83,20 @@ exports.MobileFieldSelectSingle = (0, react_1.forwardRef)((_a, ref) => {
         onClear,
         valueToCopy: selectedOptionFormatter(selectedItem),
     });
+    const handleSelectionChange = (0, react_1.useCallback)((newValue) => {
+        var _a;
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setOpen(false);
+        if (newValue !== undefined) {
+            setValue(newValue);
+        }
+    }, [setOpen, setValue]);
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = (0, fields_1.useFieldSelectSingleCustomOption)({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        inputValue,
+        handleSelectionChange,
+    });
     const handleBlur = (e) => {
         var _a;
         if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
@@ -90,19 +104,15 @@ exports.MobileFieldSelectSingle = (0, react_1.forwardRef)((_a, ref) => {
             (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         }
     };
+    const handleSearchBlur = () => {
+        tryCommitCustomOptionFromInput('blur');
+        setInputValue('');
+    };
     const commonHandleOnKeyDown = (0, hooks_2.useHandleOnKeyDown)({
         inputKeyDownNavigationHandler,
         onInputKeyDownProp,
         setOpen,
     });
-    const handleSelectionChange = (0, react_1.useCallback)((newValue) => {
-        var _a;
-        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        setOpen(false);
-        if (newValue !== undefined) {
-            setValue(newValue);
-        }
-    }, [setOpen, setValue]);
     const handleOnKeyDown = (onKeyDown) => (e) => {
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
@@ -110,16 +120,14 @@ exports.MobileFieldSelectSingle = (0, react_1.forwardRef)((_a, 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 (!readonly && !disabled && (0, utils_1.isBrowser)() && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
-            if (!open) {
+            if (!open && !resolvedAddCustomOptionTriggers.includes('blur')) {
                 setInputValue('');
             }
         }
@@ -140,6 +148,7 @@ exports.MobileFieldSelectSingle = (0, react_1.forwardRef)((_a, ref) => {
                     value: inputValue,
                     onChange: setInputValue,
                     onKeyDown: handleOnKeyDown(),
+                    onBlur: handleSearchBlur,
                 }
                 : undefined, selection: {
                 mode: 'single',

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { FieldDecoratorProps } from '@snack-uikit/fields';
+import { FieldDecoratorProps, FieldSelectMultipleProps, FieldSelectProps, FieldSelectSingleProps } from '@snack-uikit/fields';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, ItemContentProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
@@ -71,15 +71,14 @@ type FiledSelectCommonProps = WithSupportProps<{
      */
     enableFuzzySearch?: boolean;
     autocomplete?: boolean;
-    addOptionByEnter?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-}> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
-export type MobileFieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
+}> & Pick<FieldSelectProps, 'addOptionByEnter'> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
+export type MobileFieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps & Pick<FieldSelectSingleProps, 'addCustomOptionTriggers'>;
 export type MobileFieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;
-} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
+} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'> & Pick<FieldSelectMultipleProps, 'addCustomOptionTriggers'>;
 export type MobileFieldSelectProps = (MobileFieldSelectSingleProps & {
     selection?: 'single';
 }) | (MobileFieldSelectMultipleProps & {

package/dist/esm/components/MobileFieldSelect/MobileFieldSelectMultiple.js

@@ -16,7 +16,7 @@ import { forwardRef, useMemo, useRef, useState, } from 'react';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
 import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
-import { FieldDecorator } from '@snack-uikit/fields';
+import { FieldDecorator, getCustomOptionTriggerByCode, shouldHandleCustomOptionTrigger, useFieldSelectMultipleCustomOption, } from '@snack-uikit/fields';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { kindFlattenItems, List } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
@@ -33,7 +33,7 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-ignore
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const MobileFieldSelectMultiple = forwardRef((_a, ref) => {
-    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, addCustomOptionTriggers, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "addCustomOptionTriggers", "open", "onOpenChange", "selectedOptionFormatter"]);
     const { t } = useLocale('MobileFields');
     const localRef = useRef(null);
     const contentRef = useRef(null);
@@ -47,6 +47,14 @@ export const MobileFieldSelectMultiple = forwardRef((_a, ref) => {
     const { flattenItems } = useMemo(() => kindFlattenItems({ items }), [items]);
     const searchable = (searchableProp && Object.values(flattenItems).length > 5) || autocomplete || Boolean(addOptionByEnter);
     const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter }));
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = useFieldSelectMultipleCustomOption({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        inputValue,
+        value,
+        setValue,
+        updateInputValue,
+    });
     const prefixSettings = usePrefix({ prefix, disabled });
     const postfixSettings = usePostfix({ postfix, disabled });
     useLayoutEffect(() => {
@@ -84,11 +92,14 @@ export const MobileFieldSelectMultiple = forwardRef((_a, 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) {
@@ -116,6 +127,9 @@ export const MobileFieldSelectMultiple = forwardRef((_a, ref) => {
             (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         }
     };
+    const handleSearchBlur = () => {
+        tryCommitCustomOptionFromInput('blur');
+    };
     const searcher = useSearch(items, enableFuzzySearch);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : searcher(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
@@ -124,6 +138,7 @@ export const MobileFieldSelectMultiple = forwardRef((_a, ref) => {
                     value: inputValue,
                     onChange: setInputValue,
                     onKeyDown: handleOnKeyDown(),
+                    onBlur: handleSearchBlur,
                 }
                 : undefined, contentRender: (_a) => {
                 var { content } = _a, rest = __rest(_a, ["content"]);

package/dist/esm/components/MobileFieldSelect/MobileFieldSelectSingle.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
-import { FieldDecorator } from '@snack-uikit/fields';
+import { FieldDecorator, useFieldSelectSingleCustomOption } from '@snack-uikit/fields';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { kindFlattenItems, List } from '@snack-uikit/list';
 import { extractSupportProps, isBrowser, useLayoutEffect, useValueControl } from '@snack-uikit/utils';
@@ -29,7 +29,7 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const MobileFieldSelectSingle = forwardRef((_a, ref) => {
-    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, addOptionByEnter = false, addCustomOptionTriggers, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "addCustomOptionTriggers", "open", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
@@ -77,6 +77,20 @@ export const MobileFieldSelectSingle = forwardRef((_a, ref) => {
         onClear,
         valueToCopy: selectedOptionFormatter(selectedItem),
     });
+    const handleSelectionChange = useCallback((newValue) => {
+        var _a;
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setOpen(false);
+        if (newValue !== undefined) {
+            setValue(newValue);
+        }
+    }, [setOpen, setValue]);
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = useFieldSelectSingleCustomOption({
+        addCustomOptionTriggers,
+        addOptionByEnter,
+        inputValue,
+        handleSelectionChange,
+    });
     const handleBlur = (e) => {
         var _a;
         if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
@@ -84,19 +98,15 @@ export const MobileFieldSelectSingle = forwardRef((_a, ref) => {
             (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         }
     };
+    const handleSearchBlur = () => {
+        tryCommitCustomOptionFromInput('blur');
+        setInputValue('');
+    };
     const commonHandleOnKeyDown = useHandleOnKeyDown({
         inputKeyDownNavigationHandler,
         onInputKeyDownProp,
         setOpen,
     });
-    const handleSelectionChange = useCallback((newValue) => {
-        var _a;
-        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        setOpen(false);
-        if (newValue !== undefined) {
-            setValue(newValue);
-        }
-    }, [setOpen, setValue]);
     const handleOnKeyDown = (onKeyDown) => (e) => {
         if (!open && prevInputValue.current !== inputValue) {
             setOpen(true);
@@ -104,16 +114,14 @@ export const MobileFieldSelectSingle = forwardRef((_a, 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 (!readonly && !disabled && isBrowser() && !buttonsRefs.includes(document.activeElement)) {
             setOpen(open);
-            if (!open) {
+            if (!open && !resolvedAddCustomOptionTriggers.includes('blur')) {
                 setInputValue('');
             }
         }
@@ -134,6 +142,7 @@ export const MobileFieldSelectSingle = forwardRef((_a, ref) => {
                     value: inputValue,
                     onChange: setInputValue,
                     onKeyDown: handleOnKeyDown(),
+                    onBlur: handleSearchBlur,
                 }
                 : undefined, selection: {
                 mode: 'single',

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { FieldDecoratorProps } from '@snack-uikit/fields';
+import { FieldDecoratorProps, FieldSelectMultipleProps, FieldSelectProps, FieldSelectSingleProps } from '@snack-uikit/fields';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, ItemContentProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
@@ -71,15 +71,14 @@ type FiledSelectCommonProps = WithSupportProps<{
      */
     enableFuzzySearch?: boolean;
     autocomplete?: boolean;
-    addOptionByEnter?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-}> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
-export type MobileFieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
+}> & Pick<FieldSelectProps, 'addOptionByEnter'> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
+export type MobileFieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps & Pick<FieldSelectSingleProps, 'addCustomOptionTriggers'>;
 export type MobileFieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;
-} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
+} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'> & Pick<FieldSelectMultipleProps, 'addCustomOptionTriggers'>;
 export type MobileFieldSelectProps = (MobileFieldSelectSingleProps & {
     selection?: 'single';
 }) | (MobileFieldSelectMultipleProps & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-fields",
   "title": "Mobile Fields",
-  "version": "2.0.15",
+  "version": "2.0.16-preview-b1a595e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,9 +42,9 @@
     "@cloud-ru/uikit-product-utils": "9.1.0",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/calendar": "0.13.18",
-    "@snack-uikit/fields": "0.53.0",
+    "@snack-uikit/fields": "0.54.1-preview-1078c3b3.0",
     "@snack-uikit/input-private": "4.8.8",
-    "@snack-uikit/list": "0.32.17",
+    "@snack-uikit/list": "0.32.18-preview-1078c3b3.0",
     "@snack-uikit/scroll": "0.10.8",
     "@snack-uikit/tag": "0.15.18",
     "@snack-uikit/utils": "3.10.1",
@@ -62,5 +62,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "7ab3fb759acc8f2f742b85ac3fefdc02540c58f6"
+  "gitHead": "3a64809a3d108ed6eaf9059976fcdcc7eaeb7c7f"
 }

package/src/components/MobileFieldSelect/MobileFieldSelectMultiple.tsx

@@ -16,7 +16,12 @@ import {
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
 import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
-import { FieldDecorator } from '@snack-uikit/fields';
+import {
+  FieldDecorator,
+  getCustomOptionTriggerByCode,
+  shouldHandleCustomOptionTrigger,
+  useFieldSelectMultipleCustomOption,
+} from '@snack-uikit/fields';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { ItemId, kindFlattenItems, List, ListProps, SelectionSingleValueType } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
@@ -65,6 +70,7 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
       postfix,
       removeByBackspace = false,
       addOptionByEnter = false,
+      addCustomOptionTriggers,
       open: openProp,
       onOpenChange,
       selectedOptionFormatter = defaultSelectedOptionFormatter,
@@ -101,6 +107,15 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
       selectedOptionFormatter,
     });
 
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = useFieldSelectMultipleCustomOption({
+      addCustomOptionTriggers,
+      addOptionByEnter,
+      inputValue,
+      value,
+      setValue,
+      updateInputValue,
+    });
+
     const prefixSettings = usePrefix({ prefix, disabled });
     const postfixSettings = usePostfix({ postfix, disabled });
 
@@ -136,6 +151,7 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
     });
 
     const handleItemDelete = useHandleDeleteItem(setValue);
+
     const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
       if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
         if (selectedItems?.length && !selectedItems.slice(-1)[0].disabled) {
@@ -146,12 +162,14 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
       if (e.code === 'Enter') {
         e.stopPropagation();
         e.preventDefault();
-      }
-
-      if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-        if (!(value ?? []).includes(inputValue)) {
-          setValue((value: SelectionSingleValueType[]) => (value ?? []).concat(inputValue));
-          updateInputValue();
+        tryCommitCustomOptionFromInput('enter');
+      } else {
+        const customOptionTrigger = getCustomOptionTriggerByCode(e.code);
+
+        if (shouldHandleCustomOptionTrigger(customOptionTrigger, resolvedAddCustomOptionTriggers)) {
+          e.stopPropagation();
+          e.preventDefault();
+          tryCommitCustomOptionFromInput(customOptionTrigger);
         }
       }
 
@@ -186,6 +204,10 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
       }
     };
 
+    const handleSearchBlur = () => {
+      tryCommitCustomOptionFromInput('blur');
+    };
+
     const searcher = useSearch(items, enableFuzzySearch);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : searcher(inputValue);
 
@@ -205,6 +227,7 @@ export const MobileFieldSelectMultiple: ForwardRefExoticComponent<
                   value: inputValue,
                   onChange: setInputValue,
                   onKeyDown: handleOnKeyDown(),
+                  onBlur: handleSearchBlur,
                 }
               : undefined
           }

package/src/components/MobileFieldSelect/MobileFieldSelectSingle.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react';
 
 import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
-import { FieldDecorator } from '@snack-uikit/fields';
+import { FieldDecorator, useFieldSelectSingleCustomOption } from '@snack-uikit/fields';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { kindFlattenItems, List, ListProps, SelectionSingleValueType } from '@snack-uikit/list';
 import { extractSupportProps, isBrowser, useLayoutEffect, useValueControl } from '@snack-uikit/utils';
@@ -64,6 +64,7 @@ export const MobileFieldSelectSingle: ForwardRefExoticComponent<
       prefix,
       postfix,
       addOptionByEnter = false,
+      addCustomOptionTriggers,
       open: openProp,
       onOpenChange,
       selectedOptionFormatter = defaultSelectedOptionFormatter,
@@ -141,6 +142,24 @@ export const MobileFieldSelectSingle: ForwardRefExoticComponent<
       valueToCopy: selectedOptionFormatter(selectedItem),
     });
 
+    const handleSelectionChange = useCallback(
+      (newValue?: SelectionSingleValueType) => {
+        localRef.current?.focus();
+        setOpen(false);
+        if (newValue !== undefined) {
+          setValue(newValue);
+        }
+      },
+      [setOpen, setValue],
+    );
+
+    const { resolvedAddCustomOptionTriggers, tryCommitCustomOptionFromInput } = useFieldSelectSingleCustomOption({
+      addCustomOptionTriggers,
+      addOptionByEnter,
+      inputValue,
+      handleSelectionChange,
+    });
+
     const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
       if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
         setInputValue('');
@@ -149,23 +168,17 @@ export const MobileFieldSelectSingle: ForwardRefExoticComponent<
       }
     };
 
+    const handleSearchBlur = () => {
+      tryCommitCustomOptionFromInput('blur');
+      setInputValue('');
+    };
+
     const commonHandleOnKeyDown = useHandleOnKeyDown({
       inputKeyDownNavigationHandler,
       onInputKeyDownProp,
       setOpen,
     });
 
-    const handleSelectionChange = useCallback(
-      (newValue?: SelectionSingleValueType) => {
-        localRef.current?.focus();
-        setOpen(false);
-        if (newValue !== undefined) {
-          setValue(newValue);
-        }
-      },
-      [setOpen, setValue],
-    );
-
     const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
       if (!open && prevInputValue.current !== inputValue) {
         setOpen(true);
@@ -174,10 +187,7 @@ export const MobileFieldSelectSingle: ForwardRefExoticComponent<
       if (e.code === 'Enter') {
         e.stopPropagation();
         e.preventDefault();
-      }
-
-      if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-        handleSelectionChange(inputValue);
+        tryCommitCustomOptionFromInput('enter');
       }
 
       commonHandleOnKeyDown(onKeyDown)(e);
@@ -187,7 +197,7 @@ export const MobileFieldSelectSingle: ForwardRefExoticComponent<
       if (!readonly && !disabled && isBrowser() && !buttonsRefs.includes(document.activeElement)) {
         setOpen(open);
 
-        if (!open) {
+        if (!open && !resolvedAddCustomOptionTriggers.includes('blur')) {
           setInputValue('');
         }
       }
@@ -222,6 +232,7 @@ export const MobileFieldSelectSingle: ForwardRefExoticComponent<
                   value: inputValue,
                   onChange: setInputValue,
                   onKeyDown: handleOnKeyDown(),
+                  onBlur: handleSearchBlur,
                 }
               : undefined
           }

package/src/components/MobileFieldSelect/types.ts

@@ -1,6 +1,11 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { FieldDecoratorProps } from '@snack-uikit/fields';
+import {
+  FieldDecoratorProps,
+  FieldSelectMultipleProps,
+  FieldSelectProps,
+  FieldSelectSingleProps,
+} from '@snack-uikit/fields';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import {
   AccordionItemProps,
@@ -122,25 +127,26 @@ type FiledSelectCommonProps = WithSupportProps<{
 
   autocomplete?: boolean;
 
-  addOptionByEnter?: boolean;
-
   open?: boolean;
 
   onOpenChange?(open: boolean): void;
 
   selectedOptionFormatter?: SelectedOptionFormatter;
 }> &
+  Pick<FieldSelectProps, 'addOptionByEnter'> &
   Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
 
 export type MobileFieldSelectSingleProps = FieldSelectPrivateProps &
   Omit<SelectionSingleState, 'mode'> &
   WrapperProps &
-  FiledSelectCommonProps;
+  FiledSelectCommonProps &
+  Pick<FieldSelectSingleProps, 'addCustomOptionTriggers'>;
 
 export type MobileFieldSelectMultipleProps = FieldSelectPrivateProps & {
   removeByBackspace?: boolean;
 } & Omit<SelectionMultipleState, 'mode'> &
-  Omit<FiledSelectCommonProps, 'showCopyButton'>;
+  Omit<FiledSelectCommonProps, 'showCopyButton'> &
+  Pick<FieldSelectMultipleProps, 'addCustomOptionTriggers'>;
 
 export type MobileFieldSelectProps =
   | (MobileFieldSelectSingleProps & { selection?: 'single' })