@alfalab/core-components-international-phone-input 3.1.1 → 3.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/components/base-international-phone-input/index.css +1 -1
- package/components/base-international-phone-input/index.module.css.js +1 -1
- package/components/country-select/Component.js +4 -2
- package/components/country-select/Component.js.map +1 -1
- package/components/country-select/index.css +9 -9
- package/components/country-select/index.module.css.js +1 -1
- package/components/flag-icon/index.css +2 -2
- package/components/flag-icon/index.module.css.js +1 -1
- package/components/select-field/index.css +7 -7
- package/components/select-field/index.module.css.js +1 -1
- package/cssm/components/country-select/Component.js +4 -2
- package/cssm/components/country-select/Component.js.map +1 -1
- package/esm/components/base-international-phone-input/index.css +1 -1
- package/esm/components/base-international-phone-input/index.module.css.js +1 -1
- package/esm/components/country-select/Component.js +4 -2
- package/esm/components/country-select/Component.js.map +1 -1
- package/esm/components/country-select/index.css +9 -9
- package/esm/components/country-select/index.module.css.js +1 -1
- package/esm/components/flag-icon/index.css +2 -2
- package/esm/components/flag-icon/index.module.css.js +1 -1
- package/esm/components/select-field/index.css +7 -7
- package/esm/components/select-field/index.module.css.js +1 -1
- package/modern/components/base-international-phone-input/index.css +1 -1
- package/modern/components/base-international-phone-input/index.module.css.js +1 -1
- package/modern/components/country-select/Component.js +4 -2
- package/modern/components/country-select/Component.js.map +1 -1
- package/modern/components/country-select/index.css +9 -9
- package/modern/components/country-select/index.module.css.js +1 -1
- package/modern/components/flag-icon/index.css +2 -2
- package/modern/components/flag-icon/index.module.css.js +1 -1
- package/modern/components/select-field/index.css +7 -7
- package/modern/components/select-field/index.module.css.js +1 -1
- package/moderncssm/components/country-select/Component.js +4 -2
- package/moderncssm/components/country-select/Component.js.map +1 -1
- package/package.json +5 -5
- package/src/components/country-select/Component.tsx +5 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"international-phone-
|
|
5
|
+
var styles = {"component":"international-phone-input__component_62gg4","addons":"international-phone-input__addons_62gg4"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -46,11 +46,13 @@ var CountrySelect = function (_a) {
|
|
|
46
46
|
var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: index_module.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: index_module.emptyCountryIcon })))); };
|
|
47
47
|
var renderCountrySelect = function () {
|
|
48
48
|
var _a;
|
|
49
|
-
var selected =
|
|
49
|
+
var selected = options.find(function (c) { return c.key === (country === null || country === void 0 ? void 0 : country.iso2); });
|
|
50
50
|
return (
|
|
51
51
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
52
52
|
React__default.default.createElement("div", { className: index_module.component, onClick: function (event) { return event.stopPropagation(); } },
|
|
53
|
-
React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || component$1.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: component$1.SelectField,
|
|
53
|
+
React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: (selected === null || selected === void 0 ? void 0 : selected.key) || component$1.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: component$1.SelectField, optionProps: {
|
|
54
|
+
'aria-label': ((_a = selected === null || selected === void 0 ? void 0 : selected.value) === null || _a === void 0 ? void 0 : _a.name) || 'Сменить код страны',
|
|
55
|
+
}, OptionsList: isMobile ? shared.VirtualOptionsList : renderOptionsList }, (isMobile && {
|
|
54
56
|
bottomSheetProps: {
|
|
55
57
|
title: 'Выберите страну',
|
|
56
58
|
showSwipeMarker: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2)
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div className={styles.component} onClick={(event) => event.stopPropagation()}>\n <SelectComponent\n Option={BaseOption}\n size={size}\n {...restProps}\n dataTestId={getDataTestId(dataTestId, 'country-select')}\n options={options}\n selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}\n onChange={onChange}\n Field={SelectField}\n optionProps={{\n 'aria-label': selected?.value?.name || 'Сменить код страны',\n }}\n OptionsList={isMobile ? VirtualOptionsList : renderOptionsList}\n {...(isMobile && {\n bottomSheetProps: {\n title: 'Выберите страну',\n showSwipeMarker: false,\n },\n })}\n />\n </div>\n );\n };\n\n return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();\n};\n"],"names":["__rest","useMemo","React","cn","styles","SIZE_TO_CLASSNAME_MAP","FlagIcon","useCallback","VirtualOptionsList","__assign","WorldMagnifierMIcon","BaseOption","getDataTestId","EMPTY_COUNTRY_SELECT_FIELD","SelectField"],"mappings":"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"}
|
|
@@ -8,33 +8,33 @@
|
|
|
8
8
|
--gap-8: var(--gap-xs);
|
|
9
9
|
--gap-12: var(--gap-s);
|
|
10
10
|
--gap-16: var(--gap-m);
|
|
11
|
-
} .international-phone-
|
|
11
|
+
} .international-phone-input__component_bgavw {
|
|
12
12
|
position: static;
|
|
13
13
|
display: flex;
|
|
14
14
|
min-width: 0;
|
|
15
15
|
min-width: initial;
|
|
16
16
|
height: 100%;
|
|
17
|
-
} .international-phone-
|
|
17
|
+
} .international-phone-input__option_bgavw {
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: flex-start;
|
|
20
20
|
padding: var(--gap-12);
|
|
21
|
-
} .international-phone-
|
|
22
|
-
.international-phone-
|
|
21
|
+
} .international-phone-input__option_bgavw.international-phone-input__mobile_bgavw,
|
|
22
|
+
.international-phone-input__option_bgavw.international-phone-input__size-72_bgavw {
|
|
23
23
|
padding-left: var(--gap-16);
|
|
24
|
-
} .international-phone-
|
|
24
|
+
} .international-phone-input__flag_bgavw {
|
|
25
25
|
flex-shrink: 0;
|
|
26
26
|
margin-right: var(--gap-8);
|
|
27
|
-
} .international-phone-
|
|
27
|
+
} .international-phone-input__countryName_bgavw {
|
|
28
28
|
margin-right: var(--gap-8);
|
|
29
|
-
} .international-phone-
|
|
29
|
+
} .international-phone-input__dialCode_bgavw {
|
|
30
30
|
color: var(--color-light-text-secondary);
|
|
31
|
-
} .international-phone-
|
|
31
|
+
} .international-phone-input__flagIconWrapper_bgavw {
|
|
32
32
|
display: flex;
|
|
33
33
|
justify-content: center;
|
|
34
34
|
align-items: center;
|
|
35
35
|
width: 24px;
|
|
36
36
|
height: 24px;
|
|
37
37
|
margin-left: var(--gap-12);
|
|
38
|
-
} .international-phone-
|
|
38
|
+
} .international-phone-input__emptyCountryIcon_bgavw {
|
|
39
39
|
color: var(--color-light-neutral-translucent-700);
|
|
40
40
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"international-phone-
|
|
5
|
+
var styles = {"component":"international-phone-input__component_bgavw","option":"international-phone-input__option_bgavw","mobile":"international-phone-input__mobile_bgavw","size-72":"international-phone-input__size-72_bgavw","flag":"international-phone-input__flag_bgavw","countryName":"international-phone-input__countryName_bgavw","dialCode":"international-phone-input__dialCode_bgavw","flagIconWrapper":"international-phone-input__flagIconWrapper_bgavw","emptyCountryIcon":"international-phone-input__emptyCountryIcon_bgavw"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
} :root {
|
|
7
7
|
--gap-3xs: 2px;
|
|
8
8
|
--gap-2: var(--gap-3xs);
|
|
9
|
-
} .international-phone-
|
|
9
|
+
} .international-phone-input__flagIcon_r4n05 {
|
|
10
10
|
max-width: 24px;
|
|
11
11
|
max-height: 24px;
|
|
12
|
-
} .international-phone-
|
|
12
|
+
} .international-phone-input__flagPlaceholder_r4n05 {
|
|
13
13
|
width: 24px;
|
|
14
14
|
height: 16px;
|
|
15
15
|
max-height: 16px;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"flagIcon":"international-phone-
|
|
5
|
+
var styles = {"flagIcon":"international-phone-input__flagIcon_r4n05","flagPlaceholder":"international-phone-input__flagPlaceholder_r4n05"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -11,32 +11,32 @@
|
|
|
11
11
|
} :root {
|
|
12
12
|
--focus-color: var(--color-light-status-info);
|
|
13
13
|
--disabled-cursor: not-allowed;
|
|
14
|
-
} .international-phone-
|
|
14
|
+
} .international-phone-input__component_1nfvi {
|
|
15
15
|
height: 100%;
|
|
16
16
|
cursor: pointer;
|
|
17
17
|
outline: none;
|
|
18
18
|
position: relative;
|
|
19
|
-
} .international-phone-
|
|
19
|
+
} .international-phone-input__flagIconContainer_1nfvi {
|
|
20
20
|
display: flex;
|
|
21
21
|
justify-content: center;
|
|
22
22
|
align-items: center;
|
|
23
23
|
width: 24px;
|
|
24
24
|
height: 24px;
|
|
25
25
|
margin-right: var(--gap-4);
|
|
26
|
-
} .international-phone-
|
|
26
|
+
} .international-phone-input__emptyCountryIcon_1nfvi {
|
|
27
27
|
color: var(--color-light-neutral-translucent-700);
|
|
28
|
-
} .international-phone-
|
|
28
|
+
} .international-phone-input__disabled_1nfvi {
|
|
29
29
|
cursor: var(--disabled-cursor);
|
|
30
|
-
} .international-phone-
|
|
30
|
+
} .international-phone-input__inner_1nfvi {
|
|
31
31
|
position: relative;
|
|
32
32
|
display: flex;
|
|
33
33
|
align-items: center;
|
|
34
34
|
height: 100%;
|
|
35
35
|
padding-left: var(--gap-12);
|
|
36
36
|
outline: none;
|
|
37
|
-
} .international-phone-input__size-
|
|
37
|
+
} .international-phone-input__size-72_1nfvi .international-phone-input__inner_1nfvi {
|
|
38
38
|
padding-left: var(--gap-16);
|
|
39
|
-
} .international-phone-
|
|
39
|
+
} .international-phone-input__focusVisible_1nfvi {
|
|
40
40
|
outline: 2px solid var(--focus-color);
|
|
41
41
|
outline-offset: 2px;
|
|
42
42
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"international-phone-
|
|
5
|
+
var styles = {"component":"international-phone-input__component_1nfvi","flagIconContainer":"international-phone-input__flagIconContainer_1nfvi","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1nfvi","disabled":"international-phone-input__disabled_1nfvi","inner":"international-phone-input__inner_1nfvi","size-72":"international-phone-input__size-72_1nfvi","focusVisible":"international-phone-input__focusVisible_1nfvi"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -47,11 +47,13 @@ var CountrySelect = function (_a) {
|
|
|
47
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(component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles__default.default.emptyCountryIcon })))); };
|
|
48
48
|
var renderCountrySelect = function () {
|
|
49
49
|
var _a;
|
|
50
|
-
var selected =
|
|
50
|
+
var selected = options.find(function (c) { return c.key === (country === null || country === void 0 ? void 0 : country.iso2); });
|
|
51
51
|
return (
|
|
52
52
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
53
53
|
React__default.default.createElement("div", { className: styles__default.default.component, onClick: function (event) { return event.stopPropagation(); } },
|
|
54
|
-
React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: cssm.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || component$1.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: component$1.SelectField,
|
|
54
|
+
React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: cssm.getDataTestId(dataTestId, 'country-select'), options: options, selected: (selected === null || selected === void 0 ? void 0 : selected.key) || component$1.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: component$1.SelectField, optionProps: {
|
|
55
|
+
'aria-label': ((_a = selected === null || selected === void 0 ? void 0 : selected.value) === null || _a === void 0 ? void 0 : _a.name) || 'Сменить код страны',
|
|
56
|
+
}, OptionsList: isMobile ? shared.VirtualOptionsList : renderOptionsList }, (isMobile && {
|
|
55
57
|
bottomSheetProps: {
|
|
56
58
|
title: 'Выберите страну',
|
|
57
59
|
showSwipeMarker: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2)
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div className={styles.component} onClick={(event) => event.stopPropagation()}>\n <SelectComponent\n Option={BaseOption}\n size={size}\n {...restProps}\n dataTestId={getDataTestId(dataTestId, 'country-select')}\n options={options}\n selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}\n onChange={onChange}\n Field={SelectField}\n optionProps={{\n 'aria-label': selected?.value?.name || 'Сменить код страны',\n }}\n OptionsList={isMobile ? VirtualOptionsList : renderOptionsList}\n {...(isMobile && {\n bottomSheetProps: {\n title: 'Выберите страну',\n showSwipeMarker: false,\n },\n })}\n />\n </div>\n );\n };\n\n return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();\n};\n"],"names":["__rest","useMemo","React","cn","styles","SIZE_TO_CLASSNAME_MAP","FlagIcon","useCallback","VirtualOptionsList","__assign","WorldMagnifierMIcon","BaseOption","getDataTestId","EMPTY_COUNTRY_SELECT_FIELD","SelectField"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"international-phone-
|
|
3
|
+
var styles = {"component":"international-phone-input__component_62gg4","addons":"international-phone-input__addons_62gg4"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -37,11 +37,13 @@ var CountrySelect = function (_a) {
|
|
|
37
37
|
var renderFlagIcon = function () { return (React.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
|
|
38
38
|
var renderCountrySelect = function () {
|
|
39
39
|
var _a;
|
|
40
|
-
var selected =
|
|
40
|
+
var selected = options.find(function (c) { return c.key === (country === null || country === void 0 ? void 0 : country.iso2); });
|
|
41
41
|
return (
|
|
42
42
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
43
43
|
React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
|
|
44
|
-
React.createElement(SelectComponent, __assign({ Option: BaseOption, size: size }, restProps, { dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField,
|
|
44
|
+
React.createElement(SelectComponent, __assign({ Option: BaseOption, size: size }, restProps, { dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: (selected === null || selected === void 0 ? void 0 : selected.key) || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, optionProps: {
|
|
45
|
+
'aria-label': ((_a = selected === null || selected === void 0 ? void 0 : selected.value) === null || _a === void 0 ? void 0 : _a.name) || 'Сменить код страны',
|
|
46
|
+
}, OptionsList: isMobile ? VirtualOptionsList : renderOptionsList }, (isMobile && {
|
|
45
47
|
bottomSheetProps: {
|
|
46
48
|
title: 'Выберите страну',
|
|
47
49
|
showSwipeMarker: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2)
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div className={styles.component} onClick={(event) => event.stopPropagation()}>\n <SelectComponent\n Option={BaseOption}\n size={size}\n {...restProps}\n dataTestId={getDataTestId(dataTestId, 'country-select')}\n options={options}\n selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}\n onChange={onChange}\n Field={SelectField}\n optionProps={{\n 'aria-label': selected?.value?.name || 'Сменить код страны',\n }}\n OptionsList={isMobile ? VirtualOptionsList : renderOptionsList}\n {...(isMobile && {\n bottomSheetProps: {\n title: 'Выберите страну',\n showSwipeMarker: false,\n },\n })}\n />\n </div>\n );\n };\n\n return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -8,33 +8,33 @@
|
|
|
8
8
|
--gap-8: var(--gap-xs);
|
|
9
9
|
--gap-12: var(--gap-s);
|
|
10
10
|
--gap-16: var(--gap-m);
|
|
11
|
-
} .international-phone-
|
|
11
|
+
} .international-phone-input__component_bgavw {
|
|
12
12
|
position: static;
|
|
13
13
|
display: flex;
|
|
14
14
|
min-width: 0;
|
|
15
15
|
min-width: initial;
|
|
16
16
|
height: 100%;
|
|
17
|
-
} .international-phone-
|
|
17
|
+
} .international-phone-input__option_bgavw {
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: flex-start;
|
|
20
20
|
padding: var(--gap-12);
|
|
21
|
-
} .international-phone-
|
|
22
|
-
.international-phone-
|
|
21
|
+
} .international-phone-input__option_bgavw.international-phone-input__mobile_bgavw,
|
|
22
|
+
.international-phone-input__option_bgavw.international-phone-input__size-72_bgavw {
|
|
23
23
|
padding-left: var(--gap-16);
|
|
24
|
-
} .international-phone-
|
|
24
|
+
} .international-phone-input__flag_bgavw {
|
|
25
25
|
flex-shrink: 0;
|
|
26
26
|
margin-right: var(--gap-8);
|
|
27
|
-
} .international-phone-
|
|
27
|
+
} .international-phone-input__countryName_bgavw {
|
|
28
28
|
margin-right: var(--gap-8);
|
|
29
|
-
} .international-phone-
|
|
29
|
+
} .international-phone-input__dialCode_bgavw {
|
|
30
30
|
color: var(--color-light-text-secondary);
|
|
31
|
-
} .international-phone-
|
|
31
|
+
} .international-phone-input__flagIconWrapper_bgavw {
|
|
32
32
|
display: flex;
|
|
33
33
|
justify-content: center;
|
|
34
34
|
align-items: center;
|
|
35
35
|
width: 24px;
|
|
36
36
|
height: 24px;
|
|
37
37
|
margin-left: var(--gap-12);
|
|
38
|
-
} .international-phone-
|
|
38
|
+
} .international-phone-input__emptyCountryIcon_bgavw {
|
|
39
39
|
color: var(--color-light-neutral-translucent-700);
|
|
40
40
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"international-phone-
|
|
3
|
+
var styles = {"component":"international-phone-input__component_bgavw","option":"international-phone-input__option_bgavw","mobile":"international-phone-input__mobile_bgavw","size-72":"international-phone-input__size-72_bgavw","flag":"international-phone-input__flag_bgavw","countryName":"international-phone-input__countryName_bgavw","dialCode":"international-phone-input__dialCode_bgavw","flagIconWrapper":"international-phone-input__flagIconWrapper_bgavw","emptyCountryIcon":"international-phone-input__emptyCountryIcon_bgavw"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
} :root {
|
|
7
7
|
--gap-3xs: 2px;
|
|
8
8
|
--gap-2: var(--gap-3xs);
|
|
9
|
-
} .international-phone-
|
|
9
|
+
} .international-phone-input__flagIcon_r4n05 {
|
|
10
10
|
max-width: 24px;
|
|
11
11
|
max-height: 24px;
|
|
12
|
-
} .international-phone-
|
|
12
|
+
} .international-phone-input__flagPlaceholder_r4n05 {
|
|
13
13
|
width: 24px;
|
|
14
14
|
height: 16px;
|
|
15
15
|
max-height: 16px;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"flagIcon":"international-phone-
|
|
3
|
+
var styles = {"flagIcon":"international-phone-input__flagIcon_r4n05","flagPlaceholder":"international-phone-input__flagPlaceholder_r4n05"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -11,32 +11,32 @@
|
|
|
11
11
|
} :root {
|
|
12
12
|
--focus-color: var(--color-light-status-info);
|
|
13
13
|
--disabled-cursor: not-allowed;
|
|
14
|
-
} .international-phone-
|
|
14
|
+
} .international-phone-input__component_1nfvi {
|
|
15
15
|
height: 100%;
|
|
16
16
|
cursor: pointer;
|
|
17
17
|
outline: none;
|
|
18
18
|
position: relative;
|
|
19
|
-
} .international-phone-
|
|
19
|
+
} .international-phone-input__flagIconContainer_1nfvi {
|
|
20
20
|
display: flex;
|
|
21
21
|
justify-content: center;
|
|
22
22
|
align-items: center;
|
|
23
23
|
width: 24px;
|
|
24
24
|
height: 24px;
|
|
25
25
|
margin-right: var(--gap-4);
|
|
26
|
-
} .international-phone-
|
|
26
|
+
} .international-phone-input__emptyCountryIcon_1nfvi {
|
|
27
27
|
color: var(--color-light-neutral-translucent-700);
|
|
28
|
-
} .international-phone-
|
|
28
|
+
} .international-phone-input__disabled_1nfvi {
|
|
29
29
|
cursor: var(--disabled-cursor);
|
|
30
|
-
} .international-phone-
|
|
30
|
+
} .international-phone-input__inner_1nfvi {
|
|
31
31
|
position: relative;
|
|
32
32
|
display: flex;
|
|
33
33
|
align-items: center;
|
|
34
34
|
height: 100%;
|
|
35
35
|
padding-left: var(--gap-12);
|
|
36
36
|
outline: none;
|
|
37
|
-
} .international-phone-input__size-
|
|
37
|
+
} .international-phone-input__size-72_1nfvi .international-phone-input__inner_1nfvi {
|
|
38
38
|
padding-left: var(--gap-16);
|
|
39
|
-
} .international-phone-
|
|
39
|
+
} .international-phone-input__focusVisible_1nfvi {
|
|
40
40
|
outline: 2px solid var(--focus-color);
|
|
41
41
|
outline-offset: 2px;
|
|
42
42
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"international-phone-
|
|
3
|
+
var styles = {"component":"international-phone-input__component_1nfvi","flagIconContainer":"international-phone-input__flagIconContainer_1nfvi","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1nfvi","disabled":"international-phone-input__disabled_1nfvi","inner":"international-phone-input__inner_1nfvi","size-72":"international-phone-input__size-72_1nfvi","focusVisible":"international-phone-input__focusVisible_1nfvi"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"international-phone-
|
|
3
|
+
const styles = {"component":"international-phone-input__component_62gg4","addons":"international-phone-input__addons_62gg4"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -32,11 +32,13 @@ const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fiel
|
|
|
32
32
|
React.createElement(VirtualOptionsList, { ...props, optionsListWidth: 'field' }))), [fieldWidth]);
|
|
33
33
|
const renderFlagIcon = () => (React.createElement("span", { className: styles.flagIconWrapper }, country?.iso2 ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon }))));
|
|
34
34
|
const renderCountrySelect = () => {
|
|
35
|
-
const selected = options.find((c) => c.key === country?.iso2)
|
|
35
|
+
const selected = options.find((c) => c.key === country?.iso2);
|
|
36
36
|
return (
|
|
37
37
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
38
38
|
React.createElement("div", { className: styles.component, onClick: (event) => event.stopPropagation() },
|
|
39
|
-
React.createElement(SelectComponent, { Option: BaseOption, size: size, ...restProps, dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField,
|
|
39
|
+
React.createElement(SelectComponent, { Option: BaseOption, size: size, ...restProps, dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected?.key || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, optionProps: {
|
|
40
|
+
'aria-label': selected?.value?.name || 'Сменить код страны',
|
|
41
|
+
}, OptionsList: isMobile ? VirtualOptionsList : renderOptionsList, ...(isMobile && {
|
|
40
42
|
bottomSheetProps: {
|
|
41
43
|
title: 'Выберите страну',
|
|
42
44
|
showSwipeMarker: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2)
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div className={styles.component} onClick={(event) => event.stopPropagation()}>\n <SelectComponent\n Option={BaseOption}\n size={size}\n {...restProps}\n dataTestId={getDataTestId(dataTestId, 'country-select')}\n options={options}\n selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}\n onChange={onChange}\n Field={SelectField}\n optionProps={{\n 'aria-label': selected?.value?.name || 'Сменить код страны',\n }}\n OptionsList={isMobile ? VirtualOptionsList : renderOptionsList}\n {...(isMobile && {\n bottomSheetProps: {\n title: 'Выберите страну',\n showSwipeMarker: false,\n },\n })}\n />\n </div>\n );\n };\n\n return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -8,33 +8,33 @@
|
|
|
8
8
|
--gap-8: var(--gap-xs);
|
|
9
9
|
--gap-12: var(--gap-s);
|
|
10
10
|
--gap-16: var(--gap-m);
|
|
11
|
-
} .international-phone-
|
|
11
|
+
} .international-phone-input__component_bgavw {
|
|
12
12
|
position: static;
|
|
13
13
|
display: flex;
|
|
14
14
|
min-width: 0;
|
|
15
15
|
min-width: initial;
|
|
16
16
|
height: 100%;
|
|
17
|
-
} .international-phone-
|
|
17
|
+
} .international-phone-input__option_bgavw {
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: flex-start;
|
|
20
20
|
padding: var(--gap-12);
|
|
21
|
-
} .international-phone-
|
|
22
|
-
.international-phone-
|
|
21
|
+
} .international-phone-input__option_bgavw.international-phone-input__mobile_bgavw,
|
|
22
|
+
.international-phone-input__option_bgavw.international-phone-input__size-72_bgavw {
|
|
23
23
|
padding-left: var(--gap-16);
|
|
24
|
-
} .international-phone-
|
|
24
|
+
} .international-phone-input__flag_bgavw {
|
|
25
25
|
flex-shrink: 0;
|
|
26
26
|
margin-right: var(--gap-8);
|
|
27
|
-
} .international-phone-
|
|
27
|
+
} .international-phone-input__countryName_bgavw {
|
|
28
28
|
margin-right: var(--gap-8);
|
|
29
|
-
} .international-phone-
|
|
29
|
+
} .international-phone-input__dialCode_bgavw {
|
|
30
30
|
color: var(--color-light-text-secondary);
|
|
31
|
-
} .international-phone-
|
|
31
|
+
} .international-phone-input__flagIconWrapper_bgavw {
|
|
32
32
|
display: flex;
|
|
33
33
|
justify-content: center;
|
|
34
34
|
align-items: center;
|
|
35
35
|
width: 24px;
|
|
36
36
|
height: 24px;
|
|
37
37
|
margin-left: var(--gap-12);
|
|
38
|
-
} .international-phone-
|
|
38
|
+
} .international-phone-input__emptyCountryIcon_bgavw {
|
|
39
39
|
color: var(--color-light-neutral-translucent-700);
|
|
40
40
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"international-phone-
|
|
3
|
+
const styles = {"component":"international-phone-input__component_bgavw","option":"international-phone-input__option_bgavw","mobile":"international-phone-input__mobile_bgavw","size-72":"international-phone-input__size-72_bgavw","flag":"international-phone-input__flag_bgavw","countryName":"international-phone-input__countryName_bgavw","dialCode":"international-phone-input__dialCode_bgavw","flagIconWrapper":"international-phone-input__flagIconWrapper_bgavw","emptyCountryIcon":"international-phone-input__emptyCountryIcon_bgavw"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
} :root {
|
|
7
7
|
--gap-3xs: 2px;
|
|
8
8
|
--gap-2: var(--gap-3xs);
|
|
9
|
-
} .international-phone-
|
|
9
|
+
} .international-phone-input__flagIcon_r4n05 {
|
|
10
10
|
max-width: 24px;
|
|
11
11
|
max-height: 24px;
|
|
12
|
-
} .international-phone-
|
|
12
|
+
} .international-phone-input__flagPlaceholder_r4n05 {
|
|
13
13
|
width: 24px;
|
|
14
14
|
height: 16px;
|
|
15
15
|
max-height: 16px;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"flagIcon":"international-phone-
|
|
3
|
+
const styles = {"flagIcon":"international-phone-input__flagIcon_r4n05","flagPlaceholder":"international-phone-input__flagPlaceholder_r4n05"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -11,32 +11,32 @@
|
|
|
11
11
|
} :root {
|
|
12
12
|
--focus-color: var(--color-light-status-info);
|
|
13
13
|
--disabled-cursor: not-allowed;
|
|
14
|
-
} .international-phone-
|
|
14
|
+
} .international-phone-input__component_1nfvi {
|
|
15
15
|
height: 100%;
|
|
16
16
|
cursor: pointer;
|
|
17
17
|
outline: none;
|
|
18
18
|
position: relative;
|
|
19
|
-
} .international-phone-
|
|
19
|
+
} .international-phone-input__flagIconContainer_1nfvi {
|
|
20
20
|
display: flex;
|
|
21
21
|
justify-content: center;
|
|
22
22
|
align-items: center;
|
|
23
23
|
width: 24px;
|
|
24
24
|
height: 24px;
|
|
25
25
|
margin-right: var(--gap-4);
|
|
26
|
-
} .international-phone-
|
|
26
|
+
} .international-phone-input__emptyCountryIcon_1nfvi {
|
|
27
27
|
color: var(--color-light-neutral-translucent-700);
|
|
28
|
-
} .international-phone-
|
|
28
|
+
} .international-phone-input__disabled_1nfvi {
|
|
29
29
|
cursor: var(--disabled-cursor);
|
|
30
|
-
} .international-phone-
|
|
30
|
+
} .international-phone-input__inner_1nfvi {
|
|
31
31
|
position: relative;
|
|
32
32
|
display: flex;
|
|
33
33
|
align-items: center;
|
|
34
34
|
height: 100%;
|
|
35
35
|
padding-left: var(--gap-12);
|
|
36
36
|
outline: none;
|
|
37
|
-
} .international-phone-input__size-
|
|
37
|
+
} .international-phone-input__size-72_1nfvi .international-phone-input__inner_1nfvi {
|
|
38
38
|
padding-left: var(--gap-16);
|
|
39
|
-
} .international-phone-
|
|
39
|
+
} .international-phone-input__focusVisible_1nfvi {
|
|
40
40
|
outline: 2px solid var(--focus-color);
|
|
41
41
|
outline-offset: 2px;
|
|
42
42
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"international-phone-
|
|
3
|
+
const styles = {"component":"international-phone-input__component_1nfvi","flagIconContainer":"international-phone-input__flagIconContainer_1nfvi","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1nfvi","disabled":"international-phone-input__disabled_1nfvi","inner":"international-phone-input__inner_1nfvi","size-72":"international-phone-input__size-72_1nfvi","focusVisible":"international-phone-input__focusVisible_1nfvi"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -32,11 +32,13 @@ const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fiel
|
|
|
32
32
|
React.createElement(VirtualOptionsList, { ...props, optionsListWidth: 'field' }))), [fieldWidth]);
|
|
33
33
|
const renderFlagIcon = () => (React.createElement("span", { className: styles.flagIconWrapper }, country?.iso2 ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon }))));
|
|
34
34
|
const renderCountrySelect = () => {
|
|
35
|
-
const selected = options.find((c) => c.key === country?.iso2)
|
|
35
|
+
const selected = options.find((c) => c.key === country?.iso2);
|
|
36
36
|
return (
|
|
37
37
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
38
38
|
React.createElement("div", { className: styles.component, onClick: (event) => event.stopPropagation() },
|
|
39
|
-
React.createElement(SelectComponent, { Option: BaseOption, size: size, ...restProps, dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField,
|
|
39
|
+
React.createElement(SelectComponent, { Option: BaseOption, size: size, ...restProps, dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected?.key || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, optionProps: {
|
|
40
|
+
'aria-label': selected?.value?.name || 'Сменить код страны',
|
|
41
|
+
}, OptionsList: isMobile ? VirtualOptionsList : renderOptionsList, ...(isMobile && {
|
|
40
42
|
bottomSheetProps: {
|
|
41
43
|
title: 'Выберите страну',
|
|
42
44
|
showSwipeMarker: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2)
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/country-select/Component.tsx"],"sourcesContent":["import React, { type ElementType, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport {\n BaseOption,\n type BaseSelectProps,\n type OptionsListProps,\n VirtualOptionsList,\n} from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type Country } from '../../types';\nimport { FlagIcon } from '../flag-icon';\nimport { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';\n\nimport styles from './index.module.css';\n\nexport type SharedCountrySelectProps = Omit<\n BaseSelectProps,\n 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'\n> & {\n /**\n * Пропсы, которые будут прокинуты в компонент поля\n */\n fieldProps?: Record<string, unknown>;\n\n /*\n * Отключает выбор страны через селект\n */\n hideCountrySelect?: boolean;\n};\n\ntype CountrySelectProps = SharedCountrySelectProps & {\n countries?: Country[][];\n country?: Country;\n fieldWidth?: number;\n view: 'desktop' | 'mobile';\n SelectComponent: ElementType;\n};\n\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\n hideCountrySelect,\n countries,\n country,\n dataTestId,\n fieldWidth,\n onChange,\n view = 'desktop',\n SelectComponent,\n size,\n ...restProps\n}) => {\n const isMobile = useMemo(() => view === 'mobile', [view]);\n\n const options = useMemo(\n () =>\n countries?.map((areas) => {\n const { iso2, dialCode, name } = areas[0];\n\n return {\n key: iso2,\n value: areas[0],\n content: (\n <span\n className={cn([\n styles.option,\n size && styles[SIZE_TO_CLASSNAME_MAP[size]],\n isMobile && styles.mobile,\n ])}\n >\n <FlagIcon country={iso2} className={styles.flag} />\n\n <span className={styles.optionTextWrap}>\n <span className={styles.countryName}>{name}</span>\n <span className={styles.dialCode}>+{dialCode}</span>\n </span>\n </span>\n ),\n };\n }) || [],\n [countries, size, isMobile],\n );\n\n const renderOptionsList = useCallback(\n (props: OptionsListProps) => (\n <div style={{ width: fieldWidth || 0 }}>\n <VirtualOptionsList {...props} optionsListWidth='field' />\n </div>\n ),\n [fieldWidth],\n );\n\n const renderFlagIcon = () => (\n <span className={styles.flagIconWrapper}>\n {country?.iso2 ? (\n <FlagIcon country={country.iso2} />\n ) : (\n <WorldMagnifierMIcon className={styles.emptyCountryIcon} />\n )}\n </span>\n );\n\n const renderCountrySelect = () => {\n const selected = options.find((c) => c.key === country?.iso2);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div className={styles.component} onClick={(event) => event.stopPropagation()}>\n <SelectComponent\n Option={BaseOption}\n size={size}\n {...restProps}\n dataTestId={getDataTestId(dataTestId, 'country-select')}\n options={options}\n selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}\n onChange={onChange}\n Field={SelectField}\n optionProps={{\n 'aria-label': selected?.value?.name || 'Сменить код страны',\n }}\n OptionsList={isMobile ? VirtualOptionsList : renderOptionsList}\n {...(isMobile && {\n bottomSheetProps: {\n title: 'Выберите страну',\n showSwipeMarker: false,\n },\n })}\n />\n </div>\n );\n };\n\n return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-international-phone-input",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"module": "./esm/index.js",
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@alfalab/core-components-input": "^16.0.2",
|
|
14
|
-
"@alfalab/core-components-input-autocomplete": "^13.0.
|
|
14
|
+
"@alfalab/core-components-input-autocomplete": "^13.0.4",
|
|
15
15
|
"@alfalab/core-components-mq": "^5.0.1",
|
|
16
|
-
"@alfalab/core-components-select": "^18.1
|
|
16
|
+
"@alfalab/core-components-select": "^18.2.1",
|
|
17
17
|
"@alfalab/core-components-shared": "^1.1.0",
|
|
18
18
|
"@alfalab/core-components-types": "^1.0.0",
|
|
19
19
|
"@alfalab/hooks": "^1.13.1",
|
|
@@ -32,6 +32,6 @@
|
|
|
32
32
|
"access": "public",
|
|
33
33
|
"directory": "dist"
|
|
34
34
|
},
|
|
35
|
-
"themesVersion": "14.1.
|
|
36
|
-
"varsVersion": "10.1.
|
|
35
|
+
"themesVersion": "14.1.3",
|
|
36
|
+
"varsVersion": "10.1.1"
|
|
37
37
|
}
|
|
@@ -103,7 +103,7 @@ export const CountrySelect: React.FC<CountrySelectProps> = ({
|
|
|
103
103
|
);
|
|
104
104
|
|
|
105
105
|
const renderCountrySelect = () => {
|
|
106
|
-
const selected = options.find((c) => c.key === country?.iso2)
|
|
106
|
+
const selected = options.find((c) => c.key === country?.iso2);
|
|
107
107
|
|
|
108
108
|
return (
|
|
109
109
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
@@ -114,9 +114,12 @@ export const CountrySelect: React.FC<CountrySelectProps> = ({
|
|
|
114
114
|
{...restProps}
|
|
115
115
|
dataTestId={getDataTestId(dataTestId, 'country-select')}
|
|
116
116
|
options={options}
|
|
117
|
-
selected={selected || EMPTY_COUNTRY_SELECT_FIELD}
|
|
117
|
+
selected={selected?.key || EMPTY_COUNTRY_SELECT_FIELD}
|
|
118
118
|
onChange={onChange}
|
|
119
119
|
Field={SelectField}
|
|
120
|
+
optionProps={{
|
|
121
|
+
'aria-label': selected?.value?.name || 'Сменить код страны',
|
|
122
|
+
}}
|
|
120
123
|
OptionsList={isMobile ? VirtualOptionsList : renderOptionsList}
|
|
121
124
|
{...(isMobile && {
|
|
122
125
|
bottomSheetProps: {
|