@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/dist/cjs/components/FieldMask/FieldMask.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldMask = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fields_1 = require("@cloud-ru/ds-fields");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_imask_1 = require("react-imask");
+const constants_1 = require("./constants");
+exports.FieldMask = (0, react_1.forwardRef)(function FieldMask({ value: valueProp, onChange, mask, size = 'm', ...props }, ref) {
+    const maskOptions = constants_1.MASK_OPTIONS[mask];
+    const { ref: maskedRef, value, setValue, } = (0, react_imask_1.useIMask)({ ...constants_1.BASE_MASK_OPTIONS, ...maskOptions.options }, {
+        defaultValue: valueProp,
+        onAccept: onChange,
+    });
+    (0, react_1.useEffect)(() => {
+        if (valueProp !== undefined && valueProp !== value) {
+            setValue(valueProp);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldCombo
+    // @ts-expect-error тип maskedRef из react-imask не совпадает с ref-типом FieldCombo
+    , { 
+        // @ts-expect-error тип maskedRef из react-imask не совпадает с ref-типом FieldCombo
+        ref: (0, merge_refs_1.default)(ref, maskedRef), value: value, onChange: setValue, placeholder: maskOptions.placeholder, inputMode: maskOptions.inputMode ?? 'numeric', size: size, ...props }));
+});

package/dist/cjs/components/FieldMask/constants.d.ts

@@ -0,0 +1,19 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { Mask } from './types';
+export declare const MASK: {
+    readonly Code: "code";
+    readonly Uuid: "uuid";
+    readonly Passport: "passport";
+    readonly Snils: "snils";
+    readonly IpV4Address: "ip-v4-address";
+    readonly IpV4AddressWithMask: "ip-v4-address-with-mask";
+};
+export declare const MASK_OPTIONS: Record<Mask, {
+    placeholder: string;
+    options: Record<string, unknown>;
+    inputMode?: FieldComboProps['inputMode'];
+}>;
+export declare const BASE_MASK_OPTIONS: {
+    readonly lazy: true;
+    readonly autofix: true;
+};

package/dist/cjs/components/FieldMask/constants.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_MASK_OPTIONS = exports.MASK_OPTIONS = exports.MASK = void 0;
+exports.MASK = {
+    Code: 'code',
+    Uuid: 'uuid',
+    Passport: 'passport',
+    Snils: 'snils',
+    IpV4Address: 'ip-v4-address',
+    IpV4AddressWithMask: 'ip-v4-address-with-mask',
+};
+exports.MASK_OPTIONS = {
+    [exports.MASK.Uuid]: {
+        placeholder: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
+        options: {
+            mask: 'hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh',
+            placeholderChar: '_',
+            definitions: {
+                h: /[0-9a-f]/,
+            },
+        },
+        inputMode: 'text',
+    },
+    [exports.MASK.Code]: {
+        placeholder: 'XXXX',
+        options: {
+            mask: '0000',
+            placeholderChar: '_',
+        },
+        inputMode: 'numeric',
+    },
+    [exports.MASK.Passport]: {
+        placeholder: 'XXXX XXXXXX',
+        options: {
+            mask: '0000 000000',
+        },
+        inputMode: 'numeric',
+    },
+    [exports.MASK.Snils]: {
+        placeholder: 'XXXXXX-XXX XX',
+        options: {
+            mask: '000000-000 00',
+        },
+        inputMode: 'numeric',
+    },
+    [exports.MASK.IpV4Address]: {
+        placeholder: '___.___.___.___',
+        options: { mask: '0[00]{.}`0[00]{.}`0[00]{.}`0[00]' },
+        inputMode: 'numeric',
+    },
+    [exports.MASK.IpV4AddressWithMask]: {
+        placeholder: '___.___.___.___/__',
+        options: { mask: '0[00]{.}`0[00]{.}`0[00]{.}`0[00]{/}`0[0]' },
+        inputMode: 'numeric',
+    },
+};
+exports.BASE_MASK_OPTIONS = {
+    lazy: true,
+    autofix: true,
+};

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

@@ -0,0 +1,3 @@
+export { MASK } from './constants';
+export * from './FieldMask';
+export * from './types';

package/dist/cjs/components/FieldMask/index.js

@@ -0,0 +1,21 @@
+"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 });
+exports.MASK = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "MASK", { enumerable: true, get: function () { return constants_1.MASK; } });
+__exportStar(require("./FieldMask"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,3 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { MASK } from './constants';
+export type Mask = ValueOf<typeof MASK>;

package/dist/cjs/components/FieldMask/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,5 @@
+import { FieldNameProps } from './types';
+/**
+ * Поле «Имя» с локальным стейтом и валидацией (yup).
+ */
+export declare const FieldName: import("react").ForwardRefExoticComponent<Omit<FieldNameProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldName/FieldName.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fields_1 = require("@cloud-ru/ds-fields");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const yup_1 = require("yup");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const constants_1 = require("./constants");
+/**
+ * Поле «Имя» с локальным стейтом и валидацией (yup).
+ */
+exports.FieldName = (0, react_1.forwardRef)(function FieldName(props, ref) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const { value: propValue = '', onChange: propOnChange, onBlur: propOnBlur, error: propError, maxLength = constants_1.DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, allowMoreThanMaxLength = true, size = 'm', ...inputProps } = props;
+    const [internalValue, setInternalValue] = (0, react_1.useState)(propValue);
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const validationSchema = (0, react_1.useMemo)(() => {
+        let baseSchema = (0, yup_1.string)()
+            .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+            if (!value)
+                return true;
+            return value.length <= maxLength;
+        })
+            .matches(/^[a-zA-Z0-9.\-_]*$/, {
+            message: t('FieldName.wrongSymbols'),
+            name: 'allowedSymbols',
+            excludeEmptyString: true,
+        });
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validate } = (0, hooks_1.useCustomFieldValidation)({ schema: validationSchema });
+    const currentValue = 'value' in props ? propValue : internalValue;
+    const currentError = propError || validationError?.message;
+    const isRequiredError = currentError?.match(t('FieldName.required'));
+    const handleChange = (newValue) => {
+        const result = validate(newValue);
+        // Если была required-ошибка и пользователь начал ввод — очищаем её.
+        if (isRequiredError && !isFocused) {
+            setValidationError(null);
+        }
+        else if (result.error && result.error.message !== t('FieldName.required')) {
+            // Любую НЕ required ошибку показываем сразу.
+            setValidationError(result.error);
+        }
+        else {
+            setValidationError(null);
+        }
+        setInternalValue(newValue);
+        propOnChange?.(newValue);
+    };
+    const handleBlur = (e) => {
+        (0, input_private_1.runAfterRerender)(() => setIsFocused(false));
+        const result = validate(currentValue);
+        setValidationError(result.error);
+        props.onValidationError?.(result.error);
+        propOnBlur?.(e);
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+    };
+    const handleClear = () => {
+        const result = validate('');
+        setValidationError(result.error);
+        props.onValidationError?.(result.error);
+    };
+    // Ошибка обязательного поля появляется после blur.
+    const showError = currentError && ((isRequiredError && !isFocused) || !isRequiredError);
+    // Счётчик — только при ошибке длины/обязательности (как в FieldNameRHF).
+    const shouldShowCounter = Boolean(currentError) &&
+        (Boolean(currentError?.match(t('FieldName.maxSymbols', { max: maxLength }))) || Boolean(isRequiredError));
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { ...inputProps, inputMode: 'text', onClearButtonClick: handleClear, allowMoreThanMaxLength: allowMoreThanMaxLength, ref: (0, merge_refs_1.default)(ref, inputRef), value: currentValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, validationState: showError ? 'error' : inputProps.validationState, hint: showError ? currentError : undefined, maxLength: shouldShowCounter && showError ? maxLength : undefined, size: size, label: showLabel ? t('FieldName.label') : undefined, placeholder: t('FieldName.placeholder'), caption: !required ? t('FieldDescription.optional') : undefined }));
+});

package/dist/cjs/components/FieldName/FieldNameRHF.d.ts

@@ -0,0 +1,5 @@
+import { FieldNameRHFProps } from './types';
+/**
+ * Поле «Имя» с обёрткой для react-hook-form.
+ */
+export declare const FieldNameRHF: import("react").ForwardRefExoticComponent<Omit<FieldNameRHFProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldName/FieldNameRHF.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldNameRHF = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fields_1 = require("@cloud-ru/ds-fields");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const yup_1 = require("yup");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const constants_1 = require("./constants");
+/**
+ * Поле «Имя» с обёрткой для react-hook-form.
+ */
+exports.FieldNameRHF = (0, react_1.forwardRef)(function FieldNameRHF(props, ref) {
+    const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
+    const { controllerProps, maxLength = constants_1.DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, size = 'm', allowMoreThanMaxLength = true, error: propError, ...inputProps } = props;
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const { trigger } = (0, react_hook_form_1.useFormContext)();
+    const validationSchema = (0, react_1.useMemo)(() => {
+        let baseSchema = (0, yup_1.string)()
+            .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+            if (!value)
+                return true;
+            return value.length <= maxLength;
+        })
+            .matches(/^[a-zA-Z0-9.\-_]*$/, {
+            message: t('FieldName.wrongSymbols'),
+            name: 'allowedSymbols',
+            excludeEmptyString: true,
+        });
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validateRHF } = (0, hooks_1.useCustomFieldValidation)({ schema: validationSchema });
+    const handleFocus = value => {
+        setIsFocused(true);
+        inputProps.onFocus?.(value);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { ...controllerProps, rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            const isRequiredError = Boolean(error && error.message?.match(t('FieldName.required')));
+            const shouldShowCounter = error && (error.message?.match(t('FieldName.maxSymbols', { max: maxLength })) || isRequiredError);
+            // Показываем ошибку, если: required-ошибка и поле не в фокусе; либо любая другая ошибка;
+            // либо ошибка передана принудительно через проп `error`.
+            const showError = error && ((isRequiredError && !isFocused) || !isRequiredError);
+            const errorMes = propError ?? error?.message;
+            const handleClearButtonClick = () => {
+                trigger(controllerProps.name);
+            };
+            const handleChange = (newValue) => {
+                inputProps.onChange?.(newValue);
+                onChange(newValue);
+            };
+            const handleBlur = value => {
+                (0, input_private_1.runAfterRerender)(() => setIsFocused(false));
+                inputProps.onBlur?.(value);
+                onBlur();
+            };
+            return ((0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { ...inputProps, inputMode: 'text', onClearButtonClick: handleClearButtonClick, allowMoreThanMaxLength: allowMoreThanMaxLength, ref: (0, merge_refs_1.default)(ref, localRef), value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, validationState: showError ? 'error' : inputProps.validationState, hint: showError ? errorMes : undefined, maxLength: shouldShowCounter && showError ? maxLength : undefined, size: size, label: showLabel ? t('FieldName.label') : undefined, placeholder: t('FieldName.placeholder'), caption: !required ? t('FieldDescription.optional') : undefined }));
+        } }));
+});

