@alfalab/core-components 33.1.0-beta.0 → 33.1.0

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

@@ -1,9 +1,8 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 export { FlagIcon } from './flag-icon/component.js';
-export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../component-955b98b0.js';
+export { S as SelectField } from '../component-707d05d1.js';
 import '../../../select/esm';
 export { CountriesSelect } from './select/component.js';

package/intl-phone-input/esm/components/select/component.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { SelectProps } from "../../../../select";
 import { Country } from '@alfalab/utils';
 type CountriesSelectProps = Pick<SelectProps, 'size' | 'dataTestId' | 'disabled' | 'onChange' | 'preventFlip'> & {
-    selected?: string;
+    selected: string;
     countries: Country[];
     fieldWidth: number | null;
 };

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

@@ -1,13 +1,12 @@
 import React, { useMemo, useCallback } from 'react';
 import 'classnames';
-import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import { FlagIcon } from '../flag-icon/component.js';
-import { a as __assign, E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../../component-955b98b0.js';
+import { a as __assign, S as SelectField } from '../../component-707d05d1.js';
 import { VirtualOptionsList, Select } from '../../../../select/esm';
 
-var styles = {"component":"intl-phone-input__component_omy50","option":"intl-phone-input__option_omy50","flag":"intl-phone-input__flag_omy50","countryName":"intl-phone-input__countryName_omy50","dialCode":"intl-phone-input__dialCode_omy50"};
+var styles = {"component":"intl-phone-input__component_wc7wg","option":"intl-phone-input__option_wc7wg","flag":"intl-phone-input__flag_wc7wg","countryName":"intl-phone-input__countryName_wc7wg","dialCode":"intl-phone-input__dialCode_wc7wg"};
 require('./index.css');
 
 var CountriesSelect = function (_a) {
@@ -31,7 +30,7 @@ var CountriesSelect = function (_a) {
     var renderOptionsList = useCallback(function (props) { return (React.createElement("div", { style: { width: fieldWidth || 0 } },
         React.createElement(VirtualOptionsList, __assign({}, props)))); }, [fieldWidth]);
     return (React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
-        React.createElement(Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
+        React.createElement(Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected, onChange: onChange, Field: SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };
 
 export { CountriesSelect };

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

@@ -1,4 +1,4 @@
-/* hash: igaqz */
+/* hash: 9ujkx */
 :root {
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
@@ -17,24 +17,24 @@
 :root {
     --text-secondary-color: var(--color-light-text-secondary);
 }
-.intl-phone-input__component_omy50 {
+.intl-phone-input__component_wc7wg {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
 }
-.intl-phone-input__option_omy50 {
+.intl-phone-input__option_wc7wg {
     display: flex;
     align-items: flex-start;
 }
-.intl-phone-input__flag_omy50 {
+.intl-phone-input__flag_wc7wg {
     flex-shrink: 0;
     margin-top: var(--gap-2xs);
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__countryName_omy50 {
+.intl-phone-input__countryName_wc7wg {
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__dialCode_omy50 {
+.intl-phone-input__dialCode_wc7wg {
     color: var(--text-secondary-color);
 }

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

@@ -1,9 +1,8 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/component.js';
-import '../../component-955b98b0.js';
+import '../../component-707d05d1.js';
 import '../../../../select/esm';
 export { CountriesSelect } from './component.js';

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

@@ -1,7 +1,6 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/component.js';
-export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../../component-955b98b0.js';
+export { S as SelectField } from '../../component-707d05d1.js';

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

@@ -1,7 +1,6 @@
-/* hash: crche */
+/* hash: a1f6n */
 :root {
     --color-light-border-link: #007aff;
-    --color-light-graphic-secondary: #6d7986;
 }
 :root {
 
@@ -20,13 +19,13 @@
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
 }
-.intl-phone-input__component_1uzsy {
+.intl-phone-input__component_vwysr {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
 }
-.intl-phone-input__flagIconContainer_1uzsy {
+.intl-phone-input__flagIconContainer_vwysr {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -34,13 +33,10 @@
     height: 24px;
     margin-right: var(--gap-2xs);
 }
-.intl-phone-input__emptyCountryIcon_1uzsy {
-    color: var(--color-light-graphic-secondary);
-}
-.intl-phone-input__disabled_1uzsy {
+.intl-phone-input__disabled_vwysr {
     cursor: var(--disabled-cursor);
 }
-.intl-phone-input__inner_1uzsy {
+.intl-phone-input__inner_vwysr {
     position: relative;
     display: flex;
     align-items: center;
@@ -48,11 +44,11 @@
     padding-left: var(--gap-s);
     outline: none;
 }
-.intl-phone-input__l_1uzsy .intl-phone-input__inner_1uzsy,
-.intl-phone-input__xl_1uzsy .intl-phone-input__inner_1uzsy {
+.intl-phone-input__l_vwysr .intl-phone-input__inner_vwysr,
+.intl-phone-input__xl_vwysr .intl-phone-input__inner_vwysr {
     padding-left: var(--gap-m);
 }
-.intl-phone-input__focusVisible_1uzsy {
+.intl-phone-input__focusVisible_vwysr {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

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

@@ -1 +1 @@
-export * from "../../component-955b98b0";
+export * from "../../component-707d05d1";

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

@@ -1,7 +1,6 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/component.js';
-export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../../component-955b98b0.js';
+export { S as SelectField } from '../../component-707d05d1.js';

package/intl-phone-input/esm/index.css

@@ -1,32 +1,8 @@
-/* hash: 1qce8 */
-:root {
-    --color-light-graphic-secondary: #6d7986;
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-s: 12px;
-}
-.intl-phone-input__addons_41rpn {
+/* hash: 1gu2k */
+.intl-phone-input__addons_lm7s9 {
     padding-left: 0;
 }
-.intl-phone-input__l_41rpn .intl-phone-input__addons_41rpn, .intl-phone-input__xl_41rpn .intl-phone-input__addons_41rpn {
+
+.intl-phone-input__l_lm7s9 .intl-phone-input__addons_lm7s9, .intl-phone-input__xl_lm7s9 .intl-phone-input__addons_lm7s9 {
         padding-left: 0;
     }
-.intl-phone-input__flagIconWrapper_41rpn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 24px;
-    height: 24px;
-    margin-left: var(--gap-s);
-}
-.intl-phone-input__emptyCountryIcon_41rpn {
-    color: var(--color-light-graphic-secondary);
-}

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

@@ -1,10 +1,9 @@
 import 'react';
 import 'classnames';
-import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import './components/flag-icon/component.js';
-import './component-955b98b0.js';
+import './component-707d05d1.js';
 import '@alfalab/utils';
 import '../../input-autocomplete/esm';
 import '../../select/esm';
@@ -12,5 +11,4 @@ import './components/select/component.js';
 import './utils/format-phone-with-unclearable-country-code.js';
 import './utils/calculateCaretPos.js';
 import './useCaretAvoidCountryCode.js';
-import './utils/preparePasteData.js';
 export { IntlPhoneInput } from './component.js';

package/intl-phone-input/index.css

@@ -1,32 +1,8 @@
-/* hash: 1qce8 */
-:root {
-    --color-light-graphic-secondary: #6d7986;
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-s: 12px;
-}
-.intl-phone-input__addons_41rpn {
+/* hash: 1gu2k */
+.intl-phone-input__addons_lm7s9 {
     padding-left: 0;
 }
-.intl-phone-input__l_41rpn .intl-phone-input__addons_41rpn, .intl-phone-input__xl_41rpn .intl-phone-input__addons_41rpn {
+
+.intl-phone-input__l_lm7s9 .intl-phone-input__addons_lm7s9, .intl-phone-input__xl_lm7s9 .intl-phone-input__addons_lm7s9 {
         padding-left: 0;
     }
-.intl-phone-input__flagIconWrapper_41rpn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 24px;
-    height: 24px;
-    margin-left: var(--gap-s);
-}
-.intl-phone-input__emptyCountryIcon_41rpn {
-    color: var(--color-light-graphic-secondary);
-}

package/intl-phone-input/index.js

@@ -1,11 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./component-c1c38c6b.js');
+require('./component-493e5f4b.js');
 require('react');
 require('classnames');
 require('@alfalab/utils');
 require('../input-autocomplete');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('react-merge-refs');
 require('@alfalab/hooks');
 require('./components/flag-icon/component.js');
@@ -14,7 +13,6 @@ require('./components/select/component.js');
 require('./utils/format-phone-with-unclearable-country-code.js');
 require('./utils/calculateCaretPos.js');
 require('./useCaretAvoidCountryCode.js');
-require('./utils/preparePasteData.js');
 var component = require('./component.js');
 
 

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

@@ -25,7 +25,7 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
     /**
      * Обработчик события изменения страны
      */
-    onCountryChange?: (countryCode?: CountryCode) => void;
+    onCountryChange?: (countryCode: CountryCode) => void;
     /**
      * Список стран
      */
@@ -38,10 +38,6 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
      * Ограничение длин вводимых номеров по странам.
      */
     maxPhoneLen?: MaxPhoneLenByCountry;
-    staticFlag?: boolean;
-    canBeEmptyCountry?: boolean;
-    ruNumberPriority?: boolean;
-    canClear?: boolean;
 };
 declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<InputAutocompleteProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "labelView" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onInput" | "onScroll" | "value" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "multiple" | "readOnly" | "success" | "selected" | "valueRenderer" | "Optgroup" | "optionsListWidth" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "inputProps" | "optionsListClassName" | "optionClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList" | "Input">> & Pick<SelectProps, "preventFlip"> & {
     /**
@@ -63,7 +59,7 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
     /**
      * Обработчик события изменения страны
      */
-    onCountryChange?: ((countryCode?: "AC" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CF" | "CG" | "CH" | "CI" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CV" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB" | "GD" | "GE" | "GF" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GP" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MF" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NC" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PM" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RE" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SD" | "SE" | "SG" | "SH" | "SI" | "SJ" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TA" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VA" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WF" | "WS" | "XK" | "YE" | "YT" | "ZA" | "ZM" | "ZW" | undefined) => void) | undefined;
+    onCountryChange?: ((countryCode: CountryCode) => void) | undefined;
     /**
      * Список стран
      */
@@ -76,9 +72,5 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
      * Ограничение длин вводимых номеров по странам.
      */
     maxPhoneLen?: Record<string, number> | undefined;
-    staticFlag?: boolean | undefined;
-    canBeEmptyCountry?: boolean | undefined;
-    ruNumberPriority?: boolean | undefined;
-    canClear?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { IntlPhoneInputProps, IntlPhoneInput };

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

@@ -1,20 +1,18 @@
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
-import WorldMagnifierMIcon from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import { getCountriesHash, getCountries } from '@alfalab/utils';
 import { InputAutocomplete } from '../../input-autocomplete/modern';
-import { FlagIcon } from './components/flag-icon/component.js';
+import './components/flag-icon/component.js';
 import './components/select-field/component.js';
 import '../../select/modern';
 import { CountriesSelect } from './components/select/component.js';
 import { formatPhoneWithUnclearableCountryCode } from './utils/format-phone-with-unclearable-country-code.js';
 import { calculateCaretPos } from './utils/calculateCaretPos.js';
 import { useCaretAvoidCountryCode } from './useCaretAvoidCountryCode.js';
-import { preparePasteData } from './utils/preparePasteData.js';
 
-var styles = {"addons":"intl-phone-input__addons_41rpn","l":"intl-phone-input__l_41rpn","xl":"intl-phone-input__xl_41rpn","flagIconWrapper":"intl-phone-input__flagIconWrapper_41rpn","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_41rpn"};
+var styles = {"addons":"intl-phone-input__addons_lm7s9","l":"intl-phone-input__l_lm7s9","xl":"intl-phone-input__xl_lm7s9"};
 require('./index.css');
 
 const countriesHash = getCountriesHash();
@@ -22,8 +20,9 @@ const MAX_DIAL_CODE_LENGTH = 4;
 const MASK_SYMBOLS = [' ', '-', '(', ')'];
 const MAX_PHONE_LEN = 15;
 const DEFAULT_MAX_PHONE_LEN_BY_COUNTRY = { RU: 11 };
-const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticFlag = false, canBeEmptyCountry = false, ruNumberPriority = false, canClear = false, size = 'm', colors = 'default', options = [], countries = getCountries(), clearableCountryCode = true, className, value, onChange, onCountryChange, defaultCountryIso2 = 'ru', preventFlip, inputProps, maxPhoneLen = DEFAULT_MAX_PHONE_LEN_BY_COUNTRY, ...restProps }, ref) => {
+const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size = 'm', colors = 'default', options = [], countries = getCountries(), clearableCountryCode = true, className, value, onChange, onCountryChange, defaultCountryIso2 = 'ru', preventFlip, inputProps, maxPhoneLen = DEFAULT_MAX_PHONE_LEN_BY_COUNTRY, ...restProps }, ref) => {
     const [countryIso2, setCountryIso2] = useState(defaultCountryIso2.toLowerCase());
+    const [fieldWidth, setFieldWidth] = useState(0);
     const inputRef = useRef(null);
     const [inputWrapperRef, setInputWrapperRef] = useState(null);
     const [caretPos, setCaretPos] = useState();
@@ -32,7 +31,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
         let newValue = inputValue;
         if (phoneLibUtils.current) {
             const Utils = phoneLibUtils.current;
-            const utils = new Utils(countryIso2 ? countryIso2.toUpperCase() : undefined);
+            const utils = new Utils(countryIso2.toUpperCase());
             newValue = utils.input(inputValue);
         }
         return newValue;
@@ -46,64 +45,49 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
     };
     const handleCountryChange = (countryCode) => {
         if (onCountryChange) {
-            onCountryChange(countryCode ? countryCode.toUpperCase() : undefined);
+            onCountryChange(countryCode.toUpperCase());
         }
     };
-    const getCountryByNumber = (inputValue) => {
-        // dialcode казахстанских номеров совпадает с российскими, поэтому проверяем отдельно
-        if (new RegExp('^\\+7(\\s)?7').test(inputValue)) {
-            const kzCoutry = countries.find(item => item.iso2 === 'kz');
-            if (kzCoutry) {
-                return kzCoutry;
-            }
-        }
-        const targetCountry = countries.find(country => {
+    const setCountryByDialCode = (inputValue) => {
+        for (let i = 0; i < countries.length; i++) {
+            const country = countries[i];
             if (new RegExp(`^\\+${country.dialCode}`).test(inputValue)) {
                 // Сначала проверяем, если приоритет не указан
                 if (country.priority === undefined) {
-                    return true;
+                    onChange(formatPhone(inputValue));
+                    setCountryIso2(country.iso2);
+                    handleCountryChange(country.iso2);
+                    break;
                 }
                 // Если страна уже была выставлена через селект, и коды совпадают
-                if (countryIso2 === country.iso2 && countryIso2 !== 'kz') {
-                    return true;
+                if (countryIso2 === country.iso2) {
+                    onChange(formatPhone(inputValue));
+                    setCountryIso2(country.iso2);
+                    handleCountryChange(country.iso2);
+                    break;
+                    // Если не совпадают - выбираем по приоритету
                 }
-                // Если не совпадают - выбираем по приоритету
-                if (country.priority === 0) {
-                    return true;
+                else if (country.priority === 0) {
+                    onChange(formatPhone(inputValue));
+                    setCountryIso2(country.iso2);
+                    handleCountryChange(country.iso2);
+                    break;
                 }
-                return false;
             }
-            return false;
-        });
-        return targetCountry;
-    };
-    const setCountryByDialCode = (inputValue) => {
-        const country = getCountryByNumber(inputValue);
-        onChange(formatPhone(inputValue));
-        if (country) {
-            setCountryIso2(country.iso2);
-            handleCountryChange(country.iso2);
-        }
-        else if (canBeEmptyCountry) {
-            setCountryIso2(undefined);
-            handleCountryChange(undefined);
         }
     };
     const setCountryByDialCodeWithLengthCheck = (inputValue) => {
-        if (inputRef.current) {
-            const { selectionStart } = inputRef.current;
-            if ((selectionStart || 0) <= MAX_DIAL_CODE_LENGTH) {
-                setCountryByDialCode(inputValue);
-            }
+        if (value.length < MAX_DIAL_CODE_LENGTH) {
+            setCountryByDialCode(inputValue);
         }
     };
     const addCountryCode = (inputValue) => {
-        if (clearableCountryCode || !countryIso2) {
+        const country = countriesHash[countryIso2];
+        if (clearableCountryCode) {
             return inputValue.length === 1 && inputValue !== '+'
                 ? `+${inputValue}`
                 : inputValue;
         }
-        const country = countriesHash[countryIso2];
         return formatPhoneWithUnclearableCountryCode(inputValue, country);
     };
     const handleInputChange = (event) => {
@@ -128,15 +112,12 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
         setCountryByDialCodeWithLengthCheck(selected.key);
         onChange(formatPhone(selected.key));
     };
-    const country = countryIso2 && countriesHash[countryIso2];
-    const countryCodeLength = country ? `+${country.dialCode}`.length : 0;
-    const isEmptyValue = clearableCountryCode
-        ? value === '' || value === '+'
-        : value.length <= countryCodeLength;
+    const country = countriesHash[countryIso2];
+    const countryCodeLength = `+${country.dialCode}`.length;
     const handleInputNewChar = (event, caretPosition) => {
         const input = event.target;
         const currentValue = input.value;
-        const maxPhoneLength = (countryIso2 && maxPhoneLen?.[countryIso2.toUpperCase()]) || MAX_PHONE_LEN;
+        const maxPhoneLength = maxPhoneLen?.[countryIso2.toUpperCase()] || MAX_PHONE_LEN;
         // Если номер полностью заполнен, то перезатираем цифры, если каретка не в самом конце.
         const shouldReplace = maxPhoneLength === currentValue.replace(/\D/g, '').length;
         let endPhonePart = currentValue.slice(caretPosition);
@@ -148,19 +129,10 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
             endPhonePart = endPhonePart.slice(cursor + 1);
         }
         let newValue = currentValue.slice(0, caretPosition) + event.key + endPhonePart;
-        const newValueDecimal = newValue.replace(/\D/g, '');
         // Запрещаем ввод, если номер уже заполнен.
-        if (newValueDecimal.length > maxPhoneLength) {
+        if (newValue.replace(/\D/g, '').length > maxPhoneLength) {
             newValue = newValue.slice(0, -1);
         }
-        if (ruNumberPriority && !value && countryIso2 === 'ru') {
-            if (newValue === '7' || newValue === '8') {
-                newValue = '+7';
-            }
-            else if (newValueDecimal.length === 1) {
-                newValue = `+7${newValueDecimal}`;
-            }
-        }
         newValue = formatPhone(addCountryCode(newValue));
         let phonePartWithoutMask = currentValue.slice(0, caretPosition).replace(/\D/g, '') + event.key;
         if (shouldReplace && phonePartWithoutMask.length > maxPhoneLength) {
@@ -209,34 +181,6 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
             handleInputNewChar(event, caretPosition);
         }
     };
-    const handleClear = () => {
-        if (clearableCountryCode) {
-            onChange('+');
-            if (canBeEmptyCountry) {
-                setCountryIso2(undefined);
-                handleCountryChange(undefined);
-            }
-        }
-        else {
-            onChange(value.substring(0, countryCodeLength));
-        }
-    };
-    const handlePaste = event => {
-        event.preventDefault();
-        const text = event.clipboardData?.getData('Text');
-        if (!text || !inputRef.current) {
-            return;
-        }
-        const { selectionStart, selectionEnd } = inputRef.current;
-        const preparedNumber = preparePasteData(value, text, selectionStart || 0, selectionEnd || 0);
-        const targetCountry = getCountryByNumber(preparedNumber);
-        const maxPhoneLength = (targetCountry && maxPhoneLen?.[targetCountry.iso2.toUpperCase()]) || MAX_PHONE_LEN;
-        const resultNumber = preparedNumber.substring(0, maxPhoneLength + 1);
-        if (resultNumber) {
-            setCountryIso2(targetCountry ? targetCountry.iso2 : undefined);
-            onChange(formatPhone(addCountryCode(resultNumber)));
-        }
-    };
     useEffect(() => {
         if (inputRef.current && caretPos !== undefined) {
             inputRef.current.setSelectionRange(caretPos, caretPos);
@@ -247,20 +191,21 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
         if (phoneLibUtils.current)
             return;
         import(
-        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-de012527.js')
+        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-793726a8.js')
             .then(utils => {
             phoneLibUtils.current = utils.AsYouType;
-            if (!canBeEmptyCountry) {
-                setCountryByDialCode(value);
-            }
+            setCountryByDialCode(value);
         })
             .catch(error => `An error occurred while loading libphonenumber-js:\n${error}`);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [value]);
     useCaretAvoidCountryCode({ inputRef, countryCodeLength, clearableCountryCode });
+    useEffect(() => {
+        if (inputWrapperRef) {
+            setFieldWidth(inputWrapperRef.getBoundingClientRect().width);
+        }
+    }, [inputWrapperRef]);
     return (React.createElement(InputAutocomplete, Object.assign({}, restProps, { ref: ref, inputProps: {
-            clear: canClear && !isEmptyValue,
-            onClear: handleClear,
             ...inputProps,
             ref: inputRef,
             wrapperRef: setInputWrapperRef,
@@ -269,8 +214,7 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, staticF
             className: cn(className, styles[size]),
             addonsClassName: styles.addons,
             onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            leftAddons: staticFlag ? (React.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React.createElement(FlagIcon, { country: countryIso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))) : (countries.length > 1 && (React.createElement(CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip }))),
+            leftAddons: countries.length > 1 && (React.createElement(CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: fieldWidth, preventFlip: preventFlip })),
         }, optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
 });
 IntlPhoneInput.defaultProps = {