@alfalab/core-components-international-phone-input 2.0.23 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/Component.responsive.d.ts +2 -2
  2. package/components/base-international-phone-input/Component.d.ts +1 -1
  3. package/components/base-international-phone-input/Component.js +14 -11
  4. package/components/base-international-phone-input/index.css +2 -2
  5. package/components/country-select/Component.js +1 -1
  6. package/components/country-select/index.css +11 -9
  7. package/components/flag-icon/component.js +1 -1
  8. package/components/flag-icon/index.css +6 -4
  9. package/components/select-field/component.js +1 -1
  10. package/components/select-field/index.css +12 -10
  11. package/cssm/Component.responsive.d.ts +2 -2
  12. package/cssm/components/base-international-phone-input/Component.d.ts +1 -1
  13. package/cssm/components/base-international-phone-input/Component.js +13 -10
  14. package/cssm/components/country-select/index.module.css +3 -1
  15. package/cssm/components/flag-icon/index.module.css +3 -1
  16. package/cssm/components/select-field/index.module.css +3 -1
  17. package/cssm/desktop/Component.desktop.js +1 -4
  18. package/cssm/mobile/Component.mobile.js +1 -4
  19. package/cssm/types.d.ts +3 -1
  20. package/cssm/utils/index.d.ts +4 -3
  21. package/cssm/utils/index.js +12 -7
  22. package/desktop/Component.desktop.js +1 -4
  23. package/esm/Component.responsive.d.ts +2 -2
  24. package/esm/components/base-international-phone-input/Component.d.ts +1 -1
  25. package/esm/components/base-international-phone-input/Component.js +15 -12
  26. package/esm/components/base-international-phone-input/index.css +2 -2
  27. package/esm/components/country-select/Component.js +1 -1
  28. package/esm/components/country-select/index.css +11 -9
  29. package/esm/components/flag-icon/component.js +1 -1
  30. package/esm/components/flag-icon/index.css +6 -4
  31. package/esm/components/select-field/component.js +1 -1
  32. package/esm/components/select-field/index.css +12 -10
  33. package/esm/desktop/Component.desktop.js +2 -5
  34. package/esm/mobile/Component.mobile.js +2 -5
  35. package/esm/types.d.ts +3 -1
  36. package/esm/utils/index.d.ts +4 -3
  37. package/esm/utils/index.js +12 -8
  38. package/mobile/Component.mobile.js +1 -4
  39. package/modern/Component.responsive.d.ts +2 -2
  40. package/modern/components/base-international-phone-input/Component.d.ts +1 -1
  41. package/modern/components/base-international-phone-input/Component.js +10 -8
  42. package/modern/components/base-international-phone-input/index.css +2 -2
  43. package/modern/components/country-select/Component.js +1 -1
  44. package/modern/components/country-select/index.css +11 -9
  45. package/modern/components/flag-icon/component.js +1 -1
  46. package/modern/components/flag-icon/index.css +6 -4
  47. package/modern/components/select-field/component.js +1 -1
  48. package/modern/components/select-field/index.css +12 -10
  49. package/modern/desktop/Component.desktop.js +1 -1
  50. package/modern/mobile/Component.mobile.js +1 -1
  51. package/modern/types.d.ts +3 -1
  52. package/modern/utils/index.d.ts +4 -3
  53. package/modern/utils/index.js +12 -8
  54. package/package.json +6 -6
  55. package/src/components/base-international-phone-input/Component.tsx +10 -7
  56. package/src/desktop/Component.desktop.tsx +3 -5
  57. package/src/mobile/Component.mobile.tsx +3 -5
  58. package/src/types.ts +3 -1
  59. package/src/utils/index.ts +16 -12
  60. package/types.d.ts +3 -1
  61. package/utils/index.d.ts +4 -3
  62. package/utils/index.js +12 -7
package/Component.responsive.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
4
4
  country?: import("./types").Country | undefined;
5
5
  countries?: string[] | undefined;
6
6
  defaultIso2?: string | undefined;
7
- clearableCountryCode?: boolean | undefined;
7
+ clearableCountryCode?: boolean | "preserve" | undefined;
8
8
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
9
9
  clear?: boolean | undefined;
10
10
  filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
@@ -23,7 +23,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
23
23
  country?: import("./types").Country | undefined;
24
24
  countries?: string[] | undefined;
25
25
  defaultIso2?: string | undefined;
26
- clearableCountryCode?: boolean | undefined;
26
+ clearableCountryCode?: boolean | "preserve" | undefined;
27
27
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
28
28
  clear?: boolean | undefined;
