@alfalab/core-components-international-phone-input 1.0.0

package/cssm/Component.desktop-ebda875c.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { FormControlDesktopProps } from "./desktop-785df74d";
+import { BaseSelectProps } from "./typings-dd8ca091";
+type SelectFieldProps = Omit<FormControlDesktopProps, 'size'> & Record<string, unknown>;
+type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps;
+};
+declare const SelectDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectFieldProps, SelectDesktopProps, SelectDesktop };

package/cssm/Component.desktop.d.ts

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

package/cssm/Component.desktop.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Component_desktop = require('@alfalab/core-components-input/cssm/Component.desktop');
+var desktop$1 = require('@alfalab/core-components-input-autocomplete/cssm/desktop');
+var desktop = require('@alfalab/core-components-select/cssm/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('@alfalab/core-components-select/cssm/shared');
+require('./components/country-select/Component.js');
+require('@alfalab/core-components-shared/cssm');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('./components/flag-icon/component.js');
+require('classnames');
+require('./components/flag-icon/flagSprite.js');
+require('./components/flag-icon/index.module.css');
+require('./components/select-field/component.js');
+require('@alfalab/hooks');
+require('./components/select-field/index.module.css');
+require('./components/country-select/index.module.css');
+require('./components/base-international-phone-input/index.module.css');
+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 })));
+});
+
+exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;

package/cssm/Component.mobile-755fbaa3.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobileProps, ButtonMobile };

package/cssm/Component.mobile-ade26e99.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BottomSheetProps } from "./index-f12ee135";
+import { UseSelectWithApplyProps } from "./hook-8abfea97";
+import { BaseSelectProps } from "./typings-dd8ca091";
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
+export { AdditionalMobileProps, SelectMobileProps, SelectMobile };

package/cssm/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="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>>;
+export { FormControlMobileProps, FormControlMobile };

package/cssm/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/cssm/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/cssm/Component.mobile.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mobile$1 = require('@alfalab/core-components-input/cssm/mobile');
+var mobile$2 = require('@alfalab/core-components-input-autocomplete/cssm/mobile');
+var mobile = require('@alfalab/core-components-select/cssm/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('@alfalab/core-components-select/cssm/shared');
+require('./components/base-international-phone-input/index.module.css');
+require('@alfalab/core-components-shared/cssm');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('./components/flag-icon/component.js');
+require('classnames');
+require('./components/flag-icon/flagSprite.js');
+require('./components/flag-icon/index.module.css');
+require('./components/select-field/component.js');
+require('@alfalab/hooks');
+require('./components/select-field/index.module.css');
+require('./components/country-select/index.module.css');
+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 })));
+});
+
+exports.InternationalPhoneInputMobile = InternationalPhoneInputMobile;

package/cssm/Component.responsive-d7e9f69d.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/cssm/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("./mobile-96988a65").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-4cd3936b").InputAutocompleteDesktopProps, "onChange"> & {
+    options: (import("./typings-dd8ca091").OptionShape | import("./typings-dd8ca091").GroupShape)[];
+} & Omit<import("./mobile-4c19bc40").InputAutocompleteMobileProps, "onChange" | "filter" | "onFilter" | "onClearFilter"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+})) & React.RefAttributes<HTMLInputElement>>;
+export { InternationalPhoneInput };

package/cssm/Component.responsive.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
+var Component_desktop = require('./Component.desktop.js');
+var Component_mobile = require('./Component.mobile.js');
+require('@alfalab/core-components-input/cssm/Component.desktop');
+require('@alfalab/core-components-input-autocomplete/cssm/desktop');
+require('@alfalab/core-components-select/cssm/desktop');
+require('./components/base-international-phone-input/Component.js');
+require('react-merge-refs');
+require('@maskito/core');
+require('@maskito/react');
+require('@alfalab/core-components-select/cssm/shared');
+require('./utils/index.js');
+require('@alfalab/core-components-shared/cssm');
+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/flag-icon/index.module.css');
+require('./components/select-field/component.js');
+require('@alfalab/hooks');
+require('./components/select-field/index.module.css');
+require('./components/country-select/index.module.css');
+require('./components/base-international-phone-input/index.module.css');
+require('@alfalab/core-components-input/cssm/mobile');
+require('@alfalab/core-components-input-autocomplete/cssm/mobile');
+require('@alfalab/core-components-select/cssm/mobile');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var InternationalPhoneInput = React__default.default.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return isDesktop ? (React__default.default.createElement(Component_desktop.InternationalPhoneInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(Component_mobile.InternationalPhoneInputMobile, tslib.__assign({}, restProps, { ref: ref })));
+});
+
+exports.InternationalPhoneInput = InternationalPhoneInput;

package/cssm/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/cssm/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/cssm/components/base-international-phone-input/Component.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { InputAutocompleteProps } from "@alfalab/core-components-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/cssm/components/base-international-phone-input/Component.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var core = require('@maskito/core');
+var react = require('@maskito/react');
+var shared = require('@alfalab/core-components-select/cssm/shared');
+var utils_index = require('../../utils/index.js');
+var components_countrySelect_Component = require('../country-select/Component.js');
+var styles = require('./index.module.css');
+require('@alfalab/core-components-shared/cssm');
+require('../../consts.js');
+require('../../data/country-data.js');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('../flag-icon/component.js');
+require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../flag-icon/index.module.css');
+require('../select-field/component.js');
+require('@alfalab/hooks');
+require('../select-field/index.module.css');
+require('../country-select/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+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 inputRef = React.useRef(null);
+    var inputWrapperRef = React.useRef(null);
+    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
+    var maskRef = react.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 = utils_index.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(core.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) || '');
+        }
+    };
+    React.useEffect(function () {
+        if (value) {
+            var newValue = core.maskitoTransform(value, maskOptions);
+            if (value !== newValue) {
+                updatePhoneData(newValue, null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, maskOptions]);
+    var inputProps = {
+        className: styles__default.default.component,
+        ref: mergeRefs__default.default([maskRef, ref, inputRef]),
+        wrapperRef: inputWrapperRef,
+        addonsClassName: styles__default.default.addons,
+        type: 'tel',
+    };
+    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 })));
+});
+
+exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseInternationalPhoneInput_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-merge-refs');
+require('@maskito/core');
+require('@maskito/react');
+require('@alfalab/core-components-select/cssm/shared');
+require('../../utils/index.js');
+require('@alfalab/core-components-shared/cssm');
+require('../../consts.js');
+require('../../data/country-data.js');
+require('../country-select/Component.js');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('../flag-icon/component.js');
+require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../flag-icon/index.module.css');
+require('../select-field/component.js');
+require('@alfalab/hooks');
+require('../select-field/index.module.css');
+require('../country-select/index.module.css');
+require('./index.module.css');
+
+
+
+exports.BaseInternationalPhoneInput = components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput;

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

@@ -0,0 +1,4 @@
+
+    .component .addons {
+        padding-left: 0;
+    }

package/cssm/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 };