@cloud-ru/uikit-product-fields-predefined 0.13.3 → 0.13.5

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

@@ -0,0 +1,32 @@
+.textarea{
+  resize:none;
+  box-sizing:border-box;
+  width:100%;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:transparent;
+  border:none;
+  border-radius:0;
+  outline:0;
+}
+.textarea::-moz-placeholder{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.textarea::placeholder{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.textarea::-webkit-scrollbar{
+  width:0;
+  max-width:0;
+}
+.textarea:-moz-read-only{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.textarea:read-only{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.textarea[disabled]{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ValidationPassword } from '../../utils';
+export type WithPasswordTooltipProps = WithLayoutType<{
+    showValidation?: boolean;
+    children: ReactNode;
+    passwordValidation: ValidationPassword;
+}>;
+export declare function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, }: WithPasswordTooltipProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AdaptiveTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { isTouchDevice } from '../../../../helpers';
+import { PasswordValidation } from '../PasswordValidation';
+import styles from './styles.module.css';
+export function WithPasswordValidation({ showValidation, passwordValidation, layoutType, children, }) {
+    if (isTouchDevice(layoutType)) {
+        if (showValidation) {
+            return (_jsxs("div", { className: styles.validationContainer, children: [_jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType }), children] }));
+        }
+        return children;
+    }
+    if (showValidation) {
+        return (_jsx(AdaptiveTooltip, { placement: 'left-end', layoutType: layoutType, tip: _jsx(PasswordValidation, { passwordValidation: passwordValidation, layoutType: layoutType }), offset: 8, children: children }));
+    }
+    return children;
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+.validationContainer{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-050m, 4px);
+}
+
+.secured textarea{
+  -webkit-text-security:disc;
+  text-security:disc;
+}
+
+.mobileSubmitButton{
+  position:relative !important;
+  flex-shrink:0 !important;
+}
+.mobileSubmitButton:after{
+  content:"";
+  display:flex;
+  width:48px;
+  height:48px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}

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

@@ -0,0 +1,9 @@
+export type ValidationPassword = {
+    onlyLatin: boolean;
+    minLength: boolean;
+    hasLetterCases: boolean;
+    hasNumber: boolean;
+    hasSymbol: boolean;
+    noSpaces: boolean;
+};
+export declare const getValidationPassword: (password?: string) => ValidationPassword;

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

@@ -0,0 +1,15 @@
+const MIN_PASSWORD_LENGTH = 8;
+const NUMBER_REGEX = /[0-9]/;
+const CAPITAL_REGEX = /\p{Lu}/u;
+const LOWER_REGEX = /\p{Ll}/u;
+const SYMBOLS_REGEX = /[\p{P}\p{S}]/u;
+const NO_SPACES = /^\S*$/u;
+const LATIN_REGEX = /^[a-zA-Z0-9\p{P}\p{S}]+$/u;
+export const getValidationPassword = (password = '') => ({
+    onlyLatin: Boolean(password.match(LATIN_REGEX)),
+    minLength: password.length >= MIN_PASSWORD_LENGTH,
+    hasLetterCases: Boolean(password.match(CAPITAL_REGEX)) && Boolean(password.match(LOWER_REGEX)),
+    hasNumber: Boolean(password.match(NUMBER_REGEX)),
+    hasSymbol: Boolean(password.match(SYMBOLS_REGEX)),
+    noSpaces: Boolean(password.match(NO_SPACES)),
+});

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

@@ -0,0 +1,15 @@
+import { FieldTextAreaProps } from '@sbercloud/uikit-product-mobile-fields';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { AttachmentSquareProps } from '@snack-uikit/attachment';
+import { FileUploadProps } from '@snack-uikit/drop-zone';
+export type FieldChatProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder' | 'hint' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
+    /** Колбек действия при отправке */
+    handleSubmit(value: string): void;
+    attachment?: Pick<FileUploadProps, 'onFilesUpload' | 'accept'> & {
+        /** Список загруженных файлов */
+        files?: File[];
+        /** Колбек действия при удалении прикрепленного файла */
+        onFileDelete: AttachmentSquareProps['onDelete'];
+    };
+}>;
+export declare function FieldChat({ handleSubmit: handleSubmitProp, value, layoutType, attachment, ...props }: FieldChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldChat/FieldChat.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AttachmentSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { AdaptiveFieldTextArea } from '@sbercloud/uikit-product-mobile-fields';
+import { ButtonFunction } from '@snack-uikit/button';
+import { FileUpload } from '@snack-uikit/drop-zone';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
+import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
+import { Attachments } from './components/Attachments';
+import styles from './styles.module.css';
+export function FieldChat(_a) {
+    var { handleSubmit: handleSubmitProp, value, layoutType, attachment } = _a, props = __rest(_a, ["handleSubmit", "value", "layoutType", "attachment"]);
+    const { t } = useLocale('FieldsPredefined');
+    const isMobile = layoutType === 'mobile';
+    const files = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = attachment === null || attachment === void 0 ? void 0 : attachment.files) === null || _a === void 0 ? void 0 : _a.map(file => ({
+            file,
+            onDelete: attachment === null || attachment === void 0 ? void 0 : attachment.onFileDelete,
+        }))) !== null && _b !== void 0 ? _b : [];
+    }, [attachment === null || attachment === void 0 ? void 0 : attachment.files, attachment === null || attachment === void 0 ? void 0 : attachment.onFileDelete]);
+    const isValueValid = (typeof value === 'string' && value.trim().length > 0) || files.length > 0;
+    const handleSubmit = () => {
+        if (isValueValid) {
+            handleSubmitProp(value !== null && value !== void 0 ? value : '');
+        }
+    };
+    const handleKeyDown = e => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+            return;
+        }
+    };
+    return (_jsxs("div", { className: styles.fieldChat, "data-layout-type": layoutType, children: [isMobile && _jsx(Attachments, { files: files, isMobile: isMobile }), _jsx(AdaptiveFieldTextArea, Object.assign({}, props, { layoutType: layoutType, size: isMobile ? 'l' : 'm', minRows: 1, maxRows: 4, placeholder: t('FieldChat.placeholder'), onKeyDown: handleKeyDown, footer: _jsx(TextAreaActionsFooter, { right: _jsxs(_Fragment, { children: [attachment && (_jsx(Tooltip, { tip: t('FieldChat.attachFileTooltip'), hoverDelayOpen: 600, triggerClassName: styles.uploadTooltip, children: _jsx(FileUpload, { mode: 'multiple', onFilesUpload: attachment.onFilesUpload, accept: attachment.accept, children: _jsx(ButtonFunction, { size: isMobile ? 's' : 'xs', icon: _jsx(AttachmentSVG, {}) }) }) })), _jsx(FieldSubmitButton, { active: isValueValid, handleClick: handleSubmit, size: isMobile ? 's' : 'xs' })] }) }) })), !isMobile && _jsx(Attachments, { files: files })] }));
+}

package/dist/esm/components/FieldChat/components/Attachments/Attachments.d.ts

@@ -0,0 +1,6 @@
+import { AttachmentSquareProps } from '@snack-uikit/attachment';
+export type AttachmentsProps = {
+    files: AttachmentSquareProps[];
+    isMobile?: boolean;
+};
+export declare function Attachments({ files, isMobile }: AttachmentsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/FieldChat/components/Attachments/Attachments.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Attachment, AttachmentSquare } from '@snack-uikit/attachment';
+import { Scroll } from '@snack-uikit/scroll';
+import styles from './styles.module.css';
+export function Attachments({ files, isMobile }) {
+    if (!files.length) {
+        return null;
+    }
+    const AttachmentComponent = isMobile ? Attachment : AttachmentSquare;
+    return (_jsx(Scroll, { children: _jsx("div", { className: styles.attachments, children: files.map((file, index) => {
+                var _a;
+                return (_jsx(AttachmentComponent, Object.assign({ size: 's' }, file, { className: isMobile ? styles.attachment : undefined }), ((_a = file.file) === null || _a === void 0 ? void 0 : _a.name) || index));
+            }) }) }));
+}

package/dist/esm/components/FieldChat/components/Attachments/index.d.ts

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

package/dist/esm/components/FieldChat/components/Attachments/index.js

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

package/dist/esm/components/FieldChat/components/Attachments/styles.module.css

@@ -0,0 +1,9 @@
+.attachments{
+  display:flex;
+  gap:8px;
+  padding:1px 0;
+}
+
+.attachment{
+  min-width:256px;
+}

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

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

package/dist/esm/components/FieldChat/index.js

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

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

@@ -0,0 +1,12 @@
+.fieldChat{
+  display:flex;
+  flex-direction:column;
+  gap:11px;
+}
+.fieldChat[data-layout-type=mobile]{
+  gap:7px;
+}
+
+.uploadTooltip{
+  display:flex;
+}

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

@@ -0,0 +1,25 @@
+import { FieldTextProps } from '@sbercloud/uikit-product-mobile-fields';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { CountrySettings, FieldPhoneOptionsProps } from './types';
+export type FieldPhoneProps = WithLayoutType<Omit<FieldTextProps, 'prefix' | 'prefixIcon' | 'postfix' | 'placeholder' | 'autocomplete' | 'decoratorRef' | 'allowMoreThanMaxLength' | 'onKeyDown' | 'button' | 'maxLength' | 'inputMode'> & {
+    /** Включить скролл для основной части списка стран */
+    scrollList?: boolean;
+    onChange?(value: string): void;
+    searchPlaceholder?: string;
+    onChangeCountry?(country: FieldPhoneOptionsProps): void;
+} & {
+    /** options — объект конфигурации для изменения стандартного списка стран */
+    options?: CountrySettings;
+}>;
+export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength" | "button"> & {
+    /** Включить скролл для основной части списка стран */
+    scrollList?: boolean;
+    onChange?(value: string): void;
+    searchPlaceholder?: string;
+    onChangeCountry?(country: FieldPhoneOptionsProps): void;
+} & {
+    /** options — объект конфигурации для изменения стандартного списка стран */
+    options?: CountrySettings;
+} & {
+    layoutType: import("@sbercloud/uikit-product-utils").LayoutType;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,125 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useIMask } from 'react-imask';
+import { AdaptiveDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { AdaptiveFieldText } from '@sbercloud/uikit-product-mobile-fields';
+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';
+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 [country, setCountry] = useValueControl({
+        defaultValue: options[0],
+        onChange: onChangeCountry,
+    });
+    const [dropdownSearch, setDropDownSearch] = useState('');
+    const items = useMemo(() => {
+        if (dropdownSearch.length) {
+            return options.filter(opt => [opt.content.option, opt.content.caption].some(val => String(val).toLowerCase().includes(dropdownSearch.toLowerCase())));
+        }
+        return options;
+    }, [options, dropdownSearch]);
+    const maskOptions = useMemo(() => ({
+        mask: country === null || country === void 0 ? void 0 : country.mask,
+        lazy: false,
+        placeholderChar: PLACEHOLDER_CHAR,
+        definitions: {
+            X: /[0-9]/,
+        },
+    }), [country === null || country === void 0 ? void 0 : country.mask]);
+    const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = useIMask(maskOptions, {
+        onAccept: (_, maskRef) => {
+            const unmasked = maskRef.unmaskedValue;
+            const requiredSymbols = country === null || country === void 0 ? void 0 : country.mask.replace(/[\D]/g, '');
+            const value = unmasked.length ? `${country === null || country === void 0 ? void 0 : country.content.caption}${requiredSymbols}${unmasked}` : '';
+            if (value !== valueProp) {
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
+            }
+        },
+    });
+    useEffect(() => {
+        var _a;
+        const requiredSymbols = country === null || country === void 0 ? void 0 : country.mask.replace(/[\D]/g, '');
+        const normalizedValue = valueProp === null || valueProp === void 0 ? void 0 : valueProp.replace(((_a = country === null || country === void 0 ? void 0 : country.content.caption) !== null && _a !== void 0 ? _a : '') + requiredSymbols, '');
+        if (normalizedValue !== undefined && normalizedValue !== unmaskedValue) {
+            setValue(normalizedValue);
+        }
+        // need to trigger update only on valueProp change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    const updateMaskView = (value) => {
+        var _a;
+        setValue((_a = value === null || value === void 0 ? void 0 : value.replaceAll(/\w/g, ' ')) !== null && _a !== void 0 ? _a : '');
+    };
+    const handlePaste = e => {
+        var _a, _b;
+        e.preventDefault();
+        const text = ((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
+        const newCountry = detectCountryByPhone(text, options);
+        const isCountryChanged = newCountry && newCountry.id !== (country === null || country === void 0 ? void 0 : country.id);
+        const currentCountry = isCountryChanged ? newCountry : country;
+        const prefixNumber = ((_b = currentCountry === null || currentCountry === void 0 ? void 0 : currentCountry.content.caption) !== null && _b !== void 0 ? _b : '').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 === null || onPaste === void 0 ? void 0 : onPaste(e);
+    };
+    const handleChangeSelection = (selectedOption) => {
+        if (selectedOption && selectedOption !== (country === null || country === void 0 ? void 0 : country.content.option)) {
+            const selectedCountry = options.find(opt => opt.id === selectedOption);
+            updateMaskView(selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.mask);
+            setCountry(selectedCountry);
+        }
+        setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 500);
+    };
+    const handleChange = (value) => {
+        var _a;
+        // needed only to clear value by clicking on clear button
+        if (unmaskedValue && !value) {
+            updateMaskView(country === null || country === void 0 ? void 0 : country.mask);
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const showClear = showClearButton && Boolean(unmaskedValue);
+    return (_jsx(AdaptiveFieldText, Object.assign({}, rest, { inputMode: 'tel', "data-test-id": 'field-phone', type: 'tel', ref: mergeRefs(ref, localRef, iMaskRef), className: cn(className, styles.fieldPhone), "data-empty": !unmaskedValue || undefined, value: iMaskValue, onChange: handleChange, onPaste: handlePaste, showClearButton: showClear, prefix: country === null || country === void 0 ? void 0 : country.content.caption, button: isOnlyOneCountryAvailable
+            ? undefined
+            : {
+                variant: 'before',
+                hasArrow: true,
+                arrowOpen: open,
+                wrapper: button => (_jsx("div", { role: 'presentation', onClick: e => e.stopPropagation(), children: _jsx(AdaptiveDroplist, { onOpenChange: setOpen, closeDroplistOnItemClick: true, layoutType: rest.layoutType, items: items, selection: { mode: 'single', onChange: handleChangeSelection, value: country === null || country === void 0 ? void 0 : country.id }, scroll: scrollList, search: {
+                            value: dropdownSearch,
+                            onChange: setDropDownSearch,
+                            placeholder: searchPlaceholder,
+                        }, children: button }) })),
+                content: country === null || country === void 0 ? void 0 : country.beforeContent,
+            } })));
+});

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

@@ -0,0 +1,5 @@
+export declare const phoneFormatCases: {
+    country: string;
+    input: string;
+    expected: string;
+}[];

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

@@ -0,0 +1,26 @@
+export const phoneFormatCases = [
+    { country: 'Russia', input: '+79878887879', expected: '+7 987 888-78-79' },
+    { country: 'Russia', input: '+7987****875', expected: '+7 987 ***-*8-75' },
+    { country: 'Belarus', input: '+375129876543', expected: '+375 12 987-65-43' },
+    { country: 'Kazakhstan', input: '+79878887879', expected: '+7 987 888-78-79' },
+    { country: 'Armenia', input: '+37412987654', expected: '+374 12 987-654' },
+    { country: 'Kyrgyzstan', input: '+996987888777', expected: '+996 987 888-777' },
+    { country: 'Georgia', input: '+995987888777', expected: '+995 987 88-87-77' },
+    { country: 'Brazil', input: '+5512345678901', expected: '+55 12 34567-8901' },
+    { country: 'India', input: '+911234567890', expected: '+91 12345-67890' },
+    { country: 'UnitedArabEmirates', input: '+971123456789', expected: '+971 12 345-6789' },
+    { country: 'SaudiArabia', input: '+966123456789', expected: '+966 1 2345-6789' },
+    { country: 'SouthAfrica', input: '+27123456789', expected: '+27 12 345-6789' },
+    { country: 'Egypt', input: '+201234567890', expected: '+20 12 3456-7890' },
+    { country: 'Iran', input: '+981234567890', expected: '+98 123 456-7890' },
+    { country: 'Ethiopia', input: '+251123456789', expected: '+251 12 345-6789' },
+    { country: 'Romania', input: '+40123456789', expected: '+40 12 345-6789' },
+    { country: 'Serbia', input: '+381123456789', expected: '+381 12 345-6789' },
+    { country: 'Netherlands', input: '+31123456789', expected: '+31 12 345-6789' },
+    { country: 'Azerbaijan', input: '+994123456789', expected: '+994 12 345-67-89' },
+    { country: 'Syria', input: '+963123456789', expected: '+963 12 345-6789' },
+    { country: 'Cyprus', input: '+35712345678', expected: '+357 12 345678' },
+    { country: 'Uzbekistan', input: '+998123456789', expected: '+998 12 345-67-89' },
+    { country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
+    { country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
+];

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

@@ -0,0 +1 @@
+import './matchMedia';

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

@@ -0,0 +1,12 @@
+import './matchMedia';
+import { describe, expect, it } from 'vitest';
+import { ALL_COUNTRY_CODES } from '../countries';
+import { formatPhoneNumber } from '../utils';
+import { phoneFormatCases } from './constants';
+describe('Checking the mask overlay for each number', () => {
+    phoneFormatCases.forEach(({ country, input, expected }) => {
+        it(`should format the number correctly for ${country}`, () => {
+            expect(formatPhoneNumber(input, ALL_COUNTRY_CODES)).toBe(expected);
+        });
+    });
+});

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

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

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

@@ -0,0 +1,14 @@
+import { vi } from 'vitest';
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});

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

@@ -0,0 +1 @@
+export declare const PLACEHOLDER_CHAR = "_";

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

@@ -0,0 +1 @@
+export const PLACEHOLDER_CHAR = '_';