29
29
  filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
package/components/base-international-phone-input/Component.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
6
6
  country?: Country | undefined;
7
7
  countries?: string[] | undefined;
8
8
  defaultIso2?: string | undefined;
9
- clearableCountryCode?: boolean | undefined;
9
+ clearableCountryCode?: boolean | "preserve" | undefined;
10
10
  countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
11
11
  clear?: boolean | undefined;
12
12
  filterFn?: ((value: string | undefined, option: import("../../typings-9d430401").OptionShape) => boolean) | undefined;
package/components/base-international-phone-input/Component.js CHANGED
@@ -16,19 +16,19 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
16
16
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
17
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
18
18
 
19
- var styles = {"component":"international-phone-input__component_1h0zf","addons":"international-phone-input__addons_1h0zf"};
19
+ var styles = {"component":"international-phone-input__component_8f37t","addons":"international-phone-input__addons_8f37t"};
20
20
  require('./index.css')
21
21
 
22
22
  var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
23
- 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"]);
23
+ 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"]);
24
24
  var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
25
25
  var inputRef = React.useRef(null);
26
26
  var inputWrapperRef = React.useRef(null);
27
- var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
28
- var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
29
- var _e = React.useState(function () {
27
+ var _d = React.useState(defaultOpen), open = _d[0], setOpen = _d[1];
28
+ var _e = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
29
+ var _f = React.useState(function () {
30
30
  return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
31
- }), selectedCountry = _e[0], setSelectedCountry = _e[1];
31
+ }), selectedCountry = _f[0], setSelectedCountry = _f[1];
32
32
  var filteredOptions = utils_index.filterPhones(value, options, filterFn);
33
33
  var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
34
34
  var handleCountryChange = function (nextCountry) {
@@ -36,7 +36,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
36
36
  setSelectedCountry(nextCountry);
37
37
  onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
38
38
  };
39
- var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
39
+ var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
40
+ var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
41
+ var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
40
42
  var maskRef = react.useMaskito({ options: maskOptions });
41
43
  var changeNumber = function (phone) {
42
44
  onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -53,7 +55,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
53
55
  var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
54
56
  handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
55
57
  if (nextCountry) {
56
- changeNumber("+".concat(nextCountry.dialCode));
58
+ changeNumber(utils_index.getInitialValueFromCountry(nextCountry.countryCode));
57
59
  }
58
60
  requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
59
61
  };
@@ -61,8 +63,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
61
63
  var _a;
62
64
  updatePhoneData(core.maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions));
63
65
  };
64
- var handleInput = function (e) {
65
- updatePhoneData(e.target.value);
66
+ var handleInput = function (_a) {
67
+ var inputValue = _a.target.value;
68
+ updatePhoneData(inputValue);
66
69
  };
67
70
  var handleClear = function (event) {
68
71
  var _a, _b;
@@ -73,7 +76,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
73
76
  handleCountryChange(nextCountry);
74
77
  }
75
78
  else {
76
- changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
79
+ changeNumber(country ? utils_index.getInitialValueFromCountry(country.countryCode) : '');
77
80
  }
78
81
  };
79
82
  React.useEffect(function () {
package/components/base-international-phone-input/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 1nn4u */
1
+ /* hash: 1dyhg */
2
2
 
3
- .international-phone-input__component_1h0zf .international-phone-input__addons_1h0zf {
3
+ .international-phone-input__component_8f37t .international-phone-input__addons_8f37t {
4
4
  padding-left: 0;
5
5
  }
package/components/country-select/Component.js CHANGED
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
14
 
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
 
17
- var styles = {"component":"international-phone-input__component_18cet","option":"international-phone-input__option_18cet","flag":"international-phone-input__flag_18cet","countryName":"international-phone-input__countryName_18cet","dialCode":"international-phone-input__dialCode_18cet","flagIconWrapper":"international-phone-input__flagIconWrapper_18cet","emptyCountryIcon":"international-phone-input__emptyCountryIcon_18cet"};
17
+ 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"};
18
18
  require('./index.css')
19
19
 
20
20
  var CountrySelect = function (_a) {
package/components/country-select/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1vpyl */
1
+ /* hash: 15ut5 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -12,7 +12,9 @@
12
12
  /* Up */
13
13
 
14
14
  /* Hard up */
15
- } :root {
15
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root { /* deprecated */ /* deprecated */
17
19
  --gap-xs: 8px; /* deprecated */
18
20
  --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -20,29 +22,29 @@
20
22
  /* новые значения, используйте их */
21
23
  } :root {
22
24
  } :root {
23
- } .international-phone-input__component_18cet {
25
+ } .international-phone-input__component_qsz78 {
24
26
  position: static;
25
27
  display: flex;
26
28
  min-width: initial;
27
29
  height: 100%;
28
- } .international-phone-input__option_18cet {
30
+ } .international-phone-input__option_qsz78 {
29
31
  display: flex;
30
32
  align-items: flex-start;
31
33
  padding: var(--gap-s);
32
- } .international-phone-input__flag_18cet {
34
+ } .international-phone-input__flag_qsz78 {
33
35
  flex-shrink: 0;
34
36
  margin-right: var(--gap-xs);
35
- } .international-phone-input__countryName_18cet {
37
+ } .international-phone-input__countryName_qsz78 {
36
38
  margin-right: var(--gap-xs);
37
- } .international-phone-input__dialCode_18cet {
39
+ } .international-phone-input__dialCode_qsz78 {
38
40
  color: var(--color-light-text-secondary);
39
- } .international-phone-input__flagIconWrapper_18cet {
41
+ } .international-phone-input__flagIconWrapper_qsz78 {
40
42
  display: flex;
41
43
  justify-content: center;
42
44
  align-items: center;
43
45
  width: 24px;
44
46
  height: 24px;
45
47
  margin-left: var(--gap-s);
46
- } .international-phone-input__emptyCountryIcon_18cet {
48
+ } .international-phone-input__emptyCountryIcon_qsz78 {
47
49
  color: var(--color-light-neutral-translucent-700);
48
50
  }
package/components/flag-icon/component.js CHANGED
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
13
 
14
- var styles = {"flagIcon":"international-phone-input__flagIcon_1jd8x","flagPlaceholder":"international-phone-input__flagPlaceholder_1jd8x"};
14
+ var styles = {"flagIcon":"international-phone-input__flagIcon_arcq0","flagPlaceholder":"international-phone-input__flagPlaceholder_arcq0"};
15
15
  require('./index.css')
16
16
 
17
17
  /**
package/components/flag-icon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 7p7vm */
1
+ /* hash: 1k5ez */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -12,17 +12,19 @@
12
12
 
13
13
  /* Hard up */
14
14
  } :root {
15
- --border-radius-xs: 2px;
15
+ --border-radius-xs: 2px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root {
17
19
  --gap-3xs: 2px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
20
 
19
21
  /* новые значения, используйте их */
20
22
  } :root {
21
23
  } :root {
22
- } .international-phone-input__flagIcon_1jd8x {
24
+ } .international-phone-input__flagIcon_arcq0 {
23
25
  max-width: 24px;
24
26
  max-height: 24px;
25
- } .international-phone-input__flagPlaceholder_1jd8x {
27
+ } .international-phone-input__flagPlaceholder_arcq0 {
26
28
  width: 24px;
27
29
  height: 16px;
28
30
  max-height: 16px;
package/components/select-field/component.js CHANGED
@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
17
17
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
18
 
19
- var styles = {"component":"international-phone-input__component_1uvjb","flagIconContainer":"international-phone-input__flagIconContainer_1uvjb","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1uvjb","disabled":"international-phone-input__disabled_1uvjb","inner":"international-phone-input__inner_1uvjb","size-64":"international-phone-input__size-64_1uvjb","size-72":"international-phone-input__size-72_1uvjb","focusVisible":"international-phone-input__focusVisible_1uvjb"};
19
+ 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"};
20
20
  require('./index.css')
21
21
 
22
22
  var EMPTY_COUNTRY_SELECT_FIELD = {
package/components/select-field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: uvh9j */
1
+ /* hash: 1mu4i */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -12,7 +12,9 @@
12
12
  /* Up */
13
13
 
14
14
  /* Hard up */
15
- } :root {
15
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root { /* deprecated */
17
19
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
18
20
  --gap-s: 12px; /* deprecated */ /* deprecated */
@@ -23,33 +25,33 @@
23
25
  } :root {
24
26
  --focus-color: var(--color-light-status-info);
25
27
  --disabled-cursor: not-allowed;
26
- } .international-phone-input__component_1uvjb {
28
+ } .international-phone-input__component_14gbh {
27
29
  height: 100%;
28
30
  cursor: pointer;
29
31
  outline: none;
30
32
  position: relative;
31
- } .international-phone-input__flagIconContainer_1uvjb {
33
+ } .international-phone-input__flagIconContainer_14gbh {
32
34
  display: flex;
33
35
  justify-content: center;
34
36
  align-items: center;
35
37
  width: 24px;
36
38
  height: 24px;
37
39
  margin-right: var(--gap-2xs);
38
- } .international-phone-input__emptyCountryIcon_1uvjb {
40
+ } .international-phone-input__emptyCountryIcon_14gbh {
39
41
  color: var(--color-light-neutral-translucent-700);
40
- } .international-phone-input__disabled_1uvjb {
42
+ } .international-phone-input__disabled_14gbh {
41
43
  cursor: var(--disabled-cursor);
42
- } .international-phone-input__inner_1uvjb {
44
+ } .international-phone-input__inner_14gbh {
43
45
  position: relative;
44
46
  display: flex;
45
47
  align-items: center;
46
48
  height: 100%;
47
49
  padding-left: var(--gap-s);
48
50
  outline: none;
49
- } .international-phone-input__size-64_1uvjb .international-phone-input__inner_1uvjb,
50
- .international-phone-input__size-72_1uvjb .international-phone-input__inner_1uvjb {
51
+ } .international-phone-input__size-64_14gbh .international-phone-input__inner_14gbh,
52
+ .international-phone-input__size-72_14gbh .international-phone-input__inner_14gbh {
51
53
  padding-left: var(--gap-m);
52
- } .international-phone-input__focusVisible_1uvjb {
54
+ } .international-phone-input__focusVisible_14gbh {
53
55
  outline: 2px solid var(--focus-color);
54
56
  outline-offset: 2px;
55
57
  }
package/cssm/Component.responsive.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
4
4
  country?: import("./types").Country | undefined;
5
5
  countries?: string[] | undefined;
6
6
  defaultIso2?: string | undefined;
7
- clearableCountryCode?: boolean | undefined;
7
+ clearableCountryCode?: boolean | "preserve" | undefined;
8
8
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
9
9
  clear?: boolean | undefined;
10
10
  filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
@@ -23,7 +23,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
23
23
  country?: import("./types").Country | undefined;
24
24
  countries?: string[] | undefined;
25
25
  defaultIso2?: string | undefined;
26
- clearableCountryCode?: boolean | undefined;
26
+ clearableCountryCode?: boolean | "preserve" | undefined;
27
27
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
28
28
  clear?: boolean | undefined;
29
29
  filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
package/cssm/components/base-international-phone-input/Component.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
6
6
  country?: Country | undefined;
7
7
  countries?: string[] | undefined;
8
8
  defaultIso2?: string | undefined;
9
- clearableCountryCode?: boolean | undefined;
9
+ clearableCountryCode?: boolean | "preserve" | undefined;
10
10
  countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
11
11
  clear?: boolean | undefined;
12
12
  filterFn?: ((value: string | undefined, option: import("../../typings-9d430401").OptionShape) => boolean) | undefined;
package/cssm/components/base-international-phone-input/Component.js CHANGED
@@ -19,15 +19,15 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
19
19
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
20
20
 
21
21
  var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
22
- 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"]);
22
+ 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"]);
23
23
  var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
24
24
  var inputRef = React.useRef(null);
25
25
  var inputWrapperRef = React.useRef(null);
26
- var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
27
- var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
28
- var _e = React.useState(function () {
26
+ var _d = React.useState(defaultOpen), open = _d[0], setOpen = _d[1];
27
+ var _e = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _e[0], setOpenCountry = _e[1];
28
+ var _f = React.useState(function () {
29
29
  return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
30
- }), selectedCountry = _e[0], setSelectedCountry = _e[1];
30
+ }), selectedCountry = _f[0], setSelectedCountry = _f[1];
31
31
  var filteredOptions = utils_index.filterPhones(value, options, filterFn);
32
32
  var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
33
33
  var handleCountryChange = function (nextCountry) {
@@ -35,7 +35,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
35
35
  setSelectedCountry(nextCountry);
36
36
  onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
37
37
  };
38
- var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
38
+ var preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
39
+ var clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
40
+ var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode, preserveCountryCode); }, [country, clearableCountryCode, preserveCountryCode]);
39
41
  var maskRef = react.useMaskito({ options: maskOptions });
40
42
  var changeNumber = function (phone) {
41
43
  onChange === null || onChange === void 0 ? void 0 : onChange(phone);
@@ -52,7 +54,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
52
54
  var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
53
55
  handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
54
56
  if (nextCountry) {
55
- changeNumber("+".concat(nextCountry.dialCode));
57
+ changeNumber(utils_index.getInitialValueFromCountry(nextCountry.countryCode));
56
58
  }
57
59
  requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
58
60
  };
@@ -60,8 +62,9 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
60
62
  var _a;
61
63
  updatePhoneData(core.maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions));
62
64
  };
63
- var handleInput = function (e) {
64
- updatePhoneData(e.target.value);
65
+ var handleInput = function (_a) {
66
+ var inputValue = _a.target.value;
67
+ updatePhoneData(inputValue);
65
68
  };
66
69
  var handleClear = function (event) {
67
70
  var _a, _b;
@@ -72,7 +75,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
72
75
  handleCountryChange(nextCountry);
73
76
  }
74
77
  else {
75
- changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
78
+ changeNumber(country ? utils_index.getInitialValueFromCountry(country.countryCode) : '');
76
79
  }
77
80
  };
78
81
  React.useEffect(function () {
package/cssm/components/country-select/index.module.css CHANGED
@@ -11,7 +11,9 @@
11
11
  /* Up */
12
12
 
13
13
  /* Hard up */
14
- } :root {
14
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+
16
+ /* новые значения, используйте их */
15
17
  } :root { /* deprecated */ /* deprecated */
16
18
  --gap-xs: 8px; /* deprecated */
17
19
  --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
package/cssm/components/flag-icon/index.module.css CHANGED
@@ -11,7 +11,9 @@
11
11
 
12
12
  /* Hard up */
13
13
  } :root {
14
- --border-radius-xs: 2px;
14
+ --border-radius-xs: 2px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+
16
+ /* новые значения, используйте их */
15
17
  } :root {
16
18
  --gap-3xs: 2px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
19
 
package/cssm/components/select-field/index.module.css CHANGED
@@ -11,7 +11,9 @@
11
11
  /* Up */
12
12
 
13
13
  /* Hard up */
14
- } :root {
14
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+
16
+ /* новые значения, используйте их */
15
17
  } :root { /* deprecated */
16
18
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
17
19
  --gap-s: 12px; /* deprecated */ /* deprecated */
package/cssm/desktop/Component.desktop.js CHANGED
@@ -13,9 +13,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
 
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
 
16
- var InternationalPhoneInputDesktop = React.forwardRef(function (_a, ref) {
17
- var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
18
- 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 })));
19
- });
16
+ 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 }))); });
20
17
 
21
18
  exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;
package/cssm/mobile/Component.mobile.js CHANGED
@@ -13,9 +13,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
 
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
 
16
- var InternationalPhoneInputMobile = React.forwardRef(function (_a, ref) {
17
- var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
18
- 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 })));
19
- });
16
+ 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 }))); });
20
17
 
21
18
  exports.InternationalPhoneInputMobile = InternationalPhoneInputMobile;
package/cssm/types.d.ts CHANGED
@@ -36,8 +36,10 @@ type CommonPhoneInputProps = {
36
36
  defaultIso2?: string;
37
37
  /**
38
38
  * Возможность стереть код страны
39
+ * @default true
40
+ * @description Используйте `'preserve'` для сохранения кода страны при автозаполнении (актуально для Safari). При этом код страны можно удалить в случае использования `true`
39
41
  */
40
- clearableCountryCode?: boolean;
42
+ clearableCountryCode?: boolean | 'preserve';
41
43
  /**
42
44
  * Свойства селекта выбора стран
43
45
  */
package/cssm/utils/index.d.ts CHANGED
@@ -6,8 +6,8 @@ declare function initCountries(iso2s?: string[]): Country[][];
6
6
  declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
7
7
  declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
8
8
  declare function clearMask(value: string): string;
9
- declare function createPhoneMaskExpression(country?: Country, clearableCountryCode?: boolean): Array<RegExp | string>;
10
- declare function createMaskOptions(country?: Country, clearableCountryCode?: boolean): MaskitoOptions;
9
+ declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
10
+ declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): MaskitoOptions;
11
11
  declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
12
12
  declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
13
13
  declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {
@@ -70,4 +70,5 @@ declare function getInternationalPhoneInputMobileTestIds(dataTestId: string): {
70
70
  searchError: string;
71
71
  searchHint: string;
72
72
  };
73
- export { initCountries, findCountry, guessCountry, clearMask, createPhoneMaskExpression, createMaskOptions, filterPhones, getPhoneData, getClear, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds };
73
+ declare function getInitialValueFromCountry(countryCode: string): string;
74
+ export { initCountries, findCountry, guessCountry, clearMask, createPhoneMaskExpression, createMaskOptions, filterPhones, getPhoneData, getClear, getInternationalPhoneInputDesktopTestIds, getInternationalPhoneInputMobileTestIds, getInitialValueFromCountry };
package/cssm/utils/index.js CHANGED
@@ -117,19 +117,20 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
117
117
  '+'
118
118
  ], (clearableCountryCode ? countryCode.split('').map(function () { return /\d/; }) : countryCode.split('')), true), [
119
119
  ' '
120
- ], false), format.split('').map(function (item) { return (item === '.' ? /\d/ : item); }), true);
120
+ ], false), format.split('').map(itemToMask), true);
121
121
  }
122
- function createMaskOptions(country, clearableCountryCode) {
123
- var prefixLen = !clearableCountryCode && (country === null || country === void 0 ? void 0 : country.countryCode) ? country.countryCode.length + 1 : 0;
122
+ function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
123
+ var countryCode = country === null || country === void 0 ? void 0 : country.countryCode;
124
+ var prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
125
+ var prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
124
126
  var mask = createPhoneMaskExpression(country, clearableCountryCode);
125
127
  return {
126
128
  mask: mask,
127
129
  preprocessors: [
128
- coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, country === null || country === void 0 ? void 0 : country.countryCode, clearableCountryCode),
129
- ],
130
- postprocessors: [
131
- coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen ? "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) : ''),
130
+ coreComponentsShared.maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
131
+ coreComponentsShared.maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
132
132
  ],
133
+ postprocessors: [coreComponentsShared.maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
133
134
  plugins: [
134
135
  coreComponentsShared.maskUtils.caretGuard(function (value, _a) {
135
136
  var from = _a[0], to = _a[1];
@@ -248,6 +249,9 @@ function getInternationalPhoneInputMobileTestIds(dataTestId) {
248
249
  searchHint: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-hint'),
249
250
  };
250
251
  }
252
+ function getInitialValueFromCountry(countryCode) {
253
+ return "+".concat(countryCode);
254
+ }
251
255
 
252
256
  exports.clearMask = clearMask;
253
257
  exports.createMaskOptions = createMaskOptions;
@@ -255,6 +259,7 @@ exports.createPhoneMaskExpression = createPhoneMaskExpression;
255
259
  exports.filterPhones = filterPhones;
256
260
  exports.findCountry = findCountry;
257
261
  exports.getClear = getClear;
262
+ exports.getInitialValueFromCountry = getInitialValueFromCountry;
258
263
  exports.getInternationalPhoneInputDesktopTestIds = getInternationalPhoneInputDesktopTestIds;
259
264
  exports.getInternationalPhoneInputMobileTestIds = getInternationalPhoneInputMobileTestIds;
260
265
  exports.getPhoneData = getPhoneData;
package/desktop/Component.desktop.js CHANGED
@@ -13,9 +13,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
 
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
 
16
- var InternationalPhoneInputDesktop = React.forwardRef(function (_a, ref) {
17
- var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
18
- 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 })));
19
- });
16
+ 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 }))); });
20
17
 
