@alfalab/core-components 42.15.0 → 43.1.0

package/international-phone-input/cssm/typings-c44170fe.d.ts

@@ -0,0 +1,91 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./typings-0816e61d";
+type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+    /**
+     * Включает отображение поиска
+     */
+    showSearch?: BaseSelectProps['showSearch'];
+    /**
+     *  Настройки поиска
+     */
+    searchProps?: BaseSelectProps['searchProps'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
+};
+declare const SELECT_ALL_KEY = "select_all";
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, }: UseSelectWithApplyProps): {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings-0816e61d").OptionsListProps & {
+        showClear?: boolean | undefined;
+        onClose?: (() => void) | undefined; /**
+         * Компонент выпадающего меню
+         */
+        selectedDraft?: OptionShape[] | undefined;
+        OptionsList?: import("react").FC<import("./typings-0816e61d").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./Component-0816e61d").FooterProps> | undefined;
+        Header?: import("react").FC<import("./Component-0816e61d").HeaderProps> | undefined;
+        headerProps?: import("./Component-0816e61d").HeaderProps | undefined;
+        showHeaderWithSelectAll?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    optionsListProps: {
+        OptionsList: import("react").FC<import("./typings-0816e61d").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        showClear: boolean;
+        onClear: () => void;
+        onApply: () => void;
+        onClose: () => void;
+        selectedDraft: OptionShape[];
+        showHeaderWithSelectAll: boolean;
+        headerProps: {
+            indeterminate: boolean;
+            checked: boolean;
+            onChange: () => void;
+        };
+    };
+    allowUnselect: boolean;
+    multiple: boolean;
+    options: (OptionShape | import("./typings-0816e61d").GroupShape | {
+        key: string;
+        content: string;
+    })[];
+    onChange: (payload: import("./typings-0816e61d").BaseSelectChangePayload) => void;
+    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+    showSearch: boolean | undefined;
+    searchProps: {
+        value: string;
+        onChange: ((value: string) => void) | undefined;
+        componentProps?: import("./typings-0816e61d").SearchProps | undefined;
+        accessor?: ((option: OptionShape) => string) | undefined;
+        filterFn?: ((optionText: string, search: string) => boolean) | undefined;
+    } | undefined;
+};
+export * from "./Component-0816e61d";
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/international-phone-input/cssm/useSkeleton-1b036d4b.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { TextSkeletonProps } from "./types-1b036d4b";
+type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+type SkeletonProps$0 = {
+    wrapperClassName?: string;
+    dataTestId?: string;
+};
+declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
+    renderSkeleton: (props: SkeletonProps$0) => React.JSX.Element | null;
+    textRef: React.RefObject<HTMLElement>;
+};
+export { SkeletonProps, Skeleton, useSkeleton };

package/international-phone-input/cssm/utils/index.d.ts

@@ -9,10 +9,10 @@ declare function clearMask(value: string): string;
 declare function createPhoneMaskExpression(country?: Country, clearableCountryCode?: boolean): Array<RegExp | string>;
 declare function createMaskOptions(country?: Country, clearableCountryCode?: boolean): MaskitoOptions;
 declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
-declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[] | undefined;
+declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
 declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {
     nextPhone: string;
     nextCountry: Country | undefined;
 };
-declare function getClear(clear?: boolean, clearableCountryCode?: boolean, value?: string, countryCode?: string): boolean | undefined;
+declare function getClear(clear?: boolean, clearableCountryCode?: boolean, value?: string, countryCode?: string): boolean;
 export { initCountries, findCountry, guessCountry, clearMask, createPhoneMaskExpression, createMaskOptions, filterPhones, getPhoneData, getClear };

package/international-phone-input/cssm/utils/index.js

@@ -144,11 +144,12 @@ function defaultFilterFn(value, option) {
     if (value === void 0) { value = ''; }
     return clearMask(option.key).includes(clearMask(value));
 }
+var EMPTY_OPTIONS = [];
 var filterPhones = function (value, options, filterFn) {
     if (value === void 0) { value = ''; }
     if (filterFn === void 0) { filterFn = defaultFilterFn; }
     if (!options || options.length === 0)
-        return options;
+        return EMPTY_OPTIONS;
     var filteredOptions = [];
     options.forEach(function (option) {
         if (shared.isGroup(option)) {
@@ -181,7 +182,7 @@ function getClear(clear, clearableCountryCode, value, countryCode) {
     if (value === void 0) { value = ''; }
     if (countryCode === void 0) { countryCode = ''; }
     if (!clear)
-        return clear;
+        return false;
     var trimmedValue = value.trim();
     return clearableCountryCode
         ? trimmedValue !== '' && trimmedValue !== '+'

package/international-phone-input/cssm/utils-d2597f31.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-0816e61d";
+declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
+declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
+declare const joinOptions: ({ selected, selectedMultiple, }: {
+    selected?: OptionShape | undefined;
+    selectedMultiple?: OptionShape[] | undefined;
+}) => ReactNode[] | null;
+declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected'], filterFn?: (option: OptionShape) => boolean): {
+    filteredOptions: (OptionShape | GroupShape)[];
+    flatOptions: OptionShape[];
+    selectedOptions: OptionShape[];
+};
+type useVisibleOptionsArgs = {
+    /**
+     * Количество видимых пунктов
+     */
+    visibleOptions: number;
+    /**
+     * Реф на контейнер с пунтами меню
+     */
+    listRef: RefObject<HTMLElement>;
+    /**
+     * Реф на контейнер, которому нужно установить высоту
+     */
+    styleTargetRef?: RefObject<HTMLElement>;
+    /**
+     * Флаг открытия меню
+     */
+    open?: boolean;
+    /**
+     * Позволяет вызвать пересчет высоты
+     */
+    invalidate?: unknown;
+};
+declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
+declare function defaultFilterFn(optionText: string, search: string): boolean;
+declare function defaultAccessor(option: OptionShape): string;
+declare function usePrevious<T>(value: T): T | undefined;
+declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf };

package/international-phone-input/esm/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/esm/Component-8b2c2707.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactElement } from "react";
+import { ButtonProps } from "./index-8b2c2707";
+type IconButtonProps = {
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    /**
+     * Тип кнопки
+     */
+    view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative';
+    /**
+     * Размер компонента
+     */
+    size?: 'xxs' | 'xs' | 's';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: 'left' | 'center' | 'right';
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & Pick<ButtonProps, 'Component' | 'href' | 'loading' | 'breakpoint'> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'>;
+declare const IconButton: React.ForwardRefExoticComponent<{
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    /**
+     * Тип кнопки
+     */
+    view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "xxs" | undefined;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: "center" | "right" | "left" | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "Component" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+export { IconButtonProps, IconButton };

package/international-phone-input/esm/Component.desktop-0aa4e915.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CommonButtonProps } from "./typings-89f0cb07";
+declare const ButtonDesktop: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktop };

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

@@ -1,39 +1,28 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useMemo, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { InputDesktop } from '../../input/esm/Component.desktop';
 import { InputAutocompleteDesktop } from '../../input-autocomplete/esm/desktop';
 import { SelectDesktop } from '../../select/esm/desktop';
 import { BaseInternationalPhoneInput } from './components/base-international-phone-input/Component.js';
-import { initCountries, findCountry, filterPhones, getClear } from './utils/index.js';
 import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/esm/shared';
-import './components/country-select/Component.js';
 import '../../shared/esm';
+import './components/country-select/Component.js';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import './components/flag-icon/component.js';
 import 'classnames';
 import './components/select-field/component.js';
 import '@alfalab/hooks';
+import './utils/index.js';
 import './consts.js';
 import './data/country-data.js';
 import './components/flag-icon/flagSprite.js';
 
 var InternationalPhoneInputDesktop = 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 = __rest(_a, ["options", "country", "countries", "onCountryChange", "value", "filterFn", "defaultIso2", "clear", "clearableCountryCode"]);
-    var countriesData = useMemo(function () { return initCountries(countries); }, [countries]);
-    var _c = useState(function () {
-        return findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _c[0], setSelectedCountry = _c[1];
-    var filteredOptions = 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.createElement(BaseInternationalPhoneInput, __assign({ countriesData: countriesData, selected: value }, restProps, { clear: 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: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop })));
+    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["value", "clearableCountryCode"]);
+    return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop })));
 });
 
 export { InternationalPhoneInputDesktop };

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

@@ -1,74 +1,28 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useMemo, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { InputMobile } from '../../input/esm/mobile';
 import { InputAutocompleteMobile } from '../../input-autocomplete/esm/mobile';
 import { SelectMobile } from '../../select/esm/mobile';
 import { BaseInternationalPhoneInput } from './components/base-international-phone-input/Component.js';
-import { CountrySelect } from './components/country-select/Component.js';
-import { initCountries, findCountry, filterPhones, getClear, getPhoneData } from './utils/index.js';
 import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import '../../select/esm/shared';
 import '../../shared/esm';
+import './components/country-select/Component.js';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import './components/flag-icon/component.js';
 import 'classnames';
 import './components/select-field/component.js';
 import '@alfalab/hooks';
+import './utils/index.js';
 import './consts.js';
 import './data/country-data.js';
 import './components/flag-icon/flagSprite.js';
 
 var InternationalPhoneInputMobile = 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 = __rest(_a, ["options", "country", "onCountryChange", "value", "filterFn", "countries", "defaultIso2", "clear", "clearableCountryCode"]);
-    var typedRestProps = restProps;
-    var countriesData = useMemo(function () { return initCountries(countries); }, [countries]);
-    var _c = useState(''), filter = _c[0], setFilter = _c[1];
-    var _d = useState(), filterCountry = _d[0], setFilterCountry = _d[1];
-    var _e = useState(function () {
-        return findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _e[0], setSelectedCountry = _e[1];
-    var filteredOptions = 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 = 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 = getClear(clearProp, clearableCountryCode, filter, countryCode);
-            return {
-                filter: filter,
-                onFilter: handleFilter,
-                onClearFilter: clear ? handleFilterClear : undefined,
-                bottomSheetHeaderAddonsProps: __assign(__assign({}, typedRestProps.bottomSheetHeaderAddonsProps), { leftAddons: (React.createElement(CountrySelect, { SelectComponent: SelectMobile, view: 'mobile', country: filterCountry })) }),
-                bottomSheetProps: __assign(__assign({}, typedRestProps.bottomSheetProps), { transitionProps: __assign(__assign({}, (_a = typedRestProps.bottomSheetProps) === null || _a === void 0 ? void 0 : _a.transitionProps), { onEnter: handleEnter }) }),
-            };
-        })()
-        : {
-            clear: getClear(clearProp, clearableCountryCode, value, countryCode),
-        };
-    return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: value }, restProps, props, { clearableCountryCode: clearableCountryCode, onCountryChange: handleCountryChange, country: country, defaultIso2: defaultIso2, countriesData: countriesData, value: value, options: filteredOptions, view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile })));
+    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["value", "clearableCountryCode"]);
+    return (React.createElement(BaseInternationalPhoneInput, __assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile })));
 });
 
 export { InternationalPhoneInputMobile };

package/international-phone-input/esm/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").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+} & Omit<import("./Component.desktop").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "clear" | "onClear"> & {
     options?: undefined;
-} & Omit<import("../../input/Component.mobile").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("../../input-autocomplete/Component.desktop").InputAutocompleteDesktopProps, "onChange"> & {
-    options: (import("./typings-0f4b9bed").OptionShape | import("./typings-0f4b9bed").GroupShape)[];
-} & Omit<import("../../input-autocomplete/Component.mobile").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/esm/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/esm/components/base-international-phone-input/Component.js

@@ -1,10 +1,10 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useRef, useMemo, useEffect } from 'react';
+import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '../../../../select/esm/shared';
-import { createMaskOptions, getPhoneData } from '../../utils/index.js';
+import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
 import '../../../../shared/esm';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
@@ -16,13 +16,24 @@ import '../../consts.js';
 import '../../data/country-data.js';
 import '../flag-icon/flagSprite.js';
 
-var styles = {"component":"international-phone-input__component_1qt4a","addons":"international-phone-input__addons_1qt4a"};
+var styles = {"component":"international-phone-input__component_1bg9x","addons":"international-phone-input__addons_1bg9x"};
 require('./index.css');
 
 var BaseInternationalPhoneInput = 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 = __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 = __rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
+    var countriesData = useMemo(function () { return initCountries(countries); }, [countries]);
     var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
+    var _c = useState(function () {
+        return findCountry(countriesData, value, defaultIso2, countryProp);
+    }), selectedCountry = _c[0], setSelectedCountry = _c[1];
+    var filteredOptions = 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 = useMemo(function () { return createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
     var maskRef = useMaskito({ options: maskOptions });
     var changeNumber = function (e, phone) {
@@ -31,14 +42,14 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     var updatePhoneData = function (phone, e) {
         var _a = 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));
         }
@@ -68,22 +79,23 @@ var BaseInternationalPhoneInput = 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.createElement(CountrySelect, __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([maskRef, ref, inputRef]),
         wrapperRef: inputWrapperRef,
         addonsClassName: styles.addons,
         type: 'tel',
+        clear: getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode),
     };
-    var renderCountrySelect = function () {
-        var _a;
-        return (React.createElement(CountrySelect, __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.createElement(InputAutocomplete, __assign({ closeOnSelect: true, Option: BaseOption, size: size }, restProps, { disabled: disabled, options: options, value: value, onChange: handleOptionSelect, bottomSheetHeaderAddonsProps: __assign(__assign({}, bottomSheetHeaderAddonsProps), inputProps), inputProps: __assign(__assign({}, inputProps), { clear: clear, onClear: handleClear, leftAddons: renderCountrySelect(), onInput: handleInput }), fieldProps: {
-            className: inputProps.className,
-            addonsClassName: inputProps.addonsClassName,
-            leftAddons: renderCountrySelect(),
-        } }))) : (React.createElement(Input, __assign({}, restProps, inputProps, { onClear: clear ? handleClear : undefined, clear: clear, 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 (event, _a) {
+            var phone = _a.value;
+            return updatePhoneData(phone, event);
+        }, inputProps: __assign(__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: __assign({ 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: 1km27 */
+/* hash: 2tvcm */
 
-    .international-phone-input__component_1qt4a .international-phone-input__addons_1qt4a {
+    .international-phone-input__component_1bg9x .international-phone-input__addons_1bg9x {
         padding-left: 0;
     }

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

@@ -10,7 +10,7 @@ import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/flagSprite.js';
 
-var styles = {"component":"international-phone-input__component_ot2vq","option":"international-phone-input__option_ot2vq","flag":"international-phone-input__flag_ot2vq","countryName":"international-phone-input__countryName_ot2vq","dialCode":"international-phone-input__dialCode_ot2vq","flagIconWrapper":"international-phone-input__flagIconWrapper_ot2vq","emptyCountryIcon":"international-phone-input__emptyCountryIcon_ot2vq"};
+var styles = {"component":"international-phone-input__component_1dx4b","option":"international-phone-input__option_1dx4b","flag":"international-phone-input__flag_1dx4b","countryName":"international-phone-input__countryName_1dx4b","dialCode":"international-phone-input__dialCode_1dx4b","flagIconWrapper":"international-phone-input__flagIconWrapper_1dx4b","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1dx4b"};
 require('./index.css');
 
 var CountrySelect = function (_a) {