@alfalab/core-components-international-phone-input 2.7.16 → 2.7.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 (73) hide show
  1. package/Component.responsive.d.ts +2 -2
  2. package/components/base-international-phone-input/Component.js +2 -2
  3. package/components/base-international-phone-input/index.css +2 -2
  4. package/components/country-select/Component.js +13 -5
  5. package/components/country-select/index.css +15 -10
  6. package/components/flag-icon/component.js +1 -1
  7. package/components/flag-icon/index.css +3 -3
  8. package/components/select-field/component.js +3 -12
  9. package/components/select-field/index.css +8 -9
  10. package/consts.d.ts +12 -1
  11. package/consts.js +12 -0
  12. package/cssm/Component.responsive.d.ts +2 -2
  13. package/cssm/components/base-international-phone-input/Component.js +1 -1
  14. package/cssm/components/country-select/Component.js +12 -4
  15. package/cssm/components/country-select/index.module.css +8 -3
  16. package/cssm/components/select-field/component.js +2 -11
  17. package/cssm/components/select-field/index.module.css +1 -2
  18. package/cssm/consts.d.ts +12 -1
  19. package/cssm/consts.js +12 -0
  20. package/cssm/index-11f20b2e.d.ts +2 -2
  21. package/cssm/types.d.ts +2 -2
  22. package/cssm/{utils-34f6b81b.d.ts → utils-3abda7a6.d.ts} +1 -1
  23. package/esm/Component.responsive.d.ts +2 -2
  24. package/esm/components/base-international-phone-input/Component.js +2 -2
  25. package/esm/components/base-international-phone-input/index.css +2 -2
  26. package/esm/components/country-select/Component.js +12 -5
  27. package/esm/components/country-select/index.css +15 -10
  28. package/esm/components/flag-icon/component.js +1 -1
  29. package/esm/components/flag-icon/index.css +3 -3
  30. package/esm/components/select-field/component.js +2 -11
  31. package/esm/components/select-field/index.css +8 -9
  32. package/esm/consts.d.ts +12 -1
  33. package/esm/consts.js +12 -1
  34. package/esm/index-11f20b2e.d.ts +2 -2
  35. package/esm/types.d.ts +2 -2
  36. package/esm/{utils-34f6b81b.d.ts → utils-3abda7a6.d.ts} +1 -1
  37. package/index-11f20b2e.d.ts +2 -2
  38. package/modern/Component.responsive.d.ts +2 -2
  39. package/modern/components/base-international-phone-input/Component.js +2 -2
  40. package/modern/components/base-international-phone-input/index.css +2 -2
  41. package/modern/components/country-select/Component.js +12 -5
  42. package/modern/components/country-select/index.css +15 -10
  43. package/modern/components/flag-icon/component.js +1 -1
  44. package/modern/components/flag-icon/index.css +3 -3
  45. package/modern/components/select-field/component.js +2 -11
  46. package/modern/components/select-field/index.css +8 -9
  47. package/modern/consts.d.ts +12 -1
  48. package/modern/consts.js +12 -1
  49. package/modern/index-11f20b2e.d.ts +2 -2
  50. package/modern/types.d.ts +2 -2
  51. package/modern/{utils-34f6b81b.d.ts → utils-3abda7a6.d.ts} +1 -1
  52. package/moderncssm/Component.responsive.d.ts +2 -2
  53. package/moderncssm/components/base-international-phone-input/Component.js +1 -1
  54. package/moderncssm/components/country-select/Component.js +11 -4
  55. package/moderncssm/components/country-select/index.module.css +6 -1
  56. package/moderncssm/components/select-field/component.js +1 -10
  57. package/moderncssm/components/select-field/index.module.css +0 -1
  58. package/moderncssm/consts.d.ts +12 -1
  59. package/moderncssm/consts.js +12 -1
  60. package/moderncssm/index-11f20b2e.d.ts +2 -2
  61. package/moderncssm/types.d.ts +2 -2
  62. package/moderncssm/{utils-34f6b81b.d.ts → utils-3abda7a6.d.ts} +1 -1
  63. package/package.json +7 -7
  64. package/src/components/base-international-phone-input/Component.tsx +1 -0
  65. package/src/components/country-select/Component.tsx +16 -4
  66. package/src/components/country-select/index.module.css +5 -0
  67. package/src/components/select-field/component.tsx +1 -11
  68. package/src/components/select-field/index.module.css +0 -1
  69. package/src/consts.ts +12 -0
  70. package/src/types.ts +2 -2
  71. package/types.d.ts +2 -2
  72. package/utils-3abda7a6.d.ts +82 -0
  73. package/utils-34f6b81b.d.ts +0 -82
