@alfalab/core-components 47.7.0 → 47.9.0

package/input-autocomplete/esm/autocomplete-mobile-field/index.css

@@ -22,16 +22,16 @@
 } :root {
     --focus-color: var(--color-light-status-info);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_1rfx9 {
+} .input-autocomplete__component_28f2o {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_1rfx9:not(.input-autocomplete__disabled_1rfx9) {
+} .input-autocomplete__field_28f2o:not(.input-autocomplete__disabled_28f2o) {
     cursor: pointer;
-} .input-autocomplete__disabled_1rfx9 {
+} .input-autocomplete__disabled_28f2o {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_1rfx9 {
+} .input-autocomplete__placeholder_28f2o {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_1rfx9 {
+} .input-autocomplete__contentWrapper_28f2o {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -40,11 +40,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_1rfx9 {
+} .input-autocomplete__value_28f2o {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_1rfx9 {
+} .input-autocomplete__focusVisible_28f2o {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/input-autocomplete/esm/mobile/Component.mobile.js

@@ -13,7 +13,7 @@ import '../../../input/esm/shared';
 import '../../../shared/esm';
 import '@alfalab/hooks';
 
-var styles = {"input":"input-autocomplete__input_18d16"};
+var styles = {"input":"input-autocomplete__input_6ferl"};
 require('./mobile.css');
 
 var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {

package/input-autocomplete/esm/mobile/mobile.css

@@ -18,6 +18,6 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .input-autocomplete__input_18d16 {
+} .input-autocomplete__input_6ferl {
     width: auto;
 }

package/input-autocomplete/mobile/Component.mobile.js

@@ -18,7 +18,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
 
-var styles = {"input":"input-autocomplete__input_18d16"};
+var styles = {"input":"input-autocomplete__input_6ferl"};
 require('./mobile.css');
 
 var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, ref) {

package/input-autocomplete/mobile/mobile.css

@@ -18,6 +18,6 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .input-autocomplete__input_18d16 {
+} .input-autocomplete__input_6ferl {
     width: auto;
 }

package/input-autocomplete/modern/autocomplete-field/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { InputDesktop } from '../../../input/modern/desktop';
 import { OnInputReason } from '../enums.js';
 
-const styles = {"arrow":"input-autocomplete__arrow_3zoce","error":"input-autocomplete__error_3zoce"};
+const styles = {"arrow":"input-autocomplete__arrow_678o6","error":"input-autocomplete__error_678o6"};
 require('./index.css');
 
 const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input = InputDesktop, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, dataTestId, }) => {

package/input-autocomplete/modern/autocomplete-field/index.css

@@ -1,4 +1,4 @@
 /* hash: m5jfv */
-.input-autocomplete__arrow_3zoce.input-autocomplete__error_3zoce ~ * {
+.input-autocomplete__arrow_678o6.input-autocomplete__error_678o6 ~ * {
     display: none;
 }

package/input-autocomplete/modern/autocomplete-mobile-field/Component.js

@@ -5,7 +5,7 @@ import { ClearButton } from '../../../input/modern/shared';
 import { getDataTestId } from '../../../shared/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"input-autocomplete__component_1rfx9","field":"input-autocomplete__field_1rfx9","disabled":"input-autocomplete__disabled_1rfx9","placeholder":"input-autocomplete__placeholder_1rfx9","contentWrapper":"input-autocomplete__contentWrapper_1rfx9","value":"input-autocomplete__value_1rfx9","focusVisible":"input-autocomplete__focusVisible_1rfx9"};
+const styles = {"component":"input-autocomplete__component_28f2o","field":"input-autocomplete__field_28f2o","disabled":"input-autocomplete__disabled_28f2o","placeholder":"input-autocomplete__placeholder_28f2o","contentWrapper":"input-autocomplete__contentWrapper_28f2o","value":"input-autocomplete__value_28f2o","focusVisible":"input-autocomplete__focusVisible_28f2o"};
 require('./index.css');
 
 const AutocompleteMobileField = ({ size = 56, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView = 'inner', placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors = 'default', ...restProps }) => {

package/input-autocomplete/modern/autocomplete-mobile-field/index.css

@@ -22,16 +22,16 @@
 } :root {
     --focus-color: var(--color-light-status-info);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_1rfx9 {
+} .input-autocomplete__component_28f2o {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_1rfx9:not(.input-autocomplete__disabled_1rfx9) {
+} .input-autocomplete__field_28f2o:not(.input-autocomplete__disabled_28f2o) {
     cursor: pointer;
-} .input-autocomplete__disabled_1rfx9 {
+} .input-autocomplete__disabled_28f2o {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_1rfx9 {
+} .input-autocomplete__placeholder_28f2o {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_1rfx9 {
+} .input-autocomplete__contentWrapper_28f2o {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -40,11 +40,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_1rfx9 {
+} .input-autocomplete__value_28f2o {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_1rfx9 {
+} .input-autocomplete__focusVisible_28f2o {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/input-autocomplete/modern/mobile/Component.mobile.js

@@ -12,7 +12,7 @@ import '../../../input/modern/shared';
 import '../../../shared/modern';
 import '@alfalab/hooks';
 
-const styles = {"input":"input-autocomplete__input_18d16"};
+const styles = {"input":"input-autocomplete__input_6ferl"};
 require('./mobile.css');
 
 const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow = null, label, placeholder = '', size = 48, open: openProp, onInput, onOpen, multiple, inputProps, isBottomSheet = true, dataTestId, transitionProps, onCancel, onApply, title, ...restProps }, ref) => {

package/input-autocomplete/modern/mobile/mobile.css

@@ -18,6 +18,6 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .input-autocomplete__input_18d16 {
+} .input-autocomplete__input_6ferl {
     width: auto;
 }

package/international-phone-input/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/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/components/base-international-phone-input/Component.js

@@ -14,19 +14,19 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
-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 = React.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 = tslib.__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 = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
     var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
-    var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
-    var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
-    var _e = React.useState(function () {
+    var _d = React.useState(defaultOpen), open = _d[0], setOpen = _d[1];
+    var _e = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
+    var _f = React.useState(function () {
         return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _e[0], setSelectedCountry = _e[1];
+    }), selectedCountry = _f[0], setSelectedCountry = _f[1];
     var filteredOptions = utils_index.filterPhones(value, options, filterFn);
     var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
     var handleCountryChange = function (nextCountry) {
@@ -34,7 +34,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
             setSelectedCountry(nextCountry);
         onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
     };
-    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
+    var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
+    var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
+    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
         onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -51,7 +53,7 @@ var BaseInternationalPhoneInput = React.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(utils_index.getInitialValueFromCountry(nextCountry.countryCode));
         }
         requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
@@ -59,8 +61,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         var _a;
         updatePhoneData(core.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;
@@ -71,7 +74,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
             handleCountryChange(nextCountry);
         }
         else {
-            changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+            changeNumber(country ? utils_index.getInitialValueFromCountry(country.countryCode) : '');
         }
     };
     React.useEffect(function () {

package/international-phone-input/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/components/country-select/Component.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-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/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/components/flag-icon/component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-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/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/components/select-field/component.js

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-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/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/cssm/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/cssm/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/cssm/components/base-international-phone-input/Component.js

@@ -17,15 +17,15 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var BaseInternationalPhoneInput = React.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 = tslib.__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 = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
     var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
-    var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
-    var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
-    var _e = React.useState(function () {
+    var _d = React.useState(defaultOpen), open = _d[0], setOpen = _d[1];
+    var _e = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
+    var _f = React.useState(function () {
         return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _e[0], setSelectedCountry = _e[1];
+    }), selectedCountry = _f[0], setSelectedCountry = _f[1];
     var filteredOptions = utils_index.filterPhones(value, options, filterFn);
     var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
     var handleCountryChange = function (nextCountry) {
@@ -33,7 +33,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
             setSelectedCountry(nextCountry);
         onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
     };
-    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
+    var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
+    var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
+    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (phone) {
         onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -50,7 +52,7 @@ var BaseInternationalPhoneInput = React.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(utils_index.getInitialValueFromCountry(nextCountry.countryCode));
         }
         requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
@@ -58,8 +60,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         var _a;
         updatePhoneData(core.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;
@@ -70,7 +73,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
             handleCountryChange(nextCountry);
         }
         else {
-            changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+            changeNumber(country ? utils_index.getInitialValueFromCountry(country.countryCode) : '');
         }
     };
     React.useEffect(function () {

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

@@ -11,9 +11,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var InternationalPhoneInputDesktop = 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: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: desktop$1.InputDesktop, InputAutocomplete: desktop$2.InputAutocompleteDesktop })));
-});
+var InternationalPhoneInputDesktop = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: props.value }, props, { view: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: desktop$1.InputDesktop, InputAutocomplete: desktop$2.InputAutocompleteDesktop }))); });
 
 exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;

package/international-phone-input/cssm/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/cssm/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/cssm/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/cssm/utils/index.js

@@ -115,19 +115,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: [
-            coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, country === null || country === void 0 ? void 0 : country.countryCode, clearableCountryCode),
-        ],
-        postprocessors: [
-            coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen ? "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) : ''),
+            coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+            coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
         ],
+        postprocessors: [coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             coreComponentsShared.maskUtils.caretGuard(function (value, _a) {
                 var from = _a[0], to = _a[1];
@@ -246,6 +247,9 @@ function getInternationalPhoneInputMobileTestIds(dataTestId) {
         searchHint: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-hint'),
     };
 }
+function getInitialValueFromCountry(countryCode) {
+    return "+".concat(countryCode);
+}
 
 exports.clearMask = clearMask;
 exports.createMaskOptions = createMaskOptions;
@@ -253,6 +257,7 @@ exports.createPhoneMaskExpression = createPhoneMaskExpression;
 exports.filterPhones = filterPhones;
 exports.findCountry = findCountry;
 exports.getClear = getClear;
+exports.getInitialValueFromCountry = getInitialValueFromCountry;
 exports.getInternationalPhoneInputDesktopTestIds = getInternationalPhoneInputDesktopTestIds;
 exports.getInternationalPhoneInputMobileTestIds = getInternationalPhoneInputMobileTestIds;
 exports.getPhoneData = getPhoneData;

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

@@ -11,9 +11,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var InternationalPhoneInputDesktop = 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: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: desktop$1.InputDesktop, InputAutocomplete: desktop$2.InputAutocompleteDesktop })));
-});
+var InternationalPhoneInputDesktop = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: props.value }, props, { view: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: desktop$1.InputDesktop, InputAutocomplete: desktop$2.InputAutocompleteDesktop }))); });
 
 exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;