@alfalab/core-components 45.8.0-beta.5 → 45.9.0-beta.0

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

@@ -1,120 +1,129 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+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/cssm/shared';
+import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData } from '../../utils/index.js';
+import { CountrySelect } from '../country-select/Component.js';
+import styles from './index.module.css';
+import '../../../../shared/cssm';
+import '../../consts.js';
+import '../../data/country-data.js';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../flag-icon/index.module.css';
+import '../select-field/component.js';
+import '@alfalab/hooks';
+import '../select-field/index.module.css';
+import '../country-select/index.module.css';
 
-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('../../../../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');
-
-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, 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 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, openProps = _a.open, defaultOpen = _a.defaultOpen, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear", "open", "defaultOpen"]);
-    var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
-    var inputRef = React.useRef(null);
-    var inputWrapperRef = React.useRef(null);
-    var _c = React.useState(defaultOpen), open = _c[0], setOpen = _c[1];
-    var _d = React.useState(countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.defaultOpen), openCountry = _d[0], setOpenCountry = _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(value, options, filterFn);
-    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
-    var handleCountryChange = function (nextCountry) {
+const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, open: openProps, defaultOpen, ...restProps }, ref) => {
+    const countriesData = useMemo(() => initCountries(countries), [countries]);
+    const inputRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const [open, setOpen] = useState(defaultOpen);
+    const [openCountry, setOpenCountry] = useState(countrySelectProps?.defaultOpen);
+    const [selectedCountry, setSelectedCountry] = useState(() => findCountry(countriesData, value, defaultIso2, countryProp));
+    const filteredOptions = filterPhones(value, options, filterFn);
+    const country = countryProp ?? selectedCountry;
+    const handleCountryChange = (nextCountry) => {
         if (countryProp === undefined)
             setSelectedCountry(nextCountry);
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+        onCountryChange?.(nextCountry);
     };
-    var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
-    var maskRef = react.useMaskito({ options: maskOptions });
-    var changeNumber = function (phone) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(phone);
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode), [country, clearableCountryCode]);
+    const maskRef = useMaskito({ options: maskOptions });
+    const changeNumber = (phone) => {
+        onChange?.(phone);
     };
-    var updatePhoneData = function (phone) {
-        var _a = utils_index.getPhoneData(phone, countriesData, defaultIso2), nextCountry = _a.nextCountry, nextPhone = _a.nextPhone;
+    const updatePhoneData = (phone) => {
+        const { nextCountry, nextPhone } = getPhoneData(phone, countriesData, defaultIso2);
         if (nextCountry !== country) {
-            handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
+            handleCountryChange?.(nextCountry);
         }
         changeNumber(nextPhone);
     };
-    var handleSelectCountry = function (_a) {
-        var selected = _a.selected;
-        var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
-        handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
+    const handleSelectCountry = ({ selected }) => {
+        const nextCountry = selected?.value;
+        handleCountryChange?.(nextCountry);
         if (nextCountry) {
-            changeNumber("+".concat(nextCountry.dialCode));
+            changeNumber(`+${nextCountry.dialCode}`);
         }
-        requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+        requestAnimationFrame(() => inputRef.current?.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));
+    const handleOptionSelect = (payload) => {
+        updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : payload.selected?.key || '', maskOptions));
     };
-    var handleInput = function (e) {
+    const handleInput = (e) => {
         updatePhoneData(e.target.value);
     };
-    var handleClear = function (event) {
-        var _a, _b;
-        (_b = (_a = restProps.inputProps) === null || _a === void 0 ? void 0 : _a.onClear) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    const handleClear = (event) => {
+        restProps.inputProps?.onClear?.(event);
         if (clearableCountryCode) {
-            var nextCountry = utils_index.findCountry(countriesData, '', defaultIso2, countryProp);
+            const nextCountry = findCountry(countriesData, '', defaultIso2, countryProp);
             changeNumber('');
             handleCountryChange(nextCountry);
         }
         else {
-            changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+            changeNumber(`+${country?.countryCode}` || '');
         }
     };
-    React.useEffect(function () {
+    useEffect(() => {
         if (value) {
-            var newValue = core.maskitoTransform(value, maskOptions);
+            const newValue = maskitoTransform(value, maskOptions);
             if (value !== newValue) {
                 updatePhoneData(newValue);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value, maskOptions]);
-    var openPhoneSelect = function (payload) {
-        var _a;
+    const openPhoneSelect = (payload) => {
         if (openProps === undefined)
             setOpen(payload.open);
-        (_a = restProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(restProps, payload);
+        restProps.onOpen?.(payload);
     };
-    var openCountrySelect = function (payload) {
-        var _a;
-        if ((countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open) === undefined)
+    const openCountrySelect = (payload) => {
+        if (countrySelectProps?.open === undefined)
             setOpenCountry(payload.open);
-        (_a = countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.onOpen) === null || _a === void 0 ? void 0 : _a.call(countrySelectProps, payload);
+        countrySelectProps?.onOpen?.(payload);
     };
-    var handlePhoneSelectOpen = function (payload) {
+    const handlePhoneSelectOpen = (payload) => {
         if (payload.open) {
             openCountrySelect({ open: false });
         }
         openPhoneSelect(payload);
     };
-    var handleCountrySelectOpen = function (payload) {
+    const handleCountrySelectOpen = (payload) => {
         if (payload.open) {
             openPhoneSelect({ open: false });
         }
         openCountrySelect(payload);
     };
-    var showPhoneSelect = Boolean(open || openProps);
-    var showCountrySelect = Boolean(openCountry || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.open));
-    var renderCountrySelect = function (compact) {
-        var _a;
-        if (compact === void 0) { compact = false; }
-        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
+    const showPhoneSelect = Boolean(open || openProps);
+    const showCountrySelect = Boolean(openCountry || countrySelectProps?.open);
+    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect }));
+    const inputProps = {
+        className: styles.component,
+        ref: mergeRefs([maskRef, ref, inputRef]),
+        wrapperRef: inputWrapperRef,
+        addonsClassName: styles.addons,
+        type: 'tel',
+        clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
+        ...restProps.inputProps,
     };
-    var inputProps = tslib.__assign({ className: styles__default.default.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles__default.default.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
-    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+    return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
+            ...inputProps,
+            onClear: handleClear,
+            onInput: handleInput,
+            leftAddons: renderCountrySelect(view === 'mobile'),
+        }, fieldProps: {
+            ...restProps.fieldProps,
+            className: inputProps.className,
+            addonsClassName: inputProps.addonsClassName,
+            ...(view === 'mobile' ? { leftAddons: renderCountrySelect() } : null),
+        } })) : (React.createElement(Input, { ...restProps, ...inputProps, onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled }));
 });
 
-exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;
+export { BaseInternationalPhoneInput };

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

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

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

@@ -1,53 +1,47 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { useMemo, useCallback } from 'react';
+import { VirtualOptionsList, BaseOption } from '../../../../select/cssm/shared';
+import { getDataTestId } from '../../../../shared/cssm';
+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 styles from './index.module.css';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../flag-icon/index.module.css';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+import '../select-field/index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var shared = require('../../../../select/cssm/shared');
-var coreComponentsShared = require('../../../../shared/cssm');
-var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-var components_flagIcon_component = require('../flag-icon/component.js');
-var components_selectField_component = require('../select-field/component.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-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 = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
-    var options = React.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__default.default.createElement("span", { className: styles__default.default.option },
-                    React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles__default.default.flag }),
-                    React__default.default.createElement("span", { className: styles__default.default.optionTextWrap },
-                        React__default.default.createElement("span", { className: styles__default.default.countryName }, name),
-                        React__default.default.createElement("span", { className: styles__default.default.dialCode },
-                            "+",
-                            dialCode)))),
-            };
-        })) || [];
-    }, [countries]);
-    var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
-        React__default.default.createElement(shared.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
-    var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles__default.default.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;
+const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {
+    const options = useMemo(() => countries?.map((areas) => {
+        const { iso2, dialCode, name } = areas[0];
+        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]);
+    const renderOptionsList = useCallback((props) => (React.createElement("div", { style: { width: fieldWidth || 0 } },
+        React.createElement(VirtualOptionsList, { ...props, optionsListWidth: 'field' }))), [fieldWidth]);
+    const renderFlagIcon = () => (React.createElement("span", { className: styles.flagIconWrapper }, country?.iso2 ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon }))));
+    const renderCountrySelect = () => {
+        const selected = options.find((c) => c.key === country?.iso2)?.key;
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        React__default.default.createElement("div", { className: styles__default.default.component, onClick: function (event) { return event.stopPropagation(); } },
-            React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: view === 'mobile' ? shared.VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
-                bottomSheetProps: {
-                    title: 'Выберите страну',
-                },
-            })))));
+        React.createElement("div", { className: styles.component, onClick: (event) => event.stopPropagation() },
+            React.createElement(SelectComponent, { 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();
 };
 
-exports.CountrySelect = CountrySelect;
+export { CountrySelect };

package/international-phone-input/cssm/components/country-select/index.js

@@ -1,7 +1,14 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_countrySelect_Component = require('./Component.js');
-
-
-
-exports.CountrySelect = components_countrySelect_Component.CountrySelect;
+export { CountrySelect } from './Component.js';
+import 'react';
+import '../../../../select/cssm/shared';
+import '../../../../shared/cssm';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../flag-icon/index.module.css';
+import '../select-field/component.js';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+import '../select-field/index.module.css';
+import './index.module.css';

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

@@ -1,24 +1,13 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var components_flagIcon_flagSprite = require('./flagSprite.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+import React from 'react';
+import cn from 'classnames';
+import { flagSprite } from './flagSprite.js';
+import styles from './index.module.css';
 
 /**
  * Компонент флага в виде иконки.
  */
-var FlagIcon = function (_a) {
-    var _b = _a.country, country = _b === void 0 ? '' : _b, className = _a.className;
-    return components_flagIcon_flagSprite.flagSprite[country] ? (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.flagIcon, className), "data-test-id": "flag-icon-".concat(country), 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: { __html: components_flagIcon_flagSprite.flagSprite[country] } })) : (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.flagPlaceholder, className) }));
-};
+const FlagIcon = ({ country = '', className }) => flagSprite[country] ? (React.createElement("span", { className: cn(styles.flagIcon, className), "data-test-id": `flag-icon-${country}`, 
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: { __html: flagSprite[country] } })) : (React.createElement("div", { className: cn(styles.flagPlaceholder, className) }));
 
-exports.FlagIcon = FlagIcon;
+export { FlagIcon };

package/international-phone-input/cssm/components/flag-icon/flagSprite.js

@@ -1,6 +1,4 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var flagSprite = {
+const flagSprite = {
     'ge-ab': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M0 0h24v24H0z"/><g clip-path="url(#a)"><path fill="#F5F5F5" d="M24 6.4H0v2.2h24V6.4Z"/><path fill="#73AF00" d="M24 8.6H0V11h24V8.6Z"/><path fill="#F5F5F5" d="M24 10.9H0V13h24V11Z"/><path fill="#73AF00" d="M24 13.1H0v2.3h24V13Z"/><path fill="#F5F5F5" d="M24 15.4H0v2.2h24v-2.2Z"/><path fill="#73AF00" d="M22.2 4.1H1.8C.8 4.1 0 5 0 6v.5h24v-.5c0-1-.8-1.8-1.8-1.8ZM24 17.6H0v.5c0 1 .8 1.7 1.7 1.8h20.6c1 0 1.7-.9 1.7-1.8v-.5Z"/><path fill="#FF4B55" d="M0 6v4.5c0 .2.2.4.4.4h11.2c.2 0 .4-.2.4-.4v-6c0-.2-.2-.3-.4-.4H1.8C.8 4.1 0 5 0 6Z"/><path fill="#F5F5F5" d="M6.4 10.3H5.6l-.3-.6V7.3a.1.1 0 0 1 .2 0V8h.1V6.8a.1.1 0 0 1 .3 0V8L6 6.7a.1.1 0 0 1 .2 0V8h.2V7a.1.1 0 0 1 .2 0v1.2l.3.6c0-.2.2-.5.4-.6h.1v.2a1 1 0 0 0-.2.7v.1l-.6.7v.3l-.2.1ZM6 4.7l.1.3h.4l-.3.3.1.3-.3-.2-.3.2v-.3L5.6 5H6v-.4H6ZM4.4 5.2l.1.3H5l-.3.3.1.3-.3-.2-.3.2v-.3L4 5.6v-.1h.4v-.3h.1ZM7.7 5.2l.1.3h.3l-.2.3V6L7.7 6l-.3.2v-.3l-.2-.2v-.1h.3l.1-.3ZM8.8 6.4v.3h.4L9 7v.3l-.3-.2-.2.2V7l-.3-.2h.4l.1-.4ZM3.2 6.4l.1.3h.4l-.3.3.1.3-.3-.2-.3.2L3 7l-.3-.2h.4v-.4h.1ZM9 8l.2.3h.3v.1l-.2.2v.3l-.2-.1-.3.2v-.4l-.2-.2h.3L9 8ZM2.8 8l.1.3h.4v.1l-.3.2.1.3-.3-.1-.3.2v-.4l-.2-.2h.4V8h.1Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0V0Z"/></clipPath></defs></svg>',
     af: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M0 0h24v24H0z"/><path fill="#464655" d="M1.8 19.9H8V4H1.8C.8 4.1 0 5 0 6v12.2c0 1 .8 1.8 1.8 1.8Z"/><path fill="#FF4B55" d="M16 4.1H8V20h8V4Z"/><path fill="#73AF00" d="M22.2 19.9c1 0 1.8-.8 1.8-1.8V5.9c0-1-.8-1.8-1.8-1.8H16V20h6.2Z"/><path fill="#F5F5F5" d="M11.4 11.6H11v.1h.4ZM13 12.8h-2v-.2h2v.2ZM13 10.9h-2v.2h2V11Z"/><path fill="#F5F5F5" d="M12.6 11h-1.2l.2-.2h.8l.2.2ZM11.4 12.2H11v.3h.4v-.3ZM11.4 11.9H11v.2h.4v-.2ZM11.4 11.3H11v.2h.4v-.2ZM13 12.2h-.4v.3h.4v-.3ZM13 11.9h-.4v.2h.4v-.2ZM13 11.3h-.4v.2h.4v-.2ZM13 11.6h-.4v.1h.4ZM11.4 10.3h-.2v.5h.2v-.5ZM11.4 10.2h-.2V10a.1.1 0 0 1 .2 0ZM12.8 10.3h-.2v.5h.2v-.5ZM12.8 10.2h-.2V10a.1.1 0 0 1 .2 0ZM12 11.3c-.3 0-.5.2-.5.4v.8h1v-.8c0-.2-.2-.4-.5-.4Z"/><path fill="#F5F5F5" d="m11.2 12-.6-.8a.1.1 0 1 0-.2.1l.1.1-.3.8.4.3.3-.7.2.3h.1Zm-.6.3-.3-.3.2-.3.3.3-.2.3ZM12.9 12l.2-.2.3.7.4-.3-.3-.8a.1.1 0 1 0 0-.2l-.7.8Zm.4 0 .2-.3.2.3-.3.3-.1-.3ZM12.1 10h-.2a.5.5 0 0 0-.4.7h1v-.2c0-.2-.2-.4-.4-.4ZM9.3 11.8a2.8 2.8 0 0 1 0-.6 2.6 2.6 0 0 0 0 .7h.3a2.4 2.4 0 0 1 0-.5l.2.6s.4-.6-.3-1.2v.2h-.4a3 3 0 0 0-.1.8h.3Z"/><path fill="#F5F5F5" d="M10.3 9.4a.1.1 0 1 0-.1-.2c-.6.5-1 1-1.1 1.7h.2c.2-.6.5-1.1 1-1.5Z"/><path fill="#F5F5F5" d="M10.2 9.7c-.3.3-.5.6-.6 1h.1l.6-.8a.1.1 0 0 0-.1-.2ZM9.7 13.2l-.4-.9h.2c0 .4.2.6.4.9h.2l-.3-.7h.1l.4.6h.2a2 2 0 0 1-.2-.4l-.2-.4-.2-.2h-.4l-.1-.1h-.1l-.3-.1H9v.2l.2.1c0 .4.2.7.4 1h.2ZM14.5 11v-.2c-.7.6-.3 1.2-.3 1.2 0-.2 0-.4.2-.6a2.1 2.1 0 0 1 0 .6l.2-.1a2.7 2.7 0 0 0 0-.7h.1a2.8 2.8 0 0 1 0 .6h.3a3 3 0 0 0 0-.7h-.5ZM14.7 10.9h.2a3 3 0 0 0-1-1.7.1.1 0 0 0-.2.2c.5.4.8 1 1 1.5ZM14.4 10.6l-.6-.9a.1.1 0 1 0-.1.2l.6.9.1-.2ZM15 11.9h-.3v.1h-.2l-.4.1-.2.2-.2.4-.2.3h.2c.2 0 .3-.3.4-.4l.1-.1-.3.6h.2l.4-.7h.2l-.4.8h.2c.2-.3.4-.6.4-1l.1-.1.1-.2H15ZM13.3 13.2a2 2 0 0 1-2.5 0h-.2l-1.2.2.2.2.3.1.7.6v.1a3 3 0 0 0 2.9 0l-.1-.1.7-.6h.3l.2-.3-1.2-.2h-.1Zm-2.6.9-.6-.5h.2l.5.4Zm3.2-.5-.6.5V14l.4-.4h.2ZM12 14c-.6 0-1.1-.2-1.5-.5h.1a2.3 2.3 0 0 0 2.8 0h.1c-.4.3-1 .5-1.5.5Z"/><path fill="#F5F5F5" d="m10.7 13 .1.2h2.4l.1-.2h-2.6Z"/></svg>',
     ax: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M0 0h24v24H0z"/><path fill="#4173CD" d="M22.2 19.9H1.8C.8 19.9 0 19 0 18V5.9c0-1 .8-1.8 1.8-1.8h20.4c1 0 1.8.8 1.8 1.8v12.2c0 1-.8 1.8-1.8 1.8Z"/><path fill="#FFE15A" d="M24 10H10.8V4H6.6V10H0v4.2h6.6v5.8h4.2V14H24V9.9Z"/><path fill="#FF4B55" d="M24 11.2H9.5v-7H8v7H0v1.6h7.9v7h1.6v-7H24v-1.6Z"/></svg>',
@@ -238,4 +236,4 @@ var flagSprite = {
     zw: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M0 0h24v24H0z"/><path fill="#73AF00" d="M22.2 4.1H1.8C.8 4.1 0 5 0 6v.5h24v-.5c0-1-.8-1.8-1.8-1.8Z"/><path fill="#FFE15A" d="M24 6.4H0v2.2h24V6.4Z"/><path fill="#FF4B55" d="M24 8.6H0V11h24V8.6Z"/><path fill="#73AF00" d="M0 18C0 19 .8 20 1.8 20h20.4c1 0 1.8-.8 1.8-1.8v-.5H0v.5Z"/><path fill="#FFE15A" d="M24 15.4H0v2.2h24v-2.2Z"/><path fill="#FF4B55" d="M24 13.1H0v2.3h24V13Z"/><path fill="#464655" d="M1 4.4c-.4.1-.7.5-.9.8v13.6c.2.3.5.7.8.8l8.3-6.5H24V11H9.2L.9 4.4Z"/><path fill="#F5F5F5" d="M.6 19.4 9.9 12 .6 4.6c-.4.3-.6.8-.6 1.3v12.2c0 .5.2 1 .6 1.3Z"/><path fill="#FF4B55" d="m4 9 1 1.7 1.9.3-1.5 1.4.4 2-1.8-1-1.7 1 .3-2L1.2 11l2-.3L4 9Z"/><path fill="#FFE15A" d="M6.3 12.2 4 10.4c-.3-.6-.7-1-1-1-.3 0-.4.2-.5.4-.2 0-.2.3-.2.3.3 0 .6 0 .7.6 0 .4 0 1-.3 1.5-.2.4-.1.7-.1.7l.2 1v.1h2.9l.3-1.3.1-.4h.2Z"/><path fill="#464655" d="M6.3 12.2 4 10.4c-.3-.6-.7-1-1-1-.3 0-.4.2-.5.4-.2 0-.2.3-.2.3.3 0 .6 0 .7.6 0 .4 0 1-.3 1.5-.2.4-.1.7-.1.7l.2 1v.1h2.9l.3-1.3.1-.4h.2Zm-3.5 0c.2-.4.3-1 .2-1.5 0-.6-.4-.7-.6-.7l.2-.1s.1-.4.4-.4c.3 0 .6.4.9 1l2.2 1.7-2-.4c-.3-.1-.4-.3-.4-.5h-.1c0 .2.1.4.5.6h.2s0 .3-.5.4l-.6.5H3v-.1l.2-.4c.1-.2.3-.4.3-.7l-.4.7-.2.4v.1h-.1v-.5Zm1.7-.2-.3.2.2-.2h.1Zm.1 0h.2c0 .2-.2.2-.3.2l.1-.2ZM6 13l-2.6-.2.4-.3c1.2 0 2 .2 2.2.2v.3Zm0 .2-.3-.2.3.1v.1Zm-2.4 0 .1.2v-.1Zm2.3.3-.3-.3-.3.2-.2-.2-.3.1-.2-.2-.3.2-.2-.2-.3.2-.2-.2V13l.2.1.3-.2.2.3.3-.2.2.2.3-.2.2.2.3-.2.3.3v.2Zm-.2 0h-.3l.2-.2.1.1Zm-.5-.1h-.3l.2-.1.1.1Zm-.5 0h-.3l.2-.2.1.2Zm-.5 0h-.3l.2-.2.1.2Zm-.5-.5h.3l-.2.2-.1-.2Zm.5 0h.3l-.2.2-.1-.2Zm.5 0h.3l-.2.2-.1-.1Zm.5 0 .3.1-.2.1V13Zm-2.3 0h.6l.1 1H3l-.1-1Zm2.9 1h-2l-.2-.5a16.1 16.1 0 0 1 2.2.2v.3Zm.3-1.3c-.2 0-1-.2-2.1-.2h.4c.2 0 .5-.1.6-.3l1.2.2-.1.3Z"/><path fill="#464655" d="M3.1 9.8a.1.1 0 1 0-.3 0 .1.1 0 0 0 .3 0Zm-.1 0ZM4.2 12.5a.1.1 0 1 0 0 .3.1.1 0 0 0 0-.3Zm0 .2ZM4.6 12.6a.1.1 0 1 0 0 .2.1.1 0 0 0 0-.2Zm0 .2v-.2.2Z"/></svg>',
 };
 
-exports.flagSprite = flagSprite;
+export { flagSprite };

package/international-phone-input/cssm/components/flag-icon/index.js

@@ -1,7 +1,5 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_flagIcon_component = require('./component.js');
-
-
-
-exports.FlagIcon = components_flagIcon_component.FlagIcon;
+export { FlagIcon } from './component.js';
+import 'react';
+import 'classnames';
+import './flagSprite.js';
+import './index.module.css';

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

@@ -1,26 +1,18 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { useFocus } from '@alfalab/hooks';
+import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { FlagIcon } from '../flag-icon/component.js';
+import styles from './index.module.css';
+import '../flag-icon/flagSprite.js';
+import '../flag-icon/index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var hooks = require('@alfalab/hooks');
-var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-var components_flagIcon_component = require('../flag-icon/component.js');
-var styles = require('./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 cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var EMPTY_COUNTRY_SELECT_FIELD = {
+const EMPTY_COUNTRY_SELECT_FIELD = {
     value: 'EMPTY_COUNTRY_SELECT_VALUE',
     key: 'EMPTY_COUNTRY_SELECT_KEY',
 };
-var SIZE_TO_CLASSNAME_MAP = {
+const SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -30,20 +22,17 @@ var SIZE_TO_CLASSNAME_MAP = {
     64: 'size-64',
     72: 'size-72',
 };
-var SelectField = function (_a) {
-    var _b;
-    var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
-    var wrapperRef = React.useRef(null);
-    var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
-    var ref = innerProps.ref ? mergeRefs__default.default([innerProps.ref, wrapperRef]) : wrapperRef;
-    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, size && styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
-            _b[styles__default.default.focusVisible] = focusVisible,
-            _b[styles__default.default.disabled] = disabled,
-            _b)) },
-        React__default.default.createElement("div", tslib.__assign({}, innerProps, { className: styles__default.default.inner }),
-            React__default.default.createElement("span", { className: styles__default.default.flagIconContainer }, !selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles__default.default.emptyCountryIcon })) : (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: selected.key }))),
+const SelectField = ({ selected, Arrow, size, disabled, innerProps = {}, }) => {
+    const wrapperRef = useRef(null);
+    const [focusVisible] = useFocus(wrapperRef, 'keyboard');
+    const ref = innerProps.ref ? mergeRefs([innerProps.ref, wrapperRef]) : wrapperRef;
+    return (React.createElement("div", { ref: ref, className: cn(styles.component, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {
+            [styles.focusVisible]: focusVisible,
+            [styles.disabled]: disabled,
+        }) },
+        React.createElement("div", { ...innerProps, className: styles.inner },
+            React.createElement("span", { className: styles.flagIconContainer }, !selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })) : (React.createElement(FlagIcon, { country: selected.key }))),
             Arrow)));
 };
 
-exports.EMPTY_COUNTRY_SELECT_FIELD = EMPTY_COUNTRY_SELECT_FIELD;
-exports.SelectField = SelectField;
+export { EMPTY_COUNTRY_SELECT_FIELD, SelectField };

package/international-phone-input/cssm/components/select-field/index.js

@@ -1,8 +1,10 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_selectField_component = require('./component.js');
-
-
-
-exports.EMPTY_COUNTRY_SELECT_FIELD = components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD;
-exports.SelectField = components_selectField_component.SelectField;
+export { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from './component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import '../flag-icon/flagSprite.js';
+import '../flag-icon/index.module.css';
+import './index.module.css';

package/international-phone-input/cssm/consts.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+const DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
 
-var DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
-
-exports.DEFAULT_PHONE_FORMAT = DEFAULT_PHONE_FORMAT;
+export { DEFAULT_PHONE_FORMAT };

package/international-phone-input/cssm/data/country-data.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /*
  * Country model:
  * [
@@ -19,7 +17,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * ['north-america', 'south-america', 'central-america', 'carribean',
  *  'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
  */
-var countriesData = [
+const countriesData = [
     ['Афганистан', ['asia'], 'af', '93'],
     ['Албания', ['europe'], 'al', '355'],
     ['Алжир', ['africa', 'north-africa'], 'dz', '213'],
@@ -596,4 +594,4 @@ var countriesData = [
     ['Уоллис и Футуна', ['oceania'], 'wf', '681'],
 ];
 
-exports.countriesData = countriesData;
+export { countriesData };

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

@@ -1,19 +1,28 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import { InputDesktop } from '../../../input/cssm/desktop';
+import { InputAutocompleteDesktop } from '../../../input-autocomplete/cssm/desktop';
+import { SelectDesktop } from '../../../select/cssm/desktop';
+import { BaseInternationalPhoneInput } from '../components/base-international-phone-input/Component.js';
+import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import '../../../select/cssm/shared';
+import '../utils/index.js';
+import '../../../shared/cssm';
+import '../consts.js';
+import '../data/country-data.js';
+import '../components/country-select/Component.js';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../components/flag-icon/component.js';
+import 'classnames';
+import '../components/flag-icon/flagSprite.js';
+import '../components/flag-icon/index.module.css';
+import '../components/select-field/component.js';
+import '@alfalab/hooks';
+import '../components/select-field/index.module.css';
+import '../components/country-select/index.module.css';
+import '../components/base-international-phone-input/index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var desktop$1 = require('../../../input/cssm/desktop');
-var desktop$2 = require('../../../input-autocomplete/cssm/desktop');
-var desktop = require('../../../select/cssm/desktop');
-var components_baseInternationalPhoneInput_Component = require('../components/base-international-phone-input/Component.js');
+const InternationalPhoneInputDesktop = forwardRef(({ value, clearableCountryCode = true, ...restProps }, ref) => (React.createElement(BaseInternationalPhoneInput, { selected: value, ...restProps, clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: SelectDesktop, Input: InputDesktop, InputAutocomplete: InputAutocompleteDesktop })));
 
-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 value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
-    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: desktop$1.InputDesktop, InputAutocomplete: desktop$2.InputAutocompleteDesktop })));
-});
-
-exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;
+export { InternationalPhoneInputDesktop };