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

package/src/internal/ClickableElement.js

@@ -1,148 +1,156 @@
 "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");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const keyListener_1 = require("@skbkontur/react-ui/lib/events/keyListener");
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenuContext_1 = require("../SideMenuContext");
+const useMemoIcon_1 = require("../../hooks/useMemoIcon");
+const SideMenuDataTids_1 = require("../../SideMenuDataTids");
+const Navigation_1 = require("../Navigation");
+const scripts_1 = require("../../lib/utils/scripts");
+const ClickableElement_styles_1 = require("./ClickableElement.styles");
+const SubMenu_1 = require("./SubMenu");
+const ItemContent_1 = require("./ItemContent/ItemContent");
 /**
  * Элемент списка (пункт меню либо ссылка)
  *
  * @visibleName ClickableElement
  */
-var ClickableElement = (0, react_1.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 _a;
+const ClickableElement = (0, react_1.forwardRef)(({ onClick, icon, marker, caption, subCaption, id, _isSubMenu, children, element: Tag, onKeyDown, onFocus, onBlur, className, _isDropdown, _isBackButton, _isAvatar, isButton, href, disabled, ...rest }, ref) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const [isActive, setIsActive] = (0, react_1.useState)(false);
+    const [isFirstLevelParentOfActiveMenuItem, setIsFirstLevelParentOfActiveMenuItem] = (0, react_1.useState)(false);
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [isNestedSubMenu, setIsNestedSubMenu] = (0, react_1.useState)(false);
+    const [hasSubIcons, setHasSubIcons] = (0, react_1.useState)(false);
+    const [isFocusedByTab, setIsFocusedByTab] = (0, react_1.useState)(false);
+    const [currentId, setCurrentId] = (0, react_1.useState)(id || href || '');
+    (0, react_1.useEffect)(() => {
         if (!currentId) {
-            var generatedId = (0, scripts_1.generateId)();
+            const generatedId = (0, scripts_1.generateId)();
             setCurrentId(generatedId);
         }
-        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
-            setIsActive: setIsActive,
-            setIsOpened: setIsOpened,
+        context.navigation?.addValue(currentId, {
+            setIsActive,
+            setIsOpened,
             isSubMenu: _isSubMenu,
-            setIsNestedSubMenu: setIsNestedSubMenu,
-            setHasSubIcons: setHasSubIcons,
-            setIsFirstLevelParentOfActiveMenuItem: setIsFirstLevelParentOfActiveMenuItem,
+            setIsNestedSubMenu,
+            setHasSubIcons,
+            setIsFirstLevelParentOfActiveMenuItem,
         });
-        return function () {
-            var _a;
-            (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.updateNavigationTree();
+        return () => {
+            context.navigation?.updateNavigationTree();
         };
     });
-    var toggleIsShown = function (lastElementInTheHierarchy) {
-        var _a;
+    const toggleIsShown = (lastElementInTheHierarchy) => {
         if ((context.isMobile || context.isTablet) && lastElementInTheHierarchy) {
-            (_a = context.toggleIsOpened) === null || _a === void 0 ? void 0 : _a.call(context);
+            context.toggleIsOpened?.();
         }
     };
-    var setIsMinimized = function (lastElementInTheHierarchy) {
-        var _a, _b;
+    const setIsMinimized = (lastElementInTheHierarchy) => {
         if (context.isMobile || context.isTablet || (context.isDesktop && !context.isCollapsable)) {
             return;
         }
-        var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
+        const topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
         if (context.isCollapsable && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
-            (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
+            context.setIsMinimized?.(true);
         }
         if (!_isSubMenu) {
-            (_b = context.setIsMinimized) === null || _b === void 0 ? void 0 : _b.call(context, false);
+            context.setIsMinimized?.(false);
         }
     };
-    var setMouseIsOutside = function (lastElementInTheHierarchy) {
-        var _a;
+    const setMouseIsOutside = (lastElementInTheHierarchy) => {
         if (lastElementInTheHierarchy) {
-            (_a = context.setIsMouseOutside) === null || _a === void 0 ? void 0 : _a.call(context, true);
+            context.setIsMouseOutside?.(true);
         }
     };
-    var handleClick = function (e) {
-        var _a, _b, _c, _d, _e, _f, _g;
+    const handleClick = (e) => {
         if (disabled) {
             return;
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        onClick?.(e);
         if (_isBackButton || _isDropdown) {
             return;
         }
-        var item = (_b = (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.navigationTree) === null || _b === void 0 ? void 0 : _b.find(currentId);
-        if (isButton && !(item === null || item === void 0 ? void 0 : item.hasChildren)) {
+        const item = context.navigation?.navigationTree?.find(currentId);
+        if (isButton && !item?.hasChildren) {
             return;
         }
-        if (isOpened && !((_c = item === null || item === void 0 ? void 0 : item.value) === null || _c === void 0 ? void 0 : _c.isSubMenu) && !context.isSeparatedMenu) {
-            (_d = item === null || item === void 0 ? void 0 : item.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
+        if (isOpened && !item?.value?.isSubMenu && !context.isSeparatedMenu) {
+            item?.value?.setIsOpened(false);
         }
         else {
-            (_e = context.navigation) === null || _e === void 0 ? void 0 : _e.switchActiveMenuItem(currentId, isButton);
-            var lastElementInTheHierarchy = !_isDropdown && !_isBackButton && !((_g = (_f = context.navigation) === null || _f === void 0 ? void 0 : _f.activeMenuItemTreeNode) === null || _g === void 0 ? void 0 : _g.hasChildren);
+            context.navigation?.switchActiveMenuItem(currentId, isButton);
+            const lastElementInTheHierarchy = !_isDropdown && !_isBackButton && !context.navigation?.activeMenuItemTreeNode?.hasChildren;
             toggleIsShown(lastElementInTheHierarchy);
             setIsMinimized(lastElementInTheHierarchy);
             setMouseIsOutside(lastElementInTheHierarchy);
         }
     };
-    var handleFocus = function (e) {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-        requestAnimationFrame(function () {
+    const handleFocus = (e) => {
+        onFocus?.(e);
+        requestAnimationFrame(() => {
             if (keyListener_1.keyListener.isTabPressed) {
                 setIsFocusedByTab(true);
             }
         });
     };
-    var handleBlur = function (e) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    const handleBlur = (e) => {
+        onBlur?.(e);
         setIsFocusedByTab(false);
     };
-    var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
-    var isHighlighted = isActive ||
+    const Component = _isSubMenu || _isDropdown ? 'div' : 'li';
+    const isHighlighted = isActive ||
         (isFirstLevelParentOfActiveMenuItem && !context.isOpened && context.isCollapsable) ||
         (isFirstLevelParentOfActiveMenuItem && context.isSeparatedMenu);
-    var handleCollapse = function (e) {
-        var _a, _b, _c, _d;
+    const handleCollapse = (e) => {
         if (disabled) {
             return;
         }
         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);
+        context.navigation?.navigationTree?.find(currentId)?.value?.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, 
+    const newProps = {
+        className: (0, Emotion_1.cx)({
+            [ClickableElement_styles_1.jsStyles.root(theme)]: true,
+            [ClickableElement_styles_1.jsStyles.rootButton(theme)]: isButton,
+            [ClickableElement_styles_1.jsStyles.rootSubItemInSeparatedSubMenu(theme)]: context.isSeparatedMenu && _isSubMenu,
+            [ClickableElement_styles_1.jsStyles.focusedRoot(theme)]: isFocusedByTab,
+            [ClickableElement_styles_1.jsStyles.disabledRoot(theme)]: disabled,
+            [ClickableElement_styles_1.jsStyles.activeRoot(theme)]: isHighlighted,
+            [ClickableElement_styles_1.jsStyles.activeRootSubItemInSeparatedSubMenu(theme)]: isActive && context.isSeparatedMenu && _isSubMenu,
+        }, className),
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: (react_1.default.createElement(ItemContent_1.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),
+            icon: _isSubMenu && !_isBackButton ? (0, useMemoIcon_1.useMemoIcon)(children, { isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })),
+        ref,
+        href,
+        ...rest,
+    };
+    return (react_1.default.createElement(Component, { "data-tid": SideMenuDataTids_1.SideMenuDataTids.clickableElement, [Navigation_1.navigationAttribute]: currentId },
         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)),
+            ? {
+                ...newProps,
+                'aria-expanded': children ? isOpened : undefined,
+                'aria-controls': children ? currentId : undefined,
+            }
+            : { ...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))));
+            react_1.default.createElement(SideMenuContext_1.SideMenuContext.Provider, { value: {
+                    hasSubIcons,
+                    ...context,
+                } }, children))));
 });
 ClickableElement.displayName = 'ClickableElement';
-var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
+const ClickableElementWithStaticFields = Object.assign(ClickableElement, {
     __KONTUR_REACT_UI__: 'ClickableElement',
 });
 exports.ClickableElement = ClickableElementWithStaticFields;

package/src/internal/ClickableElement.styles.js

@@ -1,32 +1,56 @@
 "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");
-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);
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      user-select: text;
+      ${(0, Mixins_1.resetButton)()};
+      width: 100%;
+      border-radius: ${t.sideMenuItemBorderRadius};
+      cursor: pointer;
+      &:hover {
+        background: ${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);
+    rootButton(t) {
+        return (0, Emotion_1.css) `
+      &:active {
+        background: ${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);
+    rootSubItemInSeparatedSubMenu(t) {
+        return (0, Emotion_1.css) `
+      &:hover {
+        background: ${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);
+    focusedRoot(t) {
+        return (0, Emotion_1.css) `
+      box-shadow: ${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);
+    disabledRoot(t) {
+        return (0, Emotion_1.css) `
+      color: ${t.sideMenuItemDisabledColor};
+      pointer-events: none;
+    `;
     },
-    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);
+    activeRoot(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuItemActiveBg} !important;
+    `;
     },
-    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);
+    activeRootSubItemInSeparatedSubMenu(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuSubItemWithSeparatedSubMenuActiveBg} !important;
+    `;
     },
 };
 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/InnerSubMenu.js

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

package/src/internal/ItemContent/Caption.js

@@ -1,44 +1,42 @@
 "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");
-var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
-    var _a = tslib_1.__read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
+const tslib_1 = require("tslib");
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const react_1 = tslib_1.__importStar(require("react"));
+const SideMenuContext_1 = require("../../SideMenuContext");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
+const Caption_styles_1 = require("./Caption.styles");
+const getTruncatedUserName = (caption, visibleWidth, fullWidth) => {
+    const [firstName, lastName] = caption.split(' ');
     if (visibleWidth < fullWidth && lastName) {
-        return "".concat(firstName, " ").concat(lastName[0], ".");
+        return `${firstName} ${lastName[0]}.`;
     }
     return caption;
 };
-var getCaptionTail = function (caption, visibleWidth, fullWidth) {
+const getCaptionTail = (caption, visibleWidth, fullWidth) => {
     if (visibleWidth < fullWidth) {
-        var symbolsCount = caption.length;
-        var symbolLength = fullWidth / symbolsCount;
-        var halfVisibleSymbols = visibleWidth / symbolLength / 2;
+        const symbolsCount = caption.length;
+        const symbolLength = fullWidth / symbolsCount;
+        const halfVisibleSymbols = visibleWidth / symbolLength / 2;
         return caption.slice(symbolsCount - halfVisibleSymbols);
     }
     return '';
 };
-exports.Caption = (0, react_1.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 isCaptionPlainText = typeof caption === 'string';
-    (0, react_1.useEffect)(function () {
+exports.Caption = (0, react_1.forwardRef)(({ _isSubMenu, isNestedSubMenu, hasIcon, caption, subCaption, isMultiline, _isBackButton, _isDropdown, _isAvatar }, ref) => {
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const { isBeingTransitioned, isSeparatedMenu, size, isTouchScreen, hasSubIcons } = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const captionRef = (0, react_1.useRef)(null);
+    const [tail, setTail] = (0, react_1.useState)('');
+    const isCaptionPlainText = typeof caption === 'string';
+    (0, react_1.useEffect)(() => {
         if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
             return;
         }
         captionRef.current.innerText = caption;
-        var fullWidth = captionRef.current.scrollWidth;
-        var visibleWidth = captionRef.current.offsetWidth;
+        const fullWidth = captionRef.current.scrollWidth;
+        const visibleWidth = captionRef.current.offsetWidth;
         if (_isAvatar) {
             captionRef.current.innerText = getTruncatedUserName(caption, visibleWidth, fullWidth);
         }
@@ -46,32 +44,30 @@ exports.Caption = (0, react_1.forwardRef)(function (_a, ref) {
             setTail(getCaptionTail(caption, visibleWidth, fullWidth));
         }
     }, [isBeingTransitioned, caption]);
-    var isAvatarCaptionSingleWord = function (userName, _isAvatar) {
-        if (userName === void 0) { userName = ''; }
-        if (_isAvatar === void 0) { _isAvatar = false; }
+    const isAvatarCaptionSingleWord = (userName = '', _isAvatar = false) => {
         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,
-            _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 &&
+    const Component = isCaptionPlainText ? 'p' : 'div';
+    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+            [Caption_styles_1.jsStyles.root()]: true,
+            [Caption_styles_1.jsStyles.rootMultiline()]: isMultiline && !_isSubMenu,
+        }), ref: ref },
+        react_1.default.createElement(Component, { className: (0, Emotion_1.cx)({
+                [Caption_styles_1.jsStyles.caption(theme)]: true,
+                [Caption_styles_1.jsStyles.captionDropdown()]: _isDropdown,
+                [Caption_styles_1.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)), ref: captionRef, "data-tail": tail }, caption),
+                [Caption_styles_1.jsStyles.captionSubItem(theme)]: _isSubMenu,
+                [Caption_styles_1.jsStyles.captionSubItemSeparatedMenuTopLevel()]: isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
+                [Caption_styles_1.jsStyles.captionNestedItemSeparatedMenu()]: isSeparatedMenu && isNestedSubMenu && !hasIcon,
+                [Caption_styles_1.jsStyles.captionWithoutItemIcon()]: !hasIcon && !isSeparatedMenu,
+                [Caption_styles_1.jsStyles.captionSubItemWithoutColumnIcons()]: _isSubMenu && isSeparatedMenu && !hasSubIcons,
+                [Caption_styles_1.jsStyles.captionLarge(theme)]: size === 'large',
+                [Caption_styles_1.jsStyles.captionForTouchScreens(theme)]: isTouchScreen,
+                [Caption_styles_1.jsStyles.captionSubItemForTouchScreens(theme)]: isTouchScreen && _isSubMenu,
+                [Caption_styles_1.jsStyles.captionInBackButton(theme)]: _isBackButton,
+            }), ref: captionRef, "data-tail": tail }, caption),
         subCaption));
 });
 exports.Caption.displayName = 'Caption';

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

@@ -1,54 +1,99 @@
 "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");
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
 exports.sideMenuMultilineCaptionPaddingTop = '4px';
 exports.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    "])));
+const styles = {
+    root() {
+        return (0, Emotion_1.css) `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    `;
     },
-    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);
+    rootMultiline() {
+        return (0, Emotion_1.css) `
+      padding-top: ${exports.sideMenuMultilineCaptionPaddingTop};
+      align-self: flex-start;
+    `;
     },
-    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);
+    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 (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);
+    captionForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionFontSizeForTouchScreens};
+      line-height: ${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);
+    captionSubItem(t) {
+        return (0, Emotion_1.css) `
+      margin-left: ${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);
+    captionSubItemForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionSubItemFontSizeForTouchScreens};
+      line-height: ${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    "])));
+    captionSubItemSeparatedMenuTopLevel() {
+        return (0, Emotion_1.css) `
+      margin: 0 8px;
+    `;
     },
-    captionNestedItemSeparatedMenu: function () {
-        return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
+    captionNestedItemSeparatedMenu() {
+        return (0, Emotion_1.css) `
+      margin-left: 25px;
+    `;
     },
-    captionWithoutItemIcon: function () {
-        return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+    captionWithoutItemIcon() {
+        return (0, Emotion_1.css) `
+      margin-left: 40px;
+    `;
     },
-    captionSubItemWithoutColumnIcons: function () {
-        return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+    captionSubItemWithoutColumnIcons() {
+        return (0, Emotion_1.css) `
+      margin-left: 8px;
+    `;
     },
-    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);
+    captionLarge(t) {
+        return (0, Emotion_1.css) `
+      font-size: ${t.sideMenuCaptionLargeFontSize} !important;
+      line-height: ${t.sideMenuCaptionLargeLineHeight} !important;
+    `;
     },
-    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);
+    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 (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    "])));
+    captionDropdown() {
+        return (0, Emotion_1.css) `
+      white-space: nowrap;
+      overflow: hidden;
+    `;
     },
-    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    "])));
+    captionTruncated() {
+        return (0, Emotion_1.css) `
+      text-overflow: ellipsis;
+      &::before {
+        float: right;
+        content: attr(data-tail);
+      }
+    `;
     },
 };
 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, templateObject_12, templateObject_13, templateObject_14;