@alfalab/core-components 42.9.1 → 42.10.0

package/international-phone-input/esm/Component.mobile-ebda875c.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputMobileProps, InputMobile };

package/international-phone-input/esm/Component.mobile-f1f15074.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { ContentProps, ModalMobileProps } from "./typings-bdb4c6b9";
+declare const Content: FC<ContentProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
+    Footer: React.FC<FooterProps>;
+};
+export { Content, FooterProps, Footer, ModalMobile };

package/international-phone-input/esm/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { InternationalPhoneInputMobileProps } from "./types";
+declare const InternationalPhoneInputMobile: React.ForwardRefExoticComponent<InternationalPhoneInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InternationalPhoneInputMobile };

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

@@ -0,0 +1,74 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, useMemo, useState } 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 '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import './components/flag-icon/component.js';
+import 'classnames';
+import './components/select-field/component.js';
+import '@alfalab/hooks';
+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 })));
+});
+
+export { InternationalPhoneInputMobile };

package/international-phone-input/esm/Component.modal.mobile-4cd3936b.d.ts

@@ -0,0 +1,91 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { ButtonMobileProps } from "./mobile-755fbaa3";
+import { SelectModalMobileProps } from "./mobile-ade26e99";
+import { BaseSelectChangePayload } from "./shared-4cd3936b";
+type InputAutocompleteModalMobileProps = Omit<SelectModalMobileProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Значение фильтра.
+     */
+    filter?: string;
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: () => void;
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: () => void;
+    /**
+     * Дополнительные пропсы на слот под заголовком
+     */
+    bottomAddonProps?: Record<string, unknown>;
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps;
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps;
+    /**
+     * Кастомный инпут
+     */
+    Input?: ElementType;
+};
+declare const InputAutocompleteModalMobile: React.ForwardRefExoticComponent<Omit<SelectModalMobileProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Значение поля ввода
+     */
+    value?: string | undefined;
+    /**
+     * Значение фильтра.
+     */
+    filter?: string | undefined;
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: (() => void) | undefined;
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: (() => void) | undefined;
+    /**
+     * Дополнительные пропсы на слот под заголовком
+     */
+    bottomAddonProps?: Record<string, unknown> | undefined;
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps | undefined;
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps | undefined;
+    /**
+     * Кастомный инпут
+     */
+    Input?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { InputAutocompleteModalMobileProps, InputAutocompleteModalMobile };

package/international-phone-input/esm/Component.modal.mobile-dd8ca091.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import React from 'react';
+import { ModalMobile } from "./Component.mobile-f1f15074";
+import { UseSelectWithApplyProps } from "./hook-8abfea97";
+import { BaseSelectProps } from "./typings-dd8ca091";
+type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<import("./typings-bdb4c6b9").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<import("./Component.mobile-f1f15074").FooterProps> | undefined;
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean | undefined;
+} & React.RefAttributes<unknown>>;
+export { SelectModalMobileProps, SelectModalMobile };

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import React from 'react';
+declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
+    country?: import("./types").Country | undefined;
+    countries?: string[] | undefined;
+    defaultIso2?: string | undefined;
+    clearableCountryCode?: boolean | undefined;
+    countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
+    clear?: boolean | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-dd8ca091").OptionShape) => boolean) | undefined;
+    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
+        value: string;
+    }) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+} & {
+    options?: undefined;
+} & Omit<import("./Component.desktop-d873d97d").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+    options?: undefined;
+} & Omit<import("./Component.mobile-ebda875c").InputMobileProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+}) | ({
+    country?: import("./types").Country | undefined;
+    countries?: string[] | undefined;
+    defaultIso2?: string | undefined;
+    clearableCountryCode?: boolean | undefined;
+    countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
+    clear?: boolean | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-dd8ca091").OptionShape) => boolean) | undefined;
+    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
+        value: string;
+    }) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+} & {
+    options: (import("./typings-dd8ca091").OptionShape | import("./typings-dd8ca091").GroupShape)[];
+} & Omit<import("./Component.desktop-d078a845").InputAutocompleteDesktopProps, "onChange"> & {
+    options: (import("./typings-dd8ca091").OptionShape | import("./typings-dd8ca091").GroupShape)[];
+} & Omit<import("./Component.mobile-4cd3936b").InputAutocompleteMobileProps, "onChange" | "filter" | "onFilter" | "onClearFilter"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+})) & React.RefAttributes<HTMLInputElement>>;
+export { InternationalPhoneInput };

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

