@alfalab/core-components-international-phone-input 2.0.4 → 2.0.6

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 (51) hide show
  1. package/{Component-70284312.d.ts → Component-57569e57.d.ts} +1 -1
  2. package/Component.responsive.d.ts +4 -4
  3. package/components/base-international-phone-input/Component.d.ts +1 -1
  4. package/components/base-international-phone-input/Component.js +34 -6
  5. package/components/base-international-phone-input/index.css +2 -2
  6. package/components/country-select/Component.js +1 -1
  7. package/components/country-select/index.css +8 -8
  8. package/components/flag-icon/component.js +1 -1
  9. package/components/flag-icon/index.css +3 -3
  10. package/components/select-field/component.js +1 -1
  11. package/components/select-field/index.css +9 -9
  12. package/cssm/{Component-70284312.d.ts → Component-57569e57.d.ts} +1 -1
  13. package/cssm/Component.responsive.d.ts +4 -4
  14. package/cssm/components/base-international-phone-input/Component.d.ts +1 -1
  15. package/cssm/components/base-international-phone-input/Component.js +33 -5
  16. package/cssm/types.d.ts +1 -1
  17. package/{esm/typings-70284312.d.ts → cssm/typings-57569e57.d.ts} +5 -1
  18. package/cssm/utils-89376c31.d.ts +1 -1
  19. package/{modern/Component-70284312.d.ts → esm/Component-57569e57.d.ts} +1 -1
  20. package/esm/Component.responsive.d.ts +4 -4
  21. package/esm/components/base-international-phone-input/Component.d.ts +1 -1
  22. package/esm/components/base-international-phone-input/Component.js +34 -6
  23. package/esm/components/base-international-phone-input/index.css +2 -2
  24. package/esm/components/country-select/Component.js +1 -1
  25. package/esm/components/country-select/index.css +8 -8
  26. package/esm/components/flag-icon/component.js +1 -1
  27. package/esm/components/flag-icon/index.css +3 -3
  28. package/esm/components/select-field/component.js +1 -1
  29. package/esm/components/select-field/index.css +9 -9
  30. package/esm/types.d.ts +1 -1
  31. package/{modern/typings-70284312.d.ts → esm/typings-57569e57.d.ts} +5 -1
  32. package/esm/utils-89376c31.d.ts +1 -1
  33. package/{esm/Component-70284312.d.ts → modern/Component-57569e57.d.ts} +1 -1
  34. package/modern/Component.responsive.d.ts +4 -4
  35. package/modern/components/base-international-phone-input/Component.d.ts +1 -1
  36. package/modern/components/base-international-phone-input/Component.js +30 -4
  37. package/modern/components/base-international-phone-input/index.css +2 -2
  38. package/modern/components/country-select/Component.js +1 -1
  39. package/modern/components/country-select/index.css +8 -8
  40. package/modern/components/flag-icon/component.js +1 -1
  41. package/modern/components/flag-icon/index.css +3 -3
  42. package/modern/components/select-field/component.js +1 -1
  43. package/modern/components/select-field/index.css +9 -9
  44. package/modern/types.d.ts +1 -1
  45. package/{cssm/typings-70284312.d.ts → modern/typings-57569e57.d.ts} +5 -1
  46. package/modern/utils-89376c31.d.ts +1 -1
  47. package/package.json +4 -4
  48. package/src/components/base-international-phone-input/Component.tsx +38 -0
  49. package/types.d.ts +1 -1
  50. package/{typings-70284312.d.ts → typings-57569e57.d.ts} +5 -1
  51. package/utils-89376c31.d.ts +1 -1
