@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.0

package/phone-input/phone-input.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneInput = void 0;
+const react_1 = __importStar(require("react"));
+const dropdown_item_1 = require("../dropdown-item");
+const hooks_1 = require("../hooks");
+const masked_input_1 = require("../masked-input");
+const presets_1 = require("./presets");
+const utils_1 = require("./utils");
+const select_1 = require("../select");
+const utils_2 = require("../select/utils");
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
+const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
+const cx = bind_1.default.bind(phone_input_module_scss_1.default);
+/**
+ * Поле ввода номера телефона.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PhoneInput(_a) {
+    var _b;
+    var { value, defaultValue, label = 'Телефон', inputRef: inputRefProp, blockRef: blockRefProp, onBlur, onChange, onFocus, onCountrySelect, 'data-testid': testId = 'phone-input' } = _a, props = __rest(_a, ["value", "defaultValue", "label", "inputRef", "blockRef", "onBlur", "onChange", "onFocus", "onCountrySelect", 'data-testid']);
+    const firstRenderRef = (0, react_1.useRef)(true);
+    const [initialValue] = (0, react_1.useState)((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : '');
+    const [country, setCountry] = (0, react_1.useState)(() => (0, utils_1.defineCountry)(initialValue));
+    const [cleanValue, setCleanValue] = (0, react_1.useState)(() => utils_1.PhoneValue.removeCode(initialValue, country));
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(inputRefProp, () => inputRef.current);
+    const blockRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(blockRefProp, () => blockRef.current);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (typeof value !== 'undefined') {
+            setCleanValue(utils_1.PhoneValue.removeCode(value, country));
+        }
+    }, [value]);
+    const dispatchCountryChange = (0, react_1.useCallback)((input) => {
+        const nativeEvent = new Event('input');
+        const syntheticEvent = (0, utils_1.stubSyntheticEvent)(input, nativeEvent);
+        // @todo перенести вызов onChange в callback onValueChange если будет необходим preventDefault() и тд
+        onChange === null || onChange === void 0 ? void 0 : onChange(syntheticEvent, {
+            value: input.value,
+            cleanValue: utils_1.PhoneValue.addCode('', country),
+            completed: false,
+        });
+        onCountrySelect === null || onCountrySelect === void 0 ? void 0 : onCountrySelect(country);
+    }, [onChange, onCountrySelect, country]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (!firstRenderRef.current) {
+            inputRef.current && dispatchCountryChange(inputRef.current);
+        }
+    }, [country]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        firstRenderRef.current = false;
+    }, []);
+    const processData = (0, react_1.useCallback)((data) => (Object.assign(Object.assign({}, data), { completed: data.completed || country.id === presets_1.IDS.other, cleanValue: utils_1.PhoneValue.addCode(data.cleanValue, country) })), [country]);
+    const changeCountry = (0, react_1.useCallback)((selected) => {
+        setCountry(selected);
+        setCleanValue('');
+    }, []);
+    return (react_1.default.createElement(select_1.Select, { opener: react_1.default.createElement(PhoneMaskedInput, Object.assign({}, props, { "data-testid": testId, country: country, inputRef: inputRef, blockRef: blockRef, label: label, mask: country.mask, onFocus: (event, data) => {
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, processData(data));
+            }, onChange: (event, data) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(event, processData(data));
+            }, onBlur: (event, data) => {
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, processData(data));
+            }, value: cleanValue })), onValueChange: itemValue => {
+            const item = presets_1.countriesList.find(c => c.id === itemValue);
+            item && changeCountry(item);
+        } }, presets_1.countriesList.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { value: item.id, key: index, size: 'm', role: 'menuitem', onMouseDown: event => {
+            // ВАЖНО: клик по блоку поля вызывает фокус на поле и preventDefault()
+            // отменяем с помощью другого preventDefault()
+            event.preventDefault();
+        }, selected: item.id === country.id, startContent: react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc }), endContent: item.code }, item.name)))));
+}
+exports.PhoneInput = PhoneInput;
+/**
+ * Внутренний компонент, необходим для использования контекста SelectContext.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PhoneMaskedInput(_a) {
+    var { country, blockRef: blockRefProp } = _a, props = __rest(_a, ["country", "blockRef"]);
+    const select = (0, react_1.useContext)(utils_2.SelectContext);
+    const blockRef = (0, react_1.useRef)(null);
+    const [openerFocused, setOpenerFocused] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(blockRefProp, () => blockRef.current);
+    (0, react_1.useImperativeHandle)(select.anchorRef, () => blockRef.current);
+    const ArrowSVG = select.opened ? up_1.default : down_1.default;
+    return (react_1.default.createElement(masked_input_1.MaskedInput, Object.assign({}, props, { 
+        // ВАЖНО: undefined нужен для поведения по умолчанию если меню скрыто и кнопка не в фокусе
+        focused: select.opened || openerFocused || undefined, blockRef: blockRef, baseInputProps: Object.assign({ restPlaceholder: country.id === presets_1.IDS.other ? '' : undefined }, props.baseInputProps), adornmentEnd: react_1.default.createElement("div", { ref: select.openerRef, tabIndex: 0, onFocus: () => setOpenerFocused(true), onBlur: () => setOpenerFocused(false), role: 'combobox', "aria-label": '\u0412\u044B\u0431\u043E\u0440 \u0441\u0442\u0440\u0430\u043D\u044B', className: cx('opener'), "data-testid": 'phone-input:menu-opener', onKeyDown: select.onKeyDown, onMouseDown: select.onMouseDown },
+            react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
+            react_1.default.createElement(ArrowSVG, { className: phone_input_module_scss_1.default.arrow })) })));
+}

package/phone-input/phone-input.module.scss

@@ -1,20 +1,17 @@
 @use '../colors';
 
-.root {
-  text-align: left;
-  position: relative;
-  width: var(--phone-input-width, 320px);
-}
-
-.field {
-  width: 100%;
-}
-
-.adornment {
+.opener {
   display: flex;
   align-items: center;
   user-select: none;
   cursor: pointer;
+  padding: 8px;
+  margin: -8px;
+  border-radius: 4px;
+  &:focus-visible {
+    outline: 0;
+    background: colors.$additional-sky;
+  }
 }
 
 .arrow {
@@ -23,24 +20,3 @@
   margin-left: 4px;
   pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
 }
-
-.menu {
-  position: absolute;
-  width: 100%;
-  top: 56px;
-  --dropdown-max-height: 208px;
-  z-index: 2;
-}
-
-.menu-item {
-  font-size: 16px;
-  line-height: 24px;
-  .item-name {
-    color: colors.$basic-gray87;
-    flex-grow: 1;
-    margin-left: 16px;
-  }
-  .item-code {
-    color: colors.$basic-gray38;
-  }
-}

package/phone-input/presets.d.ts

@@ -1,26 +1,25 @@
-/// <reference types="lodash" />
 export interface Country {
-    id: string;
-    name: string;
-    code: string;
-    codeChars: string;
-    mask: string;
-    imageSrc: string;
+    readonly id: string;
+    readonly name: string;
+    readonly code: string;
+    readonly codeChars: string;
+    readonly mask: string;
+    readonly imageSrc: string;
 }
 export declare const IDS: {
-    russia: string;
-    kazakhstan: string;
-    armenia: string;
-    belarus: string;
-    kyrgyzstan: string;
-    azerbaijan: string;
-    georgia: string;
-    moldova: string;
-    tajikistan: string;
-    turkmenistan: string;
-    uzbekistan: string;
-    ukraine: string;
-    other: string;
+    readonly russia: "russia";
+    readonly kazakhstan: "kazakhstan";
+    readonly armenia: "armenia";
+    readonly belarus: "belarus";
+    readonly kyrgyzstan: "kyrgyzstan";
+    readonly azerbaijan: "azerbaijan";
+    readonly georgia: "georgia";
+    readonly moldova: "moldova";
+    readonly tajikistan: "tajikistan";
+    readonly turkmenistan: "turkmenistan";
+    readonly uzbekistan: "uzbekistan";
+    readonly ukraine: "ukraine";
+    readonly other: "other";
 };
-export declare const countriesList: Country[];
-export declare const countries: import("lodash").Dictionary<Country>;
+export declare const countriesList: ReadonlyArray<Country>;
+export declare const countries: Readonly<Record<string, Country>>;

package/phone-input/presets.js

@@ -17,7 +17,6 @@ const turkmenistan_png_1 = __importDefault(require("./images/turkmenistan.png"))
 const uzbekistan_png_1 = __importDefault(require("./images/uzbekistan.png"));
 const ukraine_png_1 = __importDefault(require("./images/ukraine.png"));
 const other_png_1 = __importDefault(require("./images/other.png"));
-const lodash_1 = require("lodash");
 exports.IDS = {
     russia: 'russia',
     kazakhstan: 'kazakhstan',
@@ -116,4 +115,4 @@ exports.countriesList = ORDER.map(id => ({
     mask: MASKS[id],
     imageSrc: IMAGES[id],
 }));
-exports.countries = (0, lodash_1.keyBy)(exports.countriesList, data => data.id);
+exports.countries = exports.countriesList.reduce((acc, item) => (Object.assign(Object.assign({}, acc), { [item.id]: item })), {});

package/phone-input/types.d.ts

@@ -0,0 +1,6 @@
+import { MaskedInputProps } from '../masked-input';
+import { Country } from './presets';
+export interface PhoneInputProps extends Omit<MaskedInputProps, 'mask' | 'placeholder' | 'pattern'> {
+    /** Сработает при выборе страны из выпадающего списка. */
+    onCountrySelect?: (country: Country) => void;
+}

package/phone-input/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/phone-input/utils.d.ts

@@ -1,7 +1,36 @@
+import { SyntheticEvent } from 'react';
 import { Country } from './presets';
 /**
  * Определяет страну по номеру телефона.
  * @param value Значение.
  * @return Данные маски страны.
  */
-export declare const defineCountry: (value: string) => Country;
+export declare function defineCountry(value: string): Country;
+/**
+ * Утилиты для работы со строкой, представляющей номер телефона.
+ */
+export declare const PhoneValue: {
+    /**
+     * Получив номер без кода страны и страну вернет номер с кодом.
+     * @param value Номер.
+     * @param country Страна.
+     * @return Номер.
+     */
+    readonly addCode: (value: string, country: Country) => string;
+    /**
+     * Получив номер с кодом страны и страну вернет номер без кода.
+     * @param value Номер.
+     * @param country Страна.
+     * @return Номер.
+     */
+    readonly removeCode: (value: string, country: Country) => string;
+};
+/**
+ * Заглушка для вызова callback'ов которые ожидают SyntheticEvent.
+ * @param element Элемент.
+ * @param nativeEvent Событие.
+ * @return Синтетическое событие.
+ */
+export declare function stubSyntheticEvent<T extends Element, E extends Event>(element: T, nativeEvent: E): SyntheticEvent<T, E> & {
+    target: EventTarget & T;
+};

package/phone-input/utils.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineCountry = void 0;
+exports.stubSyntheticEvent = exports.PhoneValue = exports.defineCountry = void 0;
 const presets_1 = require("./presets");
 /**
  * Определяет страну по номеру телефона.
  * @param value Значение.
  * @return Данные маски страны.
  */
-const defineCountry = (value) => {
+function defineCountry(value) {
     let result;
     if (value) {
         result = presets_1.countriesList.find(({ codeChars }) => value.indexOf(codeChars) === 0);
@@ -16,5 +16,54 @@ const defineCountry = (value) => {
         }
     }
     return result || presets_1.countries.russia;
-};
+}
 exports.defineCountry = defineCountry;
+/**
+ * Утилиты для работы со строкой, представляющей номер телефона.
+ */
+exports.PhoneValue = {
+    /**
+     * Получив номер без кода страны и страну вернет номер с кодом.
+     * @param value Номер.
+     * @param country Страна.
+     * @return Номер.
+     */
+    addCode(value, country) {
+        return `${country.codeChars}${value.replace(/\D/g, '')}`;
+    },
+    /**
+     * Получив номер с кодом страны и страну вернет номер без кода.
+     * @param value Номер.
+     * @param country Страна.
+     * @return Номер.
+     */
+    removeCode(value, country) {
+        return value.replace(/\D/g, '').slice(country.codeChars.length);
+    },
+};
+/**
+ * Заглушка для вызова callback'ов которые ожидают SyntheticEvent.
+ * @param element Элемент.
+ * @param nativeEvent Событие.
+ * @return Синтетическое событие.
+ */
+function stubSyntheticEvent(element, nativeEvent) {
+    return {
+        nativeEvent,
+        currentTarget: element,
+        target: element,
+        type: nativeEvent.type,
+        bubbles: nativeEvent.bubbles,
+        cancelable: nativeEvent.cancelable,
+        eventPhase: nativeEvent.eventPhase,
+        isTrusted: nativeEvent.isTrusted,
+        timeStamp: nativeEvent.timeStamp,
+        defaultPrevented: false,
+        isDefaultPrevented: () => false,
+        isPropagationStopped: () => false,
+        persist: () => void 0,
+        preventDefault: () => void 0,
+        stopPropagation: () => void 0,
+    };
+}
+exports.stubSyntheticEvent = stubSyntheticEvent;

package/phone-input-deprecated/index.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TextFieldProps } from '../text-field';
+import { MaskState } from '../masked-field';
+import { Country } from '../phone-input/presets';
+interface PhoneInputStyle extends React.CSSProperties {
+    '--phone-input-width'?: number | string;
+}
+export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style' | 'multiline'> {
+    /** Сработает при "blur". */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState & {
+        ready?: boolean;
+    }) => void;
+    /** Сработает при изменении поля "Другое". Не рекомендуется использовать. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Срабатывает при изменении страны. */
+    onCountrySelect?: (c: Country) => void;
+    /** Значение. */
+    value?: string;
+    /** Стили. */
+    style?: PhoneInputStyle;
+}
+/**
+ * Компонент поля ввода номера телефона.
+ * @param props Параметры компонента.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/phone-input".
+ * @return Элемент.
+ */
+export declare const PhoneInput: ({ "data-testid": testId, className, label, onBlur, onCountrySelect, style, value, onChange, ...restProps }: PhoneInputProps) => JSX.Element;
+export {};

package/phone-input-deprecated/index.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneInput = void 0;
+const react_1 = __importStar(require("react"));
+const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
+const dropdown_1 = require("../dropdown");
+const dropdown_item_1 = require("../dropdown-item");
+const text_field_1 = require("../text-field");
+const masked_field_1 = require("../masked-field");
+const hooks_1 = require("../hooks");
+const presets_1 = require("../phone-input/presets");
+const utils_1 = require("../phone-input/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
+const cx = bind_1.default.bind(phone_input_module_scss_1.default);
+/**
+ * Удаляет из значения код переданной страны.
+ * @param value Значение.
+ * @param country Данные страны.
+ * @return Значение без кода.
+ */
+const formatValue = (value, country) => value.replace(/\D/g, '').slice(country.codeChars.length);
+/**
+ * Компонент поля ввода номера телефона.
+ * @param props Параметры компонента.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/phone-input".
+ * @return Элемент.
+ */
+const PhoneInput = (_a) => {
+    var { 'data-testid': testId, className, label = 'Телефон', onBlur, onCountrySelect, style, value = '', onChange } = _a, restProps = __rest(_a, ['data-testid', "className", "label", "onBlur", "onCountrySelect", "style", "value", "onChange"]);
+    // маску определяем автоматически только при старте
+    const [country, setCountry] = (0, react_1.useState)(() => (0, utils_1.defineCountry)(value));
+    const [cleanValue, setCleanValue] = (0, react_1.useState)(() => formatValue(value, country));
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setCleanValue(formatValue(value, country));
+    }, [value]);
+    (0, hooks_1.useOutsideClick)(rootRef, () => {
+        toggleMenu(false);
+    });
+    const AdornmentSVG = withMenu ? up_1.default : down_1.default;
+    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
+                toggleMenu(a => !a);
+            } },
+            react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
+            react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {
+            const opener = openerRef.current;
+            if (opener instanceof Node &&
+                event.target instanceof Node &&
+                (opener === event.target || opener.contains(event.target))) {
+                event.preventDefault(); // чтобы не фокусировалось на поле
+            }
+            else {
+                toggleMenu(false);
+            }
+        } });
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) },
+        country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { value: cleanValue, onChange: (e) => {
+                const nextValue = e.target.value.replace(/\D/g, '').slice(0, 20);
+                e.target.value = nextValue;
+                setCleanValue(nextValue);
+                onChange && onChange(e);
+            }, onBlur: e => {
+                onBlur &&
+                    onBlur(e, {
+                        value: e.target.value,
+                        cleanValue: e.target.value,
+                        ready: e.target.value.length > 0,
+                    });
+            } }))) : (react_1.default.createElement(masked_field_1.MaskedField, Object.assign({}, commonFieldProps, { 
+            // убираем код страны, так как он уже зашит в маску
+            value: cleanValue, mask: country.mask, onBlur: (event, state) => {
+                onBlur &&
+                    onBlur(event, Object.assign(Object.assign({}, state), { 
+                        // вставляем код страны обратно в чистое значение
+                        cleanValue: `${country.codeChars}${state.cleanValue}` }));
+            } }))),
+        withMenu && (react_1.default.createElement(dropdown_1.Dropdown, { role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'm', role: 'menuitem', className: cx('menu-item'), onClick: () => {
+                toggleMenu(false);
+                setCountry(item);
+                onCountrySelect && onCountrySelect(item);
+            }, startContent: react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc, className: cx('country-icon') }), endContent: item.code }, item.name)))))));
+};
+exports.PhoneInput = PhoneInput;

package/phone-input-deprecated/phone-input.module.scss

@@ -0,0 +1,41 @@
+@use '../colors';
+
+.root {
+  text-align: left;
+  position: relative;
+  width: var(--phone-input-width, 320px);
+}
+
+.field {
+  width: 100%;
+}
+
+.adornment {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.arrow {
+  display: block;
+  fill: colors.$basic-gray38;
+  margin-left: 4px;
+  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
+}
+
+.menu {
+  position: absolute;
+  width: 100%;
+  top: 56px;
+  --dropdown-max-height: 208px;
+  z-index: 2;
+}
+
+.menu-item {
+  font-size: 16px;
+  line-height: 24px;
+  .country-icon {
+    display: block;
+  }
+}

package/plate/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { BoxShadow } from '../styling/shadows';
 export interface PlateProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Тень. */
-    shadow?: keyof typeof BoxShadow;
-    /** Скругление. */
-    rounds?: 's' | 'm';
+    shadow?: keyof typeof BoxShadow | null;
+    /** Скругление углов. */
+    rounds?: 's' | 'm' | null;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/plate/index.js

@@ -39,15 +39,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Plate = void 0;
 const react_1 = __importStar(require("react"));
-const colors_1 = require("../styling/colors");
 const shadows_1 = require("../styling/shadows");
 const shapes_1 = require("../styling/shapes");
 const classnames_1 = __importDefault(require("classnames"));
+const plate_module_scss_1 = __importDefault(require("./plate.module.scss"));
 /**
  * Plate это просто div с возможностью легко задавать тень и скругления.
  * И он должен оставаться компонентом, который только задает оформление обычного div.
  */
 exports.Plate = (0, react_1.forwardRef)(function Plate(_a, ref) {
     var { className, children, rounds = 's', shadow = 'z1', 'data-testid': testId = 'plate' } = _a, restProps = __rest(_a, ["className", "children", "rounds", "shadow", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)((0, colors_1.bgColor)('basic-white'), className, shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(plate_module_scss_1.default.root, className, shadow && shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
 });

package/plate/plate.module.scss

@@ -0,0 +1,3 @@
+.root {
+  background: #fff;
+}

package/popup/index.d.ts

@@ -0,0 +1,5 @@
+import { Popup, PopupProps } from './popup';
+import { PopupView, PopupViewProps } from './popup-view';
+import { popupFloatingConfig, usePopupFloatingStyle, usePopupOnClick, useFocusTrap } from './utils';
+export type { PopupProps, PopupViewProps };
+export { Popup, PopupView, popupFloatingConfig, usePopupFloatingStyle, usePopupOnClick, useFocusTrap, };

package/popup/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = exports.usePopupOnClick = exports.usePopupFloatingStyle = exports.popupFloatingConfig = exports.PopupView = exports.Popup = void 0;
+const popup_1 = require("./popup");
+Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return popup_1.Popup; } });
+const popup_view_1 = require("./popup-view");
+Object.defineProperty(exports, "PopupView", { enumerable: true, get: function () { return popup_view_1.PopupView; } });
+const utils_1 = require("./utils");
+Object.defineProperty(exports, "popupFloatingConfig", { enumerable: true, get: function () { return utils_1.popupFloatingConfig; } });
+Object.defineProperty(exports, "usePopupFloatingStyle", { enumerable: true, get: function () { return utils_1.usePopupFloatingStyle; } });
+Object.defineProperty(exports, "usePopupOnClick", { enumerable: true, get: function () { return utils_1.usePopupOnClick; } });
+Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return utils_1.useFocusTrap; } });

package/popup/popup-view.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, Ref } from 'react';
+import { WithTestId } from '../types';
+export interface PopupViewProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Сработает при клике на крестик. */
+    onClose?: () => void;
+    /** Реф корневого элемента. */
+    popupRef?: Ref<HTMLDivElement>;
+}
+/**
+ * Popup.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PopupView({ children, onClose, popupRef, className, 'data-testid': testId, ...rest }: PopupViewProps): JSX.Element;