@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.5

package/{pagination → pagination-deprecated}/base-pagination.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 import { PageButtonProps } from './page-button';
 import { getPageButtons } from './utils';
+/** @deprecated */
 interface RenderButtonProps extends PageButtonProps {
     type?: 'prev' | 'next' | 'more';
     isFirst?: boolean;
@@ -8,6 +9,7 @@ interface RenderButtonProps extends PageButtonProps {
     page?: number;
     selected?: boolean;
 }
+/** @deprecated */
 export interface BasePaginationProps {
     total: number;
     current: number;
@@ -24,11 +26,13 @@ export interface BasePaginationProps {
     }) => boolean;
     calculateButtons?: typeof getPageButtons;
 }
+/** @deprecated */
 export declare const BUTTON_TYPES: {
     readonly prev: "prev";
     readonly next: "next";
     readonly more: "more";
 };
+/** @deprecated */
 export declare const BUTTON_CONTENTS: {
     readonly prev: JSX.Element;
     readonly next: JSX.Element;
@@ -46,6 +50,7 @@ export declare const BUTTON_CONTENTS: {
  * @param props.needNextButton Должна определить, нужно ла выводить кнопку "Назад".
  * @param props.calculateButtons Должна вернуть список кнопок (например ['prev', 1, 2, 3, 'next']).
  * @return Элемент.
+ * @deprecated
  */
 export declare const BasePagination: React.FC<BasePaginationProps>;
 export {};

package/{pagination → pagination-deprecated}/base-pagination.js

@@ -15,31 +15,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasePagination = exports.BUTTON_CONTENTS = exports.BUTTON_TYPES = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const page_button_1 = require("./page-button");
 const utils_1 = require("./utils");
 const fp_1 = require("lodash/fp");
 const lodash_1 = require("lodash");
 const sizes_1 = require("../styling/sizes");
-const left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/left"));
-const right_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/right"));
+const Left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Left"));
+const Right_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Right"));
 const DEFAULTS = {
     renderButton: (_a, index) => {
         var { type, isFirst, isLast } = _a, restProps = __rest(_a, ["type", "isFirst", "isLast"]);
-        return (react_1.default.createElement(page_button_1.PageButton, Object.assign({ key: index, rounded: resolveRounded({ type, isFirst, isLast }), className: getClassByType(type) }, restProps)));
+        return ((0, jsx_runtime_1.jsx)(page_button_1.PageButton, Object.assign({ rounded: resolveRounded({ type, isFirst, isLast }), className: getClassByType(type) }, restProps), index));
     },
     needPrevButton: ({ current }) => current > 1,
     needNextButton: ({ current, total }) => current < total,
     calculateButtons: utils_1.getPageButtons,
 };
+/** @deprecated */
 exports.BUTTON_TYPES = {
     prev: 'prev',
     next: 'next',
     more: 'more',
 };
+/** @deprecated */
 exports.BUTTON_CONTENTS = {
-    prev: react_1.default.createElement(left_1.default, { className: (0, utils_1.cx)('icon') }),
-    next: react_1.default.createElement(right_1.default, { className: (0, utils_1.cx)('icon') }),
+    prev: (0, jsx_runtime_1.jsx)(Left_1.default, { className: (0, utils_1.cx)('icon') }),
+    next: (0, jsx_runtime_1.jsx)(Right_1.default, { className: (0, utils_1.cx)('icon') }),
     more: '...',
 };
 /**
@@ -54,6 +56,7 @@ exports.BUTTON_CONTENTS = {
  * @param props.needNextButton Должна определить, нужно ла выводить кнопку "Назад".
  * @param props.calculateButtons Должна вернуть список кнопок (например ['prev', 1, 2, 3, 'next']).
  * @return Элемент.
+ * @deprecated
  */
 const BasePagination = ({ total, current, onButtonClick, isButtonSelected = (0, fp_1.eq)(current), renderButton = DEFAULTS.renderButton, needPrevButton = DEFAULTS.needPrevButton, needNextButton = DEFAULTS.needNextButton, calculateButtons = DEFAULTS.calculateButtons, }) => {
     const pageButtons = calculateButtons({
@@ -61,33 +64,30 @@ const BasePagination = ({ total, current, onButtonClick, isButtonSelected = (0,
         total,
         buttonKeys: exports.BUTTON_TYPES,
     });
-    return (react_1.default.createElement("div", { className: (0, utils_1.cx)('base-pagination-wrapper') },
-        needPrevButton({ current, total }) &&
-            renderButton({
-                'aria-label': 'Назад',
-                type: exports.BUTTON_TYPES.prev,
-                children: exports.BUTTON_CONTENTS.prev,
-                onClick: () => onButtonClick && onButtonClick(current - 1),
-                page: current - 1,
-            }),
-        pageButtons.map(({ content, value }, index) => renderButton({
-            type: content === exports.BUTTON_TYPES.more ? exports.BUTTON_TYPES.more : undefined,
-            isFirst: index === 0,
-            isLast: index === pageButtons.length - 1,
-            children: (0, lodash_1.has)(exports.BUTTON_CONTENTS, content) ? exports.BUTTON_CONTENTS[content] : content,
-            selected: isButtonSelected(content),
-            'aria-label': `Перейти на страницу ${value}`,
-            onClick: () => onButtonClick && onButtonClick(value),
-            page: value,
-        }, index)),
-        needNextButton({ current, total }) &&
-            renderButton({
-                'aria-label': 'Вперед',
-                type: exports.BUTTON_TYPES.next,
-                children: exports.BUTTON_CONTENTS.next,
-                onClick: () => onButtonClick && onButtonClick(current + 1),
-                page: current + 1,
-            })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.cx)('base-pagination-wrapper') }, { children: [needPrevButton({ current, total }) &&
+                renderButton({
+                    'aria-label': 'Назад',
+                    type: exports.BUTTON_TYPES.prev,
+                    children: exports.BUTTON_CONTENTS.prev,
+                    onClick: () => onButtonClick && onButtonClick(current - 1),
+                    page: current - 1,
+                }), pageButtons.map(({ content, value }, index) => renderButton({
+                type: content === exports.BUTTON_TYPES.more ? exports.BUTTON_TYPES.more : undefined,
+                isFirst: index === 0,
+                isLast: index === pageButtons.length - 1,
+                children: (0, lodash_1.has)(exports.BUTTON_CONTENTS, content) ? exports.BUTTON_CONTENTS[content] : content,
+                selected: isButtonSelected(content),
+                'aria-label': `Перейти на страницу ${value}`,
+                onClick: () => onButtonClick && onButtonClick(value),
+                page: value,
+            }, index)), needNextButton({ current, total }) &&
+                renderButton({
+                    'aria-label': 'Вперед',
+                    type: exports.BUTTON_TYPES.next,
+                    children: exports.BUTTON_CONTENTS.next,
+                    onClick: () => onButtonClick && onButtonClick(current + 1),
+                    page: current + 1,
+                })] })));
 };
 exports.BasePagination = BasePagination;
 const resolveRounded = (0, fp_1.cond)([

package/pagination-deprecated/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { BasePaginationProps } from './base-pagination';
+/** @deprecated */
+export interface PaginationProps {
+    /** Общее количество страниц. */
+    total: number;
+    /** Индекс текущей страницы. */
+    current: number;
+    /** Сработает при выборе страницы. */
+    onChange?: (data: {
+        value: number;
+    }) => void;
+    /** Функция возвращающая компонент кнопки. */
+    renderButton?: BasePaginationProps['renderButton'];
+}
+/**
+ * Компонент списка кнопок навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ * @deprecated
+ */
+export declare const Pagination: React.FC<PaginationProps>;

package/pagination-deprecated/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_pagination_1 = require("./base-pagination");
+/**
+ * Компонент списка кнопок навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ * @deprecated
+ */
+const Pagination = ({ total, current, onChange, renderButton, }) => ((0, jsx_runtime_1.jsx)(base_pagination_1.BasePagination, { total: total, current: current, renderButton: renderButton, onButtonClick: content => {
+        Number.isFinite(content) && onChange && onChange({ value: content });
+    } }));
+exports.Pagination = Pagination;

package/{pagination → pagination-deprecated}/page-button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface PageButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     rounded?: 'all' | 'none' | 'left' | 'right';
     className?: string;
@@ -11,5 +11,6 @@ export interface PageButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
  * @param props.className CSS-класс.
  * @param props.rounded С какой стороны делать скругления.
  * @return Элемент.
+ * @deprecated
  */
 export declare const PageButton: React.FC<PageButtonProps>;

package/{pagination → pagination-deprecated}/page-button.js

@@ -10,12 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageButton = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("./utils");
 /**
  * Компонент кнопки страницы по умолчанию. Поддерживаются свойства элемента button.
@@ -24,9 +21,10 @@ const utils_1 = require("./utils");
  * @param props.className CSS-класс.
  * @param props.rounded С какой стороны делать скругления.
  * @return Элемент.
+ * @deprecated
  */
 const PageButton = (_a) => {
     var { selected, rounded = 'all', className } = _a, restProps = __rest(_a, ["selected", "rounded", "className"]);
-    return (react_1.default.createElement("button", Object.assign({}, restProps, { type: 'button', className: (0, utils_1.cx)('page-button', selected && 'selected', rounded === 'all' && 'rounds-all', rounded === 'left' && 'rounds-left', rounded === 'right' && 'rounds-right', className) })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, restProps, { type: 'button', className: (0, utils_1.cx)('page-button', selected && 'selected', rounded === 'all' && 'rounds-all', rounded === 'left' && 'rounds-left', rounded === 'right' && 'rounds-right', className) })));
 };
 exports.PageButton = PageButton;

package/pagination-deprecated/pagination.module.scss

@@ -0,0 +1,76 @@
+@use '../colors';
+
+.page-select-form {
+  font-size: 12px;
+  .page-input-wrapper {
+    margin-left: 8px;
+    width: 64px;
+    .page-input {
+      text-align: center;
+      font-size: 16px;
+    }
+  }
+  .submit-button {
+    margin-left: 8px;
+  }
+  .cancel-button {
+    margin-left: 32px;
+  }
+}
+
+.page-button {
+  display: inline-block;
+  width: 38px;
+  height: 38px;
+  background: #fff;
+  border: 1px solid colors.$basic-gray12;
+  font-size: 14px;
+  outline: 0;
+  box-sizing: border-box;
+  padding: 0;
+  vertical-align: top;
+  user-select: none;
+  &.rounds-all {
+    border-radius: 4px;
+  }
+  &.rounds-left {
+    border-radius: 4px 0 0 4px;
+  }
+  &.rounds-right {
+    border-radius: 0 4px 4px 0;
+    &:not(.rounds-all) {
+      margin-right: 0;
+    }
+  }
+  &:disabled {
+    color: colors.$basic-gray24;
+  }
+  &:not(.rounds-all) {
+    margin-right: -1px;
+  }
+  &:not(.selected):not(:disabled):hover {
+    background: #f5f5f5;
+    cursor: pointer;
+  }
+  &.selected {
+    position: relative;
+    background: colors.$basic-gray87;
+    border-color: colors.$basic-gray87;
+    color: #fff;
+    cursor: default;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-shadow: inherit;
+      border-radius: inherit;
+    }
+  }
+}
+
+.icon {
+  vertical-align: middle;
+}

package/pagination-deprecated/utils.d.ts

@@ -0,0 +1,58 @@
+interface IPageButton {
+    value: number;
+    content: string | number;
+}
+type State = {
+    current: number;
+    range: number;
+    total: number;
+};
+export declare const cx: (...args: import("classnames").ArgumentArray) => string;
+/**
+ * Фабрика объектов с данными о кнопке страницы.
+ * @param value Номер целевой страницы.
+ * @param content Содержимое кнопки.
+ * @return Список кнопок.
+ * @deprecated
+ */
+export declare const PageButton: (value: number, content?: string | number) => IPageButton;
+/**
+ * Возвращает список кнопок навигации.
+ * @param props Свойства.
+ * @param props.current Номер текущей страницы.
+ * @param props.total Номер последней страницы.
+ * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
+ * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
+ * @return Список кнопок.
+ * @deprecated
+ */
+export declare const getPageButtons: ({ current, total, buttonKeys, }: {
+    current: number;
+    total: number;
+    buttonKeys?: {
+        more: string | number;
+    } | undefined;
+}) => IPageButton[];
+/**
+ * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
+ * По возможности показывает начало/конец списка при смещении.
+ * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
+ * @param props Свойства.
+ * @param props.current Число вокруг которого нужно сформировать список.
+ * @param props.range Размер списка.
+ * @param props.total Максимальное значение.
+ * @return Список номеров.
+ * @deprecated
+ */
+export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
+/**
+ * Возвращает список чисел вокруг заданного.
+ * @param props Свойства.
+ * @param props.current Число вокруг которого нужно сформировать список.
+ * @param props.range Размер списка.
+ * @param props.total Максимальное значение.
+ * @return Список номеров.
+ * @deprecated
+ */
+export declare const getRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
+export {};

package/pagination-deprecated/utils.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRangeNumbers = exports.getCorrectRangeNumbers = exports.getPageButtons = exports.PageButton = exports.cx = void 0;
+const bind_1 = __importDefault(require("classnames/bind"));
+const pagination_module_scss_1 = __importDefault(require("./pagination.module.scss"));
+const lodash_1 = require("lodash");
+exports.cx = bind_1.default.bind(pagination_module_scss_1.default);
+/**
+ * Фабрика объектов с данными о кнопке страницы.
+ * @param value Номер целевой страницы.
+ * @param content Содержимое кнопки.
+ * @return Список кнопок.
+ * @deprecated
+ */
+const PageButton = (value, content = value) => ({
+    value,
+    content,
+});
+exports.PageButton = PageButton;
+/**
+ * Возвращает список кнопок навигации.
+ * @param props Свойства.
+ * @param props.current Номер текущей страницы.
+ * @param props.total Номер последней страницы.
+ * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
+ * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
+ * @return Список кнопок.
+ * @deprecated
+ */
+const getPageButtons = ({ current, total, buttonKeys = { more: '...' }, }) => {
+    const list = (0, exports.getCorrectRangeNumbers)({ current, range: 5, total }).map(v => (0, exports.PageButton)(v));
+    if (list.length > 0 && total > 5) {
+        // если находимся в середине множества (многоточия с обоих сторон) - диапазон уменьшается до 4
+        if (list[0].value > 1 && list[list.length - 1].value < total) {
+            list.shift();
+        }
+        if (list[0].value > 1) {
+            // формируем начало диапазона
+            if (list[0].value === 2) {
+                list.unshift((0, exports.PageButton)(1));
+            }
+            else {
+                list.unshift((0, exports.PageButton)(1), 
+                // не выводим многоточие когда вместо него можно поставить одно число
+                list[0].value === 3 ? (0, exports.PageButton)(2) : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
+            }
+        }
+        if (list[list.length - 1].value < total) {
+            // формируем конец диапазона
+            if (list[list.length - 1].value === total - 1) {
+                list.push((0, exports.PageButton)(total));
+            }
+            else {
+                list.push(
+                // не выводим многоточие когда вместо него можно поставить одно число
+                total - list[list.length - 1].value > 2
+                    ? (0, exports.PageButton)(list[list.length - 1].value + 1, buttonKeys.more)
+                    : (0, exports.PageButton)(total - 1), (0, exports.PageButton)(total));
+            }
+        }
+    }
+    return list;
+};
+exports.getPageButtons = getPageButtons;
+/**
+ * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
+ * По возможности показывает начало/конец списка при смещении.
+ * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
+ * @param props Свойства.
+ * @param props.current Число вокруг которого нужно сформировать список.
+ * @param props.range Размер списка.
+ * @param props.total Максимальное значение.
+ * @return Список номеров.
+ * @deprecated
+ */
+const getCorrectRangeNumbers = ({ current, range: rangeSize, total }) => {
+    let result = [
+        ...(0, exports.getRangeNumbers)({
+            current,
+            range: rangeSize,
+            total,
+        }),
+    ];
+    if (total > rangeSize) {
+        if (current < rangeSize) {
+            result = (0, lodash_1.range)(1, rangeSize + 1);
+        }
+        else if (current > total - rangeSize + 1) {
+            result = (0, lodash_1.range)(total - rangeSize + 1, total + 1);
+        }
+    }
+    return result;
+};
+exports.getCorrectRangeNumbers = getCorrectRangeNumbers;
+/**
+ * Возвращает список чисел вокруг заданного.
+ * @param props Свойства.
+ * @param props.current Число вокруг которого нужно сформировать список.
+ * @param props.range Размер списка.
+ * @param props.total Максимальное значение.
+ * @return Список номеров.
+ * @deprecated
+ */
+const getRangeNumbers = ({ current, range: rangeSize, total }) => {
+    const pageNumbers = [];
+    const readyRange = Math.min(rangeSize, total) || 0;
+    const halfRange = Math.floor(readyRange / 2);
+    const correction = readyRange % 2;
+    let startIndex = current - halfRange - correction;
+    if (startIndex < 1) {
+        startIndex = 0;
+    }
+    else if (startIndex + readyRange > total) {
+        startIndex = total - readyRange;
+    }
+    for (let i = startIndex; i < startIndex + readyRange; i++) {
+        pageNumbers.push(i + 1);
+    }
+    return pageNumbers;
+};
+exports.getRangeNumbers = getRangeNumbers;

package/panel/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = exports.LINK_COLOR_BY_TYPE = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../styling/colors");
 const bind_1 = __importDefault(require("classnames/bind"));
 const panel_module_scss_1 = __importDefault(require("./panel.module.scss"));
@@ -41,10 +41,7 @@ exports.LINK_COLOR_BY_TYPE = {
 function Panel({ type = 'info', adornmentStart, adornmentEnd, className, style, children, 'data-testid': testId = 'panel', }) {
     const textColor = PANEL_COLORS_BY_TYPE[type].textColor;
     const panelColor = PANEL_COLORS_BY_TYPE[type].panelColor;
-    return (react_1.default.createElement("div", { className: cx('root', `type-${type}`, (0, colors_1.bgColor)(panelColor), (0, colors_1.color)(textColor), className), "data-testid": testId, style: style },
-        adornmentStart && react_1.default.createElement("div", { className: cx('adornment') }, adornmentStart),
-        react_1.default.createElement("div", { className: cx('main') }, children),
-        adornmentEnd && react_1.default.createElement("div", { className: cx('adornment') }, adornmentEnd)));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('root', `type-${type}`, (0, colors_1.bgColor)(panelColor), (0, colors_1.color)(textColor), className), "data-testid": testId, style: style }, { children: [adornmentStart && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('adornment') }, { children: adornmentStart })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('main') }, { children: children })), adornmentEnd && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('adornment') }, { children: adornmentEnd }))] })));
 }
 exports.Panel = Panel;
 /**
@@ -53,6 +50,6 @@ exports.Panel = Panel;
  * @return Элемент.
  */
 function PanelUnknownContent({ markup }) {
-    return react_1.default.createElement("div", { className: cx('unknown-content'), dangerouslySetInnerHTML: { __html: markup } });
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('unknown-content'), dangerouslySetInnerHTML: { __html: markup } });
 }
 Panel.UnknownContent = PanelUnknownContent;

package/phone-input/phone-input.js

@@ -1,27 +1,4 @@
 "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)
@@ -38,7 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInput = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const dropdown_item_1 = require("../dropdown-item");
 const hooks_1 = require("../hooks");
 const masked_input_1 = require("../masked-input");
@@ -46,8 +24,8 @@ 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 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);
@@ -96,7 +74,7 @@ function PhoneInput(_a) {
         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) => {
+    return ((0, jsx_runtime_1.jsx)(select_1.Select, Object.assign({ opener: (0, jsx_runtime_1.jsx)(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));
@@ -105,11 +83,11 @@ function PhoneInput(_a) {
             }, 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)))));
+        } }, { children: presets_1.countriesList.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ value: item.id, size: 'm', role: 'menuitem', onMouseDown: event => {
+                // ВАЖНО: клик по блоку поля вызывает фокус на поле и preventDefault()
+                // отменяем с помощью другого preventDefault()
+                event.preventDefault();
+            }, selected: item.id === country.id, startContent: (0, jsx_runtime_1.jsx)("img", { alt: '', width: 24, height: 24, src: item.imageSrc }), endContent: item.code }, { children: item.name }), index))) })));
 }
 exports.PhoneInput = PhoneInput;
 /**
@@ -124,10 +102,8 @@ function PhoneMaskedInput(_a) {
     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, { 
+    const ArrowSVG = select.opened ? Up_1.default : Down_1.default;
+    return ((0, jsx_runtime_1.jsx)(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 })) })));
+        focused: select.opened || openerFocused || undefined, blockRef: blockRef, baseInputProps: Object.assign({ restPlaceholder: country.id === presets_1.IDS.other ? '' : undefined }, props.baseInputProps), adornmentEnd: (0, jsx_runtime_1.jsxs)("div", Object.assign({ 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 }, { children: [(0, jsx_runtime_1.jsx)("img", { alt: '', width: 24, height: 24, src: country.imageSrc }), (0, jsx_runtime_1.jsx)(ArrowSVG, { className: phone_input_module_scss_1.default.arrow })] })) })));
 }