21
18
  exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;
package/esm/Component.responsive.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
4
4
  country?: import("./types").Country | undefined;
5
5
  countries?: string[] | undefined;
6
6
  defaultIso2?: string | undefined;
7
- clearableCountryCode?: boolean | undefined;
7
+ clearableCountryCode?: boolean | "preserve" | undefined;
8
8
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
9
9
  clear?: boolean | undefined;
10
10
  filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
@@ -23,7 +23,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
23
23
  country?: import("./types").Country | undefined;
24
24
  countries?: string[] | undefined;
25
25
  defaultIso2?: string | undefined;
26
- clearableCountryCode?: boolean | undefined;
26
+ clearableCountryCode?: boolean | "preserve" | undefined;
27
27
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
28
28
  clear?: boolean | undefined;
29
29
  filterFn?: ((value: string | undefined, option: import("./typings-9d430401").OptionShape) => boolean) | undefined;
package/esm/components/base-international-phone-input/Component.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
6
6
  country?: Country | undefined;
7
7
  countries?: string[] | undefined;
8
8
  defaultIso2?: string | undefined;
9
- clearableCountryCode?: boolean | undefined;
9
+ clearableCountryCode?: boolean | "preserve" | undefined;
10
10
  countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
11
11
  clear?: boolean | undefined;
12
12
  filterFn?: ((value: string | undefined, option: import("../../typings-9d430401").OptionShape) => boolean) | undefined;