@@ -0,0 +1,35 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { useMatchMedia } from '../../mq/esm';
+import { InternationalPhoneInputDesktop } from './Component.desktop.js';
+import { InternationalPhoneInputMobile } from './Component.mobile.js';
+import '../../input/esm/Component.desktop';
+import '../../input-autocomplete/esm/desktop';
+import '../../select/esm/desktop';
+import './components/base-international-phone-input/Component.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 '../../input/esm/mobile';
+import '../../input-autocomplete/esm/mobile';
+import '../../select/esm/mobile';
+import './utils/index.js';
+import './consts.js';
+import './data/country-data.js';
+import './components/flag-icon/flagSprite.js';
+
+var InternationalPhoneInput = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return isDesktop ? (React.createElement(InternationalPhoneInputDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(InternationalPhoneInputMobile, __assign({}, restProps, { ref: ref })));
+});
+
+export { InternationalPhoneInput };

package/international-phone-input/esm/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/international-phone-input/esm/ResponsiveContext-baf4875b.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings-bdb4c6b9";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { InputAutocompleteProps } from "../../../../input-autocomplete";
+import { Country } from "../../types";
+declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
+    country?: Country | undefined;
+    countries?: string[] | undefined;
+    defaultIso2?: string | undefined;
+    clearableCountryCode?: boolean | undefined;
+    countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
+    clear?: boolean | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-dd8ca091").OptionShape) => boolean) | undefined;
+    onCountryChange?: ((country?: Country | undefined) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
+        value: string;
+    }) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+} & {
+    Input: React.FC<import("packages/input/src").InputProps>;
+    InputAutocomplete: React.FC<InputAutocompleteProps>;
+    SelectComponent: React.ElementType<any>;
+    view: "mobile" | "desktop";
+    countriesData: Country[][];
+} & Omit<import("packages/input/src").InputProps, "onFocus" | "onBlur" | "onScroll"> & Partial<Omit<InputAutocompleteProps, "leftAddons" | "onChange" | "onScroll">> & React.RefAttributes<HTMLInputElement>>;
+export { BaseInternationalPhoneInput };

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

@@ -0,0 +1,89 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, useRef, useMemo, 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 { CountrySelect } from '../country-select/Component.js';
+import '../../../../shared/esm';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../select-field/component.js';
+import '@alfalab/hooks';
+import '../../consts.js';
+import '../../data/country-data.js';
+import '../flag-icon/flagSprite.js';
+
+var styles = {"component":"international-phone-input__component_18u8d","addons":"international-phone-input__addons_18u8d"};
+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 inputRef = useRef(null);
+    var inputWrapperRef = useRef(null);
+    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 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);
+        }
+        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);
+        if (nextCountry) {
+            changeNumber(null, "+".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);
+    };
+    var handleInput = function (e) {
+        updatePhoneData(e.target.value, e);
+    };
+    var handleClear = function () {
+        if (clearableCountryCode) {
+            changeNumber(null, '');
+        }
+        else {
+            changeNumber(null, "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+        }
+    };
+    useEffect(function () {
+        if (value) {
+            var newValue = maskitoTransform(value, maskOptions);
+            if (value !== newValue) {
+                updatePhoneData(newValue, null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, maskOptions]);
+    var inputProps = {
+        className: styles.component,
+        ref: mergeRefs([maskRef, ref, inputRef]),
+        wrapperRef: inputWrapperRef,
+        addonsClassName: styles.addons,
+        type: 'tel',
+    };
+    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 })));
+});
+
+export { BaseInternationalPhoneInput };

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