package/{Component-70284312.d.ts → Component-57569e57.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { OptgroupProps } from "./typings-70284312";
3
+ import { OptgroupProps } from "./typings-57569e57";
4
4
  declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
5
5
  export { Optgroup };
package/Component.responsive.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
7
7
  clearableCountryCode?: boolean | undefined;
8
8
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
9
9
  clear?: boolean | undefined;
10
- filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
10
+ filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
11
11
  onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
12
12
  onChange?: ((phone: string) => void) | undefined;
13
13
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -26,15 +26,15 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
26
26
  clearableCountryCode?: boolean | undefined;
27
27
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
28
28
  clear?: boolean | undefined;
29
- filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
29
+ filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
30
30
  onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
31
31
  onChange?: ((phone: string) => void) | undefined;
32
32
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
33
33
  onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
34
34
  } & {
35
- options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
35
+ options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
36
36
  } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
37
- options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
37
+ options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
38
38
  } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
39
39
  breakpoint?: number | undefined;
40
40
  defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
package/components/base-international-phone-input/Component.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
9
9
  clearableCountryCode?: boolean | undefined;
10
10
  countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
11
11
  clear?: boolean | undefined;
12
- filterFn?: ((value: string | undefined, option: import("../../typings-70284312").OptionShape) => boolean) | undefined;
12
+ filterFn?: ((value: string | undefined, option: import("../../typings-57569e57").OptionShape) => boolean) | undefined;
13
13
  onCountryChange?: ((country?: Country | undefined) => void) | undefined;
14
14
  onChange?: ((phone: string) => void) | undefined;
15
15
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
package/components/base-international-phone-input/Component.js CHANGED
@@ -16,17 +16,19 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
16
16
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
17
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
18
18
 
19
- var styles = {"component":"international-phone-input__component_1druh","addons":"international-phone-input__addons_1druh"};
19
+ var styles = {"component":"international-phone-input__component_eq2nn","addons":"international-phone-input__addons_eq2nn"};
20
20
  require('./index.css')
21
21
 
22
22
  var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
23
- var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
23
+ var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
24
24
  var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
25
25
  var inputRef = React.useRef(null);
26
26
  var inputWrapperRef = React.useRef(null);
27
- var _c = React.useState(function () {
27
+ var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
28
+ var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
29
+ var _e = React.useState(function () {
28
30
  return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
29
- }), selectedCountry = _c[0], setSelectedCountry = _c[1];
31
+ }), selectedCountry = _e[0], setSelectedCountry = _e[1];
30
32
  var filteredOptions = utils_index.filterPhones(value, options, filterFn);
31
33
  var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
32
34
  var handleCountryChange = function (nextCountry) {
@@ -83,13 +85,39 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
83
85
  }
84
86
  // eslint-disable-next-line react-hooks/exhaustive-deps
85
87
  }, [value, maskOptions]);
88
+ var openPhoneSelect = function (payload) {
89
+ var _a;
90
+ if (openProps === undefined)
91
+ setOpen(payload.open);
92
+ (_a = restProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(restProps, payload);
93
+ };
94
+ var openCountrySelect = function (payload) {
95
+ var _a;
96
+ if ((countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open) === undefined)
97
+ setOpenCountry(payload.open);
98
+ (_a = countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(countrySelectProps, payload);
99
+ };
100
+ var handlePhoneSelectOpen = function (payload) {
101
+ if (payload.open) {
102
+ openCountrySelect({ open: false });
103
+ }
104
+ openPhoneSelect(payload);
105
+ };
106
+ var handleCountrySelectOpen = function (payload) {
107
+ if (payload.open) {
108
+ openPhoneSelect({ open: false });
109
+ }
110
+ openCountrySelect(payload);
111
+ };
112
+ var showPhoneSelect = Boolean(open || openProps);
113
+ var showCountrySelect = Boolean(openCountry || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open));
86
114
  var renderCountrySelect = function (compact) {
87
115
  var _a;
88
116
  if (compact === void 0) { compact = false; }
89
- 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 })));
117
+ 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 })));
90
118
  };
91
119
  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);
92
- return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
120
+ return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
93
121
  });
94
122
 
95
123
  exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;
package/components/base-international-phone-input/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 5t2j9 */
1
+ /* hash: 1yemg */
2
2
 
3
- .international-phone-input__component_1druh .international-phone-input__addons_1druh {
3
+ .international-phone-input__component_eq2nn .international-phone-input__addons_eq2nn {
4
4
  padding-left: 0;
5
5
  }
package/components/country-select/Component.js CHANGED
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
14
 
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
 
17
- var styles = {"component":"international-phone-input__component_1r6tp","option":"international-phone-input__option_1r6tp","flag":"international-phone-input__flag_1r6tp","countryName":"international-phone-input__countryName_1r6tp","dialCode":"international-phone-input__dialCode_1r6tp","flagIconWrapper":"international-phone-input__flagIconWrapper_1r6tp","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1r6tp"};
17
+ var styles = {"component":"international-phone-input__component_61i1r","option":"international-phone-input__option_61i1r","flag":"international-phone-input__flag_61i1r","countryName":"international-phone-input__countryName_61i1r","dialCode":"international-phone-input__dialCode_61i1r","flagIconWrapper":"international-phone-input__flagIconWrapper_61i1r","emptyCountryIcon":"international-phone-input__emptyCountryIcon_61i1r"};
18
18
  require('./index.css')
19
19
 
20
20
  var CountrySelect = function (_a) {
package/components/country-select/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1tm53 */
1
+ /* hash: sz3rw */
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);
@@ -18,29 +18,29 @@
18
18
  --gap-s: 12px;
19
19
  } :root {
20
20
  } :root {
21
- } .international-phone-input__component_1r6tp {
21
+ } .international-phone-input__component_61i1r {
22
22
  position: static;
23
23
  display: flex;
24
24
  min-width: initial;
25
25
  height: 100%;
26
- } .international-phone-input__option_1r6tp {
26
+ } .international-phone-input__option_61i1r {
27
27
  display: flex;
28
28
  align-items: flex-start;
29
29
  padding: var(--gap-s);
30
- } .international-phone-input__flag_1r6tp {
30
+ } .international-phone-input__flag_61i1r {
31
31
  flex-shrink: 0;
32
32
  margin-right: var(--gap-xs);
33
- } .international-phone-input__countryName_1r6tp {
33
+ } .international-phone-input__countryName_61i1r {
34
34
  margin-right: var(--gap-xs);
35
- } .international-phone-input__dialCode_1r6tp {
35
+ } .international-phone-input__dialCode_61i1r {
36
36
  color: var(--color-light-text-secondary);
37
- } .international-phone-input__flagIconWrapper_1r6tp {
37
+ } .international-phone-input__flagIconWrapper_61i1r {
38
38
  display: flex;
39
39
  justify-content: center;
40
40
  align-items: center;
41
41
  width: 24px;
42
42
  height: 24px;
43
43
  margin-left: var(--gap-s);
44
- } .international-phone-input__emptyCountryIcon_1r6tp {
44
+ } .international-phone-input__emptyCountryIcon_61i1r {
45
45
  color: var(--color-light-neutral-translucent-700);
46
46
  }
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_dxseh","flagPlaceholder":"international-phone-input__flagPlaceholder_dxseh"};
14
+ var styles = {"flagIcon":"international-phone-input__flagIcon_mn1nz","flagPlaceholder":"international-phone-input__flagPlaceholder_mn1nz"};
15
15
  require('./index.css')
16
16
 
17
17
  /**
package/components/flag-icon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 17zwu */
1
+ /* hash: 9lu45 */
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 */
@@ -17,10 +17,10 @@
17
17
  --gap-3xs: 2px;
18
18
  } :root {
19
19
  } :root {
20
- } .international-phone-input__flagIcon_dxseh {
20
+ } .international-phone-input__flagIcon_mn1nz {
21
21
  max-width: 24px;
22
22
  max-height: 24px;
23
- } .international-phone-input__flagPlaceholder_dxseh {
23
+ } .international-phone-input__flagPlaceholder_mn1nz {
24
24
  width: 24px;
25
25
  height: 16px;
26
26
  max-height: 16px;
package/components/select-field/component.js CHANGED
@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
17
17
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
18
 
19
- var styles = {"component":"international-phone-input__component_1tk3e","flagIconContainer":"international-phone-input__flagIconContainer_1tk3e","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1tk3e","disabled":"international-phone-input__disabled_1tk3e","inner":"international-phone-input__inner_1tk3e","size-64":"international-phone-input__size-64_1tk3e","size-72":"international-phone-input__size-72_1tk3e","focusVisible":"international-phone-input__focusVisible_1tk3e"};
19
+ var styles = {"component":"international-phone-input__component_y5c1x","flagIconContainer":"international-phone-input__flagIconContainer_y5c1x","emptyCountryIcon":"international-phone-input__emptyCountryIcon_y5c1x","disabled":"international-phone-input__disabled_y5c1x","inner":"international-phone-input__inner_y5c1x","size-64":"international-phone-input__size-64_y5c1x","size-72":"international-phone-input__size-72_y5c1x","focusVisible":"international-phone-input__focusVisible_y5c1x"};
20
20
  require('./index.css')
21
21
 
22
22
  var EMPTY_COUNTRY_SELECT_FIELD = {
package/components/select-field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3r6mf */
1
+ /* hash: a6qqq */
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-border-link: #2288fa;
@@ -21,33 +21,33 @@
21
21
  } :root {
22
22
  --focus-color: var(--color-light-border-link);
23
23
  --disabled-cursor: not-allowed;
24
- } .international-phone-input__component_1tk3e {
24
+ } .international-phone-input__component_y5c1x {
25
25
  height: 100%;
26
26
  cursor: pointer;
27
27
  outline: none;
28
28
  position: relative;
29
- } .international-phone-input__flagIconContainer_1tk3e {
29
+ } .international-phone-input__flagIconContainer_y5c1x {
30
30
  display: flex;
31
31
  justify-content: center;
32
32
  align-items: center;
33
33
  width: 24px;
34
34
  height: 24px;
35
35
  margin-right: var(--gap-2xs);
36
- } .international-phone-input__emptyCountryIcon_1tk3e {
36
+ } .international-phone-input__emptyCountryIcon_y5c1x {
37
37
  color: var(--color-light-neutral-translucent-700);
38
- } .international-phone-input__disabled_1tk3e {
38
+ } .international-phone-input__disabled_y5c1x {
39
39
  cursor: var(--disabled-cursor);
40
- } .international-phone-input__inner_1tk3e {
40
+ } .international-phone-input__inner_y5c1x {
41
41
  position: relative;
42
42
  display: flex;
43
43
  align-items: center;
44
44
  height: 100%;
45
45
  padding-left: var(--gap-s);
46
46
  outline: none;
47
- } .international-phone-input__size-64_1tk3e .international-phone-input__inner_1tk3e,
48
- .international-phone-input__size-72_1tk3e .international-phone-input__inner_1tk3e {
47
+ } .international-phone-input__size-64_y5c1x .international-phone-input__inner_y5c1x,
48
+ .international-phone-input__size-72_y5c1x .international-phone-input__inner_y5c1x {
49
49
  padding-left: var(--gap-m);
50
- } .international-phone-input__focusVisible_1tk3e {
50
+ } .international-phone-input__focusVisible_y5c1x {
51
51
  outline: 2px solid var(--focus-color);
52
52
  outline-offset: 2px;
53
53
  }
package/cssm/{Component-70284312.d.ts → Component-57569e57.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { OptgroupProps } from "./typings-70284312";
3
+ import { OptgroupProps } from "./typings-57569e57";
4
4
  declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
5
5
  export { Optgroup };
package/cssm/Component.responsive.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
7
7
  clearableCountryCode?: boolean | undefined;
8
8
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
9
9
  clear?: boolean | undefined;
10
- filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
10
+ filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
11
11
  onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
12
12
  onChange?: ((phone: string) => void) | undefined;
13
13
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -26,15 +26,15 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
26
26
  clearableCountryCode?: boolean | undefined;
27
27
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
28
28
  clear?: boolean | undefined;
29
- filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
29
+ filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
30
30
  onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
31
31
  onChange?: ((phone: string) => void) | undefined;
32
32
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
33
33
  onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
34
34
  } & {
35
- options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
35
+ options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
36
36
  } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
37
- options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
37
+ options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
38
38
  } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
39
39
  breakpoint?: number | undefined;
40
40
  defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
package/cssm/components/base-international-phone-input/Component.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
9
9
  clearableCountryCode?: boolean | undefined;
10
10
  countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
11
11
  clear?: boolean | undefined;
12
- filterFn?: ((value: string | undefined, option: import("../../typings-70284312").OptionShape) => boolean) | undefined;
12
+ filterFn?: ((value: string | undefined, option: import("../../typings-57569e57").OptionShape) => boolean) | undefined;
13
13
  onCountryChange?: ((country?: Country | undefined) => void) | undefined;
14
14
  onChange?: ((phone: string) => void) | undefined;
15
15
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
package/cssm/components/base-international-phone-input/Component.js CHANGED
@@ -19,13 +19,15 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
19
19
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
20
20
 
21
21
  var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
22
- var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
22
+ var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
23
23
  var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
24
24
  var inputRef = React.useRef(null);
25
25
  var inputWrapperRef = React.useRef(null);
26
- var _c = React.useState(function () {
26
+ var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
27
+ var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
28
+ var _e = React.useState(function () {
27
29
  return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
28
- }), selectedCountry = _c[0], setSelectedCountry = _c[1];
30
+ }), selectedCountry = _e[0], setSelectedCountry = _e[1];
29
31
  var filteredOptions = utils_index.filterPhones(value, options, filterFn);
30
32
  var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
31
33
  var handleCountryChange = function (nextCountry) {
@@ -82,13 +84,39 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
82
84
  }
83
85
  // eslint-disable-next-line react-hooks/exhaustive-deps
84
86
  }, [value, maskOptions]);
87
+ var openPhoneSelect = function (payload) {
88
+ var _a;
89
+ if (openProps === undefined)
90
+ setOpen(payload.open);
91
+ (_a = restProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(restProps, payload);
92
+ };
93
+ var openCountrySelect = function (payload) {
94
+ var _a;
95
+ if ((countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open) === undefined)
96
+ setOpenCountry(payload.open);
97
+ (_a = countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(countrySelectProps, payload);
98
+ };
99
+ var handlePhoneSelectOpen = function (payload) {
100
+ if (payload.open) {
101
+ openCountrySelect({ open: false });
102
+ }
103
+ openPhoneSelect(payload);
104
+ };
105
+ var handleCountrySelectOpen = function (payload) {
106
+ if (payload.open) {
107
+ openPhoneSelect({ open: false });
108
+ }
109
+ openCountrySelect(payload);
110
+ };
111
+ var showPhoneSelect = Boolean(open || openProps);
112
+ var showCountrySelect = Boolean(openCountry || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open));
85
113
  var renderCountrySelect = function (compact) {
86
114
  var _a;
87
115
  if (compact === void 0) { compact = false; }
88
- 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 })));
116
+ 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 })));
89
117
  };
90
118
  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);
91
- return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
119
+ return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
92
120
  });
93
121
 
94
122
  exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;
package/cssm/types.d.ts CHANGED
@@ -5,7 +5,7 @@ import { InputMobileProps } from "@alfalab/core-components-input/mobile";
5
5
  import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
6
6
  import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
7
7
  import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
8
- import { OptionShape } from "./typings-70284312";
8
+ import { OptionShape } from "./typings-57569e57";
9
9
  import { SharedCountrySelectProps } from "./components/country-select/index";
10
10
  type Country = {
11
11
  name: string;
package/{esm/typings-70284312.d.ts → cssm/typings-57569e57.d.ts} RENAMED
@@ -998,7 +998,7 @@ type BaseSelectProps = {
998
998
  /**
999
999
  * Дополнительный класс для поповера
1000
1000
  */
1001
- popperClassName?: string;
1001
+ popperClassName?: PopoverProps['className'];
1002
1002
  /**
1003
1003
  * Список вариантов выбора
1004
1004
  */
@@ -1195,6 +1195,10 @@ type BaseSelectProps = {
1195
1195
  * Показывать OptionsList, если он пустой
1196
1196
  */
1197
1197
  showEmptyOptionsList?: boolean;
1198
+ /**
1199
+ * Дополнительные пропсы для Popover
1200
+ */
1201
+ popoverProps?: Omit<PopoverProps, 'update' | 'zIndex' | 'position' | 'className' | 'open' | 'anchorElement' | 'preventFlip' | 'dataTestId'>;
1198
1202
  };
1199
1203
  type FieldProps = {
1200
1204
  /**
package/cssm/utils-89376c31.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ReactNode, RefObject } from 'react';
2
- import { BaseSelectProps, GroupShape, OptionShape } from "./typings-70284312";
2
+ import { BaseSelectProps, GroupShape, OptionShape } from "./typings-57569e57";
3
3
  declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
4
4
  declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
5
5
  declare const joinOptions: ({ selected, selectedMultiple, }: {
package/{modern/Component-70284312.d.ts → esm/Component-57569e57.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { OptgroupProps } from "./typings-70284312";
3
+ import { OptgroupProps } from "./typings-57569e57";
4
4
  declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
5
5
  export { Optgroup };
package/esm/Component.responsive.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
7
7
  clearableCountryCode?: boolean | undefined;
8
8
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
9
9
  clear?: boolean | undefined;
10
- filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
10
+ filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
11
11
  onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
12
12
  onChange?: ((phone: string) => void) | undefined;
13
13
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -26,15 +26,15 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
26
26
  clearableCountryCode?: boolean | undefined;
27
27
  countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
28
28
  clear?: boolean | undefined;
29
- filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
29
+ filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
30
30
  onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
31
31
  onChange?: ((phone: string) => void) | undefined;
32
32
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
33
33
  onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
34
34
  } & {
35
- options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
35
+ options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
36
36
  } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
37
- options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
37
+ options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
38
38
  } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
39
39
  breakpoint?: number | undefined;
40
40
  defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
package/esm/components/base-international-phone-input/Component.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
9
9
  clearableCountryCode?: boolean | undefined;
10
10
  countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
11
11
  clear?: boolean | undefined;
12
- filterFn?: ((value: string | undefined, option: import("../../typings-70284312").OptionShape) => boolean) | undefined;
12
+ filterFn?: ((value: string | undefined, option: import("../../typings-57569e57").OptionShape) => boolean) | undefined;
13
13
  onCountryChange?: ((country?: Country | undefined) => void) | undefined;
14
14
  onChange?: ((phone: string) => void) | undefined;
15
15
  onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
package/esm/components/base-international-phone-input/Component.js CHANGED
@@ -7,17 +7,19 @@ import { BaseOption } from '@alfalab/core-components-select/esm/shared';
7
7
  import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData } from '../../utils/index.js';
8
8
  import { CountrySelect } from '../country-select/Component.js';
9
9
 
10
- var styles = {"component":"international-phone-input__component_1druh","addons":"international-phone-input__addons_1druh"};
10
+ var styles = {"component":"international-phone-input__component_eq2nn","addons":"international-phone-input__addons_eq2nn"};
11
11
  require('./index.css')
12
12
 
13
13
  var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
14
- var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, restProps = __rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
14
+ var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = __rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
15
15
  var countriesData = useMemo(function () { return initCountries(countries); }, [countries]);
16
16
  var inputRef = useRef(null);
17
17
  var inputWrapperRef = useRef(null);
18
- var _c = useState(function () {
18
+ var _c = useState(defaultOpen), open = _c[0], setOpen = _c[1];
19
+ var _d = useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _d[1];
20
+ var _e = useState(function () {
19
21
  return findCountry(countriesData, value, defaultIso2, countryProp);
20
- }), selectedCountry = _c[0], setSelectedCountry = _c[1];
22
+ }), selectedCountry = _e[0], setSelectedCountry = _e[1];
21
23
  var filteredOptions = filterPhones(value, options, filterFn);
22
24
  var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
23
25
  var handleCountryChange = function (nextCountry) {
@@ -74,13 +76,39 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
74
76
  }
75
77
  // eslint-disable-next-line react-hooks/exhaustive-deps
76
78
  }, [value, maskOptions]);
79
+ var openPhoneSelect = function (payload) {
80
+ var _a;
81
+ if (openProps === undefined)
82
+ setOpen(payload.open);
83
+ (_a = restProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(restProps, payload);
84
+ };
85
+ var openCountrySelect = function (payload) {
86
+ var _a;
87
+ if ((countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open) === undefined)
88
+ setOpenCountry(payload.open);
89
+ (_a = countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(countrySelectProps, payload);
90
+ };
91
+ var handlePhoneSelectOpen = function (payload) {
92
+ if (payload.open) {
93
+ openCountrySelect({ open: false });
94
+ }
95
+ openPhoneSelect(payload);
96
+ };
97
+ var handleCountrySelectOpen = function (payload) {
98
+ if (payload.open) {
99
+ openPhoneSelect({ open: false });
100
+ }
101
+ openCountrySelect(payload);
102
+ };
103
+ var showPhoneSelect = Boolean(open || openProps);
104
+ var showCountrySelect = Boolean(openCountry || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open));
77
105
  var renderCountrySelect = function (compact) {
78
106
  var _a;
79
107
  if (compact === void 0) { compact = false; }
80
- return (React.createElement(CountrySelect, __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 })));
108
+ return (React.createElement(CountrySelect, __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 })));
81
109
  };
82
110
  var inputProps = __assign({ className: styles.component, ref: mergeRefs([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
83
- return Array.isArray(options) ? (React.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign(__assign(__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
111
+ return Array.isArray(options) ? (React.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign(__assign(__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
84
112
  });
85
113
 
86
114
  export { BaseInternationalPhoneInput };
package/esm/components/base-international-phone-input/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 5t2j9 */
1
+ /* hash: 1yemg */
2
2
 
3
- .international-phone-input__component_1druh .international-phone-input__addons_1druh {
3
+ .international-phone-input__component_eq2nn .international-phone-input__addons_eq2nn {
4
4
  padding-left: 0;
5
5
  }
package/esm/components/country-select/Component.js CHANGED
@@ -6,7 +6,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
6
6
  import { FlagIcon } from '../flag-icon/component.js';
7
7
  import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
8
8
 
9
- var styles = {"component":"international-phone-input__component_1r6tp","option":"international-phone-input__option_1r6tp","flag":"international-phone-input__flag_1r6tp","countryName":"international-phone-input__countryName_1r6tp","dialCode":"international-phone-input__dialCode_1r6tp","flagIconWrapper":"international-phone-input__flagIconWrapper_1r6tp","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1r6tp"};
9
+ var styles = {"component":"international-phone-input__component_61i1r","option":"international-phone-input__option_61i1r","flag":"international-phone-input__flag_61i1r","countryName":"international-phone-input__countryName_61i1r","dialCode":"international-phone-input__dialCode_61i1r","flagIconWrapper":"international-phone-input__flagIconWrapper_61i1r","emptyCountryIcon":"international-phone-input__emptyCountryIcon_61i1r"};
10
10
  require('./index.css')
11
11
 
12
12
  var CountrySelect = function (_a) {