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

package/phone-input/presets.js

@@ -77,6 +77,8 @@ const IMAGES = {
     [exports.IDS.ukraine]: ukraine_png_1.default,
     [exports.IDS.other]: other_png_1.default,
 };
+// @todo <Flag country='russia' /> под капотом оптимизация для флагов состоящих только из полос
+// (простые флаги можно сделать на css чтобы не хранить лишние png)
 const CODES = {
     [exports.IDS.russia]: '+7',
     [exports.IDS.kazakhstan]: '+7',

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { TextFieldProps } from '../text-field';
 import { MaskState } from '../masked-field';
 import { Country } from '../phone-input/presets';

package/phone-input-deprecated/index.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,9 +15,10 @@ var __importDefault = (this && this.__importDefault) || function (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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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");
@@ -78,12 +56,10 @@ const PhoneInput = (_a) => {
     (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: () => {
+    const AdornmentSVG = withMenu ? Up_1.default : Down_1.default;
+    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ 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 => {
+            } }, { children: [(0, jsx_runtime_1.jsx)("img", { alt: '', width: 24, height: 24, src: country.imageSrc }), (0, jsx_runtime_1.jsx)(AdornmentSVG, { className: cx('arrow') })] }))), onClick: event => {
             const opener = openerRef.current;
             if (opener instanceof Node &&
                 event.target instanceof Node &&
@@ -94,31 +70,29 @@ const PhoneInput = (_a) => {
                 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)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) }, { children: [country.id === presets_1.IDS.other ? ((0, jsx_runtime_1.jsx)(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,
+                        });
+                } }))) : ((0, jsx_runtime_1.jsx)(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 && ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, { children: presets_1.countriesList.map((item, index) => item.id === country.id ? null : ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 'm', role: 'menuitem', className: cx('menu-item'), onClick: () => {
+                        toggleMenu(false);
+                        setCountry(item);
+                        onCountrySelect && onCountrySelect(item);
+                    }, startContent: (0, jsx_runtime_1.jsx)("img", { alt: '', width: 24, height: 24, src: item.imageSrc, className: cx('country-icon') }), endContent: item.code }, { children: item.name }), index))) })))] })));
 };
 exports.PhoneInput = PhoneInput;

package/plate/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { BoxShadow } from '../styling/shadows';
 export interface PlateProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Тень. */
@@ -12,4 +12,4 @@ export interface PlateProps extends React.HTMLAttributes<HTMLDivElement> {
  * Plate это просто div с возможностью легко задавать тень и скругления.
  * И он должен оставаться компонентом, который только задает оформление обычного div.
  */
-export declare const Plate: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare const Plate: import("react").ForwardRefExoticComponent<PlateProps & import("react").RefAttributes<HTMLDivElement | null>>;

package/plate/index.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.Plate = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const shadows_1 = require("../styling/shadows");
 const shapes_1 = require("../styling/shapes");
 const classnames_1 = __importDefault(require("classnames"));
@@ -49,5 +27,5 @@ const plate_module_scss_1 = __importDefault(require("./plate.module.scss"));
  */
 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)(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)));
+    return ((0, jsx_runtime_1.jsx)("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/popup/popup-view.js

@@ -15,8 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupView = void 0;
-const react_1 = __importDefault(require("react"));
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Cross"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const popup_view_module_scss_1 = __importDefault(require("./popup-view.module.scss"));
 const cx = bind_1.default.bind(popup_view_module_scss_1.default);
@@ -27,9 +27,6 @@ const cx = bind_1.default.bind(popup_view_module_scss_1.default);
  */
 function PopupView(_a) {
     var { children, onClose, popupRef, className, 'data-testid': testId = 'popup' } = _a, rest = __rest(_a, ["children", "onClose", "popupRef", "className", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { className: cx('root', className), ref: popupRef, "data-testid": testId }),
-        onClose && (react_1.default.createElement("button", { "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: cx('close'), onClick: onClose, "data-testid": 'popup:close' },
-            react_1.default.createElement(cross_1.default, null))),
-        react_1.default.createElement("div", { className: cx('content') }, children)));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: cx('root', className), ref: popupRef, "data-testid": testId }, { children: [onClose && ((0, jsx_runtime_1.jsx)("button", Object.assign({ "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: cx('close'), onClick: onClose, "data-testid": 'popup:close' }, { children: (0, jsx_runtime_1.jsx)(Cross_1.default, {}) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('content') }, { children: children }))] })));
 }
 exports.PopupView = PopupView;

package/popup/popup.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.Popup = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const popup_view_1 = require("./popup-view");
 const react_2 = require("@floating-ui/react");
 const hooks_1 = require("../hooks");
@@ -49,7 +27,7 @@ const portal_1 = require("../portal");
  */
 function Popup(_a) {
     var { showFor } = _a, rest = __rest(_a, ["showFor"]);
-    return react_1.default.createElement(portal_1.Portal, null, showFor && react_1.default.createElement(PopupInner, Object.assign({ showFor: showFor }, rest)));
+    return (0, jsx_runtime_1.jsx)(portal_1.Portal, { children: showFor && (0, jsx_runtime_1.jsx)(PopupInner, Object.assign({ showFor: showFor }, rest)) });
 }
 exports.Popup = Popup;
 /**
@@ -69,5 +47,5 @@ function PopupInner(_a) {
         enabled: floating.isPositioned,
         afterDeactivate: onDismiss,
     });
-    return (react_1.default.createElement(popup_view_1.PopupView, Object.assign({}, rest, { popupRef: refs.setFloating, style: Object.assign(Object.assign({}, style), floatingStyle), onClose: onDismiss }), children));
+    return ((0, jsx_runtime_1.jsx)(popup_view_1.PopupView, Object.assign({}, rest, { popupRef: refs.setFloating, style: Object.assign(Object.assign({}, style), floatingStyle), onClose: onDismiss }, { children: children })));
 }

package/portal/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface PortalProps {
     /** Вернет элемент, в который нужно вывести содержимое через портал. */
     defineRoot?: () => HTMLElement;

package/price/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Price = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("./utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const price_module_scss_1 = __importDefault(require("./price.module.scss"));
@@ -18,6 +18,6 @@ function Price({ className, currencyGrapheme: grapheme, graphemeBefore, crossedO
     const content = (0, utils_1.formatPrice)(value, grapheme, {
         graphemeBefore,
     });
-    return (react_1.default.createElement("span", { className: cx('root', className, crossedOut && 'crossed-out'), "data-testid": testId }, content));
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: cx('root', className, crossedOut && 'crossed-out'), "data-testid": testId }, { children: content })));
 }
 exports.Price = Price;

package/radio-button/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButton = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const bind_1 = __importDefault(require("classnames/bind"));
 const radio_button_module_scss_1 = __importDefault(require("./radio-button.module.scss"));
 const cx = bind_1.default.bind(radio_button_module_scss_1.default);
@@ -26,8 +26,6 @@ const cx = bind_1.default.bind(radio_button_module_scss_1.default);
  */
 function RadioButton(_a) {
     var { style, className, 'data-testid': testId = 'radio-button' } = _a, restProps = __rest(_a, ["style", "className", 'data-testid']);
-    return (react_1.default.createElement("div", { style: style, className: cx('root', className) },
-        react_1.default.createElement("input", Object.assign({}, restProps, { type: 'radio', className: cx('input'), "data-testid": testId })),
-        react_1.default.createElement("div", { className: cx('circle') })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: cx('root', className) }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { type: 'radio', className: cx('input'), "data-testid": testId })), (0, jsx_runtime_1.jsx)("div", { className: cx('circle') })] })));
 }
 exports.RadioButton = RadioButton;

package/range/index.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { Container } from '../helpers/create-container';
 interface CallbackData {
     startValue: number;

package/range/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.Range = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const with_prevent_1 = __importDefault(require("../helpers/with-prevent"));
 const bounds_of_1 = __importDefault(require("../helpers/bounds-of"));
 const create_container_1 = __importDefault(require("../helpers/create-container"));
@@ -273,15 +251,10 @@ class Range extends react_1.Component {
     render() {
         var _a;
         const [start, finish] = this.getPercents();
-        return (react_1.default.createElement("div", Object.assign({}, this.props.wrapperProps, { className: cx('range-wrapper-base', 'range-wrapper-styled', this.props.disabled && 'disabled', (_a = this.props.wrapperProps) === null || _a === void 0 ? void 0 : _a.className) }),
-            react_1.default.createElement("div", { className: cx('track-base', 'available-base', 'available-styled') }),
-            react_1.default.createElement("div", { ref: this.rangeRef, className: cx('track-base', 'selected-base', 'selected-styled'), style: {
-                    left: `${start}%`,
-                    width: `${finish - start}%`,
-                } }),
-            react_1.default.createElement("div", { ref: this.containerRef, className: cx('range-container-base', 'range-container-styled') },
-                react_1.default.createElement("button", { type: 'button', "aria-label": '\u041D\u0430\u0447\u0430\u043B\u044C\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0438\u0430\u043F\u0430\u0437\u043E\u043D\u0430', ref: this.startThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${start}%` }, "data-testid": 'range:thumb-start' }),
-                react_1.default.createElement("button", { type: 'button', "aria-label": '\u041A\u043E\u043D\u0435\u0447\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0438\u0430\u043F\u0430\u0437\u043E\u043D\u0430', ref: this.finishThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${finish}%` }, "data-testid": 'range:thumb-end' }))));
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, this.props.wrapperProps, { className: cx('range-wrapper-base', 'range-wrapper-styled', this.props.disabled && 'disabled', (_a = this.props.wrapperProps) === null || _a === void 0 ? void 0 : _a.className) }, { children: [(0, jsx_runtime_1.jsx)("div", { className: cx('track-base', 'available-base', 'available-styled') }), (0, jsx_runtime_1.jsx)("div", { ref: this.rangeRef, className: cx('track-base', 'selected-base', 'selected-styled'), style: {
+                        left: `${start}%`,
+                        width: `${finish - start}%`,
+                    } }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: this.containerRef, className: cx('range-container-base', 'range-container-styled') }, { children: [(0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": '\u041D\u0430\u0447\u0430\u043B\u044C\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0438\u0430\u043F\u0430\u0437\u043E\u043D\u0430', ref: this.startThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${start}%` }, "data-testid": 'range:thumb-start' }), (0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": '\u041A\u043E\u043D\u0435\u0447\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0438\u0430\u043F\u0430\u0437\u043E\u043D\u0430', ref: this.finishThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${finish}%` }, "data-testid": 'range:thumb-end' })] }))] })));
     }
 }
 exports.Range = Range;

package/rating/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export type StarSize = 's' | 'm';
 export interface RatingProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Размер. */

package/rating/index.js

@@ -15,10 +15,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rating = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("./utils");
 const bind_1 = __importDefault(require("classnames/bind"));
-const star_svg_1 = __importDefault(require("./star.svg"));
+const Star_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Filled/Star"));
 const rating_module_scss_1 = __importDefault(require("./rating.module.scss"));
 const cx = bind_1.default.bind(rating_module_scss_1.default);
 /**
@@ -28,7 +28,7 @@ const cx = bind_1.default.bind(rating_module_scss_1.default);
  */
 const Rating = (_a) => {
     var { size = 's', value, className, 'data-testid': testId = 'rating' } = _a, restProps = __rest(_a, ["size", "value", "className", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', className), "data-testid": testId, "data-rating": value }), (0, utils_1.getStars)(Math.min(5, value), 5).map((type, index) => (react_1.default.createElement(Star, { key: index, type: type, size: size })))));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, { className: cx('root', className), "data-testid": testId, "data-rating": value }, { children: (0, utils_1.getStars)(Math.min(5, value), 5).map((type, index) => ((0, jsx_runtime_1.jsx)(Star, { type: type, size: size }, index))) })));
 };
 exports.Rating = Rating;
 /**
@@ -36,9 +36,4 @@ exports.Rating = Rating;
  * @param props Свойства.
  * @return Элемент.
  */
-const Star = ({ type, size }) => (react_1.default.createElement("div", { className: cx('star', `size-${size}`) },
-    type === 'empty' && react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
-    type === 'half' && (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
-        react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'half'), preserveAspectRatio: 'xMinYMin slice' }))),
-    type === 'full' && react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') })));
+const Star = ({ type, size }) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('star', `size-${size}`) }, { children: [type === 'empty' && (0, jsx_runtime_1.jsx)(Star_1.default, { className: cx('svg') }), type === 'half' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Star_1.default, { className: cx('svg') }), (0, jsx_runtime_1.jsx)(Star_1.default, { className: cx('svg', 'half'), preserveAspectRatio: 'xMinYMin slice' })] })), type === 'full' && (0, jsx_runtime_1.jsx)(Star_1.default, { className: cx('svg', 'full') })] })));

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;