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

package/readme.md

@@ -6,7 +6,7 @@
 
 ### Установка
 
-```bash
+```sh
 # npm
 npm i -S @sima-land/ui-nucleons
 
@@ -18,42 +18,21 @@ yarn add @sima-land/ui-nucleons
 
 Компоненты библиотеки используют:
 
-- импорты изображений (jpg, png..) как url/src
+- импорты изображений (jpg, png...) как url/base64
 - импорты стилей
 - импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.module.scss`)
-- импорты svg-файлов как react-компоненты
 
 #### Для работы с Webpack необходимо (как вариант):
 
-- добавить необходимые пакеты `@svgr/*`
-- сконфигурировать обработку svg, css, scss файлов
-
-##### Зависимости
-
-```bash
-npm install --save-dev @svgr/core @svgr/plugin-jsx @svgr/plugin-svgo @svgr/webpack
-```
+- сконфигурировать обработку импортов css, scss файлов
 
 ##### Конфигурация
 
 ```js
 // webpack.config.js
-const svgrOptions = require('../../svgr.config'); // опции SVGR (скопировать из данного проекта)
-
 module.exports = {
   module: {
     rules: [
-      // svg
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-            options: svgrOptions,
-          },
-        ],
-      },
-
       // стилей
       {
         test: /\.(css|scss)$/,
@@ -78,29 +57,7 @@ module.exports = {
 
 #### Для работы с Jest необходимо (как вариант):
 
-- добавить необходимые пакеты `@svgr/*`
-- сконфигурировать обработку svg, css, scss файлов
-
-##### Добавить обработку SVG
-
-- добавить файл "трансформера" вида:
-
-```js
-const babel = require('@babel/core');
-const babelConfig = require('../../babel.config');
-const svgr = require('@svgr/core');
-const svgrConfig = require('../../svgr.config');
-
-module.exports = {
-  process(sourceText, sourcePath) {
-    const code = svgr.transform.sync(sourceText, svgrConfig, { filePath: sourcePath });
-
-    return babel.transformSync(code, { filename: sourcePath, ...babelConfig });
-  },
-};
-```
-
-- задействовать его в конфигурации Jest
+- сконфигурировать обработку css, scss файлов
 
 ##### Добавить поддержку стилей
 
@@ -109,9 +66,6 @@ module.exports = {
 ```js
 module.exports = {
   transform: {
-    // svg как react-компоненты
-    '\\.svg$': '<rootDir>/.jest/transforms/svg.js',
-
     // обычный css
     '(?<!(\\.module))\\.(css|scss)$': './transformer/empty.js',
 
@@ -142,12 +96,6 @@ declare module '*.module.scss' {
   const classes: { [key: string]: string };
   export default classes;
 }
-
-// svg как React-компоненты
-declare module '*.svg' {
-  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-  export default content;
-}
 ```
 
 ## Разработка и поддержка
@@ -170,14 +118,3 @@ declare module '*.svg' {
 - `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
 - `hooks/` - общие react-хуки (для использования вне библиотеки)
 - `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки
-
-### Тестирование
-
-Локально E2E-тесты должны запускаться через docker, пример:
-
-```bash
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.2-focal /bin/bash
-npx playwright test
-```
-
-В противном случае скриншотные тесты не будут совпадать из-за разницы окружения запуска.

package/screen/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { ScreenInnerProps } from './utils';
 import { WithPageScrollLock } from '../_internal/page-scroll-lock';
 export interface ScreenProps extends ScreenInnerProps, WithPageScrollLock {
@@ -18,8 +18,8 @@ export interface ScreenProps extends ScreenInnerProps, WithPageScrollLock {
 export declare const Screen: {
     ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, withScrollDisable, scrollDisableOptions, "data-testid": testId, }: ScreenProps): JSX.Element;
     Header: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: import("./slots").HeaderSlotProps) => JSX.Element;
-    Body: React.ForwardRefExoticComponent<{
-        children?: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement | null>>;
-    Footer: React.FC<{}>;
+    Body: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement | null>>;
+    Footer: import("react").FC<{}>;
 };

package/screen/index.js

@@ -1,33 +1,11 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Screen = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
 const define_slots_1 = require("../helpers/define-slots");
@@ -53,20 +31,16 @@ const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps,
     if (!body) {
         throw Error('Looks like you are trying to render <Screen /> without <Screen.Body /> slot, but it is required');
     }
-    return (react_1.default.createElement("div", { ref: rootRef, className: screen_module_scss_1.default.root, style: {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: rootRef, className: screen_module_scss_1.default.root, style: {
             zIndex: layer, // z-index именно здесь из-за position: fixed
-        }, "data-testid": testId },
-        react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-            !fullLoading && header,
-            react_1.default.createElement(utils_1.ScreenContext.Provider, { value: {
-                    loading,
-                    loadingOverlayProps,
-                    onFullScroll,
-                    fullScrollThreshold,
-                    withScrollDisable,
-                    scrollDisableOptions,
-                } }, body),
-            !fullLoading && footer && (react_1.default.createElement("div", { className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, footer)))));
+        }, "data-testid": testId }, { children: (0, jsx_runtime_1.jsxs)(layer_1.LayerProvider, Object.assign({ value: layer }, { children: [!fullLoading && header, (0, jsx_runtime_1.jsx)(utils_1.ScreenContext.Provider, Object.assign({ value: {
+                        loading,
+                        loadingOverlayProps,
+                        onFullScroll,
+                        fullScrollThreshold,
+                        withScrollDisable,
+                        scrollDisableOptions,
+                    } }, { children: body })), !fullLoading && footer && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, { children: footer })))] })) })));
 };
 exports.Screen = Screen;
 exports.Screen.Header = slots_1.HeaderSlot;

package/screen/slots.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { TopBarProps } from '../top-bar';
 export interface HeaderSlotProps extends TopBarProps {
     /** Будет вызвана при нажатии на кнопку-стрелку. */
@@ -15,9 +15,9 @@ export declare const HeaderSlot: ({ divided, title, subtitle, buttons, onBack, o
 /**
  * Слот основного контента экрана.
  */
-export declare const BodySlot: React.ForwardRefExoticComponent<{
+export declare const BodySlot: import("react").ForwardRefExoticComponent<{
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | null>>;
 /**
  * Слот футера экрана.
  * @param props Свойства.

package/screen/slots.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,10 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterSlot = exports.BodySlot = exports.HeaderSlot = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const lodash_1 = require("lodash");
-const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
+const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Cross"));
 const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const hooks_1 = require("../hooks");
 const loading_overlay_1 = require("../loading-overlay");
@@ -55,11 +33,11 @@ const top_bar_1 = require("../top-bar");
  */
 const HeaderSlot = (_a) => {
     var { divided, title, subtitle, buttons, onBack, onClose } = _a, restProps = __rest(_a, ["divided", "title", "subtitle", "buttons", "onBack", "onClose"]);
-    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, restProps, { size: 's', title: title, subtitle: subtitle, divided: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
+    return ((0, jsx_runtime_1.jsx)(top_bar_1.TopBar, Object.assign({}, restProps, { size: 's', title: title, subtitle: subtitle, divided: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
                 ? {
                     // ВАЖНО: не подмешиваем свойства из buttons.start
                     // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: react_1.default.createElement(arrow_left_1.default, null),
+                    icon: (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, {}),
                     onClick: onBack,
                     'aria-label': 'Вернуться назад',
                     'data-testid': 'screen:back',
@@ -68,7 +46,7 @@ const HeaderSlot = (_a) => {
                 ? {
                     // ВАЖНО: не подмешиваем свойства из buttons.end
                     // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: react_1.default.createElement(cross_1.default, null),
+                    icon: (0, jsx_runtime_1.jsx)(Cross_1.default, {}),
                     onClick: onClose,
                     'aria-label': `Закрыть ${title || ''}`.trim(),
                     'data-testid': 'screen:close',
@@ -90,12 +68,12 @@ exports.BodySlot = (0, react_1.forwardRef)(function BodySlot({ children }, outer
     (0, hooks_1.useInfiniteScroll)(ref, { onFullScroll, threshold: fullScrollThreshold });
     return (
     // ВАЖНО: элемент с ref должен выводиться всегда (без условий), т.к. он нужен для блокировки прокрутки
-    react_1.default.createElement("div", { ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children)));
+    (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, { children: loading ? ((0, jsx_runtime_1.jsx)(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children) })));
 });
 /**
  * Слот футера экрана.
  * @param props Свойства.
  * @return Элемент.
  */
-const FooterSlot = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+const FooterSlot = ({ children }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 exports.FooterSlot = FooterSlot;

package/select/parts/block.js

@@ -1,38 +1,16 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectFieldBlock = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const utils_1 = require("../utils");
 const field_block_1 = require("../../field-block");
 const colors_1 = require("../../colors");
-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 block_module_scss_1 = __importDefault(require("./block.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
 /**
@@ -44,12 +22,12 @@ function SelectFieldBlock(props) {
     var _a;
     const binding = (0, react_1.useContext)(utils_1.SelectContext);
     const [focused, setFocused] = (0, react_1.useState)(false);
-    const ArrowSVG = binding.opened ? up_1.default : down_1.default;
+    const ArrowSVG = binding.opened ? Up_1.default : Down_1.default;
     // @todo прокидывать ref в props.blockRef при необходимости
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(binding.anchorRef, () => ref.current);
     (0, react_1.useImperativeHandle)(binding.openerRef, () => ref.current);
-    return (react_1.default.createElement(field_block_1.FieldBlock, Object.assign({ label: binding.label, adornmentEnd: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray24') }) }, props, { failed: binding.failed, disabled: binding.disabled, fixedHeight: true, blockRef: ref, blockProps: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.blockProps), { onFocus: event => {
+    return ((0, jsx_runtime_1.jsx)(field_block_1.FieldBlock, Object.assign({ label: binding.label, adornmentEnd: (0, jsx_runtime_1.jsx)(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray24') }) }, props, { failed: binding.failed, disabled: binding.disabled, fixedHeight: true, blockRef: ref, blockProps: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.blockProps), { onFocus: event => {
                 var _a, _b;
                 setFocused(true);
                 (_b = (_a = props.blockProps) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);

package/select/parts/button.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,11 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTextButton = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const text_button_1 = require("../../text-button");
 const utils_1 = require("../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"));
 /**
  * Компонент открывашки в виде текстовой кнопки.
  * @param props Свойства.
@@ -52,11 +30,11 @@ function SelectTextButton(_a) {
     var { buttonRef: buttonRefProp, children, onKeyDown, onMouseDown } = _a, props = __rest(_a, ["buttonRef", "children", "onKeyDown", "onMouseDown"]);
     const buttonRef = (0, react_1.useRef)(null);
     const binding = (0, react_1.useContext)(utils_1.SelectContext);
-    const ArrowSVG = binding.opened ? up_1.default : down_1.default;
+    const ArrowSVG = binding.opened ? Up_1.default : Down_1.default;
     (0, react_1.useImperativeHandle)(buttonRefProp, () => buttonRef.current);
     (0, react_1.useImperativeHandle)(binding.anchorRef, () => buttonRef.current);
     (0, react_1.useImperativeHandle)(binding.openerRef, () => buttonRef.current);
-    return (react_1.default.createElement(text_button_1.TextButton, Object.assign({ iconGutter: 4, endIcon: ArrowSVG }, props, { as: 'button', onMouseDown: event => {
+    return ((0, jsx_runtime_1.jsx)(text_button_1.TextButton, Object.assign({ iconGutter: 4, endIcon: ArrowSVG }, props, { as: 'button', onMouseDown: event => {
             var _a;
             (_a = binding.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
             onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
@@ -64,6 +42,6 @@ function SelectTextButton(_a) {
             var _a;
             (_a = binding.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
             onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        }, disabled: binding.disabled, buttonRef: buttonRef, role: 'combobox' }), children !== null && children !== void 0 ? children : (binding.value || binding.label)));
+        }, disabled: binding.disabled, buttonRef: buttonRef, role: 'combobox' }, { children: children !== null && children !== void 0 ? children : (binding.value || binding.label) })));
 }
 exports.SelectTextButton = SelectTextButton;

package/select/parts/menu.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,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectMenu = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
 const dropdown_1 = require("../../dropdown");
 const dropdown_item_1 = require("../../dropdown-item");
 const utils_1 = require("../../dropdown-item/utils");
@@ -56,13 +35,13 @@ const MenuItemAttr = {
  */
 function SelectMenu(_a) {
     var { loading, children, menuRef, value, onKeyDown, onItemSelect } = _a, restProps = __rest(_a, ["loading", "children", "menuRef", "value", "onKeyDown", "onItemSelect"]);
-    const ref = (0, react_1.useRef)(null);
-    const osComponentRef = (0, react_1.useRef)(null);
-    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
-    const items = react_1.Children.toArray(children).filter(utils_1.DropdownItemUtils.is);
-    (0, react_1.useImperativeHandle)(menuRef, () => ref.current);
+    const ref = (0, react_2.useRef)(null);
+    const osComponentRef = (0, react_2.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_2.useState)(-1);
+    const items = react_2.Children.toArray(children).filter(utils_1.DropdownItemUtils.is);
+    (0, react_2.useImperativeHandle)(menuRef, () => ref.current);
     // прокрутка до элемента списка
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         var _a, _b;
         const menu = ref.current;
         const itemSelector = `[${MenuItemAttr.name}="${MenuItemAttr.value}"]`;
@@ -74,7 +53,7 @@ function SelectMenu(_a) {
             });
         }
     }, [activeIndex]);
-    const handleMenuKeyDown = (0, react_1.useCallback)(event => {
+    const handleMenuKeyDown = (0, react_2.useCallback)(event => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         switch (event.code) {
             case 'Enter': {
@@ -93,13 +72,13 @@ function SelectMenu(_a) {
                 break;
         }
     }, [items, activeIndex, onKeyDown]);
-    const handleItemClick = (0, react_1.useCallback)((item) => item.props.disabled
+    const handleItemClick = (0, react_2.useCallback)((item) => item.props.disabled
         ? undefined
         : event => {
             var _a, _b;
             (_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
             onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
         }, [onItemSelect]);
-    return (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, restProps, { ref: ref, tabIndex: 0, role: 'listbox', onKeyDown: handleMenuKeyDown, className: (0, classnames_1.default)(menu_module_scss_1.default.menu, restProps.className), customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, Object.assign({ checked: activeIndex === index, selected: value === utils_1.DropdownItemUtils.getValue(item) }, item.props, { key: index, role: 'option', onClick: handleItemClick(item) }, { [MenuItemAttr.name]: MenuItemAttr.value })))))));
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, restProps, { ref: ref, tabIndex: 0, role: 'listbox', onKeyDown: handleMenuKeyDown, className: (0, classnames_1.default)(menu_module_scss_1.default.menu, restProps.className), customScrollbarProps: { osComponentRef } }, { children: loading ? ((0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (items.map((item, index) => ((0, react_1.createElement)(dropdown_item_1.DropdownItem, Object.assign({ checked: activeIndex === index, selected: value === utils_1.DropdownItemUtils.getValue(item) }, item.props, { key: index, role: 'option', onClick: handleItemClick(item) }, { [MenuItemAttr.name]: MenuItemAttr.value }))))) })));
 }
 exports.SelectMenu = SelectMenu;

package/select/select.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)
@@ -35,7 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const utils_1 = require("./utils");
 const identity_1 = require("../hooks/identity");
 const utils_2 = require("../dropdown-item/utils");
@@ -49,7 +27,7 @@ const utils_3 = require("../dropdown/utils");
  * @param props Свойства.
  * @return Элемент.
  */
-function Select({ children, disabled, failed, loading, onValueChange, onMenuToggle, value, defaultValue, label, opener = react_1.default.createElement(block_1.SelectFieldBlock, null), renderValue = v => v, dropdownProps, }) {
+function Select({ children, disabled, failed, loading, onValueChange, onMenuToggle, value, defaultValue, label, opener = (0, jsx_runtime_1.jsx)(block_1.SelectFieldBlock, {}), renderValue = v => v, dropdownProps, }) {
     // @todo по аналогии с <select /> надо проверять, есть ли значение в списке переданных
     const [initialValue] = (0, react_1.useState)(() => { var _a; return (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : ''; });
     const [currentValue, setCurrentValue] = (0, react_1.useState)(initialValue);
@@ -136,9 +114,7 @@ function Select({ children, disabled, failed, loading, onValueChange, onMenuTogg
             setNeedMenu(false);
             (_a = openerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         } });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(utils_1.SelectContext.Provider, { value: openerBinding }, (0, react_1.isValidElement)(opener) && opener),
-        react_1.default.createElement(react_2.FloatingPortal, { id: '' }, needMenu && react_1.default.createElement(menu_1.SelectMenu, Object.assign({}, menuProps), children))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(utils_1.SelectContext.Provider, Object.assign({ value: openerBinding }, { children: (0, react_1.isValidElement)(opener) && opener })), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, Object.assign({ id: '' }, { children: needMenu && (0, jsx_runtime_1.jsx)(menu_1.SelectMenu, Object.assign({}, menuProps, { children: children })) }))] }));
 }
 exports.Select = Select;
 Select.FieldBlock = block_1.SelectFieldBlock;

package/select-deprecated/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { TextFieldProps } from '../text-field';
 type Size = 's' | 'm' | 'l' | 'xl';
 export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {