@skbkontur/side-menu 3.3.3 → 3.3.4

package/src/internal/Backdrop.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Backdrop = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var HideBodyVerticalScroll_1 = require("@skbkontur/react-ui/internal/HideBodyVerticalScroll");
-var react_ui_1 = require("@skbkontur/react-ui");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var Backdrop_styles_1 = require("./Backdrop.styles");
-var Backdrop = function (props) {
+import { __assign } from "tslib";
+import React from 'react';
+import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
+import { LIGHT_THEME } from '@skbkontur/react-ui/lib/theming/themes/LightTheme';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from './Backdrop.styles';
+export var Backdrop = function (props) {
     var _a;
-    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_a = {},
-            _a[Backdrop_styles_1.jsStyles.rootForTabletsOrMobiles()] = true,
-            _a)), style: tslib_1.__assign({ background: react_ui_1.LIGHT_THEME.sidePageBackingBg }, props.style) },
-        react_1.default.createElement(HideBodyVerticalScroll_1.HideBodyVerticalScroll, null)));
+    return (React.createElement("div", { className: cx((_a = {},
+            _a[jsStyles.rootForTabletsOrMobiles()] = true,
+            _a)), style: __assign({ background: LIGHT_THEME.sidePageBackingBg }, props.style) },
+        React.createElement(HideBodyVerticalScroll, null)));
 };
-exports.Backdrop = Backdrop;

package/src/internal/Backdrop.styles.js

@@ -1,13 +1,10 @@
-"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 SideMenu_1 = require("../SideMenu/SideMenu");
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { burgerTransitionDuration } from '../SideMenu/SideMenu';
 var styles = {
     rootForTabletsOrMobiles: function () {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "])), SideMenu_1.burgerTransitionDuration);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "])), burgerTransitionDuration);
     },
 };
-exports.jsStyles = (0, Emotion_1.memoizeStyle)(styles);
+export var jsStyles = memoizeStyle(styles);
 var templateObject_1;

package/src/internal/Burger.js

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Burger = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var UiMenuBars3HIcon24Regular_1 = require("@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular");
-var react_ui_1 = require("@skbkontur/react-ui");
-var SideMenuContext_1 = require("../SideMenuContext");
-var SideMenuDataTids_1 = require("../../SideMenuDataTids");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var Burger_styles_1 = require("./Burger.styles");
-var Burger = function () {
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    return (react_1.default.createElement("button", { className: Burger_styles_1.jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids_1.SideMenuDataTids.burger },
-        react_1.default.createElement(UiMenuBars3HIcon24Regular_1.UiMenuBars3HIcon24Regular, null)));
+import React, { useContext } from 'react';
+import { UiMenuBars3HIcon24Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { SideMenuContext } from '../SideMenuContext';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { jsStyles } from './Burger.styles';
+export var Burger = function () {
+    var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids.burger },
+        React.createElement(UiMenuBars3HIcon24Regular, null)));
 };
-exports.Burger = Burger;

package/src/internal/Burger.styles.js

@@ -1,14 +1,11 @@
-"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 Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+import { __makeTemplateObject } from "tslib";
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
     rootForTabletsOrMobiles: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      ", ";\n      margin-right: ", ";\n      cursor: pointer;\n    "], ["\n      ", ";\n      margin-right: ", ";\n      cursor: pointer;\n    "])), (0, Mixins_1.resetButton)(), t.sideMenuBurgerMarginRight);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      margin-right: ", ";\n      cursor: pointer;\n    "], ["\n      ", ";\n      margin-right: ", ";\n      cursor: pointer;\n    "])), resetButton(), t.sideMenuBurgerMarginRight);
     },
 };
-exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
+export var jsStyles = memoizeStyle(styles);
 var templateObject_1;

package/src/internal/ClickableElement.js

@@ -1,41 +1,38 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClickableElement = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var keyListener_1 = require("@skbkontur/react-ui/lib/events/keyListener");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var react_ui_1 = require("@skbkontur/react-ui");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenuContext_1 = require("../SideMenuContext");
-var useMemoIcon_1 = require("../../hooks/useMemoIcon");
-var SideMenuDataTids_1 = require("../../SideMenuDataTids");
-var Navigation_1 = require("../Navigation");
-var scripts_1 = require("../../lib/utils/scripts");
-var ClickableElement_styles_1 = require("./ClickableElement.styles");
-var SubMenu_1 = require("./SubMenu");
-var ItemContent_1 = require("./ItemContent/ItemContent");
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
+import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { SideMenuContext } from '../SideMenuContext';
+import { useMemoIcon } from '../../hooks/useMemoIcon';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { navigationAttribute } from '../Navigation';
+import { generateId } from '../../lib/utils/scripts';
+import { jsStyles } from './ClickableElement.styles';
+import { SubMenu } from './SubMenu';
+import { ItemContent } from './ItemContent/ItemContent';
 /**
  * Элемент списка (пункт меню либо ссылка)
  *
  * @visibleName ClickableElement
  */
-var ClickableElement = (0, react_1.forwardRef)(function (_a, ref) {
+var ClickableElement = forwardRef(function (_a, ref) {
     var _b, _c;
-    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = tslib_1.__rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    var _d = tslib_1.__read((0, react_1.useState)(false), 2), isActive = _d[0], setIsActive = _d[1];
-    var _e = tslib_1.__read((0, react_1.useState)(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
-    var _f = tslib_1.__read((0, react_1.useState)(false), 2), isOpened = _f[0], setIsOpened = _f[1];
-    var _g = tslib_1.__read((0, react_1.useState)(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
-    var _h = tslib_1.__read((0, react_1.useState)(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
-    var _j = tslib_1.__read((0, react_1.useState)(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
-    var _k = tslib_1.__read((0, react_1.useState)(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
-    (0, react_1.useEffect)(function () {
+    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
+    var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    var _d = __read(useState(false), 2), isActive = _d[0], setIsActive = _d[1];
+    var _e = __read(useState(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
+    var _f = __read(useState(false), 2), isOpened = _f[0], setIsOpened = _f[1];
+    var _g = __read(useState(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
+    var _h = __read(useState(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
+    var _j = __read(useState(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
+    var _k = __read(useState(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
+    useEffect(function () {
         var _a;
         if (!currentId) {
-            var generatedId = (0, scripts_1.generateId)();
+            var generatedId = generateId();
             setCurrentId(generatedId);
         }
         (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
@@ -103,7 +100,7 @@ var ClickableElement = (0, react_1.forwardRef)(function (_a, ref) {
     var handleFocus = function (e) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
         requestAnimationFrame(function () {
-            if (keyListener_1.keyListener.isTabPressed) {
+            if (keyListener.isTabPressed) {
                 setIsFocusedByTab(true);
             }
         });
@@ -124,25 +121,25 @@ var ClickableElement = (0, react_1.forwardRef)(function (_a, ref) {
         e.stopPropagation();
         (_d = (_c = (_b = (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.navigationTree) === null || _b === void 0 ? void 0 : _b.find(currentId)) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
     };
-    var newProps = tslib_1.__assign({ className: (0, Emotion_1.cx)((_b = {},
-            _b[ClickableElement_styles_1.jsStyles.root(theme)] = true,
-            _b[ClickableElement_styles_1.jsStyles.rootButton(theme)] = isButton,
-            _b[ClickableElement_styles_1.jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
-            _b[ClickableElement_styles_1.jsStyles.focusedRoot(theme)] = isFocusedByTab,
-            _b[ClickableElement_styles_1.jsStyles.disabledRoot(theme)] = disabled,
-            _b[ClickableElement_styles_1.jsStyles.activeRoot(theme)] = isHighlighted,
-            _b[ClickableElement_styles_1.jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
-            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (react_1.default.createElement(ItemContent_1.ItemContent, { _isSubMenu: _isSubMenu, 
+    var newProps = __assign({ className: cx((_b = {},
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootButton(theme)] = isButton,
+            _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
+            _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
+            _b[jsStyles.disabledRoot(theme)] = disabled,
+            _b[jsStyles.activeRoot(theme)] = isHighlighted,
+            _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
+            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, 
             // @ts-expect-error: SideMenuItem should have icon
-            icon: _isSubMenu && !_isBackButton ? (0, useMemoIcon_1.useMemoIcon)(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
-    return (react_1.default.createElement(Component, (_c = { "data-tid": SideMenuDataTids_1.SideMenuDataTids.clickableElement }, _c[Navigation_1.navigationAttribute] = currentId, _c),
-        react_1.default.cloneElement(react_1.default.createElement(Tag, { state: isActive ? 'active' : undefined }), children
-            ? tslib_1.__assign(tslib_1.__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : tslib_1.__assign({}, newProps)),
-        react_1.default.createElement(SubMenu_1.SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
-            react_1.default.createElement(SideMenuContext_1.SideMenuContext.Provider, { value: tslib_1.__assign({ hasSubIcons: hasSubIcons }, context) }, children))));
+            icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
+    return (React.createElement(Component, (_c = { "data-tid": SideMenuDataTids.clickableElement }, _c[navigationAttribute] = currentId, _c),
+        React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
+            ? __assign(__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : __assign({}, newProps)),
+        React.createElement(SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
+            React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubIcons }, context) }, children))));
 });
 ClickableElement.displayName = 'ClickableElement';
 var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
     __KONTUR_REACT_UI__: 'ClickableElement',
 });
-exports.ClickableElement = ClickableElementWithStaticFields;
+export { ClickableElementWithStaticFields as ClickableElement };

package/src/internal/ClickableElement.styles.js

@@ -1,32 +1,29 @@
-"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 Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+import { __makeTemplateObject } from "tslib";
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
     root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "])), (0, Mixins_1.resetButton)(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
     },
     rootButton: function (t) {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      &:active {\n        background: ", ";\n      }\n    "])), t.sideMenuItemActiveBg);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      &:active {\n        background: ", ";\n      }\n    "])), t.sideMenuItemActiveBg);
     },
     rootSubItemInSeparatedSubMenu: function (t) {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
     },
     focusedRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
     },
     disabledRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), t.sideMenuItemDisabledColor);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), t.sideMenuItemDisabledColor);
     },
     activeRoot: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
     },
     activeRootSubItemInSeparatedSubMenu: function (t) {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
     },
 };
-exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
+export var jsStyles = memoizeStyle(styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/InnerSubMenu.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerSubMenu = 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 SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
-var SideMenuContext_1 = require("../SideMenuContext");
+import React, { forwardRef, useContext } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
 /**
  * Подменю, раскрывающееся внутри основного меню
  *
  * @visibleName InnerSubMenu
  */
-var InnerSubMenu = (0, react_1.forwardRef)(function (_a, ref) {
+var InnerSubMenu = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, htmlId = _a.htmlId, isOpened = _a.isOpened;
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    return (react_1.default.createElement("ul", { ref: ref, id: htmlId, className: (0, Emotion_1.cx)((_b = {},
-            _b[SideMenu_styles_1.jsStylesForSideMenu.list()] = true,
-            _b[SideMenu_styles_1.jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
+    var context = useContext(SideMenuContext);
+    return (React.createElement("ul", { ref: ref, id: htmlId, className: cx((_b = {},
+            _b[jsStylesForSideMenu.list()] = true,
+            _b[jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
             _b)) }, children));
 });
 InnerSubMenu.displayName = 'InnerSubMenu';
 var InnerSubMenuWithStaticFields = Object.assign(InnerSubMenu, { __KONTUR_REACT_UI__: 'InnerSubMenu' });
-exports.InnerSubMenu = InnerSubMenuWithStaticFields;
+export { InnerSubMenuWithStaticFields as InnerSubMenu };

package/src/internal/ItemContent/Caption.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Caption = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
-var react_1 = tslib_1.__importStar(require("react"));
-var SideMenuContext_1 = require("../../SideMenuContext");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-var Caption_styles_1 = require("./Caption.styles");
+import { __read } from "tslib";
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { SideMenuContext } from '../../SideMenuContext';
+import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+import { jsStyles } from './Caption.styles';
 var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
-    var _a = tslib_1.__read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
+    var _a = __read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
     if (visibleWidth < fullWidth && lastName) {
         return "".concat(firstName, " ").concat(lastName[0], ".");
     }
@@ -24,15 +21,15 @@ var getCaptionTail = function (caption, visibleWidth, fullWidth) {
     }
     return '';
 };
-exports.Caption = (0, react_1.forwardRef)(function (_a, ref) {
+export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
     var _isSubMenu = _a._isSubMenu, isNestedSubMenu = _a.isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
-    var _d = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
-    var captionRef = (0, react_1.useRef)(null);
-    var _e = tslib_1.__read((0, react_1.useState)(''), 2), tail = _e[0], setTail = _e[1];
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
+    var captionRef = useRef(null);
+    var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
     var isCaptionPlainText = typeof caption === 'string';
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
             return;
         }
@@ -52,26 +49,26 @@ exports.Caption = (0, react_1.forwardRef)(function (_a, ref) {
         return _isAvatar && userName.split(' ').length === 1;
     };
     var Component = isCaptionPlainText ? 'p' : 'div';
-    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_b = {},
-            _b[Caption_styles_1.jsStyles.root()] = true,
-            _b[Caption_styles_1.jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
+    return (React.createElement("div", { className: cx((_b = {},
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b)), ref: ref },
-        react_1.default.createElement(Component, { className: (0, Emotion_1.cx)((_c = {},
-                _c[Caption_styles_1.jsStyles.caption(theme)] = true,
-                _c[Caption_styles_1.jsStyles.captionDropdown()] = _isDropdown,
-                _c[Caption_styles_1.jsStyles.captionTruncated()] = isCaptionPlainText &&
+        React.createElement(Component, { className: cx((_c = {},
+                _c[jsStyles.caption(theme)] = true,
+                _c[jsStyles.captionDropdown()] = _isDropdown,
+                _c[jsStyles.captionTruncated()] = isCaptionPlainText &&
                     _isDropdown &&
                     (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
-                _c[Caption_styles_1.jsStyles.captionSubItem(theme)] = _isSubMenu,
-                _c[Caption_styles_1.jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
-                _c[Caption_styles_1.jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
-                _c[Caption_styles_1.jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
-                _c[Caption_styles_1.jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
-                _c[Caption_styles_1.jsStyles.captionLarge(theme)] = size === 'large',
-                _c[Caption_styles_1.jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
-                _c[Caption_styles_1.jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
-                _c[Caption_styles_1.jsStyles.captionInBackButton(theme)] = _isBackButton,
+                _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
+                _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
+                _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
+                _c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
+                _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
+                _c[jsStyles.captionLarge(theme)] = size === 'large',
+                _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
+                _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
+                _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
                 _c)), ref: captionRef, "data-tail": tail }, caption),
         subCaption));
 });
-exports.Caption.displayName = 'Caption';
+Caption.displayName = 'Caption';

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

@@ -1,54 +1,51 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsStyles = exports.sideMenuCaptionMarginRight = exports.sideMenuMultilineCaptionPaddingTop = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
-exports.sideMenuMultilineCaptionPaddingTop = '4px';
-exports.sideMenuCaptionMarginRight = '8px';
+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 (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_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    "])));
+        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    "])));
     },
     rootMultiline: function () {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), exports.sideMenuMultilineCaptionPaddingTop);
+        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);
     },
     caption: function (t) {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__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, exports.sideMenuCaptionMarginRight);
+        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);
     },
     captionForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
+        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);
     },
     captionSubItem: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
     },
     captionSubItemForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
+        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);
     },
     captionSubItemSeparatedMenuTopLevel: function () {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
     },
     captionNestedItemSeparatedMenu: function () {
-        return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
     },
     captionWithoutItemIcon: function () {
-        return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
     captionSubItemWithoutColumnIcons: function () {
-        return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
     captionLarge: function (t) {
-        return (0, Emotion_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
+        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);
     },
     captionInBackButton: function (t) {
-        return (0, Emotion_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__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);
+        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);
     },
     captionDropdown: function () {
-        return (0, Emotion_1.css)(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
     },
     captionTruncated: function () {
-        return (0, Emotion_1.css)(templateObject_14 || (templateObject_14 = tslib_1.__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    "])));
+        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    "])));
     },
 };
-exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
+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;

package/src/internal/ItemContent/Icon.js

@@ -1,14 +1,10 @@
-"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");
+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) {
     if (!_isSubMenu) {
         return parseInt(theme.sideMenuIconSize);
@@ -17,16 +13,16 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
         return parseInt(theme.sideMenuIconSubItemSize);
     }
 };
-var Icon = function (_a) {
+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 = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    var context = useContext(SideMenuContext);
     var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var renderIcon = function () {
         var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
-        if ((0, scripts_1.isKonturIcon)(icon)) {
-            return react_1.default.cloneElement(icon, {
+        if (isKonturIcon(icon)) {
+            return React.cloneElement(icon, {
                 size: getIconSize(theme, _isSubMenu, _isBackButton),
                 color: iconColor,
                 align: _isBackButton ? 'baseline' : 'none',
@@ -34,14 +30,13 @@ 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,
+    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()));
 };
-exports.Icon = Icon;