@alfalab/core-components 41.19.0-beta.0 → 41.20.0

package/input-autocomplete/index-f12ee135.d.ts

@@ -223,6 +223,22 @@ type BottomSheetProps = {
      * Вызывается после притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
 };
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 declare const TIMEOUT = 500;

package/input-autocomplete/index.js

@@ -15,7 +15,7 @@ require('lodash.throttle');
 require('../button');
 require('./autocomplete-mobile-field/Component.js');
 require('../form-control');
-require('./mobile.module-ea0ec598.js');
+require('./mobile.module-80b4093b.js');
 
 
 

package/input-autocomplete/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1qiun */
+/* hash: 1em70 */
 :root {
 } /* deprecated */ :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 */
 } :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 */
@@ -16,11 +16,11 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .input-autocomplete__bottomAddonInput_172kg {
+} .input-autocomplete__bottomAddonInput_175id {
     padding: 0 var(--gap-xs) var(--gap-xs);
     box-sizing: border-box;
-} .input-autocomplete__footer_172kg {
+} .input-autocomplete__footer_175id {
     display: flex
-} .input-autocomplete__footer_172kg > button + button {
+} .input-autocomplete__footer_175id > button + button {
         margin-left: var(--gap-m);
     }

package/input-autocomplete/mobile.js

@@ -13,7 +13,7 @@ require('../select');
 require('./autocomplete-mobile-field/Component.js');
 require('../form-control');
 require('@alfalab/hooks');
-require('./mobile.module-ea0ec598.js');
+require('./mobile.module-80b4093b.js');
 require('../select/mobile');
 
 

package/input-autocomplete/{mobile.module-ea0ec598.js → mobile.module-80b4093b.js}

@@ -1,4 +1,4 @@
-var styles = {"bottomAddonInput":"input-autocomplete__bottomAddonInput_172kg","footer":"input-autocomplete__footer_172kg"};
+var styles = {"bottomAddonInput":"input-autocomplete__bottomAddonInput_175id","footer":"input-autocomplete__footer_175id"};
 require('./mobile.css');
 
 exports.styles = styles;

package/input-autocomplete/modern/Component-425c8522.d.ts

@@ -49,5 +49,5 @@ type BadgeProps = {
      */
     dataTestId?: string;
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
 export { IconColorType, BadgeProps, Badge };

package/input-autocomplete/modern/Component-b4e70cb0.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import React from "react";
 import { OptionShape, OptionsListProps } from "./typings-5e1b8383";
-import React from 'react';
 import { HeaderProps } from "./Component-aed0af6e";
 type FooterProps = {
     handleClear?: () => void;
@@ -8,7 +8,7 @@ type FooterProps = {
     showClear?: boolean;
     selectedDraft?: OptionShape[];
 };
-declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft }: FooterProps) => JSX.Element;
+declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft }: FooterProps) => React.JSX.Element;
 declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
     showClear?: boolean | undefined;
     onClose?: (() => void) | undefined;

package/input-autocomplete/modern/Component-bdb4c6b9.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import React from 'react';
 type FooterProps = {
     handleClear?: () => void;
     handleApply?: () => void;
     showClear?: boolean;
 };
-declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => JSX.Element;
+declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => React.JSX.Element;
 export { FooterProps, Footer };

package/input-autocomplete/modern/Component.mobile.js

@@ -6,7 +6,7 @@ import { Button } from '../../button/modern';
 import { Input } from '../../input/modern';
 import { SelectMobile } from '../../select/modern';
 import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
-import { s as styles } from './mobile.module-cc220b08.js';
+import { s as styles } from './mobile.module-93c1e0e2.js';
 import '../../form-control/modern';
 import '@alfalab/hooks';
 

package/input-autocomplete/modern/Component.modal.mobile.js

@@ -6,7 +6,7 @@ import { Button } from '../../button/modern';
 import { Input } from '../../input/modern';
 import { SelectModalMobile } from '../../select/modern/mobile';
 import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
-import { s as styles } from './mobile.module-cc220b08.js';
+import { s as styles } from './mobile.module-93c1e0e2.js';
 import '../../form-control/modern';
 import '@alfalab/hooks';
 

package/input-autocomplete/modern/Component.responsive.js

@@ -11,7 +11,7 @@ import 'lodash.throttle';
 import '../../button/modern';
 import './autocomplete-mobile-field/Component.js';
 import '../../form-control/modern';
-import './mobile.module-cc220b08.js';
+import './mobile.module-93c1e0e2.js';
 
 const InputAutocompleteResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const [view] = useMedia([

package/input-autocomplete/modern/autocomplete-field/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import React from 'react';
 import { FieldProps } from "../index-3e68f8db";
 import { InputAutocompleteDesktopProps } from "../Component.desktop";
 type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteDesktopProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
-declare const AutocompleteField: ({ label, labelView, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, }: AutocompleteFieldProps) => JSX.Element;
+declare const AutocompleteField: ({ label, labelView, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, }: AutocompleteFieldProps) => React.JSX.Element;
 export { AutocompleteFieldProps, AutocompleteField };

package/input-autocomplete/modern/autocomplete-field/Component.js

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Input } from '../../../input/modern';
 
-const styles = {"arrow":"input-autocomplete__arrow_13p2o","error":"input-autocomplete__error_13p2o"};
+const styles = {"arrow":"input-autocomplete__arrow_1xwsa","error":"input-autocomplete__error_1xwsa"};
 require('./index.css');
 
 const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input: Input$1 = Input, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, }) => {

package/input-autocomplete/modern/autocomplete-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g8bo */
-.input-autocomplete__arrow_13p2o.input-autocomplete__error_13p2o ~ * {
+/* hash: 14bo2 */
+.input-autocomplete__arrow_1xwsa.input-autocomplete__error_1xwsa ~ * {
     display: none;
 }

package/input-autocomplete/modern/autocomplete-mobile-field/Component.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import React from 'react';
 import { FormControlProps } from "../../../form-control";
 import { InputAutocompleteProps } from "../index";
 import { FieldProps as BaseFieldProps } from "../index-3e68f8db";
 type AutocompleteMobileFieldProps = FormControlProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & Pick<InputAutocompleteProps, 'value'>;
-declare const AutocompleteMobileField: ({ size, open, error, hint, disabled, label, labelView, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => JSX.Element;
+declare const AutocompleteMobileField: ({ size, open, error, hint, disabled, label, labelView, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => React.JSX.Element;
 export { AutocompleteMobileFieldProps, AutocompleteMobileField };

package/input-autocomplete/modern/autocomplete-mobile-field/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { FormControl } from '../../../form-control/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"input-autocomplete__component_1xlxc","field":"input-autocomplete__field_1xlxc","disabled":"input-autocomplete__disabled_1xlxc","placeholder":"input-autocomplete__placeholder_1xlxc","contentWrapper":"input-autocomplete__contentWrapper_1xlxc","value":"input-autocomplete__value_1xlxc","focusVisible":"input-autocomplete__focusVisible_1xlxc"};
+const styles = {"component":"input-autocomplete__component_13e7p","field":"input-autocomplete__field_13e7p","disabled":"input-autocomplete__disabled_13e7p","placeholder":"input-autocomplete__placeholder_13e7p","contentWrapper":"input-autocomplete__contentWrapper_13e7p","value":"input-autocomplete__value_13e7p","focusVisible":"input-autocomplete__focusVisible_13e7p"};
 require('./index.css');
 
 const AutocompleteMobileField = ({ size = 'm', open, error, hint, disabled, label, labelView = 'inner', placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }) => {

package/input-autocomplete/modern/autocomplete-mobile-field/index.css

@@ -1,4 +1,4 @@
-/* hash: v88g5 */
+/* hash: 18ewg */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -18,16 +18,16 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_1xlxc {
+} .input-autocomplete__component_13e7p {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_1xlxc:not(.input-autocomplete__disabled_1xlxc) {
+} .input-autocomplete__field_13e7p:not(.input-autocomplete__disabled_13e7p) {
     cursor: pointer;
-} .input-autocomplete__disabled_1xlxc {
+} .input-autocomplete__disabled_13e7p {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_1xlxc {
+} .input-autocomplete__placeholder_13e7p {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_1xlxc {
+} .input-autocomplete__contentWrapper_13e7p {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -36,11 +36,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_1xlxc {
+} .input-autocomplete__value_13e7p {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_1xlxc {
+} .input-autocomplete__focusVisible_13e7p {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/input-autocomplete/modern/index-f12ee135.d.ts

@@ -223,6 +223,22 @@ type BottomSheetProps = {
      * Вызывается после притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
 };
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 declare const TIMEOUT = 500;

package/input-autocomplete/modern/index.js

@@ -12,4 +12,4 @@ import 'lodash.throttle';
 import '../../button/modern';
 import './autocomplete-mobile-field/Component.js';
 import '../../form-control/modern';
-import './mobile.module-cc220b08.js';
+import './mobile.module-93c1e0e2.js';

package/input-autocomplete/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1qiun */
+/* hash: 1em70 */
 :root {
 } /* deprecated */ :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 */
 } :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 */
@@ -16,11 +16,11 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .input-autocomplete__bottomAddonInput_172kg {
+} .input-autocomplete__bottomAddonInput_175id {
     padding: 0 var(--gap-xs) var(--gap-xs);
     box-sizing: border-box;
-} .input-autocomplete__footer_172kg {
+} .input-autocomplete__footer_175id {
     display: flex
-} .input-autocomplete__footer_172kg > button + button {
+} .input-autocomplete__footer_175id > button + button {
         margin-left: var(--gap-m);
     }

package/input-autocomplete/modern/mobile.js

@@ -10,5 +10,5 @@ import '../../select/modern';
 import './autocomplete-mobile-field/Component.js';
 import '../../form-control/modern';
 import '@alfalab/hooks';
-import './mobile.module-cc220b08.js';
+import './mobile.module-93c1e0e2.js';
 import '../../select/modern/mobile';

package/input-autocomplete/modern/{mobile.module-cc220b08.js → mobile.module-93c1e0e2.js}

@@ -1,4 +1,4 @@
-const styles = {"bottomAddonInput":"input-autocomplete__bottomAddonInput_172kg","footer":"input-autocomplete__footer_172kg"};
+const styles = {"bottomAddonInput":"input-autocomplete__bottomAddonInput_175id","footer":"input-autocomplete__footer_175id"};
 require('./mobile.css');
 
 export { styles as s };

package/input-autocomplete/modern/responsive.js

@@ -12,4 +12,4 @@ import 'lodash.throttle';
 import '../../button/modern';
 import './autocomplete-mobile-field/Component.js';
 import '../../form-control/modern';
-import './mobile.module-cc220b08.js';
+import './mobile.module-93c1e0e2.js';

package/input-autocomplete/responsive.js

@@ -15,7 +15,7 @@ require('lodash.throttle');
 require('../button');
 require('./autocomplete-mobile-field/Component.js');
 require('../form-control');
-require('./mobile.module-ea0ec598.js');
+require('./mobile.module-80b4093b.js');
 
 
 

package/intl-phone-input/component.js

@@ -42,7 +42,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultCompat(WorldMagnifierMIcon);
 
-var styles = {"addons":"intl-phone-input__addons_196o2","l":"intl-phone-input__l_196o2","xl":"intl-phone-input__xl_196o2","flagIconWrapper":"intl-phone-input__flagIconWrapper_196o2","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_196o2"};
+var styles = {"addons":"intl-phone-input__addons_1higv","l":"intl-phone-input__l_1higv","xl":"intl-phone-input__xl_1higv","flagIconWrapper":"intl-phone-input__flagIconWrapper_1higv","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1higv"};
 require('./index.css');
 
 var countriesHash = utils.getCountriesHash();
@@ -271,7 +271,9 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
             handleInputNewChar(event, caretPosition);
         }
     };
-    var handleClear = function () {
+    var handleClear = function (event) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClear) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         if (clearableCountryCode) {
             onChange('+');
             if (canBeEmptyCountry) {
@@ -284,13 +286,14 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         }
     };
     var handlePaste = function (event) {
-        var _a;
+        var _a, _b;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onPaste) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         event.preventDefault();
-        var text = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('Text');
+        var text = (_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.getData('Text');
         if (!text || !inputRef.current) {
             return;
         }
-        var _b = inputRef.current, selectionStart = _b.selectionStart, selectionEnd = _b.selectionEnd;
+        var _c = inputRef.current, selectionStart = _c.selectionStart, selectionEnd = _c.selectionEnd;
         var preparedNumber = utils_preparePasteData.preparePasteData(value, text, selectionStart || 0, selectionEnd || 0, ruNumberPriority && countryIso2 === 'ru');
         var targetCountry = getCountryByNumber(preparedNumber);
         var maxPhoneLength = (targetCountry && (maxPhoneLen === null || maxPhoneLen === void 0 ? void 0 : maxPhoneLen[targetCountry.iso2.toUpperCase()])) || MAX_PHONE_LEN;
@@ -340,7 +343,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
     useCaretAvoidCountryCode.useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
-    return (React__default.default.createElement(coreComponentsInputAutocomplete.InputAutocomplete, tslib.__assign({}, restProps, { ref: ref, inputProps: tslib.__assign(tslib.__assign({ clear: clear && !isEmptyValue, onClear: handleClear }, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles.emptyCountryIcon })))) : (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, tslib.__assign({}, restProps, { ref: ref, inputProps: tslib.__assign(tslib.__assign({ clear: clear && !isEmptyValue }, inputProps), { onClear: handleClear, ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles.emptyCountryIcon })))) : (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 })));
 });
 
 exports.IntlPhoneInput = IntlPhoneInput;

package/intl-phone-input/components/flag-icon/component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"flagIcon":"intl-phone-input__flagIcon_1rscl","flagPlaceholder":"intl-phone-input__flagPlaceholder_1rscl"};
+var styles = {"flagIcon":"intl-phone-input__flagIcon_hgtpk","flagPlaceholder":"intl-phone-input__flagPlaceholder_hgtpk"};
 require('./index.css');
 
 /**

package/intl-phone-input/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: 1xslc */
+/* hash: 1fi4l */
 :root {
 } /* deprecated */ :root {
     --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* 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 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .intl-phone-input__flagIcon_1rscl {
+} .intl-phone-input__flagIcon_hgtpk {
     max-width: 24px;
     max-height: 24px;
-} .intl-phone-input__flagPlaceholder_1rscl {
+} .intl-phone-input__flagPlaceholder_hgtpk {
     width: 24px;
     height: 16px;
     max-height: 16px;

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

@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"intl-phone-input__component_1g6q4","option":"intl-phone-input__option_1g6q4","flag":"intl-phone-input__flag_1g6q4","countryName":"intl-phone-input__countryName_1g6q4","dialCode":"intl-phone-input__dialCode_1g6q4"};
+var styles = {"component":"intl-phone-input__component_5v78i","option":"intl-phone-input__option_5v78i","flag":"intl-phone-input__flag_5v78i","countryName":"intl-phone-input__countryName_5v78i","dialCode":"intl-phone-input__dialCode_5v78i"};
 require('./index.css');
 
 var CountriesSelect = function (_a) {
@@ -37,7 +37,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.VirtualOptionsList, tslib.__assign({}, props)))); }, [fieldWidth]);
+        React__default.default.createElement(coreComponentsSelect.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [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 || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };

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

@@ -1,4 +1,4 @@
-/* hash: 5mlb8 */
+/* hash: 1b2ty */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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,19 +17,19 @@
 } :root {
 } :root {
     --text-secondary-color: var(--color-light-text-secondary);
-} .intl-phone-input__component_1g6q4 {
+} .intl-phone-input__component_5v78i {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .intl-phone-input__option_1g6q4 {
+} .intl-phone-input__option_5v78i {
     display: flex;
     align-items: flex-start;
-} .intl-phone-input__flag_1g6q4 {
+} .intl-phone-input__flag_5v78i {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .intl-phone-input__countryName_1g6q4 {
+} .intl-phone-input__countryName_5v78i {
     margin-right: var(--gap-xs);
-} .intl-phone-input__dialCode_1g6q4 {
+} .intl-phone-input__dialCode_5v78i {
     color: var(--text-secondary-color);
 }

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

@@ -16,7 +16,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultCompat(WorldMagnifierMIcon);
 
-var styles = {"component":"intl-phone-input__component_1idjn","flagIconContainer":"intl-phone-input__flagIconContainer_1idjn","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1idjn","disabled":"intl-phone-input__disabled_1idjn","inner":"intl-phone-input__inner_1idjn","l":"intl-phone-input__l_1idjn","xl":"intl-phone-input__xl_1idjn","focusVisible":"intl-phone-input__focusVisible_1idjn"};
+var styles = {"component":"intl-phone-input__component_tnyhe","flagIconContainer":"intl-phone-input__flagIconContainer_tnyhe","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_tnyhe","disabled":"intl-phone-input__disabled_tnyhe","inner":"intl-phone-input__inner_tnyhe","l":"intl-phone-input__l_tnyhe","xl":"intl-phone-input__xl_tnyhe","focusVisible":"intl-phone-input__focusVisible_tnyhe"};
 require('./index.css');
 
 var EMPTY_COUNTRY_SELECT_FIELD = {

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

@@ -1,4 +1,4 @@
-/* hash: 8pxjv */
+/* hash: 12asy */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .intl-phone-input__component_1idjn {
+} .intl-phone-input__component_tnyhe {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .intl-phone-input__flagIconContainer_1idjn {
+} .intl-phone-input__flagIconContainer_tnyhe {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .intl-phone-input__emptyCountryIcon_1idjn {
+} .intl-phone-input__emptyCountryIcon_tnyhe {
     color: var(--color-light-graphic-secondary);
-} .intl-phone-input__disabled_1idjn {
+} .intl-phone-input__disabled_tnyhe {
     cursor: var(--disabled-cursor);
-} .intl-phone-input__inner_1idjn {
+} .intl-phone-input__inner_tnyhe {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .intl-phone-input__l_1idjn .intl-phone-input__inner_1idjn,
-.intl-phone-input__xl_1idjn .intl-phone-input__inner_1idjn {
+} .intl-phone-input__l_tnyhe .intl-phone-input__inner_tnyhe,
+.intl-phone-input__xl_tnyhe .intl-phone-input__inner_tnyhe {
     padding-left: var(--gap-m);
-} .intl-phone-input__focusVisible_1idjn {
+} .intl-phone-input__focusVisible_tnyhe {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

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

@@ -273,7 +273,9 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
             handleInputNewChar(event, caretPosition);
         }
     };
-    var handleClear = function () {
+    var handleClear = function (event) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClear) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         if (clearableCountryCode) {
             onChange('+');
             if (canBeEmptyCountry) {
@@ -286,13 +288,14 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         }
     };
     var handlePaste = function (event) {
-        var _a;
+        var _a, _b;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onPaste) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         event.preventDefault();
-        var text = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('Text');
+        var text = (_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.getData('Text');
         if (!text || !inputRef.current) {
             return;
         }
-        var _b = inputRef.current, selectionStart = _b.selectionStart, selectionEnd = _b.selectionEnd;
+        var _c = inputRef.current, selectionStart = _c.selectionStart, selectionEnd = _c.selectionEnd;
         var preparedNumber = utils_preparePasteData.preparePasteData(value, text, selectionStart || 0, selectionEnd || 0, ruNumberPriority && countryIso2 === 'ru');
         var targetCountry = getCountryByNumber(preparedNumber);
         var maxPhoneLength = (targetCountry && (maxPhoneLen === null || maxPhoneLen === void 0 ? void 0 : maxPhoneLen[targetCountry.iso2.toUpperCase()])) || MAX_PHONE_LEN;
@@ -342,7 +345,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
     useCaretAvoidCountryCode.useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
-    return (React__default.default.createElement(coreComponentsInputAutocomplete.InputAutocomplete, tslib.__assign({}, restProps, { ref: ref, inputProps: tslib.__assign(tslib.__assign({ clear: clear && !isEmptyValue, onClear: handleClear }, 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, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles__default.default.emptyCountryIcon })))) : (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, tslib.__assign({}, restProps, { ref: ref, inputProps: tslib.__assign(tslib.__assign({ clear: clear && !isEmptyValue }, inputProps), { onClear: handleClear, ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles__default.default[size]), addonsClassName: styles__default.default.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles__default.default.emptyCountryIcon })))) : (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 })));
 });
 
 exports.IntlPhoneInput = IntlPhoneInput;

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

@@ -38,7 +38,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.VirtualOptionsList, tslib.__assign({}, props)))); }, [fieldWidth]);
+        React__default.default.createElement(coreComponentsSelect.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
     return (React__default.default.createElement("div", { className: styles__default.default.component, onClick: function (event) { return event.stopPropagation(); } },
         React__default.default.createElement(coreComponentsSelect.Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };