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

package/src/internal/ItemContent/Icon.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
-var SideMenuContext_1 = require("../../SideMenuContext");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var scripts_1 = require("../../../lib/utils/scripts");
-var Icon_styles_1 = require("./Icon.styles");
-var getIconSize = function (theme, _isSubMenu, _isBackButton) {
+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 SideMenuContext_1 = require("../../SideMenuContext");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
+const scripts_1 = require("../../../lib/utils/scripts");
+const Icon_styles_1 = require("./Icon.styles");
+const getIconSize = (theme, _isSubMenu, _isBackButton) => {
     if (!_isSubMenu) {
         return parseInt(theme.sideMenuIconSize);
     }
@@ -17,14 +17,12 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
         return parseInt(theme.sideMenuIconSubItemSize);
     }
 };
-var Icon = function (_a) {
-    var _b;
-    var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c, disabled = _a.disabled;
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
-    var renderIcon = function () {
-        var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
+const Icon = ({ icon, _isSubMenu, isMultiline, _isBackButton = false, disabled }) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const { isSeparatedMenu, size } = context;
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const renderIcon = () => {
+        const iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
         if ((0, scripts_1.isKonturIcon)(icon)) {
             return react_1.default.cloneElement(icon, {
                 size: getIconSize(theme, _isSubMenu, _isBackButton),
@@ -34,14 +32,14 @@ var Icon = function (_a) {
         }
         return icon;
     };
-    return (react_1.default.createElement("span", { className: (0, Emotion_1.cx)((_b = {},
-            _b[Icon_styles_1.jsStyles.root(theme)] = true,
-            _b[Icon_styles_1.jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
-            _b[Icon_styles_1.jsStyles.rootLarge(theme)] = size === 'large',
-            _b[Icon_styles_1.jsStyles.rootSubItem(theme)] = _isSubMenu,
-            _b[Icon_styles_1.jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
-            _b[Icon_styles_1.jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
-            _b[Icon_styles_1.jsStyles.rootBackButton(theme)] = _isBackButton,
-            _b)) }, renderIcon()));
+    return (react_1.default.createElement("span", { className: (0, Emotion_1.cx)({
+            [Icon_styles_1.jsStyles.root(theme)]: true,
+            [Icon_styles_1.jsStyles.rootMultiline()]: isMultiline && (context.isOpened || _isSubMenu),
+            [Icon_styles_1.jsStyles.rootLarge(theme)]: size === 'large',
+            [Icon_styles_1.jsStyles.rootSubItem(theme)]: _isSubMenu,
+            [Icon_styles_1.jsStyles.rootSubItemSeparatedMenu(theme)]: isSeparatedMenu && _isSubMenu,
+            [Icon_styles_1.jsStyles.rootSubItemLarge(theme)]: _isSubMenu && size === 'large',
+            [Icon_styles_1.jsStyles.rootBackButton(theme)]: _isBackButton,
+        }) }, renderIcon()));
 };
 exports.Icon = Icon;

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

@@ -1,31 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var styles = {
-    root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      margin: ", " ", " ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "], ["\n      display: flex;\n      align-items: center;\n      margin: ", " ", " ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "])), t.sideMenuIconMarginY, t.sideMenuIconMarginRight, t.sideMenuIconMarginY, t.sideMenuIconMarginLeft, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
+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) `
+      display: flex;
+      align-items: center;
+      margin: ${t.sideMenuIconMarginY} ${t.sideMenuIconMarginRight} ${t.sideMenuIconMarginY} ${t.sideMenuIconMarginLeft};
+      min-height: ${t.sideMenuIconMinHeight};
+      line-height: ${t.sideMenuIconLineHeight};
+      flex-shrink: 0;
+      box-sizing: content-box;
+    `;
     },
-    rootMultiline: function () {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: -2px;\n    "], ["\n      align-self: flex-start;\n      margin-top: -2px;\n    "])));
+    rootMultiline() {
+        return (0, Emotion_1.css) `
+      align-self: flex-start;
+      margin-top: -2px;
+    `;
     },
-    rootLarge: function (t) {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      min-height: ", ";\n      line-height: ", ";\n      margin-top: 0;\n    "], ["\n      min-height: ", ";\n      line-height: ", ";\n      margin-top: 0;\n    "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
+    rootLarge(t) {
+        return (0, Emotion_1.css) `
+      min-height: ${t.sideMenuIconLargeMinHeight};
+      line-height: ${t.sideMenuIconLargeLineHeight};
+      margin-top: 0;
+    `;
     },
-    rootSubItemLarge: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      min-height: ", ";\n    "], ["\n      min-height: ", ";\n    "])), t.sideMenuIconLargeSubItemMinHeight);
+    rootSubItemLarge(t) {
+        return (0, Emotion_1.css) `
+      min-height: ${t.sideMenuIconLargeSubItemMinHeight};
+    `;
     },
-    rootSubItem: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      margin: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n      min-height: ", ";\n      line-height: ", ";\n    "], ["\n      margin: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n      min-height: ", ";\n      line-height: ", ";\n    "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
+    rootSubItem(t) {
+        return (0, Emotion_1.css) `
+      margin: 0;
+      padding-left: ${t.sideMenuIconSubItemPaddingLeft};
+      padding-right: ${t.sideMenuIconSubItemPaddingRight};
+      min-height: ${t.sideMenuIconSubItemMinHeight};
+      line-height: ${t.sideMenuIconSubItemLineHeight};
+    `;
     },
-    rootSubItemSeparatedMenu: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);
+    rootSubItemSeparatedMenu(t) {
+        return (0, Emotion_1.css) `
+      padding-left: ${t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft};
+    `;
     },
-    rootBackButton: function (t) {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
+    rootBackButton(t) {
+        return (0, Emotion_1.css) `
+      padding-left: ${t.sideMenuBackButtonIconPaddingLeft};
+      padding-right: ${t.sideMenuBackButtonIconPaddingRight};
+    `;
     },
 };
 exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/ItemContent/ItemContent.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemContent = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var react_ui_1 = require("@skbkontur/react-ui");
-var SideMenuContext_1 = require("../../SideMenuContext");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var ItemContent_styles_1 = require("./ItemContent.styles");
-var Icon_1 = require("./Icon");
-var Caption_1 = require("./Caption");
-var Marker_1 = require("./Marker");
-var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
+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 SideMenuContext_1 = require("../../SideMenuContext");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
+const ItemContent_styles_1 = require("./ItemContent.styles");
+const Icon_1 = require("./Icon");
+const Caption_1 = require("./Caption");
+const Marker_1 = require("./Marker");
+const getCaptionLineHeight = (theme, isTouchScreen, _isSubMenu, size) => {
     if (isTouchScreen) {
         if (_isSubMenu) {
             return theme.sideMenuCaptionSubItemLineHeightForTouchScreens;
@@ -26,16 +26,13 @@ var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
 /**
  * Контент для SideMenuItem или SideMenuLink
  */
-var ItemContent = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var _d;
-    var _isSubMenu = _a._isSubMenu, icon = _a.icon, isNestedSubMenu = _a.isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar, disabled = _a.disabled;
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var size = context.size, isTouchScreen = context.isTouchScreen;
-    var textRef = (0, react_1.useRef)(null);
-    var _e = tslib_1.__read((0, react_1.useState)(false), 2), isMultiline = _e[0], setIsMultiline = _e[1];
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    (0, react_1.useEffect)(function () {
+const ItemContent = (0, react_1.forwardRef)(({ _isSubMenu, icon, isNestedSubMenu, caption, subCaption, marker, _isBackButton, _isDropdown, _isAvatar, disabled }, ref) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const { size, isTouchScreen } = context;
+    const textRef = (0, react_1.useRef)(null);
+    const [isMultiline, setIsMultiline] = (0, react_1.useState)(false);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    (0, react_1.useEffect)(() => {
         if (subCaption) {
             setIsMultiline(true);
             return;
@@ -43,31 +40,31 @@ var ItemContent = (0, react_1.forwardRef)(function (_a, ref) {
         if (!textRef.current || _isBackButton || _isDropdown) {
             return;
         }
-        var captionLineHeight = getCaptionLineHeight(theme, context.isTouchScreen, _isSubMenu, size);
-        var isMultiline = parseInt(captionLineHeight) < textRef.current.offsetHeight;
+        const captionLineHeight = getCaptionLineHeight(theme, context.isTouchScreen, _isSubMenu, size);
+        const isMultiline = parseInt(captionLineHeight) < textRef.current.offsetHeight;
         if (isMultiline) {
             setIsMultiline(true);
         }
-    }, [caption, context.isBeingTransitioned, (_d = context.navigation) === null || _d === void 0 ? void 0 : _d.activeMenuItem]);
-    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_b = {},
-            _b[ItemContent_styles_1.jsStyles.root(theme)] = true,
-            _b[ItemContent_styles_1.jsStyles.subItemRoot(theme)] = _isSubMenu,
-            _b[ItemContent_styles_1.jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
-            _b[ItemContent_styles_1.jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
-            _b[ItemContent_styles_1.jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu && context.isOpened,
-            _b[ItemContent_styles_1.jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
-            _b[ItemContent_styles_1.jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
-            _b[ItemContent_styles_1.jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
-            _b)), ref: ref },
+    }, [caption, context.isBeingTransitioned, context.navigation?.activeMenuItem]);
+    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+            [ItemContent_styles_1.jsStyles.root(theme)]: true,
+            [ItemContent_styles_1.jsStyles.subItemRoot(theme)]: _isSubMenu,
+            [ItemContent_styles_1.jsStyles.largeRoot(theme)]: size === 'large' && !_isSubMenu,
+            [ItemContent_styles_1.jsStyles.subItemLargeRoot(theme)]: size === 'large' && _isSubMenu,
+            [ItemContent_styles_1.jsStyles.multilineRoot(theme)]: isMultiline && !_isSubMenu && context.isOpened,
+            [ItemContent_styles_1.jsStyles.largeMultilineRoot(theme)]: isMultiline && size === 'large',
+            [ItemContent_styles_1.jsStyles.rootForTouchScreens(theme)]: isTouchScreen,
+            [ItemContent_styles_1.jsStyles.subItemRootForTouchScreens(theme)]: isTouchScreen && _isSubMenu,
+        }), ref: ref },
         icon && (react_1.default.createElement(Icon_1.Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar, disabled: disabled })),
-        react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_c = {},
-                _c[ItemContent_styles_1.jsStyles.textAndMarkerWrapper()] = true,
-                _c[ItemContent_styles_1.jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
-                _c[ItemContent_styles_1.jsStyles.textAndMarkerWrapperMinimized()] = !context.isOpened && !_isSubMenu,
-                _c)) },
+        react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+                [ItemContent_styles_1.jsStyles.textAndMarkerWrapper()]: true,
+                [ItemContent_styles_1.jsStyles.textAndMarkerWrapperDropdown()]: _isDropdown,
+                [ItemContent_styles_1.jsStyles.textAndMarkerWrapperMinimized()]: !context.isOpened && !_isSubMenu,
+            }) },
             react_1.default.createElement(Caption_1.Caption, { _isSubMenu: _isSubMenu, isNestedSubMenu: isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef })),
         marker !== undefined && (react_1.default.createElement(Marker_1.Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu, isMinimized: !context.isOpened, disabled: disabled }))));
 });
 ItemContent.displayName = 'ItemContent';
-var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
+const ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
 exports.ItemContent = ItemContentWithStaticFields;

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

@@ -1,43 +1,77 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var styles = {
-    root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      position: relative;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      position: relative;\n    "])), t.sideMenuItemContentPaddingY, t.sideMenuItemContentPaddingY);
+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) `
+      display: flex;
+      align-items: center;
+      padding-top: ${t.sideMenuItemContentPaddingY};
+      padding-bottom: ${t.sideMenuItemContentPaddingY};
+      position: relative;
+    `;
     },
-    largeRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentLargePaddingY, t.sideMenuItemContentLargePaddingY);
+    largeRoot(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuItemContentLargePaddingY} !important;
+      padding-bottom: ${t.sideMenuItemContentLargePaddingY} !important;
+    `;
     },
-    subItemLargeRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuSubItemContentLargePaddingY, t.sideMenuSubItemContentLargePaddingY);
+    subItemLargeRoot(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuSubItemContentLargePaddingY} !important;
+      padding-bottom: ${t.sideMenuSubItemContentLargePaddingY} !important;
+    `;
     },
-    multilineRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentMultilinePaddingTop, t.sideMenuItemContentMultilinePaddingBottom);
+    multilineRoot(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuItemContentMultilinePaddingTop} !important;
+      padding-bottom: ${t.sideMenuItemContentMultilinePaddingBottom} !important;
+    `;
     },
-    largeMultilineRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentLargeMultilinePaddingTop, t.sideMenuItemContentLargeMultilinePaddingBottom);
+    largeMultilineRoot(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuItemContentLargeMultilinePaddingTop} !important;
+      padding-bottom: ${t.sideMenuItemContentLargeMultilinePaddingBottom} !important;
+    `;
     },
-    rootForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingYForTouchScreens, t.sideMenuItemContentPaddingYForTouchScreens);
+    rootForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuItemContentPaddingYForTouchScreens};
+      padding-bottom: ${t.sideMenuItemContentPaddingYForTouchScreens};
+    `;
     },
-    subItemRootForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
+    subItemRootForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuSubItemContentPaddingYForTouchScreens};
+      padding-bottom: ${t.sideMenuSubItemContentPaddingYForTouchScreens};
+    `;
     },
-    subItemRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
+    subItemRoot(t) {
+        return (0, Emotion_1.css) `
+      padding-top: ${t.sideMenuSubItemContentPaddingY};
+      padding-bottom: ${t.sideMenuSubItemContentPaddingY};
+    `;
     },
-    textAndMarkerWrapper: function () {
-        return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "])));
+    textAndMarkerWrapper() {
+        return (0, Emotion_1.css) `
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      min-width: 0;
+    `;
     },
-    textAndMarkerWrapperDropdown: function () {
-        return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+    textAndMarkerWrapperDropdown() {
+        return (0, Emotion_1.css) `
+      overflow: hidden;
+    `;
     },
-    textAndMarkerWrapperMinimized: function () {
-        return (0, Emotion_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+    textAndMarkerWrapperMinimized() {
+        return (0, Emotion_1.css) `
+      display: none;
+    `;
     },
 };
 exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/src/internal/ItemContent/Marker.js

@@ -1,26 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Marker = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var react_1 = tslib_1.__importStar(require("react"));
-var react_ui_1 = require("@skbkontur/react-ui");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var Marker_styles_1 = require("./Marker.styles");
-var Marker = function (_a) {
-    var _b;
-    var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu, disabled = _a.disabled, isMinimized = _a.isMinimized;
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    var emptyMarker = marker === true || marker === '';
-    return (react_1.default.createElement("span", { className: (0, Emotion_1.cx)((_b = {},
-            _b[Marker_styles_1.jsStyles.root(theme)] = true,
-            _b[Marker_styles_1.jsStyles.rootDisabled(theme)] = disabled,
-            _b[Marker_styles_1.jsStyles.rootEmpty(theme)] = emptyMarker,
-            _b[Marker_styles_1.jsStyles.rootMultiline(theme)] = isMultiline,
-            _b[Marker_styles_1.jsStyles.rootSubMenu(theme)] = _isSubMenu,
-            _b[Marker_styles_1.jsStyles.rootSubMenuEmpty(theme)] = _isSubMenu && emptyMarker,
-            _b[Marker_styles_1.jsStyles.rootMinimized()] = isMinimized && !_isSubMenu,
-            _b[Marker_styles_1.jsStyles.rootEmptyMinimized()] = emptyMarker && isMinimized && !_isSubMenu,
-            _b)) }, marker));
+const tslib_1 = require("tslib");
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const react_1 = tslib_1.__importStar(require("react"));
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
+const Marker_styles_1 = require("./Marker.styles");
+const Marker = ({ isMultiline, marker, _isSubMenu, disabled, isMinimized }) => {
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const emptyMarker = marker === true || marker === '';
+    return (react_1.default.createElement("span", { className: (0, Emotion_1.cx)({
+            [Marker_styles_1.jsStyles.root(theme)]: true,
+            [Marker_styles_1.jsStyles.rootDisabled(theme)]: disabled,
+            [Marker_styles_1.jsStyles.rootEmpty(theme)]: emptyMarker,
+            [Marker_styles_1.jsStyles.rootMultiline(theme)]: isMultiline,
+            [Marker_styles_1.jsStyles.rootSubMenu(theme)]: _isSubMenu,
+            [Marker_styles_1.jsStyles.rootSubMenuEmpty(theme)]: _isSubMenu && emptyMarker,
+            [Marker_styles_1.jsStyles.rootMinimized()]: isMinimized && !_isSubMenu,
+            [Marker_styles_1.jsStyles.rootEmptyMinimized()]: emptyMarker && isMinimized && !_isSubMenu,
+        }) }, marker));
 };
 exports.Marker = Marker;

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

@@ -1,34 +1,68 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var styles = {
-    root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_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);
+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 (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__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 (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuMarkerBgDisabled);
+    rootDisabled(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuMarkerBgDisabled};
+    `;
     },
-    rootMultiline: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__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 (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__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 (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSubItemEmptyMarkerBg);
+    rootSubMenuEmpty(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuSubItemEmptyMarkerBg};
+    `;
     },
-    rootMinimized: function () {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__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 (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__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;
+    `;
     },
 };
 exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/src/internal/NestedMenu.js

@@ -1,30 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NestedMenu = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var react_ui_1 = require("@skbkontur/react-ui");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
-var SideMenuContext_1 = require("../SideMenuContext");
-var NestedMenu_styles_1 = require("./NestedMenu.styles");
+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 = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var children = _a.children, htmlId = _a.htmlId, isOpened = _a.isOpened;
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    return (react_1.default.createElement("ul", { ref: ref, className: (0, Emotion_1.cx)((_b = {},
-            _b[SideMenu_styles_1.jsStylesForSideMenu.list()] = true,
-            _b[SideMenu_styles_1.jsStylesForSideMenu.hidden()] = !isOpened || (!context.isOpened && (context.isMobile || context.isTablet)),
-            _b[NestedMenu_styles_1.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' });
+const NestedMenuWithStaticFields = Object.assign(NestedMenu, { __KONTUR_REACT_UI__: 'NestedMenu' });
 exports.NestedMenu = NestedMenuWithStaticFields;

package/src/internal/NestedMenu.styles.js

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