@alfalab/core-components-intl-phone-input 9.2.0 → 9.2.1
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.
- package/{component-b3b0e670.d.ts → component-d11f26be.d.ts} +0 -0
- package/{component-b3b0e670.js → component-d11f26be.js} +7 -14
- package/component.d.ts +1 -1
- package/component.js +16 -24
- package/components/flag-icon/component.js +2 -9
- package/components/flag-icon/flagSprite.js +0 -2
- package/components/flag-icon/index.css +3 -3
- package/components/flag-icon/index.js +1 -3
- package/components/index.js +5 -7
- package/components/select/component.js +15 -21
- package/components/select/index.css +6 -6
- package/components/select/index.js +5 -7
- package/components/select-field/component.js +4 -6
- package/components/select-field/index.css +9 -9
- package/components/select-field/index.d.ts +1 -1
- package/components/select-field/index.js +4 -6
- package/cssm/{component-1eeab8e9.d.ts → component-555bdbef.d.ts} +0 -0
- package/cssm/{component-1eeab8e9.js → component-555bdbef.js} +8 -16
- package/cssm/component.d.ts +1 -1
- package/cssm/component.js +17 -26
- package/cssm/components/flag-icon/component.js +1 -9
- package/cssm/components/flag-icon/flagSprite.js +0 -2
- package/cssm/components/flag-icon/index.js +1 -3
- package/cssm/components/index.js +6 -8
- package/cssm/components/select/component.js +16 -23
- package/cssm/components/select/index.js +5 -7
- package/cssm/components/select-field/component.js +5 -7
- package/cssm/components/select-field/index.d.ts +1 -1
- package/cssm/components/select-field/index.js +4 -6
- package/cssm/index.js +10 -12
- package/cssm/{libphonenumber-js.min-903db150.d.ts → libphonenumber-js.min-e2e76e74.d.ts} +0 -0
- package/cssm/{libphonenumber-js.min-903db150.js → libphonenumber-js.min-e2e76e74.js} +0 -0
- package/cssm/useCaretAvoidCountryCode.js +0 -2
- package/cssm/utils/calculateCaretPos.js +0 -2
- package/cssm/utils/format-phone-with-unclearable-country-code.js +2 -4
- package/cssm/utils/preparePasteData.js +7 -9
- package/esm/{component-1fd0e5df.d.ts → component-f7046474.d.ts} +0 -0
- package/esm/{component-1fd0e5df.js → component-f7046474.js} +3 -3
- package/esm/component.d.ts +1 -1
- package/esm/component.js +15 -15
- package/esm/components/flag-icon/component.js +1 -1
- package/esm/components/flag-icon/index.css +3 -3
- package/esm/components/flag-icon/index.js +1 -1
- package/esm/components/index.js +5 -5
- package/esm/components/select/component.js +6 -6
- package/esm/components/select/index.css +6 -6
- package/esm/components/select/index.js +5 -5
- package/esm/components/select-field/component.js +4 -4
- package/esm/components/select-field/index.css +9 -9
- package/esm/components/select-field/index.d.ts +1 -1
- package/esm/components/select-field/index.js +4 -4
- package/esm/index.css +5 -5
- package/esm/index.js +8 -8
- package/esm/{libphonenumber-js.min-ae2df8d5.d.ts → libphonenumber-js.min-2001ae08.d.ts} +0 -0
- package/esm/{libphonenumber-js.min-ae2df8d5.js → libphonenumber-js.min-2001ae08.js} +0 -0
- package/esm/utils/format-phone-with-unclearable-country-code.js +2 -2
- package/esm/utils/preparePasteData.js +7 -7
- package/index.css +5 -5
- package/index.js +8 -10
- package/{libphonenumber-js.min-0775258e.d.ts → libphonenumber-js.min-ebcb18c3.d.ts} +0 -0
- package/{libphonenumber-js.min-0775258e.js → libphonenumber-js.min-ebcb18c3.js} +0 -0
- package/modern/component.d.ts +1 -1
- package/modern/component.js +5 -5
- package/modern/components/flag-icon/component.js +1 -1
- package/modern/components/flag-icon/index.css +3 -3
- package/modern/components/flag-icon/index.js +1 -1
- package/modern/components/index.js +5 -5
- package/modern/components/select/component.js +6 -6
- package/modern/components/select/index.css +6 -6
- package/modern/components/select/index.js +6 -6
- package/modern/components/select-field/component.js +4 -4
- package/modern/components/select-field/index.css +9 -9
- package/modern/components/select-field/index.js +4 -4
- package/modern/index.css +5 -5
- package/modern/index.js +4 -4
- package/modern/{libphonenumber-js.min-ae2df8d5.d.ts → libphonenumber-js.min-2001ae08.d.ts} +0 -0
- package/modern/{libphonenumber-js.min-ae2df8d5.js → libphonenumber-js.min-2001ae08.js} +0 -0
- package/package.json +3 -3
- package/useCaretAvoidCountryCode.js +0 -2
- package/utils/calculateCaretPos.js +0 -2
- package/utils/format-phone-with-unclearable-country-code.js +2 -4
- package/utils/preparePasteData.js +7 -9
|
File without changes
|
|
@@ -1,19 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var cn = require('classnames');
|
|
5
|
-
var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
6
4
|
var mergeRefs = require('react-merge-refs');
|
|
5
|
+
var cn = require('classnames');
|
|
7
6
|
var hooks = require('@alfalab/hooks');
|
|
7
|
+
var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
8
8
|
var components_flagIcon_component = require('./components/flag-icon/component.js');
|
|
9
9
|
|
|
10
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
-
|
|
12
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
14
|
-
var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultLegacy(WorldMagnifierMIcon);
|
|
15
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
16
|
-
|
|
17
10
|
/******************************************************************************
|
|
18
11
|
Copyright (c) Microsoft Corporation.
|
|
19
12
|
|
|
@@ -53,7 +46,7 @@ function __rest(s, e) {
|
|
|
53
46
|
return t;
|
|
54
47
|
}
|
|
55
48
|
|
|
56
|
-
var styles = {"component":"intl-phone-
|
|
49
|
+
var styles = {"component":"intl-phone-input__component_10mti","flagIconContainer":"intl-phone-input__flagIconContainer_10mti","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_10mti","disabled":"intl-phone-input__disabled_10mti","inner":"intl-phone-input__inner_10mti","l":"intl-phone-input__l_10mti","xl":"intl-phone-input__xl_10mti","focusVisible":"intl-phone-input__focusVisible_10mti"};
|
|
57
50
|
require('./components/select-field/index.css')
|
|
58
51
|
|
|
59
52
|
var EMPTY_COUNTRY_SELECT_FIELD = {
|
|
@@ -65,13 +58,13 @@ var SelectField = function (_a) {
|
|
|
65
58
|
var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
|
|
66
59
|
var wrapperRef = React.useRef(null);
|
|
67
60
|
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
68
|
-
var ref = innerProps.ref ?
|
|
69
|
-
return (
|
|
61
|
+
var ref = innerProps.ref ? mergeRefs([innerProps.ref, wrapperRef]) : wrapperRef;
|
|
62
|
+
return (React.createElement("div", { ref: ref, className: cn(styles.component, size && styles[size], (_b = {},
|
|
70
63
|
_b[styles.focusVisible] = focusVisible,
|
|
71
64
|
_b[styles.disabled] = disabled,
|
|
72
65
|
_b)) },
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
React.createElement("div", exports.__assign({}, innerProps, { className: styles.inner }),
|
|
67
|
+
React.createElement("span", { className: styles.flagIconContainer }, !selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })) : (React.createElement(components_flagIcon_component.FlagIcon, { country: selected.value }))),
|
|
75
68
|
Arrow)));
|
|
76
69
|
};
|
|
77
70
|
|
package/component.d.ts
CHANGED
|
@@ -63,7 +63,7 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Omit<Input
|
|
|
63
63
|
/**
|
|
64
64
|
* Обработчик события изменения страны
|
|
65
65
|
*/
|
|
66
|
-
onCountryChange?: ((countryCode?: CountryCode
|
|
66
|
+
onCountryChange?: ((countryCode?: CountryCode) => void) | undefined;
|
|
67
67
|
/**
|
|
68
68
|
* Список стран
|
|
69
69
|
*/
|
package/component.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_selectField_component = require('./component-b3b0e670.js');
|
|
3
|
+
var components_selectField_component = require('./component-d11f26be.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var cn = require('classnames');
|
|
8
6
|
var coreComponentsInputAutocomplete = require('@alfalab/core-components-input-autocomplete');
|
|
@@ -13,19 +11,13 @@ var utils_formatPhoneWithUnclearableCountryCode = require('./utils/format-phone-
|
|
|
13
11
|
var utils_preparePasteData = require('./utils/preparePasteData.js');
|
|
14
12
|
require('react-merge-refs');
|
|
15
13
|
require('@alfalab/hooks');
|
|
16
|
-
require('./components/flag-icon/flagSprite.js');
|
|
17
14
|
var components_flagIcon_component = require('./components/flag-icon/component.js');
|
|
18
|
-
require('@alfalab/core-components-select');
|
|
19
15
|
var components_select_component = require('./components/select/component.js');
|
|
20
16
|
var useCaretAvoidCountryCode = require('./useCaretAvoidCountryCode.js');
|
|
17
|
+
require('./components/flag-icon/flagSprite.js');
|
|
18
|
+
require('@alfalab/core-components-select');
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
25
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
26
|
-
var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultLegacy(WorldMagnifierMIcon);
|
|
27
|
-
|
|
28
|
-
var styles = {"addons":"intl-phone-input__addons_bt23w","l":"intl-phone-input__l_bt23w","xl":"intl-phone-input__xl_bt23w","flagIconWrapper":"intl-phone-input__flagIconWrapper_bt23w","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_bt23w"};
|
|
20
|
+
var styles = {"addons":"intl-phone-input__addons_1947q","l":"intl-phone-input__l_1947q","xl":"intl-phone-input__xl_1947q","flagIconWrapper":"intl-phone-input__flagIconWrapper_1947q","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1947q"};
|
|
29
21
|
require('./index.css')
|
|
30
22
|
|
|
31
23
|
var countriesHash = utils.getCountriesHash();
|
|
@@ -55,16 +47,16 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
55
47
|
return part;
|
|
56
48
|
}
|
|
57
49
|
if (index > 2) {
|
|
58
|
-
return acc
|
|
50
|
+
return "".concat(acc, "-").concat(part);
|
|
59
51
|
}
|
|
60
|
-
return acc
|
|
52
|
+
return "".concat(acc, " ").concat(part);
|
|
61
53
|
}, '');
|
|
62
54
|
}
|
|
63
55
|
return newValue;
|
|
64
56
|
};
|
|
65
57
|
var setCountryByIso2 = function (iso2) {
|
|
66
58
|
var country = countriesHash[iso2];
|
|
67
|
-
var inputValue = "+"
|
|
59
|
+
var inputValue = "+".concat(country.dialCode);
|
|
68
60
|
onChange(inputValue);
|
|
69
61
|
setCountryIso2(country.iso2);
|
|
70
62
|
return country;
|
|
@@ -83,7 +75,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
83
75
|
}
|
|
84
76
|
}
|
|
85
77
|
var targetCountry = countries.find(function (country) {
|
|
86
|
-
if (new RegExp("^\\+"
|
|
78
|
+
if (new RegExp("^\\+".concat(country.dialCode)).test(inputValue)) {
|
|
87
79
|
// Сначала проверяем, если приоритет не указан
|
|
88
80
|
if (country.priority === undefined) {
|
|
89
81
|
return true;
|
|
@@ -125,7 +117,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
125
117
|
var addCountryCode = function (inputValue) {
|
|
126
118
|
if (clearableCountryCode || !countryIso2) {
|
|
127
119
|
return inputValue.length === 1 && inputValue !== '+'
|
|
128
|
-
? "+"
|
|
120
|
+
? "+".concat(inputValue)
|
|
129
121
|
: inputValue;
|
|
130
122
|
}
|
|
131
123
|
var country = countriesHash[countryIso2];
|
|
@@ -139,7 +131,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
139
131
|
var selected = _a.selected;
|
|
140
132
|
if (selected) {
|
|
141
133
|
var country_1 = setCountryByIso2(selected.value);
|
|
142
|
-
var inputValue = "+"
|
|
134
|
+
var inputValue = "+".concat(country_1.dialCode);
|
|
143
135
|
if (inputRef.current) {
|
|
144
136
|
inputRef.current.focus();
|
|
145
137
|
inputRef.current.setSelectionRange(inputValue.length, inputValue.length);
|
|
@@ -155,7 +147,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
155
147
|
onChange(formatPhone(selected.key));
|
|
156
148
|
};
|
|
157
149
|
var country = countryIso2 && countriesHash[countryIso2];
|
|
158
|
-
var countryCodeLength = country ?
|
|
150
|
+
var countryCodeLength = country ? "+".concat(country.dialCode).length : 0;
|
|
159
151
|
var isEmptyValue = clearableCountryCode
|
|
160
152
|
? value === '' || value === '+'
|
|
161
153
|
: value.length <= countryCodeLength;
|
|
@@ -184,7 +176,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
184
176
|
newValue = '+7';
|
|
185
177
|
}
|
|
186
178
|
else if (newValueDecimal.length === 1) {
|
|
187
|
-
newValue = "+7"
|
|
179
|
+
newValue = "+7".concat(newValueDecimal);
|
|
188
180
|
}
|
|
189
181
|
}
|
|
190
182
|
newValue = formatPhone(addCountryCode(newValue));
|
|
@@ -193,7 +185,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
193
185
|
phonePartWithoutMask = phonePartWithoutMask.slice(0, -1);
|
|
194
186
|
}
|
|
195
187
|
if (newValue && newValue[0] !== '+') {
|
|
196
|
-
newValue = "+"
|
|
188
|
+
newValue = "+".concat(newValue);
|
|
197
189
|
}
|
|
198
190
|
setCaretPos(utils_calculateCaretPos.calculateCaretPos(phonePartWithoutMask, newValue));
|
|
199
191
|
setCountryByDialCodeWithLengthCheck(newValue);
|
|
@@ -277,7 +269,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
277
269
|
if (phoneLibUtils.current)
|
|
278
270
|
return;
|
|
279
271
|
Promise.resolve().then(function () { return require(
|
|
280
|
-
/* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-
|
|
272
|
+
/* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-ebcb18c3.js'); })
|
|
281
273
|
.then(function (utils) {
|
|
282
274
|
phoneLibUtils.current = utils.AsYouType;
|
|
283
275
|
if (canBeEmptyCountry) {
|
|
@@ -287,7 +279,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
287
279
|
setCountryByDialCode(value);
|
|
288
280
|
}
|
|
289
281
|
})
|
|
290
|
-
.catch(function (error) { return "An error occurred while loading libphonenumber-js:\n"
|
|
282
|
+
.catch(function (error) { return "An error occurred while loading libphonenumber-js:\n".concat(error); });
|
|
291
283
|
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
|
292
284
|
}, [value]);
|
|
293
285
|
React.useEffect(function () {
|
|
@@ -308,7 +300,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
308
300
|
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
|
309
301
|
}, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
|
|
310
302
|
useCaretAvoidCountryCode.useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
|
|
311
|
-
return (
|
|
303
|
+
return (React.createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({ clear: clear && !isEmptyValue, onClear: handleClear }, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn(className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))) : (countries.length > 1 && (React.createElement(components_select_component.CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip }))) }), optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
|
|
312
304
|
});
|
|
313
305
|
|
|
314
306
|
exports.IntlPhoneInput = IntlPhoneInput;
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var components_flagIcon_flagSprite = require('./flagSprite.js');
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
13
|
-
|
|
14
|
-
var styles = {"flagIcon":"intl-phone-input__flagIcon_aad6g","flagPlaceholder":"intl-phone-input__flagPlaceholder_aad6g"};
|
|
7
|
+
var styles = {"flagIcon":"intl-phone-input__flagIcon_1yrjc","flagPlaceholder":"intl-phone-input__flagPlaceholder_1yrjc"};
|
|
15
8
|
require('./index.css')
|
|
16
9
|
|
|
17
10
|
/**
|
|
@@ -19,7 +12,7 @@ require('./index.css')
|
|
|
19
12
|
*/
|
|
20
13
|
var FlagIcon = function (_a) {
|
|
21
14
|
var _b = _a.country, country = _b === void 0 ? '' : _b, className = _a.className;
|
|
22
|
-
return components_flagIcon_flagSprite.flagSprite[country] ? (
|
|
15
|
+
return components_flagIcon_flagSprite.flagSprite[country] ? (React.createElement("span", { className: cn(styles.flagIcon, className), dangerouslySetInnerHTML: { __html: components_flagIcon_flagSprite.flagSprite[country] } })) : (React.createElement("div", { className: cn(styles.flagPlaceholder, className) }));
|
|
23
16
|
};
|
|
24
17
|
|
|
25
18
|
exports.FlagIcon = FlagIcon;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var flagSprite = {
|
|
6
4
|
'ge-ab': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M0 0h24v24H0z"/><g clip-path="url(#a)"><path fill="#F5F5F5" d="M24 6.4H0v2.2h24V6.4Z"/><path fill="#73AF00" d="M24 8.6H0V11h24V8.6Z"/><path fill="#F5F5F5" d="M24 10.9H0V13h24V11Z"/><path fill="#73AF00" d="M24 13.1H0v2.3h24V13Z"/><path fill="#F5F5F5" d="M24 15.4H0v2.2h24v-2.2Z"/><path fill="#73AF00" d="M22.2 4.1H1.8C.8 4.1 0 5 0 6v.5h24v-.5c0-1-.8-1.8-1.8-1.8ZM24 17.6H0v.5c0 1 .8 1.7 1.7 1.8h20.6c1 0 1.7-.9 1.7-1.8v-.5Z"/><path fill="#FF4B55" d="M0 6v4.5c0 .2.2.4.4.4h11.2c.2 0 .4-.2.4-.4v-6c0-.2-.2-.3-.4-.4H1.8C.8 4.1 0 5 0 6Z"/><path fill="#F5F5F5" d="M6.4 10.3H5.6l-.3-.6V7.3a.1.1 0 0 1 .2 0V8h.1V6.8a.1.1 0 0 1 .3 0V8L6 6.7a.1.1 0 0 1 .2 0V8h.2V7a.1.1 0 0 1 .2 0v1.2l.3.6c0-.2.2-.5.4-.6h.1v.2a1 1 0 0 0-.2.7v.1l-.6.7v.3l-.2.1ZM6 4.7l.1.3h.4l-.3.3.1.3-.3-.2-.3.2v-.3L5.6 5H6v-.4H6ZM4.4 5.2l.1.3H5l-.3.3.1.3-.3-.2-.3.2v-.3L4 5.6v-.1h.4v-.3h.1ZM7.7 5.2l.1.3h.3l-.2.3V6L7.7 6l-.3.2v-.3l-.2-.2v-.1h.3l.1-.3ZM8.8 6.4v.3h.4L9 7v.3l-.3-.2-.2.2V7l-.3-.2h.4l.1-.4ZM3.2 6.4l.1.3h.4l-.3.3.1.3-.3-.2-.3.2L3 7l-.3-.2h.4v-.4h.1ZM9 8l.2.3h.3v.1l-.2.2v.3l-.2-.1-.3.2v-.4l-.2-.2h.3L9 8ZM2.8 8l.1.3h.4v.1l-.3.2.1.3-.3-.1-.3.2v-.4l-.2-.2h.4V8h.1Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0V0Z"/></clipPath></defs></svg>',
|
|
7
5
|
af: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M0 0h24v24H0z"/><path fill="#464655" d="M1.8 19.9H8V4H1.8C.8 4.1 0 5 0 6v12.2c0 1 .8 1.8 1.8 1.8Z"/><path fill="#FF4B55" d="M16 4.1H8V20h8V4Z"/><path fill="#73AF00" d="M22.2 19.9c1 0 1.8-.8 1.8-1.8V5.9c0-1-.8-1.8-1.8-1.8H16V20h6.2Z"/><path fill="#F5F5F5" d="M11.4 11.6H11v.1h.4ZM13 12.8h-2v-.2h2v.2ZM13 10.9h-2v.2h2V11Z"/><path fill="#F5F5F5" d="M12.6 11h-1.2l.2-.2h.8l.2.2ZM11.4 12.2H11v.3h.4v-.3ZM11.4 11.9H11v.2h.4v-.2ZM11.4 11.3H11v.2h.4v-.2ZM13 12.2h-.4v.3h.4v-.3ZM13 11.9h-.4v.2h.4v-.2ZM13 11.3h-.4v.2h.4v-.2ZM13 11.6h-.4v.1h.4ZM11.4 10.3h-.2v.5h.2v-.5ZM11.4 10.2h-.2V10a.1.1 0 0 1 .2 0ZM12.8 10.3h-.2v.5h.2v-.5ZM12.8 10.2h-.2V10a.1.1 0 0 1 .2 0ZM12 11.3c-.3 0-.5.2-.5.4v.8h1v-.8c0-.2-.2-.4-.5-.4Z"/><path fill="#F5F5F5" d="m11.2 12-.6-.8a.1.1 0 1 0-.2.1l.1.1-.3.8.4.3.3-.7.2.3h.1Zm-.6.3-.3-.3.2-.3.3.3-.2.3ZM12.9 12l.2-.2.3.7.4-.3-.3-.8a.1.1 0 1 0 0-.2l-.7.8Zm.4 0 .2-.3.2.3-.3.3-.1-.3ZM12.1 10h-.2a.5.5 0 0 0-.4.7h1v-.2c0-.2-.2-.4-.4-.4ZM9.3 11.8a2.8 2.8 0 0 1 0-.6 2.6 2.6 0 0 0 0 .7h.3a2.4 2.4 0 0 1 0-.5l.2.6s.4-.6-.3-1.2v.2h-.4a3 3 0 0 0-.1.8h.3Z"/><path fill="#F5F5F5" d="M10.3 9.4a.1.1 0 1 0-.1-.2c-.6.5-1 1-1.1 1.7h.2c.2-.6.5-1.1 1-1.5Z"/><path fill="#F5F5F5" d="M10.2 9.7c-.3.3-.5.6-.6 1h.1l.6-.8a.1.1 0 0 0-.1-.2ZM9.7 13.2l-.4-.9h.2c0 .4.2.6.4.9h.2l-.3-.7h.1l.4.6h.2a2 2 0 0 1-.2-.4l-.2-.4-.2-.2h-.4l-.1-.1h-.1l-.3-.1H9v.2l.2.1c0 .4.2.7.4 1h.2ZM14.5 11v-.2c-.7.6-.3 1.2-.3 1.2 0-.2 0-.4.2-.6a2.1 2.1 0 0 1 0 .6l.2-.1a2.7 2.7 0 0 0 0-.7h.1a2.8 2.8 0 0 1 0 .6h.3a3 3 0 0 0 0-.7h-.5ZM14.7 10.9h.2a3 3 0 0 0-1-1.7.1.1 0 0 0-.2.2c.5.4.8 1 1 1.5ZM14.4 10.6l-.6-.9a.1.1 0 1 0-.1.2l.6.9.1-.2ZM15 11.9h-.3v.1h-.2l-.4.1-.2.2-.2.4-.2.3h.2c.2 0 .3-.3.4-.4l.1-.1-.3.6h.2l.4-.7h.2l-.4.8h.2c.2-.3.4-.6.4-1l.1-.1.1-.2H15ZM13.3 13.2a2 2 0 0 1-2.5 0h-.2l-1.2.2.2.2.3.1.7.6v.1a3 3 0 0 0 2.9 0l-.1-.1.7-.6h.3l.2-.3-1.2-.2h-.1Zm-2.6.9-.6-.5h.2l.5.4Zm3.2-.5-.6.5V14l.4-.4h.2ZM12 14c-.6 0-1.1-.2-1.5-.5h.1a2.3 2.3 0 0 0 2.8 0h.1c-.4.3-1 .5-1.5.5Z"/><path fill="#F5F5F5" d="m10.7 13 .1.2h2.4l.1-.2h-2.6Z"/></svg>',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: jhuve */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
|
|
4
4
|
}
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
:root {
|
|
17
17
|
--border-radius-xs: 2px;
|
|
18
18
|
}
|
|
19
|
-
.intl-phone-
|
|
19
|
+
.intl-phone-input__flagIcon_1yrjc {
|
|
20
20
|
max-width: 24px;
|
|
21
21
|
max-height: 24px;
|
|
22
22
|
}
|
|
23
|
-
.intl-phone-
|
|
23
|
+
.intl-phone-input__flagPlaceholder_1yrjc {
|
|
24
24
|
width: 24px;
|
|
25
25
|
height: 16px;
|
|
26
26
|
max-height: 16px;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var components_flagIcon_component = require('./component.js');
|
|
5
4
|
require('react');
|
|
6
5
|
require('classnames');
|
|
7
6
|
require('./flagSprite.js');
|
|
8
|
-
var components_flagIcon_component = require('./component.js');
|
|
9
7
|
|
|
10
8
|
|
|
11
9
|
|
package/components/index.js
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var components_selectField_component = require('../component-d11f26be.js');
|
|
4
|
+
var components_flagIcon_component = require('./flag-icon/component.js');
|
|
5
|
+
var components_select_component = require('./select/component.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('classnames');
|
|
8
|
-
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
9
7
|
require('react-merge-refs');
|
|
8
|
+
require('classnames');
|
|
10
9
|
require('@alfalab/hooks');
|
|
10
|
+
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
11
11
|
require('./flag-icon/flagSprite.js');
|
|
12
|
-
var components_flagIcon_component = require('./flag-icon/component.js');
|
|
13
12
|
require('@alfalab/core-components-select');
|
|
14
|
-
var components_select_component = require('./select/component.js');
|
|
15
13
|
|
|
16
14
|
|
|
17
15
|
|
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_selectField_component = require('../../component-b3b0e670.js');
|
|
3
|
+
var components_selectField_component = require('../../component-d11f26be.js');
|
|
6
4
|
var React = require('react');
|
|
7
|
-
require('
|
|
8
|
-
require('
|
|
5
|
+
var coreComponentsSelect = require('@alfalab/core-components-select');
|
|
6
|
+
var components_flagIcon_component = require('../flag-icon/component.js');
|
|
9
7
|
require('react-merge-refs');
|
|
8
|
+
require('classnames');
|
|
10
9
|
require('@alfalab/hooks');
|
|
10
|
+
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
11
11
|
require('../flag-icon/flagSprite.js');
|
|
12
|
-
var components_flagIcon_component = require('../flag-icon/component.js');
|
|
13
|
-
var coreComponentsSelect = require('@alfalab/core-components-select');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
12
|
|
|
19
|
-
var styles = {"component":"intl-phone-
|
|
13
|
+
var styles = {"component":"intl-phone-input__component_fjoop","option":"intl-phone-input__option_fjoop","flag":"intl-phone-input__flag_fjoop","countryName":"intl-phone-input__countryName_fjoop","dialCode":"intl-phone-input__dialCode_fjoop"};
|
|
20
14
|
require('./index.css')
|
|
21
15
|
|
|
22
16
|
var CountriesSelect = function (_a) {
|
|
@@ -27,20 +21,20 @@ var CountriesSelect = function (_a) {
|
|
|
27
21
|
return ({
|
|
28
22
|
key: iso2,
|
|
29
23
|
value: iso2,
|
|
30
|
-
content: (
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
content: (React.createElement("span", { className: styles.option },
|
|
25
|
+
React.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles.flag }),
|
|
26
|
+
React.createElement("span", { className: styles.optionTextWrap },
|
|
27
|
+
React.createElement("span", { className: styles.countryName }, name),
|
|
28
|
+
React.createElement("span", { className: styles.dialCode },
|
|
35
29
|
"+",
|
|
36
30
|
dialCode)))),
|
|
37
31
|
});
|
|
38
32
|
});
|
|
39
33
|
}, [countries]);
|
|
40
|
-
var renderOptionsList = React.useCallback(function (props) { return (
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
|
|
34
|
+
var renderOptionsList = React.useCallback(function (props) { return (React.createElement("div", { style: { width: fieldWidth || 0 } },
|
|
35
|
+
React.createElement(coreComponentsSelect.VirtualOptionsList, components_selectField_component.__assign({}, props)))); }, [fieldWidth]);
|
|
36
|
+
return (React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
|
|
37
|
+
React.createElement(coreComponentsSelect.Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
|
|
44
38
|
};
|
|
45
39
|
|
|
46
40
|
exports.CountriesSelect = CountriesSelect;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: y6xme */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-text-secondary: rgba(11, 31, 53, 0.7);
|
|
4
4
|
}
|
|
@@ -16,23 +16,23 @@
|
|
|
16
16
|
:root {
|
|
17
17
|
--text-secondary-color: var(--color-light-text-secondary);
|
|
18
18
|
}
|
|
19
|
-
.intl-phone-
|
|
19
|
+
.intl-phone-input__component_fjoop {
|
|
20
20
|
position: static;
|
|
21
21
|
display: flex;
|
|
22
22
|
min-width: initial;
|
|
23
23
|
height: 100%;
|
|
24
24
|
}
|
|
25
|
-
.intl-phone-
|
|
25
|
+
.intl-phone-input__option_fjoop {
|
|
26
26
|
display: flex;
|
|
27
27
|
align-items: flex-start;
|
|
28
28
|
}
|
|
29
|
-
.intl-phone-
|
|
29
|
+
.intl-phone-input__flag_fjoop {
|
|
30
30
|
flex-shrink: 0;
|
|
31
31
|
margin-right: var(--gap-xs);
|
|
32
32
|
}
|
|
33
|
-
.intl-phone-
|
|
33
|
+
.intl-phone-input__countryName_fjoop {
|
|
34
34
|
margin-right: var(--gap-xs);
|
|
35
35
|
}
|
|
36
|
-
.intl-phone-
|
|
36
|
+
.intl-phone-input__dialCode_fjoop {
|
|
37
37
|
color: var(--text-secondary-color);
|
|
38
38
|
}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('../../component-b3b0e670.js');
|
|
3
|
+
var components_select_component = require('./component.js');
|
|
4
|
+
require('../../component-d11f26be.js');
|
|
6
5
|
require('react');
|
|
7
|
-
require('classnames');
|
|
8
|
-
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
9
6
|
require('react-merge-refs');
|
|
7
|
+
require('classnames');
|
|
10
8
|
require('@alfalab/hooks');
|
|
11
|
-
require('
|
|
9
|
+
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
12
10
|
require('../flag-icon/component.js');
|
|
11
|
+
require('../flag-icon/flagSprite.js');
|
|
13
12
|
require('@alfalab/core-components-select');
|
|
14
|
-
var components_select_component = require('./component.js');
|
|
15
13
|
|
|
16
14
|
|
|
17
15
|
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_selectField_component = require('../../component-b3b0e670.js');
|
|
3
|
+
var components_selectField_component = require('../../component-d11f26be.js');
|
|
6
4
|
require('react');
|
|
7
|
-
require('classnames');
|
|
8
|
-
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
9
5
|
require('react-merge-refs');
|
|
6
|
+
require('classnames');
|
|
10
7
|
require('@alfalab/hooks');
|
|
11
|
-
require('
|
|
8
|
+
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
12
9
|
require('../flag-icon/component.js');
|
|
10
|
+
require('../flag-icon/flagSprite.js');
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: xob7f */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-border-link: #007aff;
|
|
4
4
|
--color-light-graphic-secondary: #6d7986;
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
--focus-color: var(--color-light-border-link);
|
|
21
21
|
--disabled-cursor: not-allowed;
|
|
22
22
|
}
|
|
23
|
-
.intl-phone-
|
|
23
|
+
.intl-phone-input__component_10mti {
|
|
24
24
|
height: 100%;
|
|
25
25
|
cursor: pointer;
|
|
26
26
|
outline: none;
|
|
27
27
|
position: relative;
|
|
28
28
|
}
|
|
29
|
-
.intl-phone-
|
|
29
|
+
.intl-phone-input__flagIconContainer_10mti {
|
|
30
30
|
display: flex;
|
|
31
31
|
justify-content: center;
|
|
32
32
|
align-items: center;
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
height: 24px;
|
|
35
35
|
margin-right: var(--gap-2xs);
|
|
36
36
|
}
|
|
37
|
-
.intl-phone-
|
|
37
|
+
.intl-phone-input__emptyCountryIcon_10mti {
|
|
38
38
|
color: var(--color-light-graphic-secondary);
|
|
39
39
|
}
|
|
40
|
-
.intl-phone-
|
|
40
|
+
.intl-phone-input__disabled_10mti {
|
|
41
41
|
cursor: var(--disabled-cursor);
|
|
42
42
|
}
|
|
43
|
-
.intl-phone-
|
|
43
|
+
.intl-phone-input__inner_10mti {
|
|
44
44
|
position: relative;
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: center;
|
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
padding-left: var(--gap-s);
|
|
49
49
|
outline: none;
|
|
50
50
|
}
|
|
51
|
-
.intl-phone-
|
|
52
|
-
.intl-phone-
|
|
51
|
+
.intl-phone-input__l_10mti .intl-phone-input__inner_10mti,
|
|
52
|
+
.intl-phone-input__xl_10mti .intl-phone-input__inner_10mti {
|
|
53
53
|
padding-left: var(--gap-m);
|
|
54
54
|
}
|
|
55
|
-
.intl-phone-
|
|
55
|
+
.intl-phone-input__focusVisible_10mti {
|
|
56
56
|
outline: 2px solid var(--focus-color);
|
|
57
57
|
outline-offset: 2px;
|
|
58
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../component-
|
|
1
|
+
export * from "../../component-d11f26be";
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_selectField_component = require('../../component-b3b0e670.js');
|
|
3
|
+
var components_selectField_component = require('../../component-d11f26be.js');
|
|
6
4
|
require('react');
|
|
7
|
-
require('classnames');
|
|
8
|
-
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
9
5
|
require('react-merge-refs');
|
|
6
|
+
require('classnames');
|
|
10
7
|
require('@alfalab/hooks');
|
|
11
|
-
require('
|
|
8
|
+
require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
12
9
|
require('../flag-icon/component.js');
|
|
10
|
+
require('../flag-icon/flagSprite.js');
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
|
|
File without changes
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var cn = require('classnames');
|
|
5
|
-
var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
6
4
|
var mergeRefs = require('react-merge-refs');
|
|
5
|
+
var cn = require('classnames');
|
|
7
6
|
var hooks = require('@alfalab/hooks');
|
|
7
|
+
var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
|
|
8
8
|
var components_flagIcon_component = require('./components/flag-icon/component.js');
|
|
9
9
|
var styles = require('./components/select-field/index.module.css');
|
|
10
10
|
|
|
11
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
-
|
|
13
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
15
|
-
var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultLegacy(WorldMagnifierMIcon);
|
|
16
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
17
|
-
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
18
|
-
|
|
19
11
|
/******************************************************************************
|
|
20
12
|
Copyright (c) Microsoft Corporation.
|
|
21
13
|
|
|
@@ -64,13 +56,13 @@ var SelectField = function (_a) {
|
|
|
64
56
|
var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
|
|
65
57
|
var wrapperRef = React.useRef(null);
|
|
66
58
|
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
67
|
-
var ref = innerProps.ref ?
|
|
68
|
-
return (
|
|
69
|
-
_b[
|
|
70
|
-
_b[
|
|
59
|
+
var ref = innerProps.ref ? mergeRefs([innerProps.ref, wrapperRef]) : wrapperRef;
|
|
60
|
+
return (React.createElement("div", { ref: ref, className: cn(styles.component, size && styles[size], (_b = {},
|
|
61
|
+
_b[styles.focusVisible] = focusVisible,
|
|
62
|
+
_b[styles.disabled] = disabled,
|
|
71
63
|
_b)) },
|
|
72
|
-
|
|
73
|
-
|
|
64
|
+
React.createElement("div", exports.__assign({}, innerProps, { className: styles.inner }),
|
|
65
|
+
React.createElement("span", { className: styles.flagIconContainer }, !selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })) : (React.createElement(components_flagIcon_component.FlagIcon, { country: selected.value }))),
|
|
74
66
|
Arrow)));
|
|
75
67
|
};
|
|
76
68
|
|
package/cssm/component.d.ts
CHANGED
|
@@ -63,7 +63,7 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Omit<Input
|
|
|
63
63
|
/**
|
|
64
64
|
* Обработчик события изменения страны
|
|
65
65
|
*/
|
|
66
|
-
onCountryChange?: ((countryCode?: CountryCode
|
|
66
|
+
onCountryChange?: ((countryCode?: CountryCode) => void) | undefined;
|
|
67
67
|
/**
|
|
68
68
|
* Список стран
|
|
69
69
|
*/
|