package/dist/cjs/components/FieldName/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MAX_NAME_LENGTH = 64;

package/dist/cjs/components/FieldName/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_MAX_NAME_LENGTH = void 0;
+exports.DEFAULT_MAX_NAME_LENGTH = 64;

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

@@ -0,0 +1,3 @@
+export * from './FieldName';
+export * from './FieldNameRHF';
+export * from './types';

package/dist/cjs/components/FieldName/index.js

@@ -0,0 +1,19 @@
+"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("./FieldName"), exports);
+__exportStar(require("./FieldNameRHF"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,22 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+export type BaseFieldNameProps = Omit<FieldComboProps, 'placeholder' | 'label' | 'footer' | 'type' | 'inputMode' | 'caption' | 'hint'> & {
+    /** Показывать предустановленный лейбл «Имя» */
+    showLabel?: boolean;
+    /**
+     * Дополнительная yup-схема, конкатенируется к встроенной (обязательность, длина, допустимые символы).
+     * Через неё подключают data-зависимые проверки, которые компонент не может выполнить сам — например,
+     * проверку уникальности имени по данным потребителя. Текст ошибки можно взять из локали пакета:
+     * `fieldsPredefinedLocale.useTranslations().t('FieldName.errorDuplicate')`.
+     */
+    customSchema?: StringSchema;
+};
+export type FieldNameProps = BaseFieldNameProps & {
+    /** Колбэк, вызываемый при изменении ошибки валидации */
+    onValidationError?(error: ValidationError | null): void;
+};
+export type FieldNameRHFProps = BaseFieldNameProps & {
+    /** Режим контроллера с использованием react-hook-form */
+    controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};

package/dist/cjs/components/FieldName/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,13 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { CountrySettings, FieldPhoneOptionsProps } from './types';
+export type FieldPhoneProps = Omit<FieldComboProps, 'prefix' | 'prefixIcon' | 'postfix' | 'placeholder' | 'allowMoreThanMaxLength' | 'elementBefore' | 'elementAfter' | 'inputMode'> & {
+    /** Скролл с ограничением высоты для списка стран. По умолчанию включён. */
+    scrollList?: boolean;
+    onChange?(value: string): void;
+    /** Плейсхолдер поля поиска в выпадающем списке стран */
+    searchPlaceholder?: string;
+    onChangeCountry?(country: FieldPhoneOptionsProps): void;
+    /** Конфигурация для изменения стандартного списка стран */
+    options?: CountrySettings;
+};
+export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldPhoneProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldPhone/FieldPhone.js

@@ -0,0 +1,166 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldPhone = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const fields_1 = require("@cloud-ru/ds-fields");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_imask_1 = require("react-imask");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+exports.FieldPhone = (0, react_1.forwardRef)(function FieldPhone({ value: valueProp, onChangeCountry, onChange: onChangeProp, showClearButton = true, searchPlaceholder, onPaste, scrollList, options: optionsProp, className, autoFocus, ...rest }, ref) {
+    const localRef = (0, react_1.useRef)(null);
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    const options = (0, hooks_1.useCountries)(optionsProp);
+    const isOnlyOneCountryAvailable = options.length === 1;
+    const rawInsertRef = (0, react_1.useRef)('');
+    const insertSwitchRef = (0, react_1.useRef)(false);
+    const [country, setCountry] = (0, utils_1.useValueControl)({
+        defaultValue: options[0],
+        onChange: onChangeCountry,
+    });
+    const [dropdownSearch, setDropDownSearch] = (0, react_1.useState)('');
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (dropdownSearch.length) {
+            return options.filter(opt => [opt.content.label, opt.content.caption].some(val => String(val).toLowerCase().includes(dropdownSearch.toLowerCase())));
+        }
+        return options;
+    }, [options, dropdownSearch]);
+    const items = (0, react_1.useMemo)(() => filteredOptions.map(opt => ({
+        id: opt.id,
+        beforeContent: opt.beforeContent,
+        content: { label: opt.content.label, caption: opt.content.caption },
+    })), [filteredOptions]);
+    const maskOptions = (0, react_1.useMemo)(() => ({
+        mask: country?.mask,
+        lazy: false,
+        placeholderChar: constants_2.PLACEHOLDER_CHAR,
+        definitions: {
+            X: /[0-9]/,
+        },
+        prepare: (str) => {
+            if (str.replace(/\D/g, '').length > 1) {
+                rawInsertRef.current = str;
+            }
+            return str;
+        },
+    }), [country?.mask]);
+    const clearRaw = () => {
+        rawInsertRef.current = '';
+    };
+    const markSwitchRef = () => {
+        insertSwitchRef.current = true;
+    };
+    const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = (0, react_imask_1.useIMask)(maskOptions, {
+        onAccept: (_, maskRef) => {
+            const unmasked = maskRef.unmaskedValue;
+            const requiredSymbols = country?.mask.replace(/[\D]/g, '');
+            const value = unmasked.length ? `${country?.content.caption}${requiredSymbols}${unmasked}` : '';
+            if (value !== valueProp) {
+                onChangeProp?.(value);
+            }
+            if (insertSwitchRef.current) {
+                insertSwitchRef.current = false;
+                return;
+            }
+            (0, utils_2.handleAutoInsert)({
+                raw: rawInsertRef.current,
+                onValueChange: value => {
+                    setTimeout(() => setValue(value), 0);
+                },
+                onCountryChange: country => {
+                    markSwitchRef();
+                    clearRaw();
+                    setCountry(country);
+                },
+                country,
+                options,
+            });
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        const requiredSymbols = country?.mask.replace(/[\D]/g, '');
+        const normalizedValue = valueProp?.replace((country?.content.caption ?? '') + requiredSymbols, '');
+        if (normalizedValue !== undefined && normalizedValue !== unmaskedValue) {
+            setValue(normalizedValue);
+        }
+        // нужно реагировать только на изменение valueProp
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    const updateMaskView = (value) => {
+        setValue(value?.replaceAll(/\w/g, ' ') ?? '');
+    };
+    const handlePaste = e => {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text') || '';
+        const newCountry = (0, utils_2.detectCountryByPhone)(text, options);
+        const isCountryChanged = newCountry && newCountry.id !== country?.id;
+        const currentCountry = isCountryChanged ? newCountry : country;
+        const prefixNumber = (currentCountry?.content.caption ?? '').replace('+', '');
+        const prefixNumberWithOptionalPlus = RegExp(`^(\\+?${prefixNumber})`);
+        const valueWithoutPrefix = text.replace(prefixNumberWithOptionalPlus, '');
+        // костыль, чтобы всегда срабатывала маска
+        const newValue = `+${valueWithoutPrefix}`;
+        if (isCountryChanged) {
+            setCountry(newCountry);
+            updateMaskView(newCountry.mask);
+            setTimeout(() => setValue(newValue), 0);
+        }
+        else {
+            setValue(newValue);
+        }
+        onPaste?.(e);
+    };
+    const handleChangeSelection = (selectedOption) => {
+        const selectedId = String(selectedOption);
+        if (selectedId && selectedId !== country?.id) {
+            const selectedCountry = options.find(opt => opt.id === selectedId);
+            updateMaskView(selectedCountry?.mask);
+            setCountry(selectedCountry);
+            // Desktop: вернуть каретку в поле после выбора; на mobile не фокусим — откроется клавиатура.
+            if (!isMobile) {
+                setTimeout(() => localRef.current?.focus(), constants_2.REFOCUS_AFTER_COUNTRY_DELAY_MS);
+            }
+        }
+    };
+    const handleChange = (value) => {
+        // нужно только для сброса значения по клику на кнопку очистки
+        if (unmaskedValue && !value) {
+            updateMaskView(country?.mask);
+            // На mobile автофокус запрещён — он принудительно открывает экранную клавиатуру.
+            if (!isMobile) {
+                localRef.current?.focus();
+            }
+        }
+    };
+    const showClear = showClearButton && Boolean(unmaskedValue);
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { ...rest, inputMode: 'tel', type: 'tel', ref: (0, merge_refs_1.default)(ref, localRef, iMaskRef), className: (0, classnames_1.default)(className, styles_module_scss_1.default.fieldPhone), "data-empty": !unmaskedValue || undefined, autoFocus: autoFocus, value: iMaskValue, onChange: handleChange, onPaste: handlePaste, showClearButton: showClear, prefix: country?.content.caption, elementBefore: isOnlyOneCountryAvailable
+            ? undefined
+            : {
+                action: country?.beforeContent,
+                'data-test-id': constants_1.TEST_IDS.fieldPhoneCountrySelect,
+                droplist: {
+                    items,
+                    selection: { mode: 'single', onChange: handleChangeSelection, value: country?.id },
+                    // Скролл включён по умолчанию — иначе список из ~158 стран рендерится без ограничения
+                    // высоты (Droplist форсит limitedScrollHeight, но контейнер-скролл появляется только при scroll).
+                    scroll: scrollList ?? true,
+                    scrollToSelectedItem: true,
+                    search: {
+                        value: dropdownSearch,
+                        onChange: setDropDownSearch,
+                        placeholder: searchPlaceholder,
+                    },
+                },
+            } }));
+});

package/dist/cjs/components/FieldPhone/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const PLACEHOLDER_CHAR = "_";
+/**
+ * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
+ * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
+ */
+export declare const FLAG_ICON_SIZE = 24;
+/** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
+export declare const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/dist/cjs/components/FieldPhone/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REFOCUS_AFTER_COUNTRY_DELAY_MS = exports.FLAG_ICON_SIZE = exports.PLACEHOLDER_CHAR = void 0;
+exports.PLACEHOLDER_CHAR = '_';
+/**
+ * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
+ * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
+ */
+exports.FLAG_ICON_SIZE = 24;
+/** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
+exports.REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;