@alfalab/core-components-intl-phone-input 9.2.16 → 9.2.18

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 (58) hide show
  1. package/component.js +36 -18
  2. package/components/flag-icon/component.js +3 -1
  3. package/components/flag-icon/flagSprite.js +2 -0
  4. package/components/flag-icon/index.css +3 -3
  5. package/components/flag-icon/index.js +2 -0
  6. package/components/index.js +2 -0
  7. package/components/select/component.js +3 -1
  8. package/components/select/index.css +7 -7
  9. package/components/select/index.js +2 -0
  10. package/components/select-field/component.js +3 -1
  11. package/components/select-field/index.css +11 -11
  12. package/components/select-field/index.js +2 -0
  13. package/cssm/component.js +34 -16
  14. package/cssm/components/flag-icon/component.js +2 -0
  15. package/cssm/components/flag-icon/flagSprite.js +2 -0
  16. package/cssm/components/flag-icon/index.js +2 -0
  17. package/cssm/components/index.js +2 -0
  18. package/cssm/components/select/component.js +2 -0
  19. package/cssm/components/select/index.js +2 -0
  20. package/cssm/components/select/index.module.css +1 -1
  21. package/cssm/components/select-field/component.js +2 -0
  22. package/cssm/components/select-field/index.js +2 -0
  23. package/cssm/components/select-field/index.module.css +2 -2
  24. package/cssm/index.js +2 -0
  25. package/cssm/index.module.css +1 -1
  26. package/cssm/useCaretAvoidCountryCode.js +2 -0
  27. package/cssm/utils/calculateCaretPos.js +2 -0
  28. package/cssm/utils/format-phone-with-unclearable-country-code.js +2 -0
  29. package/cssm/utils/preparePasteData.js +2 -0
  30. package/esm/component.js +34 -18
  31. package/esm/components/flag-icon/component.js +1 -1
  32. package/esm/components/flag-icon/index.css +3 -3
  33. package/esm/components/select/component.js +1 -1
  34. package/esm/components/select/index.css +7 -7
  35. package/esm/components/select-field/component.js +1 -1
  36. package/esm/components/select-field/index.css +11 -11
  37. package/esm/index.css +6 -6
  38. package/index.css +6 -6
  39. package/index.js +2 -0
  40. package/modern/component.js +34 -18
  41. package/modern/components/flag-icon/component.js +1 -1
  42. package/modern/components/flag-icon/index.css +3 -3
  43. package/modern/components/select/component.js +1 -1
  44. package/modern/components/select/index.css +7 -7
  45. package/modern/components/select-field/component.js +1 -1
  46. package/modern/components/select-field/index.css +11 -11
  47. package/modern/index.css +6 -6
  48. package/package.json +5 -5
  49. package/useCaretAvoidCountryCode.js +2 -0
  50. package/utils/calculateCaretPos.js +2 -0
  51. package/utils/format-phone-with-unclearable-country-code.js +2 -0
  52. package/utils/preparePasteData.js +2 -0
  53. /package/esm/{libphonenumber-js.min-c41d8c60.d.ts → libphonenumber-js.min-d38246a5.d.ts} +0 -0
  54. /package/esm/{libphonenumber-js.min-c41d8c60.js → libphonenumber-js.min-d38246a5.js} +0 -0
  55. /package/{libphonenumber-js.min-570b9994.d.ts → libphonenumber-js.min-7f558ade.d.ts} +0 -0
  56. /package/{libphonenumber-js.min-570b9994.js → libphonenumber-js.min-7f558ade.js} +0 -0
  57. /package/modern/{libphonenumber-js.min-c41d8c60.d.ts → libphonenumber-js.min-d38246a5.d.ts} +0 -0
  58. /package/modern/{libphonenumber-js.min-c41d8c60.js → libphonenumber-js.min-d38246a5.js} +0 -0
package/cssm/index.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-graphic-secondary: #6d7986; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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
+ --color-light-graphic-secondary: #86868a; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :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 */
5
5
  } :root {
6
6
  } :root {
package/cssm/useCaretAvoidCountryCode.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
6
 
5
7
  function useCaretAvoidCountryCode(_a) {
package/cssm/utils/calculateCaretPos.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  /**
4
6
  * Расчет нового положения каретки.
5
7
  * @param phonePart Шаблон с которым сравнивается новое значение. (Часть телефона без маски с учетом удаленных и добавленных цифр).
package/cssm/utils/format-phone-with-unclearable-country-code.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var RUSSIAN_DIAL_CODE = '7';
4
6
  var RUSSIAN_NATIONAL_DIAL_CODE = '8';
5
7
  /**
package/cssm/utils/preparePasteData.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  /**
4
6
  * Подготовка данных для вставки из буфера обмена.
5
7
  * @param phoneValue Телефон уже введённый в поле ввода.
package/esm/component.js CHANGED
@@ -16,7 +16,7 @@ import './components/flag-icon/flagSprite.js';
16
16
  import '@alfalab/core-components-select/esm';
17
17
  import './components/select-field/component.js';
18
18
 
19
- var styles = {"addons":"intl-phone-input__addons_10rls","l":"intl-phone-input__l_10rls","xl":"intl-phone-input__xl_10rls","flagIconWrapper":"intl-phone-input__flagIconWrapper_10rls","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_10rls"};
19
+ var styles = {"addons":"intl-phone-input__addons_1iymy","l":"intl-phone-input__l_1iymy","xl":"intl-phone-input__xl_1iymy","flagIconWrapper":"intl-phone-input__flagIconWrapper_1iymy","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1iymy"};
20
20
  require('./index.css')
21
21
 
22
22
  var countriesHash = getCountriesHash();
@@ -93,6 +93,12 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
93
93
  });
94
94
  return targetCountry;
95
95
  };
96
+ var changePhone = function (phone, iso2) {
97
+ var newValue = formatPhone(phone, iso2);
98
+ if (newValue !== value) {
99
+ onChange(newValue);
100
+ }
101
+ };
96
102
  var addCountryCode = function (inputValue) {
97
103
  if (clearableCountryCode || !countryIso2) {
98
104
  return inputValue.length === 1 && inputValue !== '+'
@@ -104,7 +110,7 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
104
110
  };
105
111
  var setCountryByDialCode = function (inputValue) {
106
112
  var country = getCountryByNumber(inputValue);
107
- onChange(formatPhone(addCountryCode(inputValue)));
113
+ changePhone(addCountryCode(inputValue));
108
114
  if (country) {
109
115
  setCountryIso2(country.iso2);
110
116
  handleCountryChange(country.iso2);
@@ -124,7 +130,7 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
124
130
  };
125
131
  var handleInputChange = function (event) {
126
132
  setCountryByDialCodeWithLengthCheck(event.target.value);
127
- onChange(formatPhone(addCountryCode(event.target.value)));
133
+ changePhone(addCountryCode(event.target.value));
128
134
  };
129
135
  var handleSelectChange = function (_a) {
130
136
  var selected = _a.selected;
@@ -143,7 +149,7 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
143
149
  if (!selected)
144
150
  return;
145
151
  setCountryByDialCodeWithLengthCheck(selected.key);
146
- onChange(formatPhone(selected.key));
152
+ changePhone(selected.key);
147
153
  };
148
154
  var country = countryIso2 && countriesHash[countryIso2];
149
155
  var countryCodeLength = country ? "+".concat(country.dialCode).length : 0;
@@ -190,25 +196,27 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
190
196
  setCountryByDialCodeWithLengthCheck(newValue);
191
197
  onChange(newValue);
192
198
  };
193
- var handleDeleteChar = function (event, caretPosition) {
199
+ var handleDeleteChar = function (event) {
194
200
  var input = event.target;
195
- if (!clearableCountryCode && caretPosition <= countryCodeLength)
201
+ var selectionStart = input.selectionStart || 0;
202
+ var selectionEnd = input.selectionEnd || 0;
203
+ if (!clearableCountryCode && selectionEnd <= countryCodeLength)
196
204
  return;
197
205
  var currentValue = input.value;
198
206
  var isMaskSymbol = function (count) {
199
- var isMask = MASK_SYMBOLS.includes(currentValue.charAt(caretPosition - count));
207
+ var isMask = MASK_SYMBOLS.includes(currentValue.charAt(selectionEnd - 1 - count));
200
208
  var isPossibleToRemove = clearableCountryCode
201
- ? caretPosition - count > 0
202
- : caretPosition - count > countryCodeLength;
209
+ ? selectionEnd - count > 0
210
+ : selectionEnd - count > countryCodeLength;
203
211
  return isMask && isPossibleToRemove;
204
212
  };
205
- var deletedCharsCount = 1;
213
+ var deletedCharsCount = Math.max(1, selectionEnd - selectionStart);
206
214
  // Высчитываем кол-во символов, которые нужно удалить.
207
215
  while (isMaskSymbol(deletedCharsCount)) {
208
216
  deletedCharsCount += 1;
209
217
  }
210
- var phonePart = currentValue.slice(0, caretPosition - deletedCharsCount);
211
- var newValue = formatPhone(addCountryCode(phonePart + currentValue.slice(caretPosition)));
218
+ var phonePart = currentValue.slice(0, selectionEnd - deletedCharsCount);
219
+ var newValue = formatPhone(addCountryCode(phonePart + currentValue.slice(selectionEnd)));
212
220
  var phonePartWithoutMask = phonePart.replace(/[^0-9+]+/g, '');
213
221
  setCaretPos(calculateCaretPos(phonePartWithoutMask, newValue));
214
222
  setCountryByDialCodeWithLengthCheck(newValue);
@@ -217,12 +225,20 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
217
225
  var handleKeyDown = function (event) {
218
226
  var input = event.target;
219
227
  var caretPosition = input.selectionStart || 0;
228
+ var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё,. ]/;
229
+ var withoutCombo = !event.altKey && !event.metaKey && !event.ctrlKey;
230
+ // Запрещаем вводить неразрешенные символы за исключением комбинций клавиш
231
+ if (withoutCombo && event.key.length === 1 && disallowedSymbols.test(event.key)) {
232
+ event.preventDefault();
233
+ return;
234
+ }
220
235
  // Нажат только Backspace, не сочетание клавиш с ним.
221
- if (!event.shiftKey && !event.ctrlKey && !event.metaKey && event.key === 'Backspace') {
236
+ if (!event.shiftKey && withoutCombo && event.key === 'Backspace') {
222
237
  if (!caretPosition)
223
238
  return;
224
239
  event.preventDefault();
225
- handleDeleteChar(event, caretPosition);
240
+ handleDeleteChar(event);
241
+ return;
226
242
  }
227
243
  if (event.key.length === 1 && /[0-9+]/.test(event.key)) {
228
244
  event.preventDefault();
@@ -255,7 +271,7 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
255
271
  var resultNumber = preparedNumber.substring(0, maxPhoneLength + 1);
256
272
  if (resultNumber) {
257
273
  setCountryIso2(targetCountry ? targetCountry.iso2 : undefined);
258
- onChange(formatPhone(addCountryCode(resultNumber)));
274
+ changePhone(addCountryCode(resultNumber));
259
275
  }
260
276
  };
261
277
  useEffect(function () {
@@ -268,11 +284,11 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
268
284
  if (phoneLibUtils.current)
269
285
  return;
270
286
  import(
271
- /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-c41d8c60.js')
287
+ /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-d38246a5.js')
272
288
  .then(function (utils) {
273
289
  phoneLibUtils.current = utils.AsYouType;
274
290
  if (canBeEmptyCountry) {
275
- onChange(formatPhone(value));
291
+ changePhone(value);
276
292
  }
277
293
  else {
278
294
  setCountryByDialCode(value);
@@ -294,7 +310,7 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
294
310
  setCountryIso2(undefined);
295
311
  handleCountryChange(undefined);
296
312
  }
297
- onChange(formatPhone(value, newCountry === null || newCountry === void 0 ? void 0 : newCountry.iso2));
313
+ changePhone(value, newCountry === null || newCountry === void 0 ? void 0 : newCountry.iso2);
298
314
  }
299
315
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
300
316
  }, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
package/esm/components/flag-icon/component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { flagSprite } from './flagSprite.js';
4
4
 
5
- var styles = {"flagIcon":"intl-phone-input__flagIcon_14yvz","flagPlaceholder":"intl-phone-input__flagPlaceholder_14yvz"};
5
+ var styles = {"flagIcon":"intl-phone-input__flagIcon_mruub","flagPlaceholder":"intl-phone-input__flagPlaceholder_mruub"};
6
6
  require('./index.css')
7
7
 
8
8
  /**
package/esm/components/flag-icon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1rm7b */
1
+ /* hash: db949 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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,10 +17,10 @@
17
17
  --gap-3xs: 2px;
18
18
  } :root {
19
19
  } :root {
20
- } .intl-phone-input__flagIcon_14yvz {
20
+ } .intl-phone-input__flagIcon_mruub {
21
21
  max-width: 24px;
22
22
  max-height: 24px;
23
- } .intl-phone-input__flagPlaceholder_14yvz {
23
+ } .intl-phone-input__flagPlaceholder_mruub {
24
24
  width: 24px;
25
25
  height: 16px;
26
26
  max-height: 16px;
package/esm/components/select/component.js CHANGED
@@ -9,7 +9,7 @@ import 'react-merge-refs';
9
9
  import '@alfalab/hooks';
10
10
  import '@alfalab/icons-glyph/WorldMagnifierMIcon';
11
11
 
12
- var styles = {"component":"intl-phone-input__component_1lcs7","option":"intl-phone-input__option_1lcs7","flag":"intl-phone-input__flag_1lcs7","countryName":"intl-phone-input__countryName_1lcs7","dialCode":"intl-phone-input__dialCode_1lcs7"};
12
+ var styles = {"component":"intl-phone-input__component_gm7gr","option":"intl-phone-input__option_gm7gr","flag":"intl-phone-input__flag_gm7gr","countryName":"intl-phone-input__countryName_gm7gr","dialCode":"intl-phone-input__dialCode_gm7gr"};
13
13
  require('./index.css')
14
14
 
15
15
  var CountriesSelect = function (_a) {
package/esm/components/select/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1yctx */
1
+ /* hash: 1nhud */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-text-secondary: rgba(11, 31, 53, 0.7); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :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 */
6
6
  } :root {
7
7
  } :root {
@@ -17,19 +17,19 @@
17
17
  } :root {
18
18
  } :root {
19
19
  --text-secondary-color: var(--color-light-text-secondary);
20
- } .intl-phone-input__component_1lcs7 {
20
+ } .intl-phone-input__component_gm7gr {
21
21
  position: static;
22
22
  display: flex;
23
23
  min-width: initial;
24
24
  height: 100%;
25
- } .intl-phone-input__option_1lcs7 {
25
+ } .intl-phone-input__option_gm7gr {
26
26
  display: flex;
27
27
  align-items: flex-start;
28
- } .intl-phone-input__flag_1lcs7 {
28
+ } .intl-phone-input__flag_gm7gr {
29
29
  flex-shrink: 0;
30
30
  margin-right: var(--gap-xs);
31
- } .intl-phone-input__countryName_1lcs7 {
31
+ } .intl-phone-input__countryName_gm7gr {
32
32
  margin-right: var(--gap-xs);
33
- } .intl-phone-input__dialCode_1lcs7 {
33
+ } .intl-phone-input__dialCode_gm7gr {
34
34
  color: var(--text-secondary-color);
35
35
  }
package/esm/components/select-field/component.js CHANGED
@@ -7,7 +7,7 @@ import WorldMagnifierMIcon from '@alfalab/icons-glyph/WorldMagnifierMIcon';
7
7
  import { FlagIcon } from '../flag-icon/component.js';
8
8
  import '../flag-icon/flagSprite.js';
9
9
 
10
- var styles = {"component":"intl-phone-input__component_y9yvr","flagIconContainer":"intl-phone-input__flagIconContainer_y9yvr","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_y9yvr","disabled":"intl-phone-input__disabled_y9yvr","inner":"intl-phone-input__inner_y9yvr","l":"intl-phone-input__l_y9yvr","xl":"intl-phone-input__xl_y9yvr","focusVisible":"intl-phone-input__focusVisible_y9yvr"};
10
+ var styles = {"component":"intl-phone-input__component_1bmz8","flagIconContainer":"intl-phone-input__flagIconContainer_1bmz8","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1bmz8","disabled":"intl-phone-input__disabled_1bmz8","inner":"intl-phone-input__inner_1bmz8","l":"intl-phone-input__l_1bmz8","xl":"intl-phone-input__xl_1bmz8","focusVisible":"intl-phone-input__focusVisible_1bmz8"};
11
11
  require('./index.css')
12
12
 
13
13
  var EMPTY_COUNTRY_SELECT_FIELD = {
package/esm/components/select-field/index.css CHANGED
@@ -1,8 +1,8 @@
1
- /* hash: vvxcz */
1
+ /* hash: z3p4x */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #007aff;
5
- --color-light-graphic-secondary: #6d7986; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-border-link: #0072ef;
5
+ --color-light-graphic-secondary: #86868a; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :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 */
7
7
  } :root {
8
8
  } :root {
@@ -21,33 +21,33 @@
21
21
  } :root {
22
22
  --focus-color: var(--color-light-border-link);
23
23
  --disabled-cursor: not-allowed;
24
- } .intl-phone-input__component_y9yvr {
24
+ } .intl-phone-input__component_1bmz8 {
25
25
  height: 100%;
26
26
  cursor: pointer;
27
27
  outline: none;
28
28
  position: relative;
29
- } .intl-phone-input__flagIconContainer_y9yvr {
29
+ } .intl-phone-input__flagIconContainer_1bmz8 {
30
30
  display: flex;
31
31
  justify-content: center;
32
32
  align-items: center;
33
33
  width: 24px;
34
34
  height: 24px;
35
35
  margin-right: var(--gap-2xs);
36
- } .intl-phone-input__emptyCountryIcon_y9yvr {
36
+ } .intl-phone-input__emptyCountryIcon_1bmz8 {
37
37
  color: var(--color-light-graphic-secondary);
38
- } .intl-phone-input__disabled_y9yvr {
38
+ } .intl-phone-input__disabled_1bmz8 {
39
39
  cursor: var(--disabled-cursor);
40
- } .intl-phone-input__inner_y9yvr {
40
+ } .intl-phone-input__inner_1bmz8 {
41
41
  position: relative;
42
42
  display: flex;
43
43
  align-items: center;
44
44
  height: 100%;
45
45
  padding-left: var(--gap-s);
46
46
  outline: none;
47
- } .intl-phone-input__l_y9yvr .intl-phone-input__inner_y9yvr,
48
- .intl-phone-input__xl_y9yvr .intl-phone-input__inner_y9yvr {
47
+ } .intl-phone-input__l_1bmz8 .intl-phone-input__inner_1bmz8,
48
+ .intl-phone-input__xl_1bmz8 .intl-phone-input__inner_1bmz8 {
49
49
  padding-left: var(--gap-m);
50
- } .intl-phone-input__focusVisible_y9yvr {
50
+ } .intl-phone-input__focusVisible_1bmz8 {
51
51
  outline: 2px solid var(--focus-color);
52
52
  outline-offset: 2px;
53
53
  }
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: mq37q */
1
+ /* hash: 1zxci */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-graphic-secondary: #6d7986; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-graphic-secondary: #86868a; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :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 */
6
6
  } :root {
7
7
  } :root {
@@ -16,17 +16,17 @@
16
16
  --gap-s: 12px;
17
17
  } :root {
18
18
  } :root {
19
- } .intl-phone-input__addons_10rls {
19
+ } .intl-phone-input__addons_1iymy {
20
20
  padding-left: 0;
21
- } .intl-phone-input__l_10rls .intl-phone-input__addons_10rls, .intl-phone-input__xl_10rls .intl-phone-input__addons_10rls {
21
+ } .intl-phone-input__l_1iymy .intl-phone-input__addons_1iymy, .intl-phone-input__xl_1iymy .intl-phone-input__addons_1iymy {
22
22
  padding-left: 0;
23
- } .intl-phone-input__flagIconWrapper_10rls {
23
+ } .intl-phone-input__flagIconWrapper_1iymy {
24
24
  display: flex;
25
25
  justify-content: center;
26
26
  align-items: center;
27
27
  width: 24px;
28
28
  height: 24px;
29
29
  margin-left: var(--gap-s);
30
- } .intl-phone-input__emptyCountryIcon_10rls {
30
+ } .intl-phone-input__emptyCountryIcon_1iymy {
31
31
  color: var(--color-light-graphic-secondary);
32
32
  }
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: mq37q */
1
+ /* hash: 1zxci */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-graphic-secondary: #6d7986; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-graphic-secondary: #86868a; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :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 */
6
6
  } :root {
7
7
  } :root {
@@ -16,17 +16,17 @@
16
16
  --gap-s: 12px;
17
17
  } :root {
18
18
  } :root {
19
- } .intl-phone-input__addons_10rls {
19
+ } .intl-phone-input__addons_1iymy {
20
20
  padding-left: 0;
21
- } .intl-phone-input__l_10rls .intl-phone-input__addons_10rls, .intl-phone-input__xl_10rls .intl-phone-input__addons_10rls {
21
+ } .intl-phone-input__l_1iymy .intl-phone-input__addons_1iymy, .intl-phone-input__xl_1iymy .intl-phone-input__addons_1iymy {
22
22
  padding-left: 0;
23
- } .intl-phone-input__flagIconWrapper_10rls {
23
+ } .intl-phone-input__flagIconWrapper_1iymy {
24
24
  display: flex;
25
25
  justify-content: center;
26
26
  align-items: center;
27
27
  width: 24px;
28
28
  height: 24px;
29
29
  margin-left: var(--gap-s);
30
- } .intl-phone-input__emptyCountryIcon_10rls {
30
+ } .intl-phone-input__emptyCountryIcon_1iymy {
31
31
  color: var(--color-light-graphic-secondary);
32
32
  }
package/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var component = require('./component.js');
4
6
  require('tslib');
5
7
  require('react');
package/modern/component.js CHANGED
@@ -15,7 +15,7 @@ import './components/flag-icon/flagSprite.js';
15
15
  import '@alfalab/core-components-select/modern';
16
16
  import './components/select-field/component.js';
17
17
 
18
- const styles = {"addons":"intl-phone-input__addons_10rls","l":"intl-phone-input__l_10rls","xl":"intl-phone-input__xl_10rls","flagIconWrapper":"intl-phone-input__flagIconWrapper_10rls","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_10rls"};
18
+ const styles = {"addons":"intl-phone-input__addons_1iymy","l":"intl-phone-input__l_1iymy","xl":"intl-phone-input__xl_1iymy","flagIconWrapper":"intl-phone-input__flagIconWrapper_1iymy","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1iymy"};
19
19
  require('./index.css')
20
20
 
21
21
  const countriesHash = getCountriesHash();
@@ -90,6 +90,12 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
90
90
  });
91
91
  return targetCountry;
92
92
  };
93
+ const changePhone = (phone, iso2) => {
94
+ const newValue = formatPhone(phone, iso2);
95
+ if (newValue !== value) {
96
+ onChange(newValue);
97
+ }
98
+ };
93
99
  const addCountryCode = (inputValue) => {
94
100
  if (clearableCountryCode || !countryIso2) {
95
101
  return inputValue.length === 1 && inputValue !== '+'
@@ -101,7 +107,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
101
107
  };
102
108
  const setCountryByDialCode = (inputValue) => {
103
109
  const country = getCountryByNumber(inputValue);
104
- onChange(formatPhone(addCountryCode(inputValue)));
110
+ changePhone(addCountryCode(inputValue));
105
111
  if (country) {
106
112
  setCountryIso2(country.iso2);
107
113
  handleCountryChange(country.iso2);
@@ -121,7 +127,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
121
127
  };
122
128
  const handleInputChange = (event) => {
123
129
  setCountryByDialCodeWithLengthCheck(event.target.value);
124
- onChange(formatPhone(addCountryCode(event.target.value)));
130
+ changePhone(addCountryCode(event.target.value));
125
131
  };
126
132
  const handleSelectChange = ({ selected }) => {
127
133
  if (selected) {
@@ -139,7 +145,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
139
145
  if (!selected)
140
146
  return;
141
147
  setCountryByDialCodeWithLengthCheck(selected.key);
142
- onChange(formatPhone(selected.key));
148
+ changePhone(selected.key);
143
149
  };
144
150
  const country = countryIso2 && countriesHash[countryIso2];
145
151
  const countryCodeLength = country ? `+${country.dialCode}`.length : 0;
@@ -186,25 +192,27 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
186
192
  setCountryByDialCodeWithLengthCheck(newValue);
187
193
  onChange(newValue);
188
194
  };
189
- const handleDeleteChar = (event, caretPosition) => {
195
+ const handleDeleteChar = (event) => {
190
196
  const input = event.target;
191
- if (!clearableCountryCode && caretPosition <= countryCodeLength)
197
+ const selectionStart = input.selectionStart || 0;
198
+ const selectionEnd = input.selectionEnd || 0;
199
+ if (!clearableCountryCode && selectionEnd <= countryCodeLength)
192
200
  return;
193
201
  const currentValue = input.value;
194
202
  const isMaskSymbol = (count) => {
195
- const isMask = MASK_SYMBOLS.includes(currentValue.charAt(caretPosition - count));
203
+ const isMask = MASK_SYMBOLS.includes(currentValue.charAt(selectionEnd - 1 - count));
196
204
  const isPossibleToRemove = clearableCountryCode
197
- ? caretPosition - count > 0
198
- : caretPosition - count > countryCodeLength;
205
+ ? selectionEnd - count > 0
206
+ : selectionEnd - count > countryCodeLength;
199
207
  return isMask && isPossibleToRemove;
200
208
  };
201
- let deletedCharsCount = 1;
209
+ let deletedCharsCount = Math.max(1, selectionEnd - selectionStart);
202
210
  // Высчитываем кол-во символов, которые нужно удалить.
203
211
  while (isMaskSymbol(deletedCharsCount)) {
204
212
  deletedCharsCount += 1;
205
213
  }
206
- const phonePart = currentValue.slice(0, caretPosition - deletedCharsCount);
207
- const newValue = formatPhone(addCountryCode(phonePart + currentValue.slice(caretPosition)));
214
+ const phonePart = currentValue.slice(0, selectionEnd - deletedCharsCount);
215
+ const newValue = formatPhone(addCountryCode(phonePart + currentValue.slice(selectionEnd)));
208
216
  const phonePartWithoutMask = phonePart.replace(/[^0-9+]+/g, '');
209
217
  setCaretPos(calculateCaretPos(phonePartWithoutMask, newValue));
210
218
  setCountryByDialCodeWithLengthCheck(newValue);
@@ -213,12 +221,20 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
213
221
  const handleKeyDown = (event) => {
214
222
  const input = event.target;
215
223
  const caretPosition = input.selectionStart || 0;
224
+ const disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё,. ]/;
225
+ const withoutCombo = !event.altKey && !event.metaKey && !event.ctrlKey;
226
+ // Запрещаем вводить неразрешенные символы за исключением комбинций клавиш
227
+ if (withoutCombo && event.key.length === 1 && disallowedSymbols.test(event.key)) {
228
+ event.preventDefault();
229
+ return;
230
+ }
216
231
  // Нажат только Backspace, не сочетание клавиш с ним.
217
- if (!event.shiftKey && !event.ctrlKey && !event.metaKey && event.key === 'Backspace') {
232
+ if (!event.shiftKey && withoutCombo && event.key === 'Backspace') {
218
233
  if (!caretPosition)
219
234
  return;
220
235
  event.preventDefault();
221
- handleDeleteChar(event, caretPosition);
236
+ handleDeleteChar(event);
237
+ return;
222
238
  }
223
239
  if (event.key.length === 1 && /[0-9+]/.test(event.key)) {
224
240
  event.preventDefault();
@@ -250,7 +266,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
250
266
  const resultNumber = preparedNumber.substring(0, maxPhoneLength + 1);
251
267
  if (resultNumber) {
252
268
  setCountryIso2(targetCountry ? targetCountry.iso2 : undefined);
253
- onChange(formatPhone(addCountryCode(resultNumber)));
269
+ changePhone(addCountryCode(resultNumber));
254
270
  }
255
271
  };
256
272
  useEffect(() => {
@@ -263,11 +279,11 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
263
279
  if (phoneLibUtils.current)
264
280
  return;
265
281
  import(
266
- /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-c41d8c60.js')
282
+ /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-d38246a5.js')
267
283
  .then((utils) => {
268
284
  phoneLibUtils.current = utils.AsYouType;
269
285
  if (canBeEmptyCountry) {
270
- onChange(formatPhone(value));
286
+ changePhone(value);
271
287
  }
272
288
  else {
273
289
  setCountryByDialCode(value);
@@ -289,7 +305,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCou
289
305
  setCountryIso2(undefined);
290
306
  handleCountryChange(undefined);
291
307
  }
292
- onChange(formatPhone(value, newCountry?.iso2));
308
+ changePhone(value, newCountry?.iso2);
293
309
  }
294
310
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
295
311
  }, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
package/modern/components/flag-icon/component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { flagSprite } from './flagSprite.js';
4
4
 
5
- const styles = {"flagIcon":"intl-phone-input__flagIcon_14yvz","flagPlaceholder":"intl-phone-input__flagPlaceholder_14yvz"};
5
+ const styles = {"flagIcon":"intl-phone-input__flagIcon_mruub","flagPlaceholder":"intl-phone-input__flagPlaceholder_mruub"};
6
6
  require('./index.css')
7
7
 
8
8
  /**
package/modern/components/flag-icon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1rm7b */
1
+ /* hash: db949 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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,10 +17,10 @@
17
17
  --gap-3xs: 2px;
18
18
  } :root {
19
19
  } :root {
20
- } .intl-phone-input__flagIcon_14yvz {
20
+ } .intl-phone-input__flagIcon_mruub {
21
21
  max-width: 24px;
22
22
  max-height: 24px;
23
- } .intl-phone-input__flagPlaceholder_14yvz {
23
+ } .intl-phone-input__flagPlaceholder_mruub {
24
24
  width: 24px;
25
25
  height: 16px;
26
26
  max-height: 16px;
package/modern/components/select/component.js CHANGED
@@ -8,7 +8,7 @@ import 'react-merge-refs';
8
8
  import '@alfalab/hooks';
9
9
  import '@alfalab/icons-glyph/WorldMagnifierMIcon';
10
10
 
11
- const styles = {"component":"intl-phone-input__component_1lcs7","option":"intl-phone-input__option_1lcs7","flag":"intl-phone-input__flag_1lcs7","countryName":"intl-phone-input__countryName_1lcs7","dialCode":"intl-phone-input__dialCode_1lcs7"};
11
+ const styles = {"component":"intl-phone-input__component_gm7gr","option":"intl-phone-input__option_gm7gr","flag":"intl-phone-input__flag_gm7gr","countryName":"intl-phone-input__countryName_gm7gr","dialCode":"intl-phone-input__dialCode_gm7gr"};
12
12
  require('./index.css')
13
13
 
14
14
  /* eslint-disable jsx-a11y/no-static-element-interactions */