@alfalab/core-components 44.6.0 → 44.7.0-beta.0

package/international-phone-input/esm/components/base-international-phone-input/Component.d.ts

@@ -11,9 +11,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-c29389e5").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void) | undefined;
+    onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
 } & {

package/international-phone-input/esm/components/base-international-phone-input/Component.js

@@ -16,7 +16,7 @@ import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import '@alfalab/hooks';
 
-var styles = {"component":"international-phone-input__component_1ql2c","addons":"international-phone-input__addons_1ql2c"};
+var styles = {"component":"international-phone-input__component_1gdiu","addons":"international-phone-input__addons_1gdiu"};
 require('./index.css');
 
 var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
@@ -36,45 +36,43 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     };
     var maskOptions = useMemo(function () { return createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
     var maskRef = useMaskito({ options: maskOptions });
-    var changeNumber = function (e, phone) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: phone });
+    var changeNumber = function (phone) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(phone);
     };
-    var updatePhoneData = function (phone, e) {
+    var updatePhoneData = function (phone) {
         var _a = getPhoneData(phone, countriesData, defaultIso2), nextCountry = _a.nextCountry, nextPhone = _a.nextPhone;
         if (nextCountry !== country) {
             handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         }
-        changeNumber(e, nextPhone);
+        changeNumber(nextPhone);
     };
     var handleSelectCountry = function (_a) {
         var selected = _a.selected;
         var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
         handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         if (nextCountry) {
-            changeNumber(null, "+".concat(nextCountry.dialCode));
+            changeNumber("+".concat(nextCountry.dialCode));
         }
         requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     var handleOptionSelect = function (payload) {
         var _a;
-        updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions), null);
+        updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions));
     };
     var handleInput = function (e) {
-        updatePhoneData(e.target.value, e);
+        updatePhoneData(e.target.value);
     };
-    var handleClear = function () {
-        if (clearableCountryCode) {
-            changeNumber(null, '');
-        }
-        else {
-            changeNumber(null, "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
-        }
+    var handleClear = function (event) {
+        var _a, _b;
+        (_b = (_a = restProps.inputProps) === null || _a === void 0 ? void 0 : _a.onClear) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        var countryCode = (country === null || country === void 0 ? void 0 : country.countryCode) || '';
+        changeNumber(clearableCountryCode ? '' : "+".concat(countryCode));
     };
     useEffect(function () {
         if (value) {
             var newValue = maskitoTransform(value, maskOptions);
             if (value !== newValue) {
-                updatePhoneData(newValue, null);
+                updatePhoneData(newValue);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -85,10 +83,7 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
         return (React.createElement(CountrySelect, __assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
     };
     var inputProps = __assign({ className: styles.component, ref: mergeRefs([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
-    return Array.isArray(options) ? (React.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (event, _a) {
-            var phone = _a.value;
-            return updatePhoneData(phone, event);
-        }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign(__assign(__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+    return Array.isArray(options) ? (React.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign(__assign(__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 
 export { BaseInternationalPhoneInput };

package/international-phone-input/esm/components/base-international-phone-input/index.css

@@ -1,5 +1,5 @@
-/* hash: qky8l */
+/* hash: ri3ng */
 
-    .international-phone-input__component_1ql2c .international-phone-input__addons_1ql2c {
+    .international-phone-input__component_1gdiu .international-phone-input__addons_1gdiu {
         padding-left: 0;
     }

package/international-phone-input/esm/components/country-select/Component.js

@@ -10,7 +10,7 @@ import '../flag-icon/flagSprite.js';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 
-var styles = {"component":"international-phone-input__component_1oi9d","option":"international-phone-input__option_1oi9d","flag":"international-phone-input__flag_1oi9d","countryName":"international-phone-input__countryName_1oi9d","dialCode":"international-phone-input__dialCode_1oi9d","flagIconWrapper":"international-phone-input__flagIconWrapper_1oi9d","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1oi9d"};
+var styles = {"component":"international-phone-input__component_1opig","option":"international-phone-input__option_1opig","flag":"international-phone-input__flag_1opig","countryName":"international-phone-input__countryName_1opig","dialCode":"international-phone-input__dialCode_1opig","flagIconWrapper":"international-phone-input__flagIconWrapper_1opig","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1opig"};
 require('./index.css');
 
 var CountrySelect = function (_a) {

package/international-phone-input/esm/components/country-select/index.css

@@ -1,4 +1,4 @@
-/* hash: 12p5y */
+/* hash: 1r5mu */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -18,29 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .international-phone-input__component_1oi9d {
+} .international-phone-input__component_1opig {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_1oi9d {
+} .international-phone-input__option_1opig {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_1oi9d {
+} .international-phone-input__flag_1opig {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_1oi9d {
+} .international-phone-input__countryName_1opig {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_1oi9d {
+} .international-phone-input__dialCode_1opig {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_1oi9d {
+} .international-phone-input__flagIconWrapper_1opig {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_1oi9d {
+} .international-phone-input__emptyCountryIcon_1opig {
     color: var(--color-light-neutral-translucent-700);
 }

package/international-phone-input/esm/components/flag-icon/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-var styles = {"flagIcon":"international-phone-input__flagIcon_137ee","flagPlaceholder":"international-phone-input__flagPlaceholder_137ee"};
+var styles = {"flagIcon":"international-phone-input__flagIcon_1305a","flagPlaceholder":"international-phone-input__flagPlaceholder_1305a"};
 require('./index.css');
 
 /**

package/international-phone-input/esm/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ywvz */
+/* hash: 1agf3 */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* 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 {
-} .international-phone-input__flagIcon_137ee {
+} .international-phone-input__flagIcon_1305a {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_137ee {
+} .international-phone-input__flagPlaceholder_1305a {
     width: 24px;
     height: 16px;
     max-height: 16px;

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

@@ -7,7 +7,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';
 
-var styles = {"component":"international-phone-input__component_1z0vf","flagIconContainer":"international-phone-input__flagIconContainer_1z0vf","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1z0vf","disabled":"international-phone-input__disabled_1z0vf","inner":"international-phone-input__inner_1z0vf","l":"international-phone-input__l_1z0vf","xl":"international-phone-input__xl_1z0vf","focusVisible":"international-phone-input__focusVisible_1z0vf"};
+var styles = {"component":"international-phone-input__component_1vizw","flagIconContainer":"international-phone-input__flagIconContainer_1vizw","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1vizw","disabled":"international-phone-input__disabled_1vizw","inner":"international-phone-input__inner_1vizw","l":"international-phone-input__l_1vizw","xl":"international-phone-input__xl_1vizw","focusVisible":"international-phone-input__focusVisible_1vizw"};
 require('./index.css');
 
 var EMPTY_COUNTRY_SELECT_FIELD = {

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

@@ -1,4 +1,4 @@
-/* hash: 12xdp */
+/* hash: 1h39k */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_1z0vf {
+} .international-phone-input__component_1vizw {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_1z0vf {
+} .international-phone-input__flagIconContainer_1vizw {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_1z0vf {
+} .international-phone-input__emptyCountryIcon_1vizw {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_1z0vf {
+} .international-phone-input__disabled_1vizw {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_1z0vf {
+} .international-phone-input__inner_1vizw {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__l_1z0vf .international-phone-input__inner_1z0vf,
-.international-phone-input__xl_1z0vf .international-phone-input__inner_1z0vf {
+} .international-phone-input__l_1vizw .international-phone-input__inner_1vizw,
+.international-phone-input__xl_1vizw .international-phone-input__inner_1vizw {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_1z0vf {
+} .international-phone-input__focusVisible_1vizw {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/international-phone-input/esm/types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ElementType, FC, FocusEvent } from 'react';
+import { ElementType, FC, FocusEvent } from 'react';
 import { InputProps } from "../../input";
 import { InputDesktopProps } from "../../input/desktop";
 import { InputMobileProps } from "../../input/mobile";
@@ -57,9 +57,7 @@ type CommonPhoneInputProps = {
     /**
      *  Обработчик изменения номера
      */
-    onChange?: (e: ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void;
+    onChange?: (phone: string) => void;
     /**
      * Обработчик блюра поля
      */

package/international-phone-input/esm/typings-c29389e5.d.ts

@@ -18,7 +18,7 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Текст после иконки
      */
-    text?: string;
+    text?: string | null;
     /**
      * Дополнительный класс
      */

package/international-phone-input/modern/Component.responsive.d.ts

@@ -9,9 +9,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-c29389e5").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void) | undefined;
+    onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
 } & {
@@ -30,9 +28,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-c29389e5").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void) | undefined;
+    onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
 } & {

package/international-phone-input/modern/components/base-international-phone-input/Component.d.ts

@@ -11,9 +11,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-c29389e5").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void) | undefined;
+    onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
 } & {

package/international-phone-input/modern/components/base-international-phone-input/Component.js

@@ -15,7 +15,7 @@ import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import '@alfalab/hooks';
 
-const styles = {"component":"international-phone-input__component_1ql2c","addons":"international-phone-input__addons_1ql2c"};
+const styles = {"component":"international-phone-input__component_1gdiu","addons":"international-phone-input__addons_1gdiu"};
 require('./index.css');
 
 const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 'm', Input, InputAutocomplete, SelectComponent, view, clear: clearProp, ...restProps }, ref) => {
@@ -32,43 +32,40 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
     };
     const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode), [country, clearableCountryCode]);
     const maskRef = useMaskito({ options: maskOptions });
-    const changeNumber = (e, phone) => {
-        onChange?.(e, { value: phone });
+    const changeNumber = (phone) => {
+        onChange?.(phone);
     };
-    const updatePhoneData = (phone, e) => {
+    const updatePhoneData = (phone) => {
         const { nextCountry, nextPhone } = getPhoneData(phone, countriesData, defaultIso2);
         if (nextCountry !== country) {
             handleCountryChange?.(nextCountry);
         }
-        changeNumber(e, nextPhone);
+        changeNumber(nextPhone);
     };
     const handleSelectCountry = ({ selected }) => {
         const nextCountry = selected?.value;
         handleCountryChange?.(nextCountry);
         if (nextCountry) {
-            changeNumber(null, `+${nextCountry.dialCode}`);
+            changeNumber(`+${nextCountry.dialCode}`);
         }
         requestAnimationFrame(() => inputRef.current?.focus());
     };
     const handleOptionSelect = (payload) => {
-        updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : payload.selected?.key || '', maskOptions), null);
+        updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : payload.selected?.key || '', maskOptions));
     };
     const handleInput = (e) => {
-        updatePhoneData(e.target.value, e);
+        updatePhoneData(e.target.value);
     };
-    const handleClear = () => {
-        if (clearableCountryCode) {
-            changeNumber(null, '');
-        }
-        else {
-            changeNumber(null, `+${country?.countryCode}` || '');
-        }
+    const handleClear = (event) => {
+        restProps.inputProps?.onClear?.(event);
+        const countryCode = country?.countryCode || '';
+        changeNumber(clearableCountryCode ? '' : `+${countryCode}`);
     };
     useEffect(() => {
         if (value) {
             const newValue = maskitoTransform(value, maskOptions);
             if (value !== newValue) {
-                updatePhoneData(newValue, null);
+                updatePhoneData(newValue);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,7 +80,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
         clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
         ...restProps.inputProps,
     };
-    return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: (event, { value: phone }) => updatePhoneData(phone, event), inputProps: {
+    return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
             ...inputProps,
             onClear: handleClear,
             onInput: handleInput,

package/international-phone-input/modern/components/base-international-phone-input/index.css

@@ -1,5 +1,5 @@
-/* hash: qky8l */
+/* hash: ri3ng */
 
-    .international-phone-input__component_1ql2c .international-phone-input__addons_1ql2c {
+    .international-phone-input__component_1gdiu .international-phone-input__addons_1gdiu {
         padding-left: 0;
     }

package/international-phone-input/modern/components/country-select/Component.js

@@ -9,7 +9,7 @@ import '../flag-icon/flagSprite.js';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 
-const styles = {"component":"international-phone-input__component_1oi9d","option":"international-phone-input__option_1oi9d","flag":"international-phone-input__flag_1oi9d","countryName":"international-phone-input__countryName_1oi9d","dialCode":"international-phone-input__dialCode_1oi9d","flagIconWrapper":"international-phone-input__flagIconWrapper_1oi9d","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1oi9d"};
+const styles = {"component":"international-phone-input__component_1opig","option":"international-phone-input__option_1opig","flag":"international-phone-input__flag_1opig","countryName":"international-phone-input__countryName_1opig","dialCode":"international-phone-input__dialCode_1opig","flagIconWrapper":"international-phone-input__flagIconWrapper_1opig","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1opig"};
 require('./index.css');
 
 const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {

package/international-phone-input/modern/components/country-select/index.css

@@ -1,4 +1,4 @@
-/* hash: 12p5y */
+/* hash: 1r5mu */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -18,29 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .international-phone-input__component_1oi9d {
+} .international-phone-input__component_1opig {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_1oi9d {
+} .international-phone-input__option_1opig {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_1oi9d {
+} .international-phone-input__flag_1opig {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_1oi9d {
+} .international-phone-input__countryName_1opig {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_1oi9d {
+} .international-phone-input__dialCode_1opig {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_1oi9d {
+} .international-phone-input__flagIconWrapper_1opig {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_1oi9d {
+} .international-phone-input__emptyCountryIcon_1opig {
     color: var(--color-light-neutral-translucent-700);
 }

package/international-phone-input/modern/components/flag-icon/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-const styles = {"flagIcon":"international-phone-input__flagIcon_137ee","flagPlaceholder":"international-phone-input__flagPlaceholder_137ee"};
+const styles = {"flagIcon":"international-phone-input__flagIcon_1305a","flagPlaceholder":"international-phone-input__flagPlaceholder_1305a"};
 require('./index.css');
 
 /**

package/international-phone-input/modern/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ywvz */
+/* hash: 1agf3 */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* 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 {
-} .international-phone-input__flagIcon_137ee {
+} .international-phone-input__flagIcon_1305a {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_137ee {
+} .international-phone-input__flagPlaceholder_1305a {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/international-phone-input/modern/components/select-field/component.js

@@ -6,7 +6,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';
 
-const styles = {"component":"international-phone-input__component_1z0vf","flagIconContainer":"international-phone-input__flagIconContainer_1z0vf","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1z0vf","disabled":"international-phone-input__disabled_1z0vf","inner":"international-phone-input__inner_1z0vf","l":"international-phone-input__l_1z0vf","xl":"international-phone-input__xl_1z0vf","focusVisible":"international-phone-input__focusVisible_1z0vf"};
+const styles = {"component":"international-phone-input__component_1vizw","flagIconContainer":"international-phone-input__flagIconContainer_1vizw","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1vizw","disabled":"international-phone-input__disabled_1vizw","inner":"international-phone-input__inner_1vizw","l":"international-phone-input__l_1vizw","xl":"international-phone-input__xl_1vizw","focusVisible":"international-phone-input__focusVisible_1vizw"};
 require('./index.css');
 
 const EMPTY_COUNTRY_SELECT_FIELD = {

package/international-phone-input/modern/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 12xdp */
+/* hash: 1h39k */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_1z0vf {
+} .international-phone-input__component_1vizw {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_1z0vf {
+} .international-phone-input__flagIconContainer_1vizw {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_1z0vf {
+} .international-phone-input__emptyCountryIcon_1vizw {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_1z0vf {
+} .international-phone-input__disabled_1vizw {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_1z0vf {
+} .international-phone-input__inner_1vizw {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__l_1z0vf .international-phone-input__inner_1z0vf,
-.international-phone-input__xl_1z0vf .international-phone-input__inner_1z0vf {
+} .international-phone-input__l_1vizw .international-phone-input__inner_1vizw,
+.international-phone-input__xl_1vizw .international-phone-input__inner_1vizw {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_1z0vf {
+} .international-phone-input__focusVisible_1vizw {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/international-phone-input/modern/types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ElementType, FC, FocusEvent } from 'react';
+import { ElementType, FC, FocusEvent } from 'react';
 import { InputProps } from "../../input";
 import { InputDesktopProps } from "../../input/desktop";
 import { InputMobileProps } from "../../input/mobile";
@@ -57,9 +57,7 @@ type CommonPhoneInputProps = {
     /**
      *  Обработчик изменения номера
      */
-    onChange?: (e: ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void;
+    onChange?: (phone: string) => void;
     /**
      * Обработчик блюра поля
      */

package/international-phone-input/modern/typings-c29389e5.d.ts

@@ -18,7 +18,7 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Текст после иконки
      */
-    text?: string;
+    text?: string | null;
     /**
      * Дополнительный класс
      */

package/international-phone-input/types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ElementType, FC, FocusEvent } from 'react';
+import { ElementType, FC, FocusEvent } from 'react';
 import { InputProps } from "../input";
 import { InputDesktopProps } from "../input/desktop";
 import { InputMobileProps } from "../input/mobile";
@@ -57,9 +57,7 @@ type CommonPhoneInputProps = {
     /**
      *  Обработчик изменения номера
      */
-    onChange?: (e: ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => void;
+    onChange?: (phone: string) => void;
     /**
      * Обработчик блюра поля
      */

package/international-phone-input/typings-c29389e5.d.ts

@@ -18,7 +18,7 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Текст после иконки
      */
-    text?: string;
+    text?: string | null;
     /**
      * Дополнительный класс
      */

package/intl-phone-input/component.js

@@ -39,7 +39,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_1c5yc","l":"intl-phone-input__l_1c5yc","xl":"intl-phone-input__xl_1c5yc","flagIconWrapper":"intl-phone-input__flagIconWrapper_1c5yc","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1c5yc"};
+var styles = {"addons":"intl-phone-input__addons_spklu","l":"intl-phone-input__l_spklu","xl":"intl-phone-input__xl_spklu","flagIconWrapper":"intl-phone-input__flagIconWrapper_spklu","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_spklu"};
 require('./index.css');
 
 var countriesHash = utils.getCountriesHash();
@@ -155,9 +155,9 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
             }
         }
     };
-    var handleInputChange = function (_, payload) {
-        setCountryByDialCodeWithLengthCheck(payload.value);
-        changePhone(addCountryCode(payload.value));
+    var handleInputChange = function (newValue) {
+        setCountryByDialCodeWithLengthCheck(newValue);
+        changePhone(addCountryCode(newValue));
     };
     var handleSelectChange = function (_a) {
         var selected = _a.selected;