@@ -0,0 +1,5 @@
+/* hash: oxfst */
+
+    .international-phone-input__component_18u8d .international-phone-input__addons_18u8d {
+        padding-left: 0;
+    }

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

@@ -0,0 +1 @@
+export { BaseInternationalPhoneInput } from "./Component";

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

@@ -0,0 +1,18 @@
+export { BaseInternationalPhoneInput } from './Component.js';
+import 'tslib';
+import 'react';
+import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import '../../../../select/esm/shared';
+import '../../../../shared/esm';
+import '../country-select/Component.js';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../select-field/component.js';
+import '@alfalab/hooks';
+import '../../utils/index.js';
+import '../../consts.js';
+import '../../data/country-data.js';
+import '../flag-icon/flagSprite.js';

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import React from 'react';
+import { ElementType } from "react";
+import { BaseSelectProps } from "../../shared-4cd3936b";
+import { Country } from "../../types";
+type SharedCountrySelectProps = Omit<BaseSelectProps, 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: Record<string, unknown>;
+    hideCountrySelect?: boolean;
+};
+type CountrySelectProps = SharedCountrySelectProps & {
+    countries?: Country[][];
+    country?: Country;
+    fieldWidth?: number;
+    view: 'desktop' | 'mobile';
+    SelectComponent: ElementType;
+};
+declare const CountrySelect: React.FC<CountrySelectProps>;
+export { SharedCountrySelectProps, CountrySelect };

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

@@ -0,0 +1,52 @@
+import { __rest, __assign } from 'tslib';
+import React, { useMemo, useCallback } from 'react';
+import { VirtualOptionsList, BaseOption } from '../../../../select/esm/shared';
+import { getDataTestId } from '../../../../shared/esm';
+import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { FlagIcon } from '../flag-icon/component.js';
+import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
+import 'classnames';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+import '../flag-icon/flagSprite.js';
+
+var styles = {"component":"international-phone-input__component_g8rhr","option":"international-phone-input__option_g8rhr","flag":"international-phone-input__flag_g8rhr","countryName":"international-phone-input__countryName_g8rhr","dialCode":"international-phone-input__dialCode_g8rhr","flagIconWrapper":"international-phone-input__flagIconWrapper_g8rhr","emptyCountryIcon":"international-phone-input__emptyCountryIcon_g8rhr"};
+require('./index.css');
+
+var CountrySelect = function (_a) {
+    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = __rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
+    var options = useMemo(function () {
+        return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
+            var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
+            return {
+                key: iso2,
+                value: areas[0],
+                content: (React.createElement("span", { className: styles.option },
+                    React.createElement(FlagIcon, { country: iso2, className: styles.flag }),
+                    React.createElement("span", { className: styles.optionTextWrap },
+                        React.createElement("span", { className: styles.countryName }, name),
+                        React.createElement("span", { className: styles.dialCode },
+                            "+",
+                            dialCode)))),
+            };
+        })) || [];
+    }, [countries]);
+    var renderOptionsList = useCallback(function (props) { return (React.createElement("div", { style: { width: fieldWidth || 0 } },
+        React.createElement(VirtualOptionsList, __assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
+    var renderFlagIcon = function () { return (React.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
+    var renderCountrySelect = function () {
+        var _a;
+        var selected = (_a = options.find(function (c) { return c.key === (country === null || country === void 0 ? void 0 : country.iso2); })) === null || _a === void 0 ? void 0 : _a.key;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
+            React.createElement(SelectComponent, __assign({ Option: BaseOption }, restProps, { dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: view === 'mobile' ? VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
+                bottomSheetProps: {
+                    title: 'Выберите страну',
+                },
+            })))));
+    };
+    return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();
+};
+
+export { CountrySelect };