@alfalab/core-components-intl-phone-input 6.1.3 → 6.2.0

package/dist/components/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../component-76a5478b.js');
+var components_selectField_component = require('../component-f8b7bb12.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/dist/components/select/component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../../component-76a5478b.js');
+var components_selectField_component = require('../../component-f8b7bb12.js');
 var React = require('react');
 require('classnames');
 require('react-merge-refs');
@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"component":"intl-phone-input__component_1culy","option":"intl-phone-input__option_1culy","flag":"intl-phone-input__flag_1culy","countryName":"intl-phone-input__countryName_1culy","dialCode":"intl-phone-input__dialCode_1culy"};
+var styles = {"component":"intl-phone-input__component_134uw","option":"intl-phone-input__option_134uw","flag":"intl-phone-input__flag_134uw","countryName":"intl-phone-input__countryName_134uw","dialCode":"intl-phone-input__dialCode_134uw"};
 require('./index.css')
 
 var CountriesSelect = function (_a) {
@@ -36,7 +36,7 @@ var CountriesSelect = function (_a) {
         });
     }, [countries]);
     var renderOptionsList = React.useCallback(function (props) { return (React__default['default'].createElement("div", { style: { width: fieldWidth || 0 } },
-        React__default['default'].createElement(coreComponentsSelect.OptionsList, components_selectField_component.__assign({}, props)))); }, [fieldWidth]);
+        React__default['default'].createElement(coreComponentsSelect.VirtualOptionsList, components_selectField_component.__assign({}, props)))); }, [fieldWidth]);
     return (React__default['default'].createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
         React__default['default'].createElement(coreComponentsSelect.Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };

package/dist/components/select/index.css

@@ -1,4 +1,4 @@
-/* hash: 12fcs */
+/* hash: ks76a */
 :root {
     --color-light-text-secondary: #546272;
 }
@@ -17,24 +17,24 @@
 :root {
     --text-secondary-color: var(--color-light-text-secondary);
 }
-.intl-phone-input__component_1culy {
+.intl-phone-input__component_134uw {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
 }
-.intl-phone-input__option_1culy {
+.intl-phone-input__option_134uw {
     display: flex;
     align-items: flex-start;
 }
-.intl-phone-input__flag_1culy {
+.intl-phone-input__flag_134uw {
     flex-shrink: 0;
     margin-top: var(--gap-2xs);
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__countryName_1culy {
+.intl-phone-input__countryName_134uw {
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__dialCode_1culy {
+.intl-phone-input__dialCode_134uw {
     color: var(--text-secondary-color);
 }

package/dist/components/select/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../component-76a5478b.js');
+require('../../component-f8b7bb12.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/dist/components/select-field/component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../../component-76a5478b.js');
+var components_selectField_component = require('../../component-f8b7bb12.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/dist/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: tfw12 */
+/* hash: 1slfq */
 :root {
     --color-light-border-link: #007aff;
 }
@@ -11,6 +11,7 @@
     /* Hard up */
 }
 :root {
+    --gap-2xs: 4px;
     --gap-s: 12px;
     --gap-m: 16px;
 }
@@ -18,25 +19,24 @@
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
 }
-.intl-phone-input__component_1arlx {
+.intl-phone-input__component_1cu57 {
     height: 100%;
     cursor: pointer;
     outline: none;
-    width: 92px;
     position: relative;
 }
-.intl-phone-input__flagIconContainer_1arlx {
+.intl-phone-input__flagIconContainer_1cu57 {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 32px;
-    height: 32px;
-    margin-right: var(--gap-s);
+    width: 24px;
+    height: 24px;
+    margin-right: var(--gap-2xs);
 }
-.intl-phone-input__disabled_1arlx {
+.intl-phone-input__disabled_1cu57 {
     cursor: var(--disabled-cursor);
 }
-.intl-phone-input__inner_1arlx {
+.intl-phone-input__inner_1cu57 {
     position: relative;
     display: flex;
     align-items: center;
@@ -44,11 +44,11 @@
     padding-left: var(--gap-s);
     outline: none;
 }
-.intl-phone-input__l_1arlx .intl-phone-input__inner_1arlx,
-.intl-phone-input__xl_1arlx .intl-phone-input__inner_1arlx {
+.intl-phone-input__l_1cu57 .intl-phone-input__inner_1cu57,
+.intl-phone-input__xl_1cu57 .intl-phone-input__inner_1cu57 {
     padding-left: var(--gap-m);
 }
-.intl-phone-input__focusVisible_1arlx {
+.intl-phone-input__focusVisible_1cu57 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/dist/components/select-field/index.d.ts

@@ -1 +1 @@
-export * from "../../component-76a5478b";
+export * from "../../component-f8b7bb12";

package/dist/components/select-field/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../../component-76a5478b.js');
+var components_selectField_component = require('../../component-f8b7bb12.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/dist/cssm/{component-88f82cfc.js → component-343123ac.js}

@@ -65,7 +65,7 @@ var SelectField = function (_a) {
             _b)) },
         React__default['default'].createElement("div", exports.__assign({}, innerProps, { className: styles__default['default'].inner }),
             selected && (React__default['default'].createElement("span", { className: styles__default['default'].flagIconContainer },
-                React__default['default'].createElement(components_flagIcon_component.FlagIcon, { country: selected.value, size: size }))),
+                React__default['default'].createElement(components_flagIcon_component.FlagIcon, { country: selected.value }))),
             Arrow)));
 };
 

package/dist/cssm/component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('./component-88f82cfc.js');
+var components_selectField_component = require('./component-343123ac.js');
 var React = require('react');
 var cn = require('classnames');
 var utils = require('@alfalab/utils');
@@ -143,7 +143,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
     var countryCodeLength = ("+" + country.dialCode).length;
     useCaretAvoidCountryCode.useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
     usePreventCaretReset.usePreventCaretReset({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
-    return (React__default['default'].createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default['default'](className, styles__default['default'][size]), addonsClassName: styles__default['default'].addons, leftAddons: countries.length > 1 && (React__default['default'].createElement(components_select_component.CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip })) }), closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
+    return (React__default['default'].createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default['default'](className, styles__default['default'][size]), addonsClassName: styles__default['default'].addons, leftAddons: countries.length > 1 && (React__default['default'].createElement(components_select_component.CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip })) }), optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
 });
 IntlPhoneInput.defaultProps = {
     size: 'm',

package/dist/cssm/components/flag-icon/component.d.ts

@@ -4,10 +4,6 @@ type FlagIconProps = {
      * Код страны из <a href="https://ru.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank">ISO 3166-1 alpha-2</a>
      */
     country?: string;
-    /**
-     * Размер компонента
-     */
-    size?: 's' | 'm' | 'l' | 'xl';
     /**
      * Дополнительный класс
      */

package/dist/cssm/components/flag-icon/component.js

@@ -16,8 +16,8 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
  * Компонент флага в виде иконки.
  */
 var FlagIcon = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.country, country = _c === void 0 ? '' : _c, className = _a.className;
-    return React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].flagIcon, styles__default['default'][size], styles__default['default'][country], className) });
+    var _b = _a.country, country = _b === void 0 ? '' : _b, className = _a.className;
+    return React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].flagIcon, styles__default['default'][country], className) });
 };
 
 exports.FlagIcon = FlagIcon;