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

package/dist/modern/components/select/component.js

@@ -4,9 +4,9 @@ import 'react-merge-refs';
 import '@alfalab/hooks';
 import { FlagIcon } from '../flag-icon/component.js';
 import { SelectField } from '../select-field/component.js';
-import { OptionsList, Select } from '@alfalab/core-components-select/dist/modern';
+import { VirtualOptionsList, Select } from '@alfalab/core-components-select/dist/modern';
 
-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')
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -23,7 +23,7 @@ const CountriesSelect = ({ disabled, size, selected, countries, fieldWidth, prev
                     dialCode)))),
     })), [countries]);
     const renderOptionsList = useCallback(props => (React.createElement("div", { style: { width: fieldWidth || 0 } },
-        React.createElement(OptionsList, Object.assign({}, props)))), [fieldWidth]);
+        React.createElement(VirtualOptionsList, Object.assign({}, props)))), [fieldWidth]);
     return (React.createElement("div", { className: styles.component, onClick: event => event.stopPropagation() },
         React.createElement(Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected, onChange: onChange, Field: SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };

package/dist/modern/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/modern/components/select-field/component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { FlagIcon } from '../flag-icon/component.js';
 
-var styles = {"component":"intl-phone-input__component_1arlx","flagIconContainer":"intl-phone-input__flagIconContainer_1arlx","disabled":"intl-phone-input__disabled_1arlx","inner":"intl-phone-input__inner_1arlx","l":"intl-phone-input__l_1arlx","xl":"intl-phone-input__xl_1arlx","focusVisible":"intl-phone-input__focusVisible_1arlx"};
+var styles = {"component":"intl-phone-input__component_1cu57","flagIconContainer":"intl-phone-input__flagIconContainer_1cu57","disabled":"intl-phone-input__disabled_1cu57","inner":"intl-phone-input__inner_1cu57","l":"intl-phone-input__l_1cu57","xl":"intl-phone-input__xl_1cu57","focusVisible":"intl-phone-input__focusVisible_1cu57"};
 require('./index.css')
 
 const SelectField = ({ selected, Arrow, size, disabled, innerProps = {}, }) => {
@@ -17,7 +17,7 @@ const SelectField = ({ selected, Arrow, size, disabled, innerProps = {}, }) => {
         }) },
         React.createElement("div", Object.assign({}, innerProps, { className: styles.inner }),
             selected && (React.createElement("span", { className: styles.flagIconContainer },
-                React.createElement(FlagIcon, { country: selected.value, size: size }))),
+                React.createElement(FlagIcon, { country: selected.value }))),
             Arrow)));
 };
 

package/dist/modern/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/modern/index.css

@@ -1,8 +1,8 @@
-/* hash: 1x0bu */
-.intl-phone-input__addons_tvglz {
+/* hash: 14hsc */
+.intl-phone-input__addons_hi7gy {
     padding-left: 0;
 }
 
-.intl-phone-input__l_tvglz .intl-phone-input__addons_tvglz, .intl-phone-input__xl_tvglz .intl-phone-input__addons_tvglz {
+.intl-phone-input__l_hi7gy .intl-phone-input__addons_hi7gy, .intl-phone-input__xl_hi7gy .intl-phone-input__addons_hi7gy {
         padding-left: 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-intl-phone-input",
-    "version": "6.1.3",
+    "version": "6.2.0",
     "description": "Phone input for international phones",
     "keywords": [],
     "license": "MIT",
@@ -21,12 +21,12 @@
     "dependencies": {
         "@alfalab/core-components-input": "^8.1.0",
         "@alfalab/core-components-input-autocomplete": "7.0.4",
-        "@alfalab/core-components-select": "^10.6.2",
+        "@alfalab/core-components-select": "^10.6.3",
         "@alfalab/hooks": "^1.4.1",
         "@alfalab/utils": "^1.5.1",
         "classnames": "^2.2.6",
         "libphonenumber-js": "^1.8.4",
         "react-merge-refs": "^1.1.0"
     },
-    "gitHead": "fb24ec97b3b95a51c188198788a73928d22b9b5f"
+    "gitHead": "5d7a9d540896b970928f3ea508e6046d303cb035"
 }