@cloud-ru/uikit-product-fields-predefined 0.15.3 → 0.17.0

package/dist/esm/components/FieldAi/FieldAi.js

@@ -9,24 +9,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { EyeClosedSVG, EyeSVG } from '@cloud-ru/uikit-product-icons';
+import { EyeClosedSVG, EyeSVG, PasswordLockSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { AdaptiveFieldTextArea, getAdaptiveFieldProps, } from '@cloud-ru/uikit-product-mobile-fields';
 import { ButtonFunction, ButtonOutline } from '@snack-uikit/button';
+import { themeVars } from '@snack-uikit/figma-tokens';
 import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
 import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
 import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
 import { isTouchDevice as isTouchDeviceHelper } from '../../helpers';
 import { AIDisclaimer } from '../AIDisclaimer/AIDisclaimer';
+import { AlertButton } from './components/AlertButton';
 import { MobileFieldAi } from './components/MobileFieldAi';
 import { WithPasswordValidation } from './components/WithPasswordValidation';
 import styles from './styles.module.css';
 import { getValidationPassword } from './utils';
 export const FieldAi = forwardRef((_a, ref) => {
-    var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "disabled", "className"]);
+    var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, onCancelSecure, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "onCancelSecure", "disabled", "className"]);
     const { layoutType, validationState } = props;
     const { t } = useLocale('FieldsPredefined');
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -38,6 +41,7 @@ export const FieldAi = forwardRef((_a, ref) => {
     const passwordValidation = useMemo(() => getValidationPassword(value), [value]);
     const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
     const showPasswordError = !isPasswordValid && secure && value;
+    const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
     useEffect(() => () => {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -78,5 +82,5 @@ export const FieldAi = forwardRef((_a, ref) => {
     if (isTouchDevice && !secure) {
         return (_jsx(MobileFieldAi, Object.assign({}, props, getAdaptiveFieldProps(props), { onSubmit: handleSubmit, submitEnabled: isValueValid && !disabled, ref: ref, value: value })));
     }
-    return (_jsxs("div", { className: cn(styles.wrapper, className), children: [_jsx(WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: _jsx(AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: cn(styles.textarea, secure && isValueHidden ? styles.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: _jsx(TextAreaActionsFooter, { left: secure && (_jsx(ButtonFunction, { size: 'xs', icon: isValueHidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: _jsxs(_Fragment, { children: [secure && onResetContextClick && (_jsx(Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: _jsx(ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), _jsx(FieldSubmitButton, { showTooltip: !isTouchDevice, className: cn(styles.submitButton, isTouchDevice ? styles.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && _jsx(AIDisclaimer, { layoutType: layoutType })] }));
+    return (_jsxs("div", { className: cn(styles.wrapper, isPasswordMode && styles.passwordWrapper, className), children: [showPasswordAlert && (_jsxs("div", { className: styles.alert, children: [_jsx(PasswordLockSVG, { size: 16, color: themeVars.sys.neutral.textSupport }), _jsx(Typography.SansBodyS, { className: styles.alertText, children: t('FieldAi.secret.alert.text') }), _jsx(AlertButton, { label: t('FieldAi.secret.alert.button'), onClick: onCancelSecure })] })), _jsx(WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: _jsx(AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: cn(styles.textarea, secure && isValueHidden ? styles.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: _jsx(TextAreaActionsFooter, { left: secure && (_jsx(ButtonFunction, { size: 'xs', icon: isValueHidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: _jsxs(_Fragment, { children: [secure && onResetContextClick && (_jsx(Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: _jsx(ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), _jsx(FieldSubmitButton, { showTooltip: !isTouchDevice, className: cn(styles.submitButton, isTouchDevice ? styles.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && _jsx(AIDisclaimer, { layoutType: layoutType })] }));
 });

package/dist/esm/components/FieldAi/components/AlertButton/AlertButton.d.ts

@@ -0,0 +1,5 @@
+export type AlertButtonProps = {
+    label: string;
+    onClick?(): void;
+};
+export declare function AlertButton({ label, onClick }: AlertButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldAi/components/AlertButton/AlertButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function AlertButton({ label, onClick }) {
+    return (_jsx("button", { onClick: onClick, className: styles.button, children: _jsx(Typography.SansLabelM, { className: styles.label, children: label }) }));
+}

package/dist/esm/components/FieldAi/components/AlertButton/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/esm/components/FieldAi/components/AlertButton/index.js

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/esm/components/FieldAi/components/AlertButton/styles.module.css

@@ -0,0 +1,17 @@
+.button{
+  outline:none;
+  border:none;
+  background-color:transparent;
+  cursor:pointer;
+  height:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.label{
+  color:var(--sys-blue-text-support, #4877b0);
+}
+.label:hover{
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/esm/components/FieldAi/styles.module.css

@@ -2,6 +2,33 @@
   display:flex;
   flex-direction:column;
   gap:var(--dimension-050m, 4px);
+  position:relative;
+}
+
+.passwordWrapper{
+  gap:0;
+}
+
+.alert{
+  display:flex;
+  gap:8px;
+  padding:4px 8px;
+  border-radius:8px 8px 0 0;
+  border:1px solid var(--sys-blue-decor-activated, #aac4ea);
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+  box-sizing:border-box;
+  height:38px;
+  position:absolute;
+  left:0;
+  top:-26px;
+  width:100%;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.alertText{
+  flex:1;
+  min-width:0;
+  color:var(--sys-neutral-text-main, #41424e);
 }
 
 .secured textarea{
@@ -25,10 +52,10 @@
 }
 
 .submitButton:not([data-disabled]){
-  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 15%, #5FD7C2 45%, #26D07C 65%);
+  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
 }
 
 .textarea > :first-child[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]){
   border-color:transparent;
-  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 8%, #78B9EC 17%, #70C6DD 28%, #64D8C7 38%, #5FD7C2 44%, #54D5B3 51%, #40D39C 58%, #26D07C 66%) border-box;
+  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 8%, #78b9ec 17%, #70c6dd 28%, #64d8c7 38%, #5fd7c2 44%, #54d5b3 51%, #40d39c 58%, #26d07c 66%) border-box;
 }

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

@@ -11,7 +11,7 @@ export type FieldPhoneProps = WithLayoutType<Omit<FieldTextProps, 'prefix' | 'pr
     /** options — объект конфигурации для изменения стандартного списка стран */
     options?: CountrySettings;
 }>;
-export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength" | "button"> & {
+export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "button" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength"> & {
     /** Включить скролл для основной части списка стран */
     scrollList?: boolean;
     onChange?(value: string): void;

package/dist/esm/components/FieldPhone/FieldPhone.js

@@ -20,13 +20,15 @@ import { useValueControl } from '@snack-uikit/utils';
 import { PLACEHOLDER_CHAR } from './constants';
 import { useCountries } from './hooks';
 import styles from './styles.module.css';
-import { detectCountryByPhone } from './utils';
+import { detectCountryByPhone, handleAutoInsert } from './utils';
 export const FieldPhone = forwardRef((_a, ref) => {
     var { value: valueProp, onChangeCountry, onChange: onChangeProp, showClearButton = true, searchPlaceholder, onPaste, className, scrollList, options: optionsProp } = _a, rest = __rest(_a, ["value", "onChangeCountry", "onChange", "showClearButton", "searchPlaceholder", "onPaste", "className", "scrollList", "options"]);
     const [open, setOpen] = useState(false);
     const localRef = useRef(null);
     const options = useCountries(optionsProp);
     const isOnlyOneCountryAvailable = options.length === 1;
+    const rawInsertRef = useRef('');
+    const insertSwitchRef = useRef(false);
     const [country, setCountry] = useValueControl({
         defaultValue: options[0],
         onChange: onChangeCountry,
@@ -45,7 +47,19 @@ export const FieldPhone = forwardRef((_a, ref) => {
         definitions: {
             X: /[0-9]/,
         },
+        prepare: (str) => {
+            if (str.replace(/\D/g, '').length > 1) {
+                rawInsertRef.current = str;
+            }
+            return str;
+        },
     }), [country === null || country === void 0 ? void 0 : country.mask]);
+    const clearRaw = () => {
+        rawInsertRef.current = '';
+    };
+    const markSwitchRef = () => {
+        insertSwitchRef.current = true;
+    };
     const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = useIMask(maskOptions, {
         onAccept: (_, maskRef) => {
             const unmasked = maskRef.unmaskedValue;
@@ -54,6 +68,23 @@ export const FieldPhone = forwardRef((_a, ref) => {
             if (value !== valueProp) {
                 onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
             }
+            if (insertSwitchRef.current) {
+                insertSwitchRef.current = false;
+                return;
+            }
+            handleAutoInsert({
+                raw: rawInsertRef.current,
+                onValueChange: value => {
+                    setTimeout(() => setValue(value), 0);
+                },
+                onCountryChange: country => {
+                    markSwitchRef();
+                    clearRaw();
+                    setCountry(country);
+                },
+                country,
+                options,
+            });
         },
     });
     useEffect(() => {

package/dist/esm/components/FieldPhone/__tests__/constants.d.ts

@@ -3,3 +3,32 @@ export declare const phoneFormatCases: {
     input: string;
     expected: string;
 }[];
+export declare const handleAutoInsertCases: ({
+    name: string;
+    raw: string;
+    currentId: string;
+    expectedCountryId: string;
+    expectedValue: string;
+    expectedLengthFromCountryId?: undefined;
+} | {
+    name: string;
+    raw: string;
+    currentId: string;
+    expectedValue: string;
+    expectedCountryId?: undefined;
+    expectedLengthFromCountryId?: undefined;
+} | {
+    name: string;
+    raw: string;
+    currentId: string;
+    expectedCountryId?: undefined;
+    expectedValue?: undefined;
+    expectedLengthFromCountryId?: undefined;
+} | {
+    name: string;
+    raw: string;
+    currentId: string;
+    expectedCountryId: string;
+    expectedLengthFromCountryId: string;
+    expectedValue?: undefined;
+})[];

package/dist/esm/components/FieldPhone/__tests__/constants.js

@@ -24,3 +24,177 @@ export const phoneFormatCases = [
     { country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
     { country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
 ];
+export const handleAutoInsertCases = [
+    {
+        name: 'Kyrgyzstan switches + exact national',
+        raw: '+996 201 666666',
+        currentId: 'russia',
+        expectedCountryId: 'kyrgyzstan',
+        expectedValue: '201666666',
+    },
+    {
+        name: 'Kyrgyzstan same => exact national',
+        raw: '+996201666666',
+        currentId: 'kyrgyzstan',
+        expectedValue: '201666666',
+    },
+    {
+        name: 'Russia incomplete => no calls',
+        raw: '+7 987',
+        currentId: 'russia',
+    },
+    {
+        name: 'Albania (+355) XXX XXX-XXX',
+        raw: '+355 675 123 456',
+        currentId: 'russia',
+        expectedCountryId: 'albania',
+        expectedLengthFromCountryId: 'albania',
+    },
+    {
+        name: 'Algeria (+213) XX XXX-XXXX',
+        raw: '+213 12 345 6789',
+        currentId: 'russia',
+        expectedCountryId: 'algeria',
+        expectedLengthFromCountryId: 'algeria',
+    },
+    {
+        name: 'Armenia (+374) XX XXX-XXX',
+        raw: '+374 10 123 456',
+        currentId: 'russia',
+        expectedCountryId: 'armenia',
+        expectedLengthFromCountryId: 'armenia',
+    },
+    {
+        name: 'Austria (+43) XXX XXX-XXXX',
+        raw: '+43 664 123 4567',
+        currentId: 'russia',
+        expectedCountryId: 'austria',
+        expectedLengthFromCountryId: 'austria',
+    },
+    {
+        name: 'Australia (+61) X XXXX-XXXX',
+        raw: '+61 4 1234 5678',
+        currentId: 'russia',
+        expectedCountryId: 'australia',
+        expectedLengthFromCountryId: 'australia',
+    },
+    {
+        name: 'Belarus (+375) XX XXX-XX-XX',
+        raw: '+375 29 123 45 67',
+        currentId: 'russia',
+        expectedCountryId: 'belarus',
+        expectedLengthFromCountryId: 'belarus',
+    },
+    {
+        name: 'Bangladesh (+880) X XXX-XXXX',
+        raw: '+880 1 234 5678',
+        currentId: 'russia',
+        expectedCountryId: 'bangladesh',
+        expectedLengthFromCountryId: 'bangladesh',
+    },
+    {
+        name: 'Bahrain (+973) XX XXX-XXX',
+        raw: '+973 33 123 456',
+        currentId: 'russia',
+        expectedCountryId: 'bahrain',
+        expectedLengthFromCountryId: 'bahrain',
+    },
+    {
+        name: 'Cyprus (+357) XX XXXXXX',
+        raw: '+357 99 123456',
+        currentId: 'russia',
+        expectedCountryId: 'cyprus',
+        expectedLengthFromCountryId: 'cyprus',
+    },
+    {
+        name: 'Georgia (+995) XXX XX-XX-XX',
+        raw: '+995 555 12 34 56',
+        currentId: 'russia',
+        expectedCountryId: 'georgia',
+        expectedLengthFromCountryId: 'georgia',
+    },
+    {
+        name: 'India (+91) XXXXX-XXXXX',
+        raw: '+91 98765 43210',
+        currentId: 'russia',
+        expectedCountryId: 'india',
+        expectedLengthFromCountryId: 'india',
+    },
+    {
+        name: 'Iran (+98) XXX XXX-XXXX',
+        raw: '+98 912 345 6789',
+        currentId: 'russia',
+        expectedCountryId: 'iran',
+        expectedLengthFromCountryId: 'iran',
+    },
+    {
+        name: 'Netherlands (+31) XX XXX-XXXX',
+        raw: '+31 20 123 4567',
+        currentId: 'russia',
+        expectedCountryId: 'netherlands',
+        expectedLengthFromCountryId: 'netherlands',
+    },
+    {
+        name: 'Romania (+40) XX XXX-XXXX',
+        raw: '+40 21 123 4567',
+        currentId: 'russia',
+        expectedCountryId: 'romania',
+        expectedLengthFromCountryId: 'romania',
+    },
+    {
+        name: 'Serbia (+381) XX XXX-XXXX',
+        raw: '+381 11 123 4567',
+        currentId: 'russia',
+        expectedCountryId: 'serbia',
+        expectedLengthFromCountryId: 'serbia',
+    },
+    {
+        name: 'Uzbekistan (+998) XX XXX-XX-XX',
+        raw: '+998 90 123 45 67',
+        currentId: 'russia',
+        expectedCountryId: 'uzbekistan',
+        expectedLengthFromCountryId: 'uzbekistan',
+    },
+    {
+        name: 'Tajikistan (+992) XX XXX-XXXX',
+        raw: '+992 93 123 4567',
+        currentId: 'russia',
+        expectedCountryId: 'tajikistan',
+        expectedLengthFromCountryId: 'tajikistan',
+    },
+    {
+        name: 'Moldova (+373) XXXX XXXX',
+        raw: '+373 1234 5678',
+        currentId: 'russia',
+        expectedCountryId: 'moldova',
+        expectedLengthFromCountryId: 'moldova',
+    },
+    {
+        name: 'Netherlands (+31) switches from Moldova',
+        raw: '+31 20 123 4567',
+        currentId: 'moldova',
+        expectedCountryId: 'netherlands',
+        expectedLengthFromCountryId: 'netherlands',
+    },
+    {
+        name: 'Uzbekistan (+998) switches from Tajikistan',
+        raw: '+998 90 123 45 67',
+        currentId: 'tajikistan',
+        expectedCountryId: 'uzbekistan',
+        expectedLengthFromCountryId: 'uzbekistan',
+    },
+    {
+        name: 'Tajikistan (+992) switches from Albania',
+        raw: '+992 93 123 4567',
+        currentId: 'albania',
+        expectedCountryId: 'tajikistan',
+        expectedLengthFromCountryId: 'tajikistan',
+    },
+    {
+        name: 'Moldova (+373) switches from Egypt',
+        raw: '+373 1234 5678',
+        currentId: 'egypt',
+        expectedCountryId: 'moldova',
+        expectedLengthFromCountryId: 'moldova',
+    },
+];

package/dist/esm/components/FieldPhone/__tests__/handleAutoInsert.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/FieldPhone/__tests__/handleAutoInsert.spec.js

@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ALL_COUNTRY_CODES } from '../countries';
+import { handleAutoInsert } from '../utils';
+import { handleAutoInsertCases } from './constants';
+const OPTIONS = ALL_COUNTRY_CODES.map(c => ({
+    id: c.value,
+    iso2: c.iso2,
+    mask: c.mask,
+    content: {
+        caption: c.caption,
+        option: c.value,
+    },
+    beforeContent: null,
+}));
+const byId = (id) => {
+    const found = OPTIONS.find(c => c.id === id);
+    if (!found)
+        throw new Error(`Country not found in OPTIONS: ${id}`);
+    return found;
+};
+const casesNoCalls = handleAutoInsertCases.filter((c) => !('expectedValue' in c) && !('expectedLengthFromCountryId' in c));
+const casesExact = handleAutoInsertCases.filter((c) => 'expectedValue' in c);
+describe('handleAutoInsert — no calls', () => {
+    casesNoCalls.forEach(tc => {
+        it(`${tc.name}`, () => {
+            const onValueChange = vi.fn();
+            const onCountryChange = vi.fn();
+            handleAutoInsert({
+                raw: tc.raw,
+                onValueChange,
+                onCountryChange,
+                country: byId(tc.currentId),
+                options: OPTIONS,
+            });
+            expect(onCountryChange).not.toHaveBeenCalled();
+            expect(onValueChange).not.toHaveBeenCalled();
+        });
+    });
+});
+describe('handleAutoInsert — exact value', () => {
+    casesExact.forEach(tc => {
+        it(`${tc.name}`, () => {
+            var _a, _b;
+            const onValueChange = vi.fn();
+            const onCountryChange = vi.fn();
+            handleAutoInsert({
+                raw: tc.raw,
+                onValueChange,
+                onCountryChange,
+                country: byId(tc.currentId),
+                options: OPTIONS,
+            });
+            expect(onValueChange).toHaveBeenCalledTimes(1);
+            expect(onValueChange).toHaveBeenCalledWith(tc.expectedValue);
+            const expectedCountryCalls = tc.expectedCountryId ? 1 : 0;
+            expect(onCountryChange).toHaveBeenCalledTimes(expectedCountryCalls);
+            const actualCountryId = (_b = (_a = onCountryChange.mock.calls[0]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id;
+            expect(actualCountryId).toBe(tc.expectedCountryId);
+        });
+    });
+});

package/dist/esm/components/FieldPhone/utils.d.ts

@@ -5,3 +5,10 @@ export declare const formatPhoneNumber: <T extends {
     mask: string;
 }>(phone: string, countries: readonly T[]) => string;
 export declare function detectCountryByPhone(text: string, options: FieldPhoneOptionsProps[]): FieldPhoneOptionsProps | undefined;
+export declare const handleAutoInsert: ({ raw, onValueChange, onCountryChange, country, options, }: {
+    raw: string;
+    onValueChange: (str: string) => void;
+    onCountryChange: (country: FieldPhoneOptionsProps) => void;
+    country?: FieldPhoneOptionsProps;
+    options: FieldPhoneOptionsProps[];
+}) => void;

package/dist/esm/components/FieldPhone/utils.js

@@ -49,3 +49,31 @@ export function detectCountryByPhone(text, options) {
     }
     return options.find(opt => opt.iso2 === regionCode);
 }
+export const handleAutoInsert = ({ raw, onValueChange, onCountryChange, country, options, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!raw)
+        return;
+    const parsed = parsePhoneNumber(raw);
+    const ok = parsed.valid || parsed.possible;
+    if (!ok)
+        return;
+    const detected = detectCountryByPhone(raw, options);
+    if (!detected)
+        return;
+    let national = (_a = parsed.number) === null || _a === void 0 ? void 0 : _a.significant.replace(/\D/g, '');
+    if (!national)
+        return;
+    const nextNationalLength = ((_c = (_b = detected.mask) === null || _b === void 0 ? void 0 : _b.match(/X/g)) !== null && _c !== void 0 ? _c : []).length;
+    if (nextNationalLength && national.length > nextNationalLength) {
+        national = national.slice(-nextNationalLength);
+    }
+    const fullDigits = ((_e = (_d = parsed.number) === null || _d === void 0 ? void 0 : _d.e164) !== null && _e !== void 0 ? _e : raw).replace(/\D/g, '');
+    const countryCodeDigits = String((_f = parsed.countryCode) !== null && _f !== void 0 ? _f : '');
+    const expected = countryCodeDigits.length + nextNationalLength;
+    if (fullDigits.length < expected)
+        return;
+    if (detected.id !== (country === null || country === void 0 ? void 0 : country.id)) {
+        onCountryChange(detected);
+    }
+    onValueChange(national);
+};