package/Component.responsive.d.ts CHANGED
@@ -36,9 +36,9 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
36
36
  onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
37
37
  } & {
38
38
  options: (import("./typings-d515b24c").OptionShape | import("./typings-d515b24c").GroupShape)[];
39
- } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
39
+ } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput" | "onClear"> & {
40
40
  options: (import("./typings-d515b24c").OptionShape | import("./typings-d515b24c").GroupShape)[];
41
- } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
41
+ } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput" | "onClear"> & {
42
42
  breakpoint?: number | undefined;
43
43
  client?: "desktop" | "mobile" | undefined;
44
44
  defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
package/components/base-international-phone-input/Component.js CHANGED
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
18
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
19
19
 
20
- var styles = {"component":"international-phone-input__component_1eoqi","addons":"international-phone-input__addons_1eoqi"};
20
+ var styles = {"component":"international-phone-input__component_auzsb","addons":"international-phone-input__addons_auzsb"};
21
21
  require('./index.css')
22
22
 
23
23
  var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
@@ -121,7 +121,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
121
121
  var renderCountrySelect = function (compact) {
122
122
  var _a;
123
123
  if (compact === void 0) { compact = false; }
124
- return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
124
+ return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId, size: size }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
125
125
  };
126
126
  var inputProps = tslib.__assign({ className: styles.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
127
127
  React.useEffect(function () {
package/components/base-international-phone-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6np8l */
1
+ /* hash: 1do8l */
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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,6 +22,6 @@
22
22
  --gap-0: 0px;
23
23
  } :root {
24
24
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
25
- } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_1eoqi .international-phone-input__addons_1eoqi {
25
+ } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_auzsb .international-phone-input__addons_auzsb {
26
26
  padding-left: var(--gap-0);
27
27
  }
package/components/country-select/Component.js CHANGED
@@ -4,28 +4,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
+ var cn = require('classnames');
7
8
  var shared = require('@alfalab/core-components-select/shared');
8
9
  var coreComponentsShared = require('@alfalab/core-components-shared');
9
10
  var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
11
+ var consts = require('../../consts.js');
10
12
  var components_flagIcon_component = require('../flag-icon/component.js');
11
13
  var components_selectField_component = require('../select-field/component.js');
12
14
 
13
15
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
14
16
 
15
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
19
 
17
- var styles = {"component":"international-phone-input__component_11jcn","option":"international-phone-input__option_11jcn","flag":"international-phone-input__flag_11jcn","countryName":"international-phone-input__countryName_11jcn","dialCode":"international-phone-input__dialCode_11jcn","flagIconWrapper":"international-phone-input__flagIconWrapper_11jcn","emptyCountryIcon":"international-phone-input__emptyCountryIcon_11jcn"};
20
+ var styles = {"component":"international-phone-input__component_6bzbm","option":"international-phone-input__option_6bzbm","mobile":"international-phone-input__mobile_6bzbm","size-72":"international-phone-input__size-72_6bzbm","flag":"international-phone-input__flag_6bzbm","countryName":"international-phone-input__countryName_6bzbm","dialCode":"international-phone-input__dialCode_6bzbm","flagIconWrapper":"international-phone-input__flagIconWrapper_6bzbm","emptyCountryIcon":"international-phone-input__emptyCountryIcon_6bzbm"};
18
21
  require('./index.css')
19
22
 
20
23
  var CountrySelect = function (_a) {
21
- var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
24
+ var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, size = _a.size, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent", "size"]);
25
+ var isMobile = React.useMemo(function () { return view === 'mobile'; }, [view]);
22
26
  var options = React.useMemo(function () {
23
27
  return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
24
28
  var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
25
29
  return {
26
30
  key: iso2,
27
31
  value: areas[0],
28
- content: (React__default.default.createElement("span", { className: styles.option },
32
+ content: (React__default.default.createElement("span", { className: cn__default.default([
33
+ styles.option,
34
+ size && styles[consts.SIZE_TO_CLASSNAME_MAP[size]],
35
+ isMobile && styles.mobile,
36
+ ]) },
29
37
  React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles.flag }),
30
38
  React__default.default.createElement("span", { className: styles.optionTextWrap },
31
39
  React__default.default.createElement("span", { className: styles.countryName }, name),
@@ -34,7 +42,7 @@ var CountrySelect = function (_a) {
34
42
  dialCode)))),
35
43
  };
36
44
  })) || [];
37
- }, [countries]);
45
+ }, [countries, size, isMobile]);
38
46
  var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
