@alfalab/core-components 48.11.0 → 48.12.0-beta.0

package/international-phone-input/components/base-international-phone-input/Component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var core = require('@maskito/core');
 var react = require('@maskito/react');
 var shared = require('../../../select/shared');
+var coreComponentsShared = require('../../../shared');
 var utils_index = require('../../utils/index.js');
 var components_countrySelect_Component = require('../country-select/Component.js');
 
@@ -19,6 +20,7 @@ require('./index.css');
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCodeFromProps = _b === void 0 ? true : _b, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _c = _a.size, size = _c === void 0 ? 56 : _c, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
+    var lastCountryRef = React.useRef(null);
     var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
@@ -36,7 +38,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     };
     var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
+    var maskOptions = React.useMemo(function () {
+        return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef);
+    }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
         onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -118,6 +122,12 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
     };
     var inputProps = tslib.__assign({ className: styles.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
+    React.useEffect(function () {
+        if (!preserveCountryCode || coreComponentsShared.isNullable(country)) {
+            return;
+        }
+        lastCountryRef.current = country;
+    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 

package/international-phone-input/cssm/Component.responsive.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
 declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -21,14 +21,14 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 }) | ({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;

package/international-phone-input/cssm/components/base-international-phone-input/Component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var core = require('@maskito/core');
 var react = require('@maskito/react');
 var shared = require('../../../../select/cssm/shared');
+var coreComponentsShared = require('../../../../shared/cssm');
 var utils_index = require('../../utils/index.js');
 var components_countrySelect_Component = require('../country-select/Component.js');
 var styles = require('./index.module.css');
@@ -18,6 +19,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCodeFromProps = _b === void 0 ? true : _b, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _c = _a.size, size = _c === void 0 ? 56 : _c, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
+    var lastCountryRef = React.useRef(null);
     var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
@@ -35,7 +37,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     };
     var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
+    var maskOptions = React.useMemo(function () {
+        return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef);
+    }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
         onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -117,6 +121,12 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
     };
     var inputProps = tslib.__assign({ className: styles__default.default.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles__default.default.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
+    React.useEffect(function () {
+        if (!preserveCountryCode || coreComponentsShared.isNullable(country)) {
+            return;
+        }
+        lastCountryRef.current = country;
+    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 

package/{system-message/cssm/index-064acd29.d.ts → international-phone-input/cssm/index-464d40a4.d.ts}

@@ -10,4 +10,14 @@ type PaddingType = number | string | {
     left?: number;
 };
 type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType };
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/international-phone-input/cssm/types.d.ts

@@ -6,17 +6,8 @@ import { InputAutocompleteProps } from "../../input-autocomplete";
 import { InputAutocompleteDesktopProps } from "../../input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "../../input-autocomplete/mobile";
 import { OptionShape } from "./typings-d515b24c";
+import { Country } from "./index-464d40a4";
 import { SharedCountrySelectProps } from "./components/country-select/index";
-type Country = {
-    name: string;
-    regions?: string[];
-    iso2: string;
-    countryCode: string;
-    dialCode: string;
-    format?: string;
-    priority: number;
-    mainCode?: boolean;
-};
 type AreaItem = Country & {
     isAreaCode: boolean;
     areaCodeLength: number;

package/international-phone-input/cssm/typings-d515b24c.d.ts

@@ -5,6 +5,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttribute
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
+import { BackgroundColorType } from "./index-464d40a4";
 import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
@@ -175,7 +176,6 @@ type NavigationBarPrivateProps = {
     scrollableParentRef?: React.RefObject<HTMLDivElement>;
 };
 type NavigationBarProps = NavigationBarPrivateProps;
-type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = "center" | "left";
 type BottomSheetProps = {
     /**

package/international-phone-input/cssm/utils/index.d.ts

@@ -1,13 +1,14 @@
+import { RefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "../../../input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "../../../select/shared";
 import { Country } from "../types";
 declare function initCountries(iso2s?: string[]): Country[][];
-declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
+declare function findCountry(countries: Country[][], value: string | undefined, iso2: string | undefined, country?: Country): Country | undefined;
 declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
 declare function clearMask(value: string): string;
 declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
-declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
 declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
 declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
 declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {

package/international-phone-input/cssm/utils/index.js

@@ -117,17 +117,23 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ' '
     ], false), format.split('').map(itemToMask), true);
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
     var countryCode = country === null || country === void 0 ? void 0 : country.countryCode;
     var prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
     var prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
     var mask = createPhoneMaskExpression(country, clearableCountryCode);
+    var preprocessors = [
+        coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    ];
+    if (preserveCountryCode) {
+        var createMask = function (lastCountry) {
+            return createPhoneMaskExpression(lastCountry, clearableCountryCode);
+        };
+        preprocessors.push(coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+    }
     return {
         mask: mask,
-        preprocessors: [
-            coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
-            coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
-        ],
+        preprocessors: preprocessors,
         postprocessors: [coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             coreComponentsShared.maskUtils.caretGuard(function (value, _a) {

package/international-phone-input/esm/Component.responsive.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
 declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -21,14 +21,14 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 }) | ({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;

package/international-phone-input/esm/Component.responsive.js

@@ -11,8 +11,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/esm/shared';
-import './utils/index.js';
 import '../../shared/esm';
+import './utils/index.js';
 import './consts.js';
 import './data/country-data.js';
 import './components/country-select/Component.js';

package/international-phone-input/esm/components/base-international-phone-input/Component.js

@@ -1,12 +1,12 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/esm/shared';
+import { isNullable } from '../../../../shared/esm';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData, getInitialValueFromCountry } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
-import '../../../../shared/esm';
 import '../../consts.js';
 import '../../data/country-data.js';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
@@ -21,6 +21,7 @@ require('./index.css');
 
 var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCodeFromProps = _b === void 0 ? true : _b, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _c = _a.size, size = _c === void 0 ? 56 : _c, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = __rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
+    var lastCountryRef = useRef(null);
     var countriesData = useMemo(function () { return initCountries(countries); }, [countries]);
     var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
@@ -38,7 +39,9 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     };
     var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    var maskOptions = useMemo(function () { return createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
+    var maskOptions = useMemo(function () {
+        return createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef);
+    }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
         onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -120,6 +123,12 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
         return (React.createElement(CountrySelect, __assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
     };
     var inputProps = __assign({ className: styles.component, ref: mergeRefs([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
+    useEffect(function () {
+        if (!preserveCountryCode || isNullable(country)) {
+            return;
+        }
+        lastCountryRef.current = country;
+    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign(__assign(__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 

package/international-phone-input/esm/components/base-international-phone-input/index.js

@@ -5,8 +5,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../../select/esm/shared';
-import '../../utils/index.js';
 import '../../../../shared/esm';
+import '../../utils/index.js';
 import '../../consts.js';
 import '../../data/country-data.js';
 import '../country-select/Component.js';

package/international-phone-input/esm/desktop/Component.desktop.js

@@ -8,8 +8,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../utils/index.js';
 import '../../../shared/esm';
+import '../utils/index.js';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/desktop/index.js

@@ -9,8 +9,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../utils/index.js';
 import '../../../shared/esm';
+import '../utils/index.js';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/{system-message/esm/index-064acd29.d.ts → international-phone-input/esm/index-464d40a4.d.ts}

@@ -10,4 +10,14 @@ type PaddingType = number | string | {
     left?: number;
 };
 type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType };
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/international-phone-input/esm/index.js

@@ -11,8 +11,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/esm/shared';
-import './utils/index.js';
 import '../../shared/esm';
+import './utils/index.js';
 import './consts.js';
 import './data/country-data.js';
 import './components/country-select/Component.js';

package/international-phone-input/esm/mobile/Component.mobile.js

@@ -8,8 +8,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../utils/index.js';
 import '../../../shared/esm';
+import '../utils/index.js';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/mobile/index.js

@@ -9,8 +9,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../../select/esm/shared';
-import '../utils/index.js';
 import '../../../shared/esm';
+import '../utils/index.js';
 import '../consts.js';
 import '../data/country-data.js';
 import '../components/country-select/Component.js';

package/international-phone-input/esm/types.d.ts

@@ -6,17 +6,8 @@ import { InputAutocompleteProps } from "../../input-autocomplete";
 import { InputAutocompleteDesktopProps } from "../../input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "../../input-autocomplete/mobile";
 import { OptionShape } from "./typings-d515b24c";
+import { Country } from "./index-464d40a4";
 import { SharedCountrySelectProps } from "./components/country-select/index";
-type Country = {
-    name: string;
-    regions?: string[];
-    iso2: string;
-    countryCode: string;
-    dialCode: string;
-    format?: string;
-    priority: number;
-    mainCode?: boolean;
-};
 type AreaItem = Country & {
     isAreaCode: boolean;
     areaCodeLength: number;

package/international-phone-input/esm/typings-d515b24c.d.ts

@@ -5,6 +5,7 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttribute
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
+import { BackgroundColorType } from "./index-464d40a4";
 import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
@@ -175,7 +176,6 @@ type NavigationBarPrivateProps = {
     scrollableParentRef?: React.RefObject<HTMLDivElement>;
 };
 type NavigationBarProps = NavigationBarPrivateProps;
-type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = "center" | "left";
 type BottomSheetProps = {
     /**

package/international-phone-input/esm/utils/index.d.ts

@@ -1,13 +1,14 @@
+import { RefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "../../../input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "../../../select/shared";
 import { Country } from "../types";
 declare function initCountries(iso2s?: string[]): Country[][];
-declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
+declare function findCountry(countries: Country[][], value: string | undefined, iso2: string | undefined, country?: Country): Country | undefined;
 declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
 declare function clearMask(value: string): string;
 declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
-declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
 declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
 declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
 declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {

package/international-phone-input/esm/utils/index.js

@@ -115,17 +115,23 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ' '
     ], false), format.split('').map(itemToMask), true);
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
     var countryCode = country === null || country === void 0 ? void 0 : country.countryCode;
     var prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
     var prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
     var mask = createPhoneMaskExpression(country, clearableCountryCode);
+    var preprocessors = [
+        maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    ];
+    if (preserveCountryCode) {
+        var createMask = function (lastCountry) {
+            return createPhoneMaskExpression(lastCountry, clearableCountryCode);
+        };
+        preprocessors.push(maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+    }
     return {
         mask: mask,
-        preprocessors: [
-            maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
-            maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
-        ],
+        preprocessors: preprocessors,
         postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             maskUtils.caretGuard(function (value, _a) {

package/{system-message/index-064acd29.d.ts → international-phone-input/index-464d40a4.d.ts}

@@ -10,4 +10,14 @@ type PaddingType = number | string | {
     left?: number;
 };
 type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType };
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/international-phone-input/modern/Component.responsive.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
 declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -21,14 +21,14 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 }) | ({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;

package/international-phone-input/modern/Component.responsive.js

@@ -10,8 +10,8 @@ import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/modern/shared';
-import './utils/index.js';
 import '../../shared/modern';
+import './utils/index.js';
 import './consts.js';
 import './data/country-data.js';
 import './components/country-select/Component.js';

package/international-phone-input/modern/components/base-international-phone-input/Component.js

@@ -1,11 +1,11 @@
-import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/modern/shared';
+import { isNullable } from '../../../../shared/modern';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData, getInitialValueFromCountry } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
-import '../../../../shared/modern';
 import '../../consts.js';
 import '../../data/country-data.js';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
@@ -19,6 +19,7 @@ const styles = {"component":"international-phone-input__component_1cwzu","addons
 require('./index.css');
 
 const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearableCountryCodeFromProps = true, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, open: openProps, defaultOpen, ...restProps }, ref) => {
+    const lastCountryRef = useRef(null);
     const countriesData = useMemo(() => initCountries(countries), [countries]);
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
@@ -34,7 +35,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
     };
     const preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     const clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode), [country, clearableCountryCode, preserveCountryCode]);
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef), [country, clearableCountryCode, preserveCountryCode]);
     const maskRef = useMaskito({ options: maskOptions });
     const changeNumber = (phone) => {
         onChange?.(phone);
@@ -114,6 +115,12 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
         clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
         ...restProps.inputProps,
     };
+    useEffect(() => {
+        if (!preserveCountryCode || isNullable(country)) {
+            return;
+        }
+        lastCountryRef.current = country;
+    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
             ...inputProps,
             onClear: handleClear,