@alfalab/core-components 47.7.0 → 47.9.0

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

@@ -4,7 +4,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     country?: import("./types").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
-    clearableCountryCode?: boolean | undefined;
+    clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
@@ -23,7 +23,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     country?: import("./types").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
-    clearableCountryCode?: boolean | undefined;
+    clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;

package/international-phone-input/esm/components/base-international-phone-input/Component.d.ts

@@ -6,7 +6,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     country?: Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
-    clearableCountryCode?: boolean | undefined;
+    clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-9d430401").OptionShape) => boolean) | undefined;

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

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/esm/shared';
-import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData } from '../../utils/index.js';
+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';
@@ -16,19 +16,19 @@ import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import '@alfalab/hooks';
 
-var styles = {"component":"international-phone-input__component_1uun8","addons":"international-phone-input__addons_1uun8"};
+var styles = {"component":"international-phone-input__component_8f37t","addons":"international-phone-input__addons_8f37t"};
 require('./index.css');
 
 var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
-    var clearableCountryCode = _a.clearableCountryCode, 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, _b = _a.size, size = _b === void 0 ? 56 : _b, 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 _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 countriesData = useMemo(function () { return initCountries(countries); }, [countries]);
     var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
-    var _c = useState(defaultOpen), open = _c[0], setOpen = _c[1];
-    var _d = useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
-    var _e = useState(function () {
+    var _d = useState(defaultOpen), open = _d[0], setOpen = _d[1];
+    var _e = useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
+    var _f = useState(function () {
         return findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _e[0], setSelectedCountry = _e[1];
+    }), selectedCountry = _f[0], setSelectedCountry = _f[1];
     var filteredOptions = filterPhones(value, options, filterFn);
     var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
     var handleCountryChange = function (nextCountry) {
@@ -36,7 +36,9 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
             setSelectedCountry(nextCountry);
         onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
     };
-    var maskOptions = useMemo(function () { return createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
+    var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
+    var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
+    var maskOptions = useMemo(function () { return createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
         onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -53,7 +55,7 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
         var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
         handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         if (nextCountry) {
-            changeNumber("+".concat(nextCountry.dialCode));
+            changeNumber(getInitialValueFromCountry(nextCountry.countryCode));
         }
         requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
@@ -61,8 +63,9 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
         var _a;
         updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions));
     };
-    var handleInput = function (e) {
-        updatePhoneData(e.target.value);
+    var handleInput = function (_a) {
+        var inputValue = _a.target.value;
+        updatePhoneData(inputValue);
     };
     var handleClear = function (event) {
         var _a, _b;
@@ -73,7 +76,7 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
             handleCountryChange(nextCountry);
         }
         else {
-            changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+            changeNumber(country ? getInitialValueFromCountry(country.countryCode) : '');
         }
     };
     useEffect(function () {

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

@@ -1,5 +1,5 @@
 /* hash: 1dyhg */
 
-    .international-phone-input__component_1uun8 .international-phone-input__addons_1uun8 {
+    .international-phone-input__component_8f37t .international-phone-input__addons_8f37t {
         padding-left: 0;
     }

package/international-phone-input/esm/components/country-select/Component.js

@@ -10,7 +10,7 @@ import '../flag-icon/flagSprite.js';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 
-var styles = {"component":"international-phone-input__component_27zug","option":"international-phone-input__option_27zug","flag":"international-phone-input__flag_27zug","countryName":"international-phone-input__countryName_27zug","dialCode":"international-phone-input__dialCode_27zug","flagIconWrapper":"international-phone-input__flagIconWrapper_27zug","emptyCountryIcon":"international-phone-input__emptyCountryIcon_27zug"};
+var styles = {"component":"international-phone-input__component_qsz78","option":"international-phone-input__option_qsz78","flag":"international-phone-input__flag_qsz78","countryName":"international-phone-input__countryName_qsz78","dialCode":"international-phone-input__dialCode_qsz78","flagIconWrapper":"international-phone-input__flagIconWrapper_qsz78","emptyCountryIcon":"international-phone-input__emptyCountryIcon_qsz78"};
 require('./index.css');
 
 var CountrySelect = function (_a) {

package/international-phone-input/esm/components/country-select/index.css

@@ -22,29 +22,29 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .international-phone-input__component_27zug {
+} .international-phone-input__component_qsz78 {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_27zug {
+} .international-phone-input__option_qsz78 {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_27zug {
+} .international-phone-input__flag_qsz78 {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_27zug {
+} .international-phone-input__countryName_qsz78 {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_27zug {
+} .international-phone-input__dialCode_qsz78 {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_27zug {
+} .international-phone-input__flagIconWrapper_qsz78 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_27zug {
+} .international-phone-input__emptyCountryIcon_qsz78 {
     color: var(--color-light-neutral-translucent-700);
 }

package/international-phone-input/esm/components/flag-icon/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-var styles = {"flagIcon":"international-phone-input__flagIcon_3vi7f","flagPlaceholder":"international-phone-input__flagPlaceholder_3vi7f"};
+var styles = {"flagIcon":"international-phone-input__flagIcon_arcq0","flagPlaceholder":"international-phone-input__flagPlaceholder_arcq0"};
 require('./index.css');
 
 /**

package/international-phone-input/esm/components/flag-icon/index.css

@@ -21,10 +21,10 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .international-phone-input__flagIcon_3vi7f {
+} .international-phone-input__flagIcon_arcq0 {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_3vi7f {
+} .international-phone-input__flagPlaceholder_arcq0 {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/international-phone-input/esm/components/select-field/component.js

@@ -7,7 +7,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';
 
-var styles = {"component":"international-phone-input__component_arbyk","flagIconContainer":"international-phone-input__flagIconContainer_arbyk","emptyCountryIcon":"international-phone-input__emptyCountryIcon_arbyk","disabled":"international-phone-input__disabled_arbyk","inner":"international-phone-input__inner_arbyk","size-64":"international-phone-input__size-64_arbyk","size-72":"international-phone-input__size-72_arbyk","focusVisible":"international-phone-input__focusVisible_arbyk"};
+var styles = {"component":"international-phone-input__component_14gbh","flagIconContainer":"international-phone-input__flagIconContainer_14gbh","emptyCountryIcon":"international-phone-input__emptyCountryIcon_14gbh","disabled":"international-phone-input__disabled_14gbh","inner":"international-phone-input__inner_14gbh","size-64":"international-phone-input__size-64_14gbh","size-72":"international-phone-input__size-72_14gbh","focusVisible":"international-phone-input__focusVisible_14gbh"};
 require('./index.css');
 
 var EMPTY_COUNTRY_SELECT_FIELD = {

package/international-phone-input/esm/components/select-field/index.css

@@ -25,33 +25,33 @@
 } :root {
     --focus-color: var(--color-light-status-info);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_arbyk {
+} .international-phone-input__component_14gbh {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_arbyk {
+} .international-phone-input__flagIconContainer_14gbh {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_arbyk {
+} .international-phone-input__emptyCountryIcon_14gbh {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_arbyk {
+} .international-phone-input__disabled_14gbh {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_arbyk {
+} .international-phone-input__inner_14gbh {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__size-64_arbyk .international-phone-input__inner_arbyk,
-.international-phone-input__size-72_arbyk .international-phone-input__inner_arbyk {
+} .international-phone-input__size-64_14gbh .international-phone-input__inner_14gbh,
+.international-phone-input__size-72_14gbh .international-phone-input__inner_14gbh {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_arbyk {
+} .international-phone-input__focusVisible_14gbh {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from 'tslib';
+import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { InputDesktop } from '../../../input/esm/desktop';
 import { InputAutocompleteDesktop } from '../../../input-autocomplete/esm/desktop';
@@ -20,9 +20,6 @@ import '../components/flag-icon/flagSprite.js';
 import '../components/select-field/component.js';
 import '@alfalab/hooks';
 
-var InternationalPhoneInputDesktop = forwardRef(function (_a, ref) {
-    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["value", "clearableCountryCode"]);
-    return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop })));
-});
+var InternationalPhoneInputDesktop = forwardRef(function (props, ref) { return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: props.value }, props, { view: 'desktop', ref: ref, SelectComponent: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop }))); });
 
 export { InternationalPhoneInputDesktop };

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from 'tslib';
+import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { InputMobile } from '../../../input/esm/mobile';
 import { InputAutocompleteMobile } from '../../../input-autocomplete/esm/mobile';
@@ -20,9 +20,6 @@ import '../components/flag-icon/flagSprite.js';
 import '../components/select-field/component.js';
 import '@alfalab/hooks';
 
-var InternationalPhoneInputMobile = forwardRef(function (_a, ref) {
-    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["value", "clearableCountryCode"]);
-    return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile })));
-});
+var InternationalPhoneInputMobile = forwardRef(function (props, ref) { return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: props.value }, props, { view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile }))); });
 
 export { InternationalPhoneInputMobile };

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

@@ -36,8 +36,10 @@ type CommonPhoneInputProps = {
     defaultIso2?: string;
     /**
      * Возможность стереть код страны
+     * @default true
+     * @description Используйте `'preserve'` для сохранения кода страны при автозаполнении (актуально для Safari). При этом код страны можно удалить в случае использования `true`
      */
-    clearableCountryCode?: boolean;
+    clearableCountryCode?: boolean | 'preserve';
     /**
      *  Свойства селекта выбора стран
      */

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

@@ -6,8 +6,8 @@ declare function initCountries(iso2s?: string[]): Country[][];
 declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
 declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
 declare function clearMask(value: string): string;
-declare function createPhoneMaskExpression(country?: Country, clearableCountryCode?: boolean): Array<RegExp | string>;
-declare function createMaskOptions(country?: Country, clearableCountryCode?: boolean): MaskitoOptions;
+declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): 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): {
@@ -70,4 +70,5 @@ declare function getInternationalPhoneInputMobileTestIds(dataTestId: string): {
     searchError: string;
     searchHint: string;
 };
-export { initCountries, findCountry, guessCountry, clearMask, createPhoneMaskExpression, createMaskOptions, filterPhones, getPhoneData, getClear, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds };
+declare function getInitialValueFromCountry(countryCode: string): string;
+export { initCountries, findCountry, guessCountry, clearMask, createPhoneMaskExpression, createMaskOptions, filterPhones, getPhoneData, getClear, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds, getInitialValueFromCountry };

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

@@ -113,19 +113,20 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         '+'
     ], (clearableCountryCode ? countryCode.split('').map(function () { return /\d/; }) : countryCode.split('')), true), [
         ' '
-    ], false), format.split('').map(function (item) { return (item === '.' ? /\d/ : item); }), true);
+    ], false), format.split('').map(itemToMask), true);
 }
-function createMaskOptions(country, clearableCountryCode) {
-    var prefixLen = !clearableCountryCode && (country === null || country === void 0 ? void 0 : country.countryCode) ? country.countryCode.length + 1 : 0;
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
+    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);
     return {
         mask: mask,
         preprocessors: [
-            maskUtils.insertionPhonePreprocessor(mask, country === null || country === void 0 ? void 0 : country.countryCode, clearableCountryCode),
-        ],
-        postprocessors: [
-            maskUtils.prefixPostprocessor(prefixLen ? "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) : ''),
+            maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+            maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
         ],
+        postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             maskUtils.caretGuard(function (value, _a) {
                 var from = _a[0], to = _a[1];
@@ -244,5 +245,8 @@ function getInternationalPhoneInputMobileTestIds(dataTestId) {
         searchHint: getDataTestId(dataTestId, 'search-form-control-hint'),
     };
 }
+function getInitialValueFromCountry(countryCode) {
+    return "+".concat(countryCode);
+}
 
-export { clearMask, createMaskOptions, createPhoneMaskExpression, filterPhones, findCountry, getClear, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds, getPhoneData, guessCountry, initCountries };
+export { clearMask, createMaskOptions, createPhoneMaskExpression, filterPhones, findCountry, getClear, getInitialValueFromCountry, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds, getPhoneData, guessCountry, initCountries };

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

@@ -11,9 +11,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var InternationalPhoneInputMobile = React.forwardRef(function (_a, ref) {
-    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
-    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'mobile', ref: ref, SelectComponent: mobile.SelectMobile, Input: mobile$1.InputMobile, InputAutocomplete: mobile$2.InputAutocompleteMobile })));
-});
+var InternationalPhoneInputMobile = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: props.value }, props, { view: 'mobile', ref: ref, SelectComponent: mobile.SelectMobile, Input: mobile$1.InputMobile, InputAutocomplete: mobile$2.InputAutocompleteMobile }))); });
 
 exports.InternationalPhoneInputMobile = InternationalPhoneInputMobile;

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

@@ -4,7 +4,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     country?: import("./types").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
-    clearableCountryCode?: boolean | undefined;
+    clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
@@ -23,7 +23,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     country?: import("./types").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
-    clearableCountryCode?: boolean | undefined;
+    clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;

package/international-phone-input/modern/components/base-international-phone-input/Component.d.ts

@@ -6,7 +6,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     country?: Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
-    clearableCountryCode?: boolean | undefined;
+    clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-9d430401").OptionShape) => boolean) | undefined;

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

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/modern/shared';
-import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData } from '../../utils/index.js';
+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';
@@ -15,10 +15,10 @@ import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import '@alfalab/hooks';
 
-const styles = {"component":"international-phone-input__component_1uun8","addons":"international-phone-input__addons_1uun8"};
+const styles = {"component":"international-phone-input__component_8f37t","addons":"international-phone-input__addons_8f37t"};
 require('./index.css');
 
-const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, 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 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 countriesData = useMemo(() => initCountries(countries), [countries]);
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
@@ -32,7 +32,9 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
             setSelectedCountry(nextCountry);
         onCountryChange?.(nextCountry);
     };
-    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode), [country, clearableCountryCode]);
+    const preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
+    const clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode), [country, clearableCountryCode, preserveCountryCode]);
     const maskRef = useMaskito({ options: maskOptions });
     const changeNumber = (phone) => {
         onChange?.(phone);
@@ -48,15 +50,15 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
         const nextCountry = selected?.value;
         handleCountryChange?.(nextCountry);
         if (nextCountry) {
-            changeNumber(`+${nextCountry.dialCode}`);
+            changeNumber(getInitialValueFromCountry(nextCountry.countryCode));
         }
         requestAnimationFrame(() => inputRef.current?.focus());
     };
     const handleOptionSelect = (payload) => {
         updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : payload.selected?.key || '', maskOptions));
     };
-    const handleInput = (e) => {
-        updatePhoneData(e.target.value);
+    const handleInput = ({ target: { value: inputValue } }) => {
+        updatePhoneData(inputValue);
     };
     const handleClear = (event) => {
         restProps.inputProps?.onClear?.(event);
@@ -66,7 +68,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
             handleCountryChange(nextCountry);
         }
         else {
-            changeNumber(`+${country?.countryCode}` || '');
+            changeNumber(country ? getInitialValueFromCountry(country.countryCode) : '');
         }
     };
     useEffect(() => {

package/international-phone-input/modern/components/base-international-phone-input/index.css

@@ -1,5 +1,5 @@
 /* hash: 1dyhg */
 
-    .international-phone-input__component_1uun8 .international-phone-input__addons_1uun8 {
+    .international-phone-input__component_8f37t .international-phone-input__addons_8f37t {
         padding-left: 0;
     }

package/international-phone-input/modern/components/country-select/Component.js

@@ -9,7 +9,7 @@ import '../flag-icon/flagSprite.js';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 
-const styles = {"component":"international-phone-input__component_27zug","option":"international-phone-input__option_27zug","flag":"international-phone-input__flag_27zug","countryName":"international-phone-input__countryName_27zug","dialCode":"international-phone-input__dialCode_27zug","flagIconWrapper":"international-phone-input__flagIconWrapper_27zug","emptyCountryIcon":"international-phone-input__emptyCountryIcon_27zug"};
+const styles = {"component":"international-phone-input__component_qsz78","option":"international-phone-input__option_qsz78","flag":"international-phone-input__flag_qsz78","countryName":"international-phone-input__countryName_qsz78","dialCode":"international-phone-input__dialCode_qsz78","flagIconWrapper":"international-phone-input__flagIconWrapper_qsz78","emptyCountryIcon":"international-phone-input__emptyCountryIcon_qsz78"};
 require('./index.css');
 
 const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {

package/international-phone-input/modern/components/country-select/index.css

@@ -22,29 +22,29 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .international-phone-input__component_27zug {
+} .international-phone-input__component_qsz78 {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_27zug {
+} .international-phone-input__option_qsz78 {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_27zug {
+} .international-phone-input__flag_qsz78 {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_27zug {
+} .international-phone-input__countryName_qsz78 {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_27zug {
+} .international-phone-input__dialCode_qsz78 {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_27zug {
+} .international-phone-input__flagIconWrapper_qsz78 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_27zug {
+} .international-phone-input__emptyCountryIcon_qsz78 {
     color: var(--color-light-neutral-translucent-700);
 }

package/international-phone-input/modern/components/flag-icon/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-const styles = {"flagIcon":"international-phone-input__flagIcon_3vi7f","flagPlaceholder":"international-phone-input__flagPlaceholder_3vi7f"};
+const styles = {"flagIcon":"international-phone-input__flagIcon_arcq0","flagPlaceholder":"international-phone-input__flagPlaceholder_arcq0"};
 require('./index.css');
 
 /**

package/international-phone-input/modern/components/flag-icon/index.css

@@ -21,10 +21,10 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .international-phone-input__flagIcon_3vi7f {
+} .international-phone-input__flagIcon_arcq0 {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_3vi7f {
+} .international-phone-input__flagPlaceholder_arcq0 {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/international-phone-input/modern/components/select-field/component.js

@@ -6,7 +6,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';
 
-const styles = {"component":"international-phone-input__component_arbyk","flagIconContainer":"international-phone-input__flagIconContainer_arbyk","emptyCountryIcon":"international-phone-input__emptyCountryIcon_arbyk","disabled":"international-phone-input__disabled_arbyk","inner":"international-phone-input__inner_arbyk","size-64":"international-phone-input__size-64_arbyk","size-72":"international-phone-input__size-72_arbyk","focusVisible":"international-phone-input__focusVisible_arbyk"};
+const styles = {"component":"international-phone-input__component_14gbh","flagIconContainer":"international-phone-input__flagIconContainer_14gbh","emptyCountryIcon":"international-phone-input__emptyCountryIcon_14gbh","disabled":"international-phone-input__disabled_14gbh","inner":"international-phone-input__inner_14gbh","size-64":"international-phone-input__size-64_14gbh","size-72":"international-phone-input__size-72_14gbh","focusVisible":"international-phone-input__focusVisible_14gbh"};
 require('./index.css');
 
 const EMPTY_COUNTRY_SELECT_FIELD = {

package/international-phone-input/modern/components/select-field/index.css

@@ -25,33 +25,33 @@
 } :root {
     --focus-color: var(--color-light-status-info);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_arbyk {
+} .international-phone-input__component_14gbh {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_arbyk {
+} .international-phone-input__flagIconContainer_14gbh {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_arbyk {
+} .international-phone-input__emptyCountryIcon_14gbh {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_arbyk {
+} .international-phone-input__disabled_14gbh {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_arbyk {
+} .international-phone-input__inner_14gbh {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__size-64_arbyk .international-phone-input__inner_arbyk,
-.international-phone-input__size-72_arbyk .international-phone-input__inner_arbyk {
+} .international-phone-input__size-64_14gbh .international-phone-input__inner_14gbh,
+.international-phone-input__size-72_14gbh .international-phone-input__inner_14gbh {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_arbyk {
+} .international-phone-input__focusVisible_14gbh {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

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

@@ -19,6 +19,6 @@ import '../components/flag-icon/flagSprite.js';
 import '../components/select-field/component.js';
 import '@alfalab/hooks';
 
-const InternationalPhoneInputDesktop = forwardRef(({ value, clearableCountryCode = true, ...restProps }, ref) => (React.createElement(BaseInternationalPhoneInput, { selected: value, ...restProps, clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop })));
+const InternationalPhoneInputDesktop = forwardRef((props, ref) => (React.createElement(BaseInternationalPhoneInput, { selected: props.value, ...props, view: 'desktop', ref: ref, SelectComponent: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop })));
 
 export { InternationalPhoneInputDesktop };

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

@@ -19,6 +19,6 @@ import '../components/flag-icon/flagSprite.js';
 import '../components/select-field/component.js';
 import '@alfalab/hooks';
 
-const InternationalPhoneInputMobile = forwardRef(({ value, clearableCountryCode = true, ...restProps }, ref) => (React.createElement(BaseInternationalPhoneInput, { selected: value, ...restProps, clearableCountryCode: clearableCountryCode, value: value, view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile })));
+const InternationalPhoneInputMobile = forwardRef((props, ref) => (React.createElement(BaseInternationalPhoneInput, { selected: props.value, ...props, view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile })));
 
 export { InternationalPhoneInputMobile };