@alfalab/core-components 27.9.0 → 27.12.0

package/intl-phone-input/components/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../component-7d88f33a.js');
+var components_selectField_component = require('../component-fb19e125.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/intl-phone-input/components/select/component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../../component-7d88f33a.js');
+var components_selectField_component = require('../../component-fb19e125.js');
 var React = require('react');
 require('classnames');
 require('react-merge-refs');
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"component":"intl-phone-input__component_1701x","option":"intl-phone-input__option_1701x","flag":"intl-phone-input__flag_1701x","countryName":"intl-phone-input__countryName_1701x","dialCode":"intl-phone-input__dialCode_1701x"};
+var styles = {"component":"intl-phone-input__component_h500w","option":"intl-phone-input__option_h500w","flag":"intl-phone-input__flag_h500w","countryName":"intl-phone-input__countryName_h500w","dialCode":"intl-phone-input__dialCode_h500w"};
 require('./index.css');
 
 var CountriesSelect = function (_a) {

package/intl-phone-input/components/select/index.css

@@ -1,4 +1,4 @@
-/* hash: 99zrq */
+/* hash: yz6kc */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -703,6 +703,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -721,24 +722,24 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.intl-phone-input__component_1701x {
+.intl-phone-input__component_h500w {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
 }
-.intl-phone-input__option_1701x {
+.intl-phone-input__option_h500w {
     display: flex;
     align-items: flex-start;
 }
-.intl-phone-input__flag_1701x {
+.intl-phone-input__flag_h500w {
     flex-shrink: 0;
     margin-top: var(--gap-2xs);
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__countryName_1701x {
+.intl-phone-input__countryName_h500w {
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__dialCode_1701x {
+.intl-phone-input__dialCode_h500w {
     color: var(--text-secondary-color);
 }

package/intl-phone-input/components/select/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../component-7d88f33a.js');
+require('../../component-fb19e125.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/intl-phone-input/components/select-field/component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../../component-7d88f33a.js');
+var components_selectField_component = require('../../component-fb19e125.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/intl-phone-input/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 52j3d */
+/* hash: 1eegc */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -703,6 +703,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -721,13 +722,13 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.intl-phone-input__component_15ahh {
+.intl-phone-input__component_vrlqx {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
 }
-.intl-phone-input__flagIconContainer_15ahh {
+.intl-phone-input__flagIconContainer_vrlqx {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -735,10 +736,10 @@
     height: 24px;
     margin-right: var(--gap-2xs);
 }
-.intl-phone-input__disabled_15ahh {
+.intl-phone-input__disabled_vrlqx {
     cursor: var(--disabled-cursor);
 }
-.intl-phone-input__inner_15ahh {
+.intl-phone-input__inner_vrlqx {
     position: relative;
     display: flex;
     align-items: center;
@@ -746,11 +747,11 @@
     padding-left: var(--gap-s);
     outline: none;
 }
-.intl-phone-input__l_15ahh .intl-phone-input__inner_15ahh,
-.intl-phone-input__xl_15ahh .intl-phone-input__inner_15ahh {
+.intl-phone-input__l_vrlqx .intl-phone-input__inner_vrlqx,
+.intl-phone-input__xl_vrlqx .intl-phone-input__inner_vrlqx {
     padding-left: var(--gap-m);
 }
-.intl-phone-input__focusVisible_15ahh {
+.intl-phone-input__focusVisible_vrlqx {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/intl-phone-input/components/select-field/index.d.ts

@@ -1 +1 @@
-export * from "../../component-7d88f33a";
+export * from "../../component-fb19e125";

package/intl-phone-input/components/select-field/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('../../component-7d88f33a.js');
+var components_selectField_component = require('../../component-fb19e125.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/intl-phone-input/cssm/component.d.ts

@@ -4,6 +4,7 @@ import { CountryCode } from 'libphonenumber-js';
 import { SelectProps } from "../../select";
 import { Country } from '@alfalab/utils';
 import { InputAutocompleteProps } from "../../input-autocomplete";
+type MaxPhoneLen = Record<string, number>;
 type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & Pick<SelectProps, 'preventFlip'> & {
     /**
      * Значение
@@ -33,6 +34,10 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
      * Возможность стереть код страны
      */
     clearableCountryCode?: boolean;
+    /**
+     * Ограничение длин вводимых номеров по странам.
+     */
+    maxPhoneLen?: MaxPhoneLen;
 };
 declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<InputAutocompleteProps, "selected" | "valueRenderer" | "Optgroup" | "size" | "value" | "disabled" | "multiple" | "name" | "placeholder" | "readOnly" | "className" | "id" | "onFocus" | "onBlur" | "onInput" | "onScroll" | "optionsListWidth" | "options" | "visibleOptions" | "open" | "label" | "error" | "hint" | "Arrow" | "dataTestId" | "fieldClassName" | "success" | "block" | "optionGroupClassName" | "Option" | "inputProps" | "optionsListClassName" | "optionClassName" | "popperClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "preventFlip" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList" | "Input">> & Pick<SelectProps, "preventFlip"> & {
     /**
@@ -63,5 +68,9 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
      * Возможность стереть код страны
      */
     clearableCountryCode?: boolean | undefined;
+    /**
+     * Ограничение длин вводимых номеров по странам.
+     */
+    maxPhoneLen?: Record<string, number> | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { IntlPhoneInputProps, IntlPhoneInput };

package/intl-phone-input/cssm/component.js

@@ -15,7 +15,6 @@ require('./components/select/index.module.css');
 var components_select_component = require('./components/select/component.js');
 var utils_formatPhoneWithUnclearableCountryCode = require('./utils/format-phone-with-unclearable-country-code.js');
 var useCaretAvoidCountryCode = require('./useCaretAvoidCountryCode.js');
-var usePreventCaretReset = require('./usePreventCaretReset.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -26,90 +25,83 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var countriesHash = utils.getCountriesHash();
 var MAX_DIAL_CODE_LENGTH = 4;
+var MASK_SYMBOLS = [' ', '-', '(', ')'];
+var DEFAULT_MAX_PHONE_LEN = { RU: 11 };
 var IntlPhoneInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'm' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.countries, countries = _g === void 0 ? utils.getCountries() : _g, _h = _a.clearableCountryCode, clearableCountryCode = _h === void 0 ? true : _h, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _j = _a.defaultCountryIso2, defaultCountryIso2 = _j === void 0 ? 'ru' : _j, preventFlip = _a.preventFlip, inputProps = _a.inputProps, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps"]);
-    var _k = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _k[0], setCountryIso2 = _k[1];
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'm' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.countries, countries = _g === void 0 ? utils.getCountries() : _g, _h = _a.clearableCountryCode, clearableCountryCode = _h === void 0 ? true : _h, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _j = _a.defaultCountryIso2, defaultCountryIso2 = _j === void 0 ? 'ru' : _j, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _k = _a.maxPhoneLen, maxPhoneLen = _k === void 0 ? DEFAULT_MAX_PHONE_LEN : _k, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
+    var _l = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _l[0], setCountryIso2 = _l[1];
     var inputRef = React.useRef(null);
-    var _l = React.useState(null), inputWrapperRef = _l[0], setInputWrapperRef = _l[1];
+    var _m = React.useState(null), inputWrapperRef = _m[0], setInputWrapperRef = _m[1];
+    var _o = React.useState(), caretPos = _o[0], setCaretPos = _o[1];
     var phoneLibUtils = React.useRef();
-    var setCountryByIso2 = React.useCallback(function (iso2) {
-        var country = countriesHash[iso2];
-        var inputValue = "+" + country.dialCode;
-        onChange(inputValue);
-        setCountryIso2(country.iso2);
-        return country;
-    }, [onChange]);
-    var setValue = React.useCallback(function (inputValue) {
+    var formatPhone = function (inputValue) {
         var newValue = inputValue;
         if (phoneLibUtils.current) {
             var Utils = phoneLibUtils.current;
             var utils = new Utils(countryIso2.toUpperCase());
             newValue = utils.input(inputValue);
         }
-        onChange(newValue);
-    }, [countryIso2, onChange]);
-    var handleCountryChange = React.useCallback(function (countryCode) {
+        return newValue;
+    };
+    var setCountryByIso2 = function (iso2) {
+        var country = countriesHash[iso2];
+        var inputValue = "+" + country.dialCode;
+        onChange(inputValue);
+        setCountryIso2(country.iso2);
+        return country;
+    };
+    var handleCountryChange = function (countryCode) {
         if (onCountryChange) {
             onCountryChange(countryCode.toUpperCase());
         }
-    }, [onCountryChange]);
-    var setCountryByDialCode = React.useCallback(function (inputValue) {
+    };
+    var setCountryByDialCode = function (inputValue) {
         for (var i = 0; i < countries.length; i++) {
             var country_1 = countries[i];
             if (new RegExp("^\\+" + country_1.dialCode).test(inputValue)) {
                 // Сначала проверяем, если приоритет не указан
                 if (country_1.priority === undefined) {
-                    setValue(inputValue);
+                    onChange(formatPhone(inputValue));
                     setCountryIso2(country_1.iso2);
                     handleCountryChange(country_1.iso2);
                     break;
                 }
                 // Если страна уже была выставлена через селект, и коды совпадают
                 if (countryIso2 === country_1.iso2) {
-                    setValue(inputValue);
+                    onChange(formatPhone(inputValue));
                     setCountryIso2(country_1.iso2);
                     handleCountryChange(country_1.iso2);
                     break;
                     // Если не совпадают - выбираем по приоритету
                 }
                 else if (country_1.priority === 0) {
-                    setValue(inputValue);
+                    onChange(formatPhone(inputValue));
                     setCountryIso2(country_1.iso2);
                     handleCountryChange(country_1.iso2);
                     break;
                 }
             }
         }
-    }, [countries, countryIso2, setValue, handleCountryChange]);
-    var loadPhoneUtils = React.useCallback(function () {
-        // prettier-ignore
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-d3a9d490.js'); })
-            .then(function (utils) {
-            phoneLibUtils.current = utils.AsYouType;
-        })
-            .catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
-    }, []);
-    var handleInputChange = React.useCallback(function (event) {
-        var targetValue = event.target.value;
+    };
+    var setCountryByDialCodeWithLengthCheck = function (inputValue) {
+        if (value.length < MAX_DIAL_CODE_LENGTH) {
+            setCountryByDialCode(inputValue);
+        }
+    };
+    var addCountryCode = function (inputValue) {
         var country = countriesHash[countryIso2];
         if (clearableCountryCode) {
-            var newValue = targetValue.length === 1 && targetValue !== '+'
-                ? "+" + targetValue
-                : targetValue;
-            setValue(newValue);
-            if (value.length < MAX_DIAL_CODE_LENGTH) {
-                setCountryByDialCode(newValue);
-            }
-            return;
+            return inputValue.length === 1 && inputValue !== '+'
+                ? "+" + inputValue
+                : inputValue;
         }
-        if (!clearableCountryCode) {
-            var newValue = utils_formatPhoneWithUnclearableCountryCode.formatPhoneWithUnclearableCountryCode(targetValue, country);
-            setValue(newValue);
-            return;
-        }
-        setValue(targetValue);
-    }, [clearableCountryCode, countryIso2, setCountryByDialCode, setValue, value.length]);
-    var handleSelectChange = React.useCallback(function (_a) {
+        return utils_formatPhoneWithUnclearableCountryCode.formatPhoneWithUnclearableCountryCode(inputValue, country);
+    };
+    var handleInputChange = function (event) {
+        setCountryByDialCodeWithLengthCheck(event.target.value);
+        onChange(formatPhone(addCountryCode(event.target.value)));
+    };
+    var handleSelectChange = function (_a) {
         var selected = _a.selected;
         if (selected) {
             var country_2 = setCountryByIso2(selected.value);
@@ -120,28 +112,139 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
             }
             handleCountryChange(country_2.iso2);
         }
-    }, [setCountryByIso2, handleCountryChange]);
-    var handleChange = React.useCallback(function (payload) {
+    };
+    var handleChange = function (payload) {
         var selected = payload.selected;
         if (!selected)
             return;
-        if (selected.key.length < MAX_DIAL_CODE_LENGTH) {
-            setCountryByDialCode(selected.key);
+        setCountryByDialCodeWithLengthCheck(selected.key);
+        onChange(formatPhone(selected.key));
+    };
+    var country = countriesHash[countryIso2];
+    var countryCodeLength = ("+" + country.dialCode).length;
+    var handleInputNewChar = function (event, caretPosition) {
+        var input = event.target;
+        var currentValue = input.value;
+        var maxLen = maxPhoneLen === null || maxPhoneLen === void 0 ? void 0 : maxPhoneLen[countryIso2.toUpperCase()];
+        // Если задана длина номера и номер полностью заполнен, то перезатираем цифры, если каретка не в самом конце.
+        var shouldReplace = !!maxLen && maxLen === currentValue.replace(/\D/g, '').length;
+        var endPhonePart = currentValue.slice(caretPosition);
+        if (shouldReplace) {
+            var cursor = 0;
+            while (MASK_SYMBOLS.includes(endPhonePart.charAt(cursor))) {
+                cursor += 1;
+            }
+            endPhonePart = endPhonePart.slice(cursor + 1);
+        }
+        var newValue = currentValue.slice(0, caretPosition) + event.key + endPhonePart;
+        // Запрещаем ввод, если указана длина номера и номер уже заполнен.
+        if (maxLen && newValue.replace(/\D/g, '').length > maxLen) {
+            newValue = newValue.slice(0, -1);
+        }
+        newValue = formatPhone(addCountryCode(newValue));
+        var newCaretPosition;
+        var isFormatJumps = !shouldReplace && newValue.length - currentValue.length <= 0;
+        // Ситуация, когда происходят скачки номера из-за форматирования, например +7 999 999 99 99 -> +799999999999
+        if (isFormatJumps) {
+            var phonePart = currentValue.slice(0, caretPosition) + event.key;
+            var cursor = 0;
+            while (cursor < phonePart.length && cursor <= newValue.length) {
+                var currChar = phonePart.charAt(cursor);
+                var newValChar = newValue.charAt(cursor);
+                if (currChar !== newValChar) {
+                    if (MASK_SYMBOLS.includes(currChar)) {
+                        phonePart = phonePart.slice(0, cursor) + phonePart.slice(cursor + 1);
+                        // eslint-disable-next-line no-continue
+                        continue;
+                    }
+                    else {
+                        phonePart =
+                            phonePart.slice(0, cursor) + newValChar + phonePart.slice(cursor);
+                    }
+                }
+                cursor += 1;
+            }
+            newCaretPosition = cursor;
+        }
+        else {
+            var cursor = 0;
+            while (newValue.charAt(caretPosition + cursor) &&
+                newValue.charAt(caretPosition + cursor) !== event.key) {
+                cursor += 1;
+            }
+            cursor += 1;
+            newCaretPosition = caretPosition + cursor;
+        }
+        setCaretPos(newCaretPosition);
+        setCountryByDialCodeWithLengthCheck(newValue);
+        onChange(newValue);
+    };
+    var handleDeleteChar = function (event, caretPosition) {
+        var input = event.target;
+        if (!clearableCountryCode && caretPosition <= countryCodeLength)
+            return;
+        var currentValue = input.value;
+        var deletedCharsCount = 1;
+        // Высчитываем новое положение каретки с учетом символов маски.
+        while (caretPosition - deletedCharsCount > 0 &&
+            MASK_SYMBOLS.includes(currentValue.charAt(caretPosition - deletedCharsCount))) {
+            deletedCharsCount += 1;
+        }
+        var newCaretPosition = caretPosition - deletedCharsCount;
+        var newValue = formatPhone(addCountryCode(currentValue.slice(0, newCaretPosition) + currentValue.slice(caretPosition)));
+        var isFormatJumps = newValue.length - currentValue.length >= 0;
+        // Обрабатываем ситуацию, когда происходят скачки номера из-за форматирования, например +799999999999 => +7 999 999 99 99
+        if (isFormatJumps) {
+            var phonePart = currentValue.slice(0, newCaretPosition);
+            var cursor = 0;
+            while (cursor < phonePart.length) {
+                var currChar = newValue.charAt(cursor);
+                if (currChar !== phonePart.charAt(cursor)) {
+                    phonePart = phonePart.slice(0, cursor) + currChar + phonePart.slice(cursor);
+                }
+                cursor += 1;
+            }
+            newCaretPosition = cursor;
+        }
+        setCaretPos(newCaretPosition);
+        setCountryByDialCodeWithLengthCheck(newValue);
+        onChange(newValue);
+    };
+    var handleKeyDown = function (event) {
+        var input = event.target;
+        var caretPosition = input.selectionStart;
+        if (!caretPosition) {
+            return;
+        }
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            handleDeleteChar(event, caretPosition);
         }
-        setValue(selected.key);
-    }, [setValue, setCountryByDialCode]);
+        if (event.key.length === 1 && /[0-9+]/.test(event.key)) {
+            event.preventDefault();
+            handleInputNewChar(event, caretPosition);
+        }
+    };
     React.useEffect(function () {
-        if (!phoneLibUtils.current) {
-            loadPhoneUtils().then(function () {
-                setCountryByDialCode(value);
-            });
+        if (inputRef.current && caretPos !== undefined) {
+            inputRef.current.setSelectionRange(caretPos, caretPos);
+            setCaretPos(undefined);
         }
-    }, [countryIso2, loadPhoneUtils, setCountryByDialCode, value]);
-    var country = countriesHash[countryIso2];
-    var countryCodeLength = ("+" + country.dialCode).length;
+    }, [caretPos]);
+    React.useEffect(function () {
+        if (phoneLibUtils.current)
+            return;
+        Promise.resolve().then(function () { return require(
+        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-903db150.js'); })
+            .then(function (utils) {
+            phoneLibUtils.current = utils.AsYouType;
+            setCountryByDialCode(value);
+        })
+            .catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [value]);
     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 })) }), optionsListWidth: 'field', 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, onKeyDown: handleKeyDown, 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/intl-phone-input/cssm/components/select/index.module.css

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }

package/intl-phone-input/cssm/components/select-field/index.module.css

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }

package/intl-phone-input/cssm/index.js

@@ -15,7 +15,6 @@ require('./components/select/index.module.css');
 require('./components/select/component.js');
 require('./utils/format-phone-with-unclearable-country-code.js');
 require('./useCaretAvoidCountryCode.js');
-require('./usePreventCaretReset.js');
 require('./index.module.css');
 var component = require('./component.js');