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

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

@@ -1,51 +1,99 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
-export var sideMenuMultilineCaptionPaddingTop = '4px';
-export var sideMenuCaptionMarginRight = '8px';
-var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsStyles = exports.sideMenuCaptionMarginRight = exports.sideMenuMultilineCaptionPaddingTop = void 0;
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
+exports.sideMenuMultilineCaptionPaddingTop = '4px';
+exports.sideMenuCaptionMarginRight = '8px';
+const styles = {
+    root() {
+        return (0, Emotion_1.css) `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    `;
     },
-    rootMultiline: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), sideMenuMultilineCaptionPaddingTop);
+    rootMultiline() {
+        return (0, Emotion_1.css) `
+      padding-top: ${exports.sideMenuMultilineCaptionPaddingTop};
+      align-self: flex-start;
+    `;
     },
-    caption: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
+    caption(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionFontSize};
+      line-height: ${t.sideMenuCaptionLineHeight};
+      margin: 0 ${exports.sideMenuCaptionMarginRight} 0 0;
+      overflow-wrap: anywhere;
+    `;
     },
-    captionForTouchScreens: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
+    captionForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionFontSizeForTouchScreens};
+      line-height: ${t.sideMenuCaptionLineHeightForTouchScreens};
+    `;
     },
-    captionSubItem: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
+    captionSubItem(t) {
+        return (0, Emotion_1.css) `
+      margin-left: ${t.sideMenuCaptionSubItemMarginLeft};
+    `;
     },
-    captionSubItemForTouchScreens: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
+    captionSubItemForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionSubItemFontSizeForTouchScreens};
+      line-height: ${t.sideMenuCaptionSubItemLineHeightForTouchScreens};
+    `;
     },
-    captionSubItemSeparatedMenuTopLevel: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
+    captionSubItemSeparatedMenuTopLevel() {
+        return (0, Emotion_1.css) `
+      margin: 0 8px;
+    `;
     },
-    captionNestedItemSeparatedMenu: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
+    captionNestedItemSeparatedMenu() {
+        return (0, Emotion_1.css) `
+      margin-left: 25px;
+    `;
     },
-    captionWithoutItemIcon: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+    captionWithoutItemIcon() {
+        return (0, Emotion_1.css) `
+      margin-left: 40px;
+    `;
     },
-    captionSubItemWithoutColumnIcons: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+    captionSubItemWithoutColumnIcons() {
+        return (0, Emotion_1.css) `
+      margin-left: 8px;
+    `;
     },
-    captionLarge: function (t) {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
+    captionLarge(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionLargeFontSize} !important;
+      line-height: ${t.sideMenuCaptionLargeLineHeight} !important;
+    `;
     },
-    captionInBackButton: function (t) {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
+    captionInBackButton(t) {
+        return (0, Emotion_1.css) `
+      font-weight: ${t.sideMenuBackButtonCaptionFontWeight};
+      font-size: ${t.sideMenuBackButtonCaptionFontSize};
+      line-height: ${t.sideMenuBackButtonCaptionLineHeight};
+      padding-top: ${t.sideMenuBackButtonCaptionPaddingY};
+      padding-bottom: ${t.sideMenuBackButtonCaptionPaddingY};
+    `;
     },
-    captionDropdown: function () {
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+    captionDropdown() {
+        return (0, Emotion_1.css) `
+      white-space: nowrap;
+      overflow: hidden;
+    `;
     },
-    captionTruncated: function () {
-        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      text-overflow: ellipsis;\n      &::before {\n        float: right;\n        content: attr(data-tail);\n      }\n    "], ["\n      text-overflow: ellipsis;\n      &::before {\n        float: right;\n        content: attr(data-tail);\n      }\n    "])));
+    captionTruncated() {
+        return (0, Emotion_1.css) `
+      text-overflow: ellipsis;
+      &::before {
+        float: right;
+        content: attr(data-tail);
+      }
+    `;
     },
 };
-export var jsStyles = 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, templateObject_12, templateObject_13, templateObject_14;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);

package/src/internal/ItemContent/Icon.js

@@ -1,11 +1,15 @@
-import React, { useContext } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { SideMenuContext } from '../../SideMenuContext';
-import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
-import { isKonturIcon } from '../../../lib/utils/scripts';
-import { jsStyles } from './Icon.styles';
-var getIconSize = function (theme, _isSubMenu, _isBackButton) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = 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 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);
     }
@@ -13,16 +17,14 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
         return parseInt(theme.sideMenuIconSubItemSize);
     }
 };
-export 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 = useContext(SideMenuContext);
-    var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var renderIcon = function () {
-        var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
-        if (isKonturIcon(icon)) {
-            return React.cloneElement(icon, {
+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),
                 color: iconColor,
                 align: _isBackButton ? 'baseline' : 'none',
@@ -30,13 +32,14 @@ export var Icon = function (_a) {
         }
         return icon;
     };
-    return (React.createElement("span", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
-            _b[jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
-            _b[jsStyles.rootLarge(theme)] = size === 'large',
-            _b[jsStyles.rootSubItem(theme)] = _isSubMenu,
-            _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
-            _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
-            _b[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,28 +1,57 @@
-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      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);
+"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) `
+      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 css(templateObject_2 || (templateObject_2 = __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 css(templateObject_3 || (templateObject_3 = __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 css(templateObject_4 || (templateObject_4 = __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 css(templateObject_5 || (templateObject_5 = __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 css(templateObject_6 || (templateObject_6 = __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 css(templateObject_7 || (templateObject_7 = __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};
+    `;
     },
 };
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);

package/src/internal/ItemContent/ItemContent.js

@@ -1,14 +1,17 @@
-import { __read } from "tslib";
-import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { SideMenuContext } from '../../SideMenuContext';
-import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
-import { jsStyles } from './ItemContent.styles';
-import { Icon } from './Icon';
-import { Caption } from './Caption';
-import { Marker } from './Marker';
-var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemContent = 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 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;
@@ -23,16 +26,13 @@ var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
 /**
  * Контент для SideMenuItem или SideMenuLink
  */
-var ItemContent = 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 = useContext(SideMenuContext);
-    var size = context.size, isTouchScreen = context.isTouchScreen;
-    var textRef = useRef(null);
-    var _e = __read(useState(false), 2), isMultiline = _e[0], setIsMultiline = _e[1];
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    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;
@@ -40,31 +40,31 @@ var ItemContent = 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.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
-            _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
-            _b[jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
-            _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
-            _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu && context.isOpened,
-            _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
-            _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
-            _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
-            _b)), ref: ref },
-        icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar, disabled: disabled })),
-        React.createElement("div", { className: cx((_c = {},
-                _c[jsStyles.textAndMarkerWrapper()] = true,
-                _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
-                _c[jsStyles.textAndMarkerWrapperMinimized()] = !context.isOpened && !_isSubMenu,
-                _c)) },
-            React.createElement(Caption, { _isSubMenu: _isSubMenu, isNestedSubMenu: isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef })),
-        marker !== undefined && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu, isMinimized: !context.isOpened, disabled: disabled }))));
+    }, [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)({
+                [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' });
-export { ItemContentWithStaticFields as ItemContent };
+const ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
+exports.ItemContent = ItemContentWithStaticFields;

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

@@ -1,40 +1,77 @@
-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      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);
+"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) `
+      display: flex;
+      align-items: center;
+      padding-top: ${t.sideMenuItemContentPaddingY};
+      padding-bottom: ${t.sideMenuItemContentPaddingY};
+      position: relative;
+    `;
     },
-    largeRoot: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __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 css(templateObject_3 || (templateObject_3 = __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 css(templateObject_4 || (templateObject_4 = __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 css(templateObject_5 || (templateObject_5 = __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 css(templateObject_6 || (templateObject_6 = __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 css(templateObject_7 || (templateObject_7 = __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 css(templateObject_8 || (templateObject_8 = __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 css(templateObject_9 || (templateObject_9 = __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 css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+    textAndMarkerWrapperDropdown() {
+        return (0, Emotion_1.css) `
+      overflow: hidden;
+    `;
     },
-    textAndMarkerWrapperMinimized: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+    textAndMarkerWrapperMinimized() {
+        return (0, Emotion_1.css) `
+      display: none;
+    `;
     },
 };
-export var jsStyles = 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;
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);

package/src/internal/ItemContent/Marker.js

@@ -1,21 +1,24 @@
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import React, { useContext } from 'react';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
-import { jsStyles } from './Marker.styles';
-export var Marker = function (_a) {
-    var _b;
-    var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu, disabled = _a.disabled, isMinimized = _a.isMinimized;
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var emptyMarker = marker === true || marker === '';
-    return (React.createElement("span", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
-            _b[jsStyles.rootDisabled(theme)] = disabled,
-            _b[jsStyles.rootEmpty(theme)] = emptyMarker,
-            _b[jsStyles.rootMultiline(theme)] = isMultiline,
-            _b[jsStyles.rootSubMenu(theme)] = _isSubMenu,
-            _b[jsStyles.rootSubMenuEmpty(theme)] = _isSubMenu && emptyMarker,
-            _b[jsStyles.rootMinimized()] = isMinimized && !_isSubMenu,
-            _b[jsStyles.rootEmptyMinimized()] = emptyMarker && isMinimized && !_isSubMenu,
-            _b)) }, marker));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marker = void 0;
+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;