39
47
  React__default.default.createElement(shared.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
40
48
  var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
@@ -44,7 +52,7 @@ var CountrySelect = function (_a) {
44
52
  return (
45
53
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
46
54
  React__default.default.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
47
- React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: view === 'mobile' ? shared.VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
55
+ React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: isMobile ? shared.VirtualOptionsList : renderOptionsList }, (isMobile && {
48
56
  bottomSheetProps: {
49
57
  title: 'Выберите страну',
50
58
  },
package/components/country-select/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1w1eh */
1
+ /* hash: oxsig */
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);
@@ -17,7 +17,8 @@
17
17
  /* новые значения, используйте их */
18
18
  } :root { /* deprecated */ /* deprecated */
19
19
  --gap-xs: 8px; /* deprecated */
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
+ --gap-s: 12px; /* deprecated */ /* deprecated */
21
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
22
 
22
23
  /* новые значения, используйте их */
23
24
 
@@ -25,31 +26,35 @@
25
26
  /* stylelint-disable-next-line length-zero-no-unit */
26
27
  --gap-8: var(--gap-xs);
27
28
  --gap-12: var(--gap-s);
29
+ --gap-16: var(--gap-m);
28
30
  } :root {
29
31
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
30
- } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_11jcn {
32
+ } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_6bzbm {
31
33
  position: static;
32
34
  display: flex;
33
35
  min-width: initial;
34
36
  height: 100%;
35
- } .international-phone-input__option_11jcn {
37
+ } .international-phone-input__option_6bzbm {
36
38
  display: flex;
37
39
  align-items: flex-start;
38
- padding: var(--gap-12);
39
- } .international-phone-input__flag_11jcn {
40
+ padding: var(--gap-12)
41
+ } .international-phone-input__option_6bzbm.international-phone-input__mobile_6bzbm,
42
+ .international-phone-input__option_6bzbm.international-phone-input__size-72_6bzbm {
43
+ padding-left: var(--gap-16);
44
+ } .international-phone-input__flag_6bzbm {
40
45
  flex-shrink: 0;
41
46
  margin-right: var(--gap-8);
42
- } .international-phone-input__countryName_11jcn {
47
+ } .international-phone-input__countryName_6bzbm {
43
48
  margin-right: var(--gap-8);
44
- } .international-phone-input__dialCode_11jcn {
49
+ } .international-phone-input__dialCode_6bzbm {
45
50
  color: var(--color-light-text-secondary);
46
- } .international-phone-input__flagIconWrapper_11jcn {
51
+ } .international-phone-input__flagIconWrapper_6bzbm {
47
52
  display: flex;
48
53
  justify-content: center;
49
54
  align-items: center;
50
55
  width: 24px;
51
56
  height: 24px;
52
57
  margin-left: var(--gap-12);
53
- } .international-phone-input__emptyCountryIcon_11jcn {
58
+ } .international-phone-input__emptyCountryIcon_6bzbm {
54
59
  color: var(--color-light-neutral-translucent-700);
55
60
  }
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_7lvqb","flagPlaceholder":"international-phone-input__flagPlaceholder_7lvqb"};
14
+ var styles = {"flagIcon":"international-phone-input__flagIcon_12t92","flagPlaceholder":"international-phone-input__flagPlaceholder_12t92"};
15
15
  require('./index.css')
16
16
 
17
17
  /**
package/components/flag-icon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: f7dz8 */
1
+ /* hash: 9uxjq */
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 */
@@ -26,10 +26,10 @@
26
26
  --gap-2: var(--gap-3xs);
27
27
  } :root {
28
28
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
29
- } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__flagIcon_7lvqb {
29
+ } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__flagIcon_12t92 {
30
30
  max-width: 24px;
31
31
  max-height: 24px;
32
- } .international-phone-input__flagPlaceholder_7lvqb {
32
+ } .international-phone-input__flagPlaceholder_12t92 {
33
33
  width: 24px;
34
34
  height: 16px;
35
35
  max-height: 16px;
package/components/select-field/component.js CHANGED
@@ -8,6 +8,7 @@ var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
9
  var hooks = require('@alfalab/hooks');
10
10
  var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
11
+ var consts = require('../../consts.js');
11
12
  var components_flagIcon_component = require('../flag-icon/component.js');
12
13
 
13
14
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -16,30 +17,20 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
17
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
17
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
19
 
19
- var styles = {"component":"international-phone-input__component_1t885","flagIconContainer":"international-phone-input__flagIconContainer_1t885","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1t885","disabled":"international-phone-input__disabled_1t885","inner":"international-phone-input__inner_1t885","size-64":"international-phone-input__size-64_1t885","size-72":"international-phone-input__size-72_1t885","focusVisible":"international-phone-input__focusVisible_1t885"};
20
+ var styles = {"component":"international-phone-input__component_y0utb","flagIconContainer":"international-phone-input__flagIconContainer_y0utb","emptyCountryIcon":"international-phone-input__emptyCountryIcon_y0utb","disabled":"international-phone-input__disabled_y0utb","inner":"international-phone-input__inner_y0utb","size-72":"international-phone-input__size-72_y0utb","focusVisible":"international-phone-input__focusVisible_y0utb"};
20
21
  require('./index.css')
21
22
 
22
23
  var EMPTY_COUNTRY_SELECT_FIELD = {
23
24
  value: 'EMPTY_COUNTRY_SELECT_VALUE',
24
25
  key: 'EMPTY_COUNTRY_SELECT_KEY',
25
26
  };
26
- var SIZE_TO_CLASSNAME_MAP = {
27
- s: 'size-48',
28
- m: 'size-56',
29
- l: 'size-64',
30
- xl: 'size-72',
31
- 48: 'size-48',
32
- 56: 'size-56',
33
- 64: 'size-64',
34
- 72: 'size-72',
35
- };
36
27
  var SelectField = function (_a) {
37
28
  var _b;
38
29
  var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
39
30
  var wrapperRef = React.useRef(null);
40
31
  var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
41
32
  var ref = innerProps.ref ? mergeRefs__default.default([innerProps.ref, wrapperRef]) : wrapperRef;
42
- return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, size && styles[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
33
+ return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, size && styles[consts.SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
43
34
  _b[styles.focusVisible] = focusVisible,
44
35
  _b[styles.disabled] = disabled,
45
36
  _b)) },
package/components/select-field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: rurkj */
1
+ /* hash: 11lce */
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);
@@ -31,33 +31,32 @@
31
31
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
32
32
  --focus-color: var(--color-light-status-info);
33
33
  --disabled-cursor: not-allowed;
34
- } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_1t885 {
34
+ } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_y0utb {
35
35
  height: 100%;
36
36
  cursor: pointer;
37
37
  outline: none;
38
38
  position: relative;
39
- } .international-phone-input__flagIconContainer_1t885 {
39
+ } .international-phone-input__flagIconContainer_y0utb {
40
40
  display: flex;
41
41
  justify-content: center;
42
42
  align-items: center;
43
43
  width: 24px;
44
44
  height: 24px;
45
45
  margin-right: var(--gap-4);
46
- } .international-phone-input__emptyCountryIcon_1t885 {
46
+ } .international-phone-input__emptyCountryIcon_y0utb {
47
47
  color: var(--color-light-neutral-translucent-700);
48
- } .international-phone-input__disabled_1t885 {
48
+ } .international-phone-input__disabled_y0utb {
49
49
  cursor: var(--disabled-cursor);
50
- } .international-phone-input__inner_1t885 {
50
+ } .international-phone-input__inner_y0utb {
51
51
  position: relative;
52
52
  display: flex;
53
53
  align-items: center;
54
54
  height: 100%;
55
55
  padding-left: var(--gap-12);
56
56
  outline: none;
57
- } .international-phone-input__size-64_1t885 .international-phone-input__inner_1t885,
58
- .international-phone-input__size-72_1t885 .international-phone-input__inner_1t885 {
57
+ } .international-phone-input__size-72_y0utb .international-phone-input__inner_y0utb {
59
58
  padding-left: var(--gap-16);
60
- } .international-phone-input__focusVisible_1t885 {
59
+ } .international-phone-input__focusVisible_y0utb {
61
60
  outline: 2px solid var(--focus-color);
62
61
  outline-offset: 2px;
63
62
  }
package/consts.d.ts CHANGED
@@ -1,2 +1,13 @@
1
1
  declare const DEFAULT_PHONE_FORMAT = "... ... ... ... ...";
2
- export { DEFAULT_PHONE_FORMAT };
2
+ declare const SIZE_TO_CLASSNAME_MAP: {
3
+ s: string;
4
+ m: string;
5
+ l: string;
6
+ xl: string;
7
+ 40: string;
8
+ 48: string;
9
+ 56: string;
10
+ 64: string;
11
+ 72: string;
12
+ };
13
+ export { DEFAULT_PHONE_FORMAT, SIZE_TO_CLASSNAME_MAP };
package/consts.js CHANGED
@@ -3,5 +3,17 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
6
+ var SIZE_TO_CLASSNAME_MAP = {
7
+ s: 'size-48',
8
+ m: 'size-56',
9
+ l: 'size-64',
10
+ xl: 'size-72',
11
+ 40: 'size-40',
12
+ 48: 'size-48',
13
+ 56: 'size-56',
14
+ 64: 'size-64',
15
+ 72: 'size-72',
16
+ };
6
17
 
7
18
  exports.DEFAULT_PHONE_FORMAT = DEFAULT_PHONE_FORMAT;
19
+ exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
package/cssm/Component.responsive.d.ts CHANGED
@@ -36,9 +36,9 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
36
36
  onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
37
37
  } & {
38
38
  options: (import("./typings-d515b24c").OptionShape | import("./typings-d515b24c").GroupShape)[];
39
- } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
39
+ } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput" | "onClear"> & {
40
40
  options: (import("./typings-d515b24c").OptionShape | import("./typings-d515b24c").GroupShape)[];
41
- } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
41
+ } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput" | "onClear"> & {
42
42
  breakpoint?: number | undefined;
43
43
  client?: "desktop" | "mobile" | undefined;
44
44
  defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
package/cssm/components/base-international-phone-input/Component.js CHANGED
@@ -120,7 +120,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
120
120
  var renderCountrySelect = function (compact) {
121
121
  var _a;
122
122
  if (compact === void 0) { compact = false; }
123
- return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
123
+ return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId, size: size }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
124
124
  };
125
125
  var inputProps = tslib.__assign({ className: styles__default.default.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles__default.default.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
126
126
  React.useEffect(function () {
package/cssm/components/country-select/Component.js CHANGED
@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
+ var cn = require('classnames');
7
8
  var shared = require('@alfalab/core-components-select/cssm/shared');
8
9
  var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
9
10
  var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
11
+ var consts = require('../../consts.js');
10
12
  var components_flagIcon_component = require('../flag-icon/component.js');
11
13
  var components_selectField_component = require('../select-field/component.js');
12
14
  var styles = require('./index.module.css');
@@ -14,17 +16,23 @@ var styles = require('./index.module.css');
14
16
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
15
17
 
16
18
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
19
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
20
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
18
21
 
19
22
  var CountrySelect = function (_a) {
20
- var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
23
+ var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, size = _a.size, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent", "size"]);
24
+ var isMobile = React.useMemo(function () { return view === 'mobile'; }, [view]);
21
25
  var options = React.useMemo(function () {
22
26
  return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
23
27
  var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
24
28
  return {
25
29
  key: iso2,
26
30
  value: areas[0],
27
- content: (React__default.default.createElement("span", { className: styles__default.default.option },
31
+ content: (React__default.default.createElement("span", { className: cn__default.default([
32
+ styles__default.default.option,
33
+ size && styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]],
34
+ isMobile && styles__default.default.mobile,
35
+ ]) },
28
36
  React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles__default.default.flag }),
29
37
  React__default.default.createElement("span", { className: styles__default.default.optionTextWrap },
30
38
  React__default.default.createElement("span", { className: styles__default.default.countryName }, name),
@@ -33,7 +41,7 @@ var CountrySelect = function (_a) {
33
41
  dialCode)))),
34
42
  };
35
43
  })) || [];
36
- }, [countries]);
44
+ }, [countries, size, isMobile]);
37
45
  var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
38
46
  React__default.default.createElement(shared.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
39
47
  var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles__default.default.emptyCountryIcon })))); };
@@ -43,7 +51,7 @@ var CountrySelect = function (_a) {
43
51
  return (
44
52
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
45
53
  React__default.default.createElement("div", { className: styles__default.default.component, onClick: function (event) { return event.stopPropagation(); } },
46
- React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: view === 'mobile' ? shared.VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
54
+ React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: isMobile ? shared.VirtualOptionsList : renderOptionsList }, (isMobile && {
47
55
  bottomSheetProps: {
48
56
  title: 'Выберите страну',
49
57
  },
package/cssm/components/country-select/index.module.css CHANGED
@@ -16,7 +16,8 @@
16
16
  /* новые значения, используйте их */
17
17
  } :root { /* deprecated */ /* deprecated */
18
18
  --gap-xs: 8px; /* deprecated */
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 */
19
+ --gap-s: 12px; /* deprecated */ /* deprecated */
20
+ --gap-m: 16px; /* 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
21
 
21
22
  /* новые значения, используйте их */
22
23
 
@@ -24,6 +25,7 @@
24
25
  /* stylelint-disable-next-line length-zero-no-unit */
25
26
  --gap-8: var(--gap-xs);
26
27
  --gap-12: var(--gap-s);
28
+ --gap-16: var(--gap-m);
27
29
  } :root {
28
30
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
29
31
  } /* сбрасывает синюю подсветку при нажатии */ .component {
@@ -35,8 +37,11 @@
35
37
  } .option {
36
38
  display: flex;
37
39
  align-items: flex-start;
38
- padding: var(--gap-12);
39
- } .flag {
40
+ padding: var(--gap-12)
41
+ } .option.mobile,
42
+ .option.size-72 {
43
+ padding-left: var(--gap-16);
44
+ } .flag {
40
45
  flex-shrink: 0;
41
46
  margin-right: var(--gap-8);
42
47
  } .countryName {
package/cssm/components/select-field/component.js CHANGED
@@ -8,6 +8,7 @@ var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
9
  var hooks = require('@alfalab/hooks');
10
10
  var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
11
+ var consts = require('../../consts.js');
11
12
  var components_flagIcon_component = require('../flag-icon/component.js');
12
13
  var styles = require('./index.module.css');
13
14
 
@@ -22,23 +23,13 @@ var EMPTY_COUNTRY_SELECT_FIELD = {
22
23
  value: 'EMPTY_COUNTRY_SELECT_VALUE',
23
24
  key: 'EMPTY_COUNTRY_SELECT_KEY',
24
25
  };
25
- var SIZE_TO_CLASSNAME_MAP = {
26
- s: 'size-48',
27
- m: 'size-56',
28
- l: 'size-64',
29
- xl: 'size-72',
30
- 48: 'size-48',
31
- 56: 'size-56',
32
- 64: 'size-64',
33
- 72: 'size-72',
34
- };
35
26
  var SelectField = function (_a) {
36
27
  var _b;
37
28
  var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
38
29
  var wrapperRef = React.useRef(null);
39
30
  var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
40
31
  var ref = innerProps.ref ? mergeRefs__default.default([innerProps.ref, wrapperRef]) : wrapperRef;
41
- return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, size && styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
32
+ return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, size && styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
42
33
  _b[styles__default.default.focusVisible] = focusVisible,
43
34
  _b[styles__default.default.disabled] = disabled,
44
35
  _b)) },
package/cssm/components/select-field/index.module.css CHANGED
@@ -53,8 +53,7 @@
53
53
  height: 100%;
54
54
  padding-left: var(--gap-12);
55
55
  outline: none;
56
- } .size-64 .inner,
57
- .size-72 .inner {
56
+ } .size-72 .inner {
58
57
  padding-left: var(--gap-16);
59
58
  } .focusVisible {
60
59
  outline: 2px solid var(--focus-color);
package/cssm/consts.d.ts CHANGED
@@ -1,2 +1,13 @@
1
1
  declare const DEFAULT_PHONE_FORMAT = "... ... ... ... ...";
2
- export { DEFAULT_PHONE_FORMAT };
2
+ declare const SIZE_TO_CLASSNAME_MAP: {
3
+ s: string;
4
+ m: string;
5
+ l: string;
6
+ xl: string;
7
+ 40: string;
8
+ 48: string;
9
+ 56: string;
10
+ 64: string;
11
+ 72: string;
12
+ };
13
+ export { DEFAULT_PHONE_FORMAT, SIZE_TO_CLASSNAME_MAP };
package/cssm/consts.js CHANGED
@@ -3,5 +3,17 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
6
+ var SIZE_TO_CLASSNAME_MAP = {
7
+ s: 'size-48',
8
+ m: 'size-56',
9
+ l: 'size-64',
10
+ xl: 'size-72',
11
+ 40: 'size-40',
12
+ 48: 'size-48',
13
+ 56: 'size-56',
14
+ 64: 'size-64',
15
+ 72: 'size-72',
16
+ };
6
17
 
7
18
  exports.DEFAULT_PHONE_FORMAT = DEFAULT_PHONE_FORMAT;
19
+ exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;