@skbkontur/side-menu 3.3.4 → 3.3.5-19a67.0

package/src/internal/ItemContent/Marker.styles.js

@@ -1,31 +1,68 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
-var styles = {
-    root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", " ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      min-width: 8px;\n      min-height: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    "], ["\n      padding: ", " ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      min-width: 8px;\n      min-height: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    "])), t.sideMenuMarkerPaddingY, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuMarkerFontSize, t.sideMenuMarkerLineHeight, t.sideMenuMarkerFontWeight);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsStyles = void 0;
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      padding: ${t.sideMenuMarkerPaddingY} ${t.sideMenuMarkerPaddingX};
+      background: ${t.sideMenuMarkerBg};
+      border-radius: 9999px;
+      margin-left: auto;
+      margin-right: ${t.sideMenuMarkerMarginRight};
+      color: ${t.sideMenuMarkerColor};
+      font-size: ${t.sideMenuMarkerFontSize};
+      line-height: ${t.sideMenuMarkerLineHeight};
+      font-weight: ${t.sideMenuMarkerFontWeight};
+      min-width: 8px;
+      min-height: 8px;
+      text-align: center;
+      flex-shrink: 0;
+    `;
     },
-    rootEmpty: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: 0;\n      margin-right: calc(", " + ", ");\n    "], ["\n      padding: 0;\n      margin-right: calc(", " + ", ");\n    "])), t.sideMenuMarkerMarginRight, t.sideMenuMarkerPaddingX);
+    rootEmpty(t) {
+        return (0, Emotion_1.css) `
+      padding: 0;
+      margin-right: calc(${t.sideMenuMarkerMarginRight} + ${t.sideMenuMarkerPaddingX});
+    `;
     },
-    rootDisabled: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuMarkerBgDisabled);
+    rootDisabled(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuMarkerBgDisabled};
+    `;
     },
-    rootMultiline: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: ", ";\n    "], ["\n      align-self: flex-start;\n      margin-top: ", ";\n    "])), t.sideMenuMarkerMultilineMarginTop);
+    rootMultiline(t) {
+        return (0, Emotion_1.css) `
+      align-self: flex-start;
+      margin-top: ${t.sideMenuMarkerMultilineMarginTop};
+    `;
     },
-    rootSubMenu: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: transparent;\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      background: transparent;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sideMenuMarkerSubItemColor, t.sideMenuSubItemMarkerFontWeight);
+    rootSubMenu(t) {
+        return (0, Emotion_1.css) `
+      background: transparent;
+      color: ${t.sideMenuMarkerSubItemColor};
+      font-weight: ${t.sideMenuSubItemMarkerFontWeight};
+    `;
     },
-    rootSubMenuEmpty: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSubItemEmptyMarkerBg);
+    rootSubMenuEmpty(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuSubItemEmptyMarkerBg};
+    `;
     },
-    rootMinimized: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: absolute;\n      right: 0;\n      top: 0;\n      margin: 0;\n    "], ["\n      position: absolute;\n      right: 0;\n      top: 0;\n      margin: 0;\n    "])));
+    rootMinimized() {
+        return (0, Emotion_1.css) `
+      position: absolute;
+      right: 0;
+      top: 0;
+      margin: 0;
+    `;
     },
-    rootEmptyMinimized: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      right: 4px;\n      top: 4px;\n    "], ["\n      right: 4px;\n      top: 4px;\n    "])));
+    rootEmptyMinimized() {
+        return (0, Emotion_1.css) `
+      right: 4px;
+      top: 4px;
+    `;
     },
 };
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);

package/src/internal/NestedMenu.js

@@ -1,26 +1,28 @@
-import React, { forwardRef, useContext } from 'react';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
-import { SideMenuContext } from '../SideMenuContext';
-import { jsStyles } from './NestedMenu.styles';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestedMenu = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
+const SideMenuContext_1 = require("../SideMenuContext");
+const NestedMenu_styles_1 = require("./NestedMenu.styles");
 /**
  * Вложенное подменю
  *
  * @visibleName NestedMenu
  */
-var NestedMenu = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, htmlId = _a.htmlId, isOpened = _a.isOpened;
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var context = useContext(SideMenuContext);
-    return (React.createElement("ul", { ref: ref, className: cx((_b = {},
-            _b[jsStylesForSideMenu.list()] = true,
-            _b[jsStylesForSideMenu.hidden()] = !isOpened || (!context.isOpened && (context.isMobile || context.isTablet)),
-            _b[jsStyles.root(theme)] = true,
-            _b)), id: htmlId }, children));
+const NestedMenu = (0, react_1.forwardRef)(({ children, htmlId, isOpened }, ref) => {
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    return (react_1.default.createElement("ul", { ref: ref, className: (0, Emotion_1.cx)({
+            [SideMenu_styles_1.jsStylesForSideMenu.list()]: true,
+            [SideMenu_styles_1.jsStylesForSideMenu.hidden()]: !isOpened || (!context.isOpened && (context.isMobile || context.isTablet)),
+            [NestedMenu_styles_1.jsStyles.root(theme)]: true,
+        }), id: htmlId }, children));
 });
 NestedMenu.displayName = 'NestedMenu';
-var NestedMenuWithStaticFields = Object.assign(NestedMenu, { __KONTUR_REACT_UI__: 'NestedMenu' });
-export { NestedMenuWithStaticFields as NestedMenu };
+const NestedMenuWithStaticFields = Object.assign(NestedMenu, { __KONTUR_REACT_UI__: 'NestedMenu' });
+exports.NestedMenu = NestedMenuWithStaticFields;

package/src/internal/NestedMenu.styles.js

@@ -1,10 +1,13 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-var styles = {
-    root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.sideMenuNestedMenuPaddingLeft);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsStyles = void 0;
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      padding-left: ${t.sideMenuNestedMenuPaddingLeft};
+    `;
     },
 };
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);

package/src/internal/RightBorder.js

@@ -1,34 +1,36 @@
-import React, { forwardRef, useContext } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { Hint } from '@skbkontur/react-ui/components/Hint/Hint';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { useMemoBorderIcon } from '../../hooks/useMemoIcon';
-import { SideMenuContext } from '../SideMenuContext';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { jsStyles } from './RightBorder.styles';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightBorder = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const Hint_1 = require("@skbkontur/react-ui/components/Hint/Hint");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const useMemoIcon_1 = require("../../hooks/useMemoIcon");
+const SideMenuContext_1 = require("../SideMenuContext");
+const SideMenuDataTids_1 = require("../../SideMenuDataTids");
+const RightBorder_styles_1 = require("./RightBorder.styles");
 /**
  * Элемент интерактивной правой границы
  *
  * @visibleName RightBorder
  */
-var RightBorder = forwardRef(function (_a, ref) {
-    var _b;
-    var onClick = _a.onClick, showButton = _a.showButton;
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var context = useContext(SideMenuContext);
-    var icon = useMemoBorderIcon(context.isCollapsable);
-    var hintText = context.isCollapsable ? 'Закрепить меню' : 'Свернуть меню';
-    return (React.createElement(Hint, { text: hintText, pos: 'right' },
-        React.createElement("div", { className: cx((_b = {},
-                _b[jsStyles.root(theme)] = true,
-                _b[jsStyles.rootWithButton()] = showButton,
-                _b)), ref: ref, onClick: onClick, onKeyDown: function (e) {
+const RightBorder = (0, react_1.forwardRef)(({ onClick, showButton }, ref) => {
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const icon = (0, useMemoIcon_1.useMemoBorderIcon)(context.isCollapsable);
+    const hintText = context.isCollapsable ? 'Закрепить меню' : 'Свернуть меню';
+    return (react_1.default.createElement(Hint_1.Hint, { text: hintText, pos: 'right' },
+        react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+                [RightBorder_styles_1.jsStyles.root(theme)]: true,
+                [RightBorder_styles_1.jsStyles.rootWithButton()]: showButton,
+            }), ref: ref, onClick: onClick, onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === 'Space') {
                     onClick();
                 }
-            }, role: "button", tabIndex: 0, "data-tid": SideMenuDataTids.rightBorder }, icon)));
+            }, role: "button", tabIndex: 0, "data-tid": SideMenuDataTids_1.SideMenuDataTids.rightBorder }, icon)));
 });
 RightBorder.displayName = 'RightBorder';
-var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });
-export { RightBorderWithStaticFields as RightBorder };
+const RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });
+exports.RightBorder = RightBorderWithStaticFields;

package/src/internal/RightBorder.styles.js

@@ -1,13 +1,29 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-var styles = {
-    root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "], ["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sideMenuRightBorderWidth, t.sideMenuRightBorderIconColor, t.sideMenuRightBorderHoverIconColor);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsStyles = void 0;
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      opacity: 0;
+      position: absolute;
+      width: ${t.sideMenuRightBorderWidth};
+      height: 100%;
+      right: 0;
+      background: transparent;
+      display: flex;
+      color: ${t.sideMenuRightBorderIconColor};
+      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);
+      &:hover {
+        color: ${t.sideMenuRightBorderHoverIconColor};
+      }
+    `;
     },
-    rootWithButton: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
+    rootWithButton() {
+        return (0, Emotion_1.css) `
+      opacity: 1;
+    `;
     },
 };
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);

package/src/internal/SeparatedSubMenu.js

@@ -1,63 +1,62 @@
-import React, { forwardRef, useContext, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { ScrollContainer } from '@skbkontur/react-ui/components/ScrollContainer';
-import { isIE11 } from '@skbkontur/react-ui/lib/client';
-import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
-import { SideMenuContext } from '../SideMenuContext';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { navigationAttributeForSeparatedMenu } from '../Navigation';
-import { BackButton } from './BackButton';
-import { customStyles, jsStyles } from './SeparatedSubMenu.styles';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparatedSubMenu = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const ScrollContainer_1 = require("@skbkontur/react-ui/components/ScrollContainer");
+const client_1 = require("@skbkontur/react-ui/lib/client");
+const SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
+const SideMenuContext_1 = require("../SideMenuContext");
+const SideMenuDataTids_1 = require("../../SideMenuDataTids");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const Navigation_1 = require("../Navigation");
+const BackButton_1 = require("./BackButton");
+const SeparatedSubMenu_styles_1 = require("./SeparatedSubMenu.styles");
 /**
  * Отдельностоящее подменю
  *
  * @visibleName SeparatedSubMenu
  */
-var SeparatedSubMenu = forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var _e, _f, _g;
-    var children = _a.children, caption = _a.caption, htmlId = _a.htmlId, isOpened = _a.isOpened;
-    var context = useContext(SideMenuContext);
-    var scrollContainerRef = useRef(null);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    useEffect(function () {
+const SeparatedSubMenu = (0, react_1.forwardRef)(({ children, caption, htmlId, isOpened }, ref) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    (0, react_1.useEffect)(() => {
         if (!context.isMobile) {
             return;
         }
-        setTimeout(function () {
-            var _a, _b;
-            isOpened && ((_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, !!((_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'))));
+        setTimeout(() => {
+            isOpened && context.setHasScrollBar?.(!!scrollContainerRef.current?.hasScrollBar('y'));
         }, 50);
-    }, [(_e = context.navigation) === null || _e === void 0 ? void 0 : _e.activeMenuItem]);
-    if (!((_f = context.sideMenuRef) === null || _f === void 0 ? void 0 : _f.current)) {
+    }, [context.navigation?.activeMenuItem]);
+    if (!context.sideMenuRef?.current) {
         return null;
     }
-    return ReactDOM.createPortal(React.createElement("div", (_b = { className: cx((_c = {},
-                _c[jsStylesForSideMenu.container(theme)] = true,
-                _c[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
-                _c[jsStyles.root(theme)] = true,
-                _c[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
-                _c[jsStyles.rootForDesktop()] = context.isDesktop,
-                _c[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isCollapsable,
-                _c[jsStyles.rootForNarrowDesktop(theme)] = context.isCollapsable,
-                _c[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
-                _c[jsStylesForSideMenu.hidden()] = !isOpened || (!context.isOpened && (context.isTablet || context.isMobile)),
-                _c)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu }, _b[navigationAttributeForSeparatedMenu] = htmlId, _b),
-        React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
-                var _a;
-                (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
+    return react_dom_1.default.createPortal(react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+            [SideMenu_styles_1.jsStylesForSideMenu.container(theme)]: true,
+            [SideMenu_styles_1.jsStylesForSideMenu.containerForTouchScreens(theme)]: context.isTouchScreen,
+            [SeparatedSubMenu_styles_1.jsStyles.root(theme)]: true,
+            [SeparatedSubMenu_styles_1.customStyles.rootForMobiles(context.headerHeight)]: context.isMobile,
+            [SeparatedSubMenu_styles_1.jsStyles.rootForDesktop()]: context.isDesktop,
+            [SeparatedSubMenu_styles_1.jsStyles.rootForTouchScreens(theme)]: context.isTouchScreen && context.isOpened && context.isCollapsable,
+            [SeparatedSubMenu_styles_1.jsStyles.rootForNarrowDesktop(theme)]: context.isCollapsable,
+            [SeparatedSubMenu_styles_1.jsStyles.rootWithShadow(theme)]: context.isTablet && !client_1.isIE11,
+            [SideMenu_styles_1.jsStylesForSideMenu.hidden()]: !isOpened || (!context.isOpened && (context.isTablet || context.isMobile)),
+        }), ref: ref, "data-tid": SideMenuDataTids_1.SideMenuDataTids.separatedSubMenu, [Navigation_1.navigationAttributeForSeparatedMenu]: htmlId },
+        react_1.default.createElement(ScrollContainer_1.ScrollContainer, { onScrollStateChangeY: (state) => {
+                context.setScrollState?.(state);
             }, ref: scrollContainerRef, showScrollBar: context.isTouchScreen ? 'always' : context.showScrollBar },
-            React.createElement("ul", { className: cx((_d = {},
-                    _d[jsStylesForSideMenu.list()] = true,
-                    _d[jsStyles.contentWrapper(theme)] = true,
-                    _d[jsStyles.contentWrapperForMobiles()] = context.isMobile,
-                    _d)) },
-                context.isMobile && React.createElement(BackButton, { caption: caption, id: htmlId }),
-                children))), (_g = context.sideMenuRef) === null || _g === void 0 ? void 0 : _g.current);
+            react_1.default.createElement("ul", { className: (0, Emotion_1.cx)({
+                    [SideMenu_styles_1.jsStylesForSideMenu.list()]: true,
+                    [SeparatedSubMenu_styles_1.jsStyles.contentWrapper(theme)]: true,
+                    [SeparatedSubMenu_styles_1.jsStyles.contentWrapperForMobiles()]: context.isMobile,
+                }) },
+                context.isMobile && react_1.default.createElement(BackButton_1.BackButton, { caption: caption, id: htmlId }),
+                children))), context.sideMenuRef?.current);
 });
 SeparatedSubMenu.displayName = 'SeparatedSubMenu';
-var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
-export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };
+const SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
+exports.SeparatedSubMenu = SeparatedSubMenuWithStaticFields;

package/src/internal/SeparatedSubMenu.styles.js

@@ -1,33 +1,62 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-var styles = {
-    root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n      z-index: 8000;\n    "], ["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n      z-index: 8000;\n    "])), t.sideMenuSeparatedSubMenuBgColor, t.sideMenuSeparatedSubMenuBorderRightColor);
-    },
-    rootForTouchScreens: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuWidthForTouchScreens);
-    },
-    rootForNarrowDesktop: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuMinimizedWidth);
-    },
-    rootForDesktop: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      z-index: -1;\n    "], ["\n      z-index: -1;\n    "])));
-    },
-    rootWithShadow: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: ", ";\n      clip-path: inset(0 -", " 0 0);\n      border-right: none;\n    "], ["\n      box-shadow: ", ";\n      clip-path: inset(0 -", " 0 0);\n      border-right: none;\n    "])), t.sideMenuBoxShadow, t.sideMenuBoxShadowBlurRadius);
-    },
-    contentWrapper: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " ", ";\n    "], ["\n      padding: ", " ", ";\n    "])), t.sideMenuSeparatedSubMenuPaddingY, t.sideMenuSeparatedSubMenuPaddingX);
-    },
-    contentWrapperForMobiles: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsStyles = exports.customStyles = void 0;
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      position: absolute;
+      top: 0;
+      background: ${t.sideMenuSeparatedSubMenuBgColor};
+      left: 100%;
+      justify-content: flex-start;
+      border-right: 1px solid ${t.sideMenuSeparatedSubMenuBorderRightColor};
+      z-index: 8000;
+    `;
+    },
+    rootForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      left: ${t.sideMenuWidthForTouchScreens};
+      z-index: -1;
+    `;
+    },
+    rootForNarrowDesktop(t) {
+        return (0, Emotion_1.css) `
+      left: ${t.sideMenuMinimizedWidth};
+      z-index: -1;
+    `;
+    },
+    rootForDesktop() {
+        return (0, Emotion_1.css) `
+      z-index: -1;
+    `;
+    },
+    rootWithShadow(t) {
+        return (0, Emotion_1.css) `
+      box-shadow: ${t.sideMenuBoxShadow};
+      clip-path: inset(0 -${t.sideMenuBoxShadowBlurRadius} 0 0);
+      border-right: none;
+    `;
+    },
+    contentWrapper(t) {
+        return (0, Emotion_1.css) `
+      padding: ${t.sideMenuSeparatedSubMenuPaddingY} ${t.sideMenuSeparatedSubMenuPaddingX};
+    `;
+    },
+    contentWrapperForMobiles() {
+        return (0, Emotion_1.css) `
+      padding-top: 0;
+    `;
     },
 };
-export var customStyles = {
-    rootForMobiles: function (headerHeight) {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      height: calc(100vh - ", "px);\n      left: 0;\n      top: ", "px;\n    "], ["\n      height: calc(100vh - ", "px);\n      left: 0;\n      top: ", "px;\n    "])), headerHeight, headerHeight);
+exports.customStyles = {
+    rootForMobiles(headerHeight) {
+        return (0, Emotion_1.css) `
+      height: calc(100vh - ${headerHeight}px);
+      left: 0;
+      top: ${headerHeight}px;
+    `;
     },
 };
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);