@alfalab/core-components 42.14.1 → 43.0.0

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

@@ -0,0 +1,2 @@
+export { InputAutocompleteDesktop } from "../Component.desktop";
+export type { InputAutocompleteCommonProps as InputAutocompleteDesktopProps } from "../types";

package/input-autocomplete/modern/desktop/index.js

@@ -0,0 +1,8 @@
+export { InputAutocompleteDesktop } from '../Component.desktop.js';
+import 'react';
+import '../../../popover/modern';
+import '../../../select/modern/shared';
+import '../autocomplete-field/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import '../../../input/modern/desktop';

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

@@ -1,2 +1,2 @@
-export { InputAutocompleteResponsive as InputAutocomplete, InputAutocompleteResponsiveProps as InputAutocompleteProps } from "./Component.responsive";
-export {};
+export { InputAutocomplete } from "./Component.responsive";
+export type { InputAutocompleteProps } from "./types";

package/input-autocomplete/modern/index.js

@@ -1,7 +1,8 @@
-export { InputAutocompleteResponsive as InputAutocomplete } from './Component.responsive.js';
+export { InputAutocomplete } from './Component.responsive.js';
 import 'react';
-import '@alfalab/hooks';
+import '../../mq/modern';
 import './Component.desktop.js';
+import '../../popover/modern';
 import '../../select/modern/shared';
 import './autocomplete-field/Component.js';
 import 'react-merge-refs';
@@ -9,10 +10,9 @@ import 'classnames';
 import '../../input/modern/desktop';
 import './Component.mobile.js';
 import 'lodash.throttle';
-import '../../button/modern/mobile';
-import '../../input/modern';
 import '../../select/modern/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '../../form-control/modern/mobile';
 import '../../shared/modern';
-import './mobile.module-7d6b7c58.js';
+import '@alfalab/hooks';
+import './utils.js';

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

@@ -0,0 +1,3 @@
+export { InputAutocompleteMobile } from "../Component.mobile";
+export { InputAutocompleteModalMobile } from "../Component.modal.mobile";
+export { InputAutocompleteMobileProps } from "../types";

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

@@ -0,0 +1,13 @@
+export { InputAutocompleteMobile } from '../Component.mobile.js';
+export { InputAutocompleteModalMobile } from '../Component.modal.mobile.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'lodash.throttle';
+import '../../../select/modern/mobile';
+import '../../../select/modern/shared';
+import '../autocomplete-mobile-field/Component.js';
+import '../../../form-control/modern/mobile';
+import '../../../shared/modern';
+import '@alfalab/hooks';
+import '../utils.js';

package/input-autocomplete/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1tawb */
+/* hash: 15blr */
 :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 */
@@ -12,15 +12,8 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
-    --gap-m: 16px;
 } :root {
 } :root {
-} .input-autocomplete__bottomAddonInput_1lc02 {
-    padding: var(--gap-xs);
-    box-sizing: border-box;
-} .input-autocomplete__footer_1lc02 {
-    display: flex
-} .input-autocomplete__footer_1lc02 > button + button {
-        margin-left: var(--gap-m);
-    }
+} .input-autocomplete__input_q39f3 {
+    width: auto;
+}

package/input-autocomplete/modern/types.d.ts

@@ -0,0 +1,58 @@
+import { ChangeEvent, FC, RefAttributes } from 'react';
+import { InputProps } from "../../input";
+import { BaseSelectProps, BottomSheetSelectMobileProps } from "../../select/shared";
+interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search'> {
+    /**
+     * Компонент ввода значения
+     */
+    Input?: FC<InputProps & RefAttributes<HTMLInputElement>>;
+    /**
+     * Пропсы, которые будут прокинуты в инпут
+     */
+    inputProps?: InputProps & Record<string, unknown>;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Поле доступно только для чтения
+     */
+    readOnly?: InputProps['readOnly'];
+    /**
+     * Отображение иконки успеха
+     */
+    success?: boolean;
+    /**
+     * Обработчик ввода
+     */
+    onInput?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
+        value: string;
+    }) => void;
+}
+type MobileProps = {
+    /**
+     *  Открывать в bottom-sheet
+     */
+    isBottomSheet?: boolean;
+    /**
+     * Пропсы анимации контента (CSSTransition)
+     */
+    transitionProps?: NonNullable<BottomSheetSelectMobileProps['bottomSheetProps']>['transitionProps'];
+};
+type InputAutocompleteMobileProps = InputAutocompleteCommonProps & MobileProps;
+interface InputAutocompleteProps extends InputAutocompleteCommonProps {
+    /**
+     *  Пропсы для мобильного компонента
+     */
+    mobileProps?: MobileProps;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+}
+export { InputAutocompleteCommonProps, InputAutocompleteMobileProps, InputAutocompleteProps };

package/input-autocomplete/modern/types.js

@@ -0,0 +1 @@
+

package/input-autocomplete/modern/utils.d.ts

@@ -0,0 +1,2 @@
+declare function searchFilterStub(): boolean;
+export { searchFilterStub };

package/input-autocomplete/modern/utils.js

@@ -0,0 +1,5 @@
+function searchFilterStub() {
+    return true;
+}
+
+export { searchFilterStub };

package/input-autocomplete/types.d.ts

@@ -0,0 +1,58 @@
+import { ChangeEvent, FC, RefAttributes } from 'react';
+import { InputProps } from "../input";
+import { BaseSelectProps, BottomSheetSelectMobileProps } from "../select/shared";
+interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search'> {
+    /**
+     * Компонент ввода значения
+     */
+    Input?: FC<InputProps & RefAttributes<HTMLInputElement>>;
+    /**
+     * Пропсы, которые будут прокинуты в инпут
+     */
+    inputProps?: InputProps & Record<string, unknown>;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Поле доступно только для чтения
+     */
+    readOnly?: InputProps['readOnly'];
+    /**
+     * Отображение иконки успеха
+     */
+    success?: boolean;
+    /**
+     * Обработчик ввода
+     */
+    onInput?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
+        value: string;
+    }) => void;
+}
+type MobileProps = {
+    /**
+     *  Открывать в bottom-sheet
+     */
+    isBottomSheet?: boolean;
+    /**
+     * Пропсы анимации контента (CSSTransition)
+     */
+    transitionProps?: NonNullable<BottomSheetSelectMobileProps['bottomSheetProps']>['transitionProps'];
+};
+type InputAutocompleteMobileProps = InputAutocompleteCommonProps & MobileProps;
+interface InputAutocompleteProps extends InputAutocompleteCommonProps {
+    /**
+     *  Пропсы для мобильного компонента
+     */
+    mobileProps?: MobileProps;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+}
+export { InputAutocompleteCommonProps, InputAutocompleteMobileProps, InputAutocompleteProps };

package/input-autocomplete/types.js

@@ -0,0 +1 @@
+

package/input-autocomplete/utils.d.ts

@@ -0,0 +1,2 @@
+declare function searchFilterStub(): boolean;
+export { searchFilterStub };

package/input-autocomplete/utils.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function searchFilterStub() {
+    return true;
+}
+
+exports.searchFilterStub = searchFilterStub;

package/international-phone-input/Component-0816e61d.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptgroupProps } from "./typings-0816e61d";
+declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
+export { Optgroup };

package/international-phone-input/Component.desktop.js

@@ -6,40 +6,29 @@ var Component_desktop = require('../input/Component.desktop');
 var desktop$1 = require('../input-autocomplete/desktop');
 var desktop = require('../select/desktop');
 var components_baseInternationalPhoneInput_Component = require('./components/base-international-phone-input/Component.js');
-var utils_index = require('./utils/index.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('../select/shared');
-require('./components/country-select/Component.js');
+require('./utils/index.js');
 require('../shared');
+require('./consts.js');
+require('./data/country-data.js');
+require('./components/country-select/Component.js');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('./components/flag-icon/component.js');
 require('classnames');
 require('./components/flag-icon/flagSprite.js');
 require('./components/select-field/component.js');
 require('@alfalab/hooks');
-require('./consts.js');
-require('./data/country-data.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var InternationalPhoneInputDesktop = React.forwardRef(function (_a, ref) {
-    var options = _a.options, countryProp = _a.country, countries = _a.countries, onCountryChange = _a.onCountryChange, value = _a.value, filterFn = _a.filterFn, defaultIso2 = _a.defaultIso2, clear = _a.clear, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["options", "country", "countries", "onCountryChange", "value", "filterFn", "defaultIso2", "clear", "clearableCountryCode"]);
-    var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
-    var _c = React.useState(function () {
-        return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _c[0], setSelectedCountry = _c[1];
-    var filteredOptions = utils_index.filterPhones(value, options, filterFn);
-    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
-    var handleCountryChange = function (nextCountry) {
-        if (countryProp === undefined)
-            setSelectedCountry(nextCountry);
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
-    };
-    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ countriesData: countriesData, selected: value }, restProps, { clear: utils_index.getClear(clear, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode), clearableCountryCode: clearableCountryCode, country: country, onCountryChange: handleCountryChange, defaultIso2: defaultIso2, value: value, view: 'desktop', options: filteredOptions, ref: ref, SelectComponent: desktop.SelectDesktop, Input: Component_desktop.InputDesktop, InputAutocomplete: desktop$1.InputAutocompleteDesktop })));
+    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
+    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: Component_desktop.InputDesktop, InputAutocomplete: desktop$1.InputAutocompleteDesktop })));
 });
 
 exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;

package/international-phone-input/Component.mobile.js

@@ -6,75 +6,29 @@ var mobile$1 = require('../input/mobile');
 var mobile$2 = require('../input-autocomplete/mobile');
 var mobile = require('../select/mobile');
 var components_baseInternationalPhoneInput_Component = require('./components/base-international-phone-input/Component.js');
-var components_countrySelect_Component = require('./components/country-select/Component.js');
-var utils_index = require('./utils/index.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('../select/shared');
+require('./utils/index.js');
 require('../shared');
+require('./consts.js');
+require('./data/country-data.js');
+require('./components/country-select/Component.js');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('./components/flag-icon/component.js');
 require('classnames');
 require('./components/flag-icon/flagSprite.js');
 require('./components/select-field/component.js');
 require('@alfalab/hooks');
-require('./consts.js');
-require('./data/country-data.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var InternationalPhoneInputMobile = React.forwardRef(function (_a, ref) {
-    var options = _a.options, countryProp = _a.country, onCountryChange = _a.onCountryChange, value = _a.value, filterFn = _a.filterFn, countries = _a.countries, defaultIso2 = _a.defaultIso2, clearProp = _a.clear, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["options", "country", "onCountryChange", "value", "filterFn", "countries", "defaultIso2", "clear", "clearableCountryCode"]);
-    var typedRestProps = restProps;
-    var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
-    var _c = React.useState(''), filter = _c[0], setFilter = _c[1];
-    var _d = React.useState(), filterCountry = _d[0], setFilterCountry = _d[1];
-    var _e = React.useState(function () {
-        return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _e[0], setSelectedCountry = _e[1];
-    var filteredOptions = utils_index.filterPhones(filter, options, filterFn);
-    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
-    var countryCode = country === null || country === void 0 ? void 0 : country.countryCode;
-    var handleCountryChange = function (nextCountry) {
-        if (countryProp === undefined)
-            setSelectedCountry(nextCountry);
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
-    };
-    var handleFilter = function (event) {
-        var _a = utils_index.getPhoneData(event.target.value, countriesData, defaultIso2), nextPhone = _a.nextPhone, nextCountry = _a.nextCountry;
-        setFilter(nextPhone);
-        setFilterCountry(nextCountry);
-    };
-    var handleFilterClear = function () {
-        var withCountryCode = !clearableCountryCode && (filterCountry === null || filterCountry === void 0 ? void 0 : filterCountry.countryCode);
-        setFilter(withCountryCode ? "+".concat(filterCountry.countryCode) : '');
-    };
-    var handleEnter = function (node, isAppearing) {
-        var _a, _b, _c;
-        (_c = (_b = (_a = typedRestProps.bottomSheetProps) === null || _a === void 0 ? void 0 : _a.transitionProps) === null || _b === void 0 ? void 0 : _b.onEnter) === null || _c === void 0 ? void 0 : _c.call(_b, node, isAppearing);
-        setFilterCountry(country);
-        setFilter(countryCode ? "+".concat(country.countryCode) : '');
-    };
-    var isAutocomplete = Array.isArray(options);
-    var props = isAutocomplete
-        ? (function () {
-            var _a;
-            var clear = utils_index.getClear(clearProp, clearableCountryCode, filter, countryCode);
-            return {
-                filter: filter,
-                onFilter: handleFilter,
-                onClearFilter: clear ? handleFilterClear : undefined,
-                bottomSheetHeaderAddonsProps: tslib.__assign(tslib.__assign({}, typedRestProps.bottomSheetHeaderAddonsProps), { leftAddons: (React__default.default.createElement(components_countrySelect_Component.CountrySelect, { SelectComponent: mobile.SelectMobile, view: 'mobile', country: filterCountry })) }),
-                bottomSheetProps: tslib.__assign(tslib.__assign({}, typedRestProps.bottomSheetProps), { transitionProps: tslib.__assign(tslib.__assign({}, (_a = typedRestProps.bottomSheetProps) === null || _a === void 0 ? void 0 : _a.transitionProps), { onEnter: handleEnter }) }),
-            };
-        })()
-        : {
-            clear: utils_index.getClear(clearProp, clearableCountryCode, value, countryCode),
-        };
-    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, props, { clearableCountryCode: clearableCountryCode, onCountryChange: handleCountryChange, country: country, defaultIso2: defaultIso2, countriesData: countriesData, value: value, options: filteredOptions, view: 'mobile', ref: ref, SelectComponent: mobile.SelectMobile, Input: mobile$1.InputMobile, InputAutocomplete: mobile$2.InputAutocompleteMobile })));
+    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
+    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'mobile', ref: ref, SelectComponent: mobile.SelectMobile, Input: mobile$1.InputMobile, InputAutocomplete: mobile$2.InputAutocompleteMobile })));
 });
 
 exports.InternationalPhoneInputMobile = InternationalPhoneInputMobile;

package/international-phone-input/Component.responsive-785df74d.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-import React from 'react';
+import React from "react";
 import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, "styles" | "colorStyles">;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
 type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -23,4 +25,4 @@ declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlP
      */
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export { FormControlProps, FormControl };
+export { FormControlMobileProps, FormControlMobile, FormControlProps, FormControl };

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

@@ -7,7 +7,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-0f4b9bed").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-0816e61d").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
     onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
         value: string;
@@ -16,9 +16,9 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     onFocus?: ((event: React.FocusEvent<HTMLInputElement | HTMLDivElement, Element>) => void) | undefined;
 } & {
     options?: undefined;
-} & Omit<import("./Component.desktop-d873d97d").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+} & Omit<import("./Component.desktop").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "clear" | "onClear"> & {
     options?: undefined;
-} & Omit<import("./Component.mobile-ebda875c").InputMobileProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+} & Omit<import("../input/Component.mobile").InputMobileProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "clear" | "onClear"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 }) | ({
@@ -28,7 +28,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-0f4b9bed").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-0816e61d").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
     onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
         value: string;
@@ -36,10 +36,10 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     onBlur?: ((event: React.FocusEvent<HTMLInputElement | HTMLDivElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLInputElement | HTMLDivElement, Element>) => void) | undefined;
 } & {
-    options: (import("./typings-0f4b9bed").OptionShape | import("./typings-0f4b9bed").GroupShape)[];
-} & Omit<import("./Component.desktop-9cded6b9").InputAutocompleteDesktopProps, "onChange"> & {
-    options: (import("./typings-0f4b9bed").OptionShape | import("./typings-0f4b9bed").GroupShape)[];
-} & Omit<import("./Component.mobile-4cd3936b").InputAutocompleteMobileProps, "onChange" | "filter" | "onFilter" | "onClearFilter"> & {
+    options: (import("./typings-0816e61d").OptionShape | import("./typings-0816e61d").GroupShape)[];
+} & Omit<import("../input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
+    options: (import("./typings-0816e61d").OptionShape | import("./typings-0816e61d").GroupShape)[];
+} & Omit<import("../input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 })) & React.RefAttributes<HTMLInputElement>>;

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

@@ -9,7 +9,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("../../typings-0f4b9bed").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-0816e61d").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
     onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
         value: string;
@@ -21,6 +21,5 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     InputAutocomplete: React.FC<InputAutocompleteProps>;
     SelectComponent: React.ElementType<any>;
     view: "mobile" | "desktop";
-    countriesData: Country[][];
-} & Omit<import("../../../input").InputProps, "onFocus" | "onBlur" | "onScroll"> & Partial<Omit<InputAutocompleteProps, "leftAddons" | "onChange" | "onScroll">> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<import("../../../input").InputProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "onScroll"> & Partial<Omit<InputAutocompleteProps, "leftAddons" | "onChange" | "onInput" | "onScroll">> & React.RefAttributes<HTMLInputElement>>;
 export { BaseInternationalPhoneInput };

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

@@ -23,13 +23,24 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
-var styles = {"component":"international-phone-input__component_1kows","addons":"international-phone-input__addons_1kows"};
+var styles = {"component":"international-phone-input__component_1gks9","addons":"international-phone-input__addons_1gks9"};
 require('./index.css');
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
-    var clearableCountryCode = _a.clearableCountryCode, value = _a.value, country = _a.country, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps; _a.countries; var defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 'm' : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, bottomSheetHeaderAddonsProps = _a.bottomSheetHeaderAddonsProps, countriesData = _a.countriesData, clear = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "bottomSheetHeaderAddonsProps", "countriesData", "clear"]);
+    var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 'm' : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
+    var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
+    var _c = React.useState(function () {
+        return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
+    }), selectedCountry = _c[0], setSelectedCountry = _c[1];
+    var filteredOptions = utils_index.filterPhones(value, options, filterFn);
+    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
+    var handleCountryChange = function (nextCountry) {
+        if (countryProp === undefined)
+            setSelectedCountry(nextCountry);
+        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+    };
     var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (e, phone) {
@@ -38,14 +49,14 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var updatePhoneData = function (phone, e) {
         var _a = utils_index.getPhoneData(phone, countriesData, defaultIso2), nextCountry = _a.nextCountry, nextPhone = _a.nextPhone;
         if (nextCountry !== country) {
-            onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+            handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         }
         changeNumber(e, nextPhone);
     };
     var handleSelectCountry = function (_a) {
         var selected = _a.selected;
         var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+        handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         if (nextCountry) {
             changeNumber(null, "+".concat(nextCountry.dialCode));
         }
@@ -75,22 +86,23 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value, maskOptions]);
+    var renderCountrySelect = function (compact) {
+        var _a;
+        if (compact === void 0) { compact = false; }
+        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, 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 = {
         className: styles.component,
         ref: mergeRefs__default.default([maskRef, ref, inputRef]),
         wrapperRef: inputWrapperRef,
         addonsClassName: styles.addons,
         type: 'tel',
+        clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode),
     };
-    var renderCountrySelect = function () {
-        var _a;
-        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
-    };
-    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: options, value: value, onChange: handleOptionSelect, bottomSheetHeaderAddonsProps: tslib.__assign(tslib.__assign({}, bottomSheetHeaderAddonsProps), inputProps), inputProps: tslib.__assign(tslib.__assign({}, inputProps), { clear: clear, onClear: handleClear, leftAddons: renderCountrySelect(), onInput: handleInput }), fieldProps: {
-            className: inputProps.className,
-            addonsClassName: inputProps.addonsClassName,
-            leftAddons: renderCountrySelect(),
-        } }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: clear ? handleClear : undefined, clear: clear, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.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: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign({ className: inputProps.className, addonsClassName: inputProps.addonsClassName }, (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 
 exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

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

@@ -1,5 +1,5 @@
-/* hash: 1km27 */
+/* hash: 154xi */
 
-    .international-phone-input__component_1kows .international-phone-input__addons_1kows {
+    .international-phone-input__component_1gks9 .international-phone-input__addons_1gks9 {
         padding-left: 0;
     }

package/international-phone-input/components/country-select/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType } from "react";
-import { BaseSelectProps } from "../../shared-4cd3936b";
+import { BaseSelectProps } from "../../../select/shared";
 import { Country } from "../../types";
 type SharedCountrySelectProps = Omit<BaseSelectProps, 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'> & {
     /**

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

@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"international-phone-input__component_17mof","option":"international-phone-input__option_17mof","flag":"international-phone-input__flag_17mof","countryName":"international-phone-input__countryName_17mof","dialCode":"international-phone-input__dialCode_17mof","flagIconWrapper":"international-phone-input__flagIconWrapper_17mof","emptyCountryIcon":"international-phone-input__emptyCountryIcon_17mof"};
+var styles = {"component":"international-phone-input__component_u22e5","option":"international-phone-input__option_u22e5","flag":"international-phone-input__flag_u22e5","countryName":"international-phone-input__countryName_u22e5","dialCode":"international-phone-input__dialCode_u22e5","flagIconWrapper":"international-phone-input__flagIconWrapper_u22e5","emptyCountryIcon":"international-phone-input__emptyCountryIcon_u22e5"};
 require('./index.css');
 
 var CountrySelect = function (_a) {