@skbkontur/side-menu 3.3.8 → 3.4.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.4.0](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.3.8...@skbkontur/side-menu@3.4.0) (2025-10-14)
+
+
+### Features
+
+* **SideMenu:** add `noWrap` prop that disables wrapping on caption overflow ([797dc24](https://git.skbkontur.ru/ui/ui-parking-2/commits/797dc24db095631e7d9e589fbcf585ee75ba8b93))
+
+
+
+
+
 ## [3.3.8](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.3.7...@skbkontur/side-menu@3.3.8) (2025-10-02)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/internal/themes/SideMenuTheme.d.ts

@@ -37,6 +37,9 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static get sideMenuCaptionSubItemLineHeightForTouchScreens(): string;
     static sideMenuCaptionLargeFontSize: string;
     static get sideMenuCaptionLargeLineHeight(): string;
+    static sideMenuCaptionMultilinePaddingTop: string;
+    static sideMenuCaptionMarginRight: string;
+    static sideMenuCaptionNoWrapWithMarkerMarginRight: string;
     static sideMenuBackButtonCaptionFontWeight: string;
     static sideMenuBackButtonCaptionFontSize: string;
     static sideMenuBackButtonCaptionLineHeight: string;

package/internal/themes/SideMenuTheme.js

@@ -171,6 +171,9 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuCaptionSubItemMarginLeft = '4px';
     SideMenuTheme.sideMenuCaptionSubItemFontSizeForTouchScreens = '16px';
     SideMenuTheme.sideMenuCaptionLargeFontSize = '16px';
+    SideMenuTheme.sideMenuCaptionMultilinePaddingTop = '4px';
+    SideMenuTheme.sideMenuCaptionMarginRight = '8px';
+    SideMenuTheme.sideMenuCaptionNoWrapWithMarkerMarginRight = '4px';
     //#endregion
     // #region BackButton
     SideMenuTheme.sideMenuBackButtonCaptionFontWeight = '700';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "3.3.8",
+  "version": "3.4.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/internal/ClickableElement.d.ts

@@ -10,6 +10,8 @@ export interface CommonClickableElementProps extends CommonProps {
     id?: string;
     isButton?: boolean;
     disabled?: boolean;
+    /** Отключает перенос строки у заголовка элемента, вместо этого он будет обрезаться многоточием */
+    noWrap?: boolean;
     /** @ignore */
     _isSubMenu?: boolean;
     /** @ignore */

package/src/internal/ClickableElement.js

@@ -19,7 +19,7 @@ import { ItemContent } from './ItemContent/ItemContent';
  */
 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 = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
+    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, noWrap = _a.noWrap, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled", "noWrap"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var _d = __read(useState(false), 2), isActive = _d[0], setIsActive = _d[1];
@@ -131,7 +131,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
             _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 ? 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);
+            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, noWrap: noWrap })), 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)),

package/src/internal/ItemContent/Caption.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'caption' | '_isBackButton' | '_isDropdown' | '_isAvatar' | 'subCaption'> {
+interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'caption' | 'subCaption' | '_isBackButton' | '_isDropdown' | '_isAvatar'> {
     hasIcon: boolean;
+    hasMarker: boolean;
     isMultiline: boolean;
     isNestedSubMenu?: boolean;
+    noWrap?: boolean;
 }
 export declare const Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLParagraphElement>>;
 export {};

package/src/internal/ItemContent/Caption.js

@@ -23,12 +23,13 @@ var getCaptionTail = function (caption, visibleWidth, fullWidth) {
 };
 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 _isSubMenu = _a._isSubMenu, isNestedSubMenu = _a.isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, hasIcon = _a.hasIcon, hasMarker = _a.hasMarker, isMultiline = _a.isMultiline, noWrap = _a.noWrap, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     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 isLarge = size === 'large';
+    var isCaptionPlainText = typeof caption === 'string';
     var captionRef = useRef(null);
     var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
-    var isCaptionPlainText = typeof caption === 'string';
     useEffect(function () {
         if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
             return;
@@ -51,7 +52,7 @@ export var Caption = forwardRef(function (_a, ref) {
     var Component = isCaptionPlainText ? 'p' : 'div';
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
+            _b[jsStyles.rootMultiline(theme)] = isMultiline && !noWrap && !_isSubMenu,
             _b)), ref: ref },
         React.createElement(Component, { className: cx((_c = {},
                 _c[jsStyles.caption(theme)] = true,
@@ -64,10 +65,12 @@ export var Caption = forwardRef(function (_a, ref) {
                 _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.captionLarge(theme)] = isLarge,
                 _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
                 _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
                 _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
+                _c[jsStyles.captionNoWrap()] = noWrap,
+                _c[jsStyles.captionNoWrapWithMarker(theme)] = noWrap && hasMarker,
                 _c)), ref: captionRef, "data-tail": tail }, caption),
         subCaption));
 });

package/src/internal/ItemContent/Caption.styles.d.ts

@@ -1,9 +1,11 @@
 import type { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
+/** @deprecated Эта переменная модуля появилась в теме и будет удалена в 4.0 */
 export declare const sideMenuMultilineCaptionPaddingTop = "4px";
+/** @deprecated Эта переменная модуля появилась в теме и будет удалена в 4.0 */
 export declare const sideMenuCaptionMarginRight = "8px";
 export declare const jsStyles: {
     root(): string;
-    rootMultiline(): string;
+    rootMultiline(t: SideMenuTheme): string;
     caption(t: SideMenuTheme): string;
     captionForTouchScreens(t: SideMenuTheme): string;
     captionSubItem(t: SideMenuTheme): string;
@@ -16,4 +18,6 @@ export declare const jsStyles: {
     captionInBackButton(t: SideMenuTheme): string;
     captionDropdown(): string;
     captionTruncated(): string;
+    captionNoWrap(): string;
+    captionNoWrapWithMarker(t: SideMenuTheme): string;
 };

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

@@ -1,17 +1,19 @@
 import { __makeTemplateObject } from "tslib";
 import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
+/** @deprecated Эта переменная модуля появилась в теме и будет удалена в 4.0 */
 export var sideMenuMultilineCaptionPaddingTop = '4px';
+/** @deprecated Эта переменная модуля появилась в теме и будет удалена в 4.0 */
 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    "])));
     },
-    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: function (t) {
+        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    "])), t.sideMenuCaptionMultilinePaddingTop);
     },
     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);
+        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, t.sideMenuCaptionMarginRight);
     },
     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);
@@ -46,6 +48,12 @@ var styles = {
     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    "])));
     },
+    captionNoWrap: function () {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+    },
+    captionNoWrapWithMarker: function (t) {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      margin: 0 ", " 0 0;\n    "], ["\n      margin: 0 ", " 0 0;\n    "])), t.sideMenuCaptionNoWrapWithMarkerMarginRight);
+    },
 };
 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;
+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, templateObject_15, templateObject_16;

package/src/internal/ItemContent/Icon.d.ts

@@ -1,6 +1,6 @@
 import type { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton' | '_isAvatar' | 'disabled'> {
+interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | 'disabled' | '_isBackButton' | '_isAvatar'> {
     isMultiline: boolean;
 }
-export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton, disabled }: IconProps) => JSX.Element;
+export declare const Icon: ({ _isSubMenu, icon, isMultiline, disabled, _isBackButton }: IconProps) => JSX.Element;
 export {};

package/src/internal/ItemContent/Icon.js

@@ -15,9 +15,10 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
 };
 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 _isSubMenu = _a._isSubMenu, icon = _a.icon, isMultiline = _a.isMultiline, disabled = _a.disabled, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c;
     var context = useContext(SideMenuContext);
     var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
+    var isLarge = size === 'large';
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var renderIcon = function () {
         var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
@@ -30,13 +31,12 @@ export var Icon = function (_a) {
         }
         return icon;
     };
-    return (React.createElement("span", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
+    return (React.createElement("span", { className: cx(jsStyles.root(theme), (_b = {},
             _b[jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
-            _b[jsStyles.rootLarge(theme)] = size === 'large',
+            _b[jsStyles.rootLarge(theme)] = isLarge,
             _b[jsStyles.rootSubItem(theme)] = _isSubMenu,
             _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
-            _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
+            _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && isLarge,
             _b[jsStyles.rootBackButton(theme)] = _isBackButton,
             _b)) }, renderIcon()));
 };

package/src/internal/ItemContent/ItemContent.js

@@ -26,13 +26,18 @@ var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
 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 _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, noWrap = _a.noWrap;
     var context = useContext(SideMenuContext);
     var size = context.size, isTouchScreen = context.isTouchScreen;
     var textRef = useRef(null);
+    var isLarge = size === 'large';
     var _e = __read(useState(false), 2), isMultiline = _e[0], setIsMultiline = _e[1];
     var theme = getSideMenuTheme(useContext(ThemeContext));
     useEffect(function () {
+        if (noWrap) {
+            setIsMultiline(false);
+            return;
+        }
         if (subCaption) {
             setIsMultiline(true);
             return;
@@ -41,29 +46,26 @@ var ItemContent = forwardRef(function (_a, ref) {
             return;
         }
         var captionLineHeight = getCaptionLineHeight(theme, context.isTouchScreen, _isSubMenu, size);
-        var isMultiline = parseInt(captionLineHeight) < textRef.current.offsetHeight;
-        if (isMultiline) {
-            setIsMultiline(true);
-        }
+        setIsMultiline(parseInt(captionLineHeight) < textRef.current.offsetHeight);
     }, [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.rootLarge(theme)] = isLarge,
             _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.subItemRootLarge(theme)] = _isSubMenu && isLarge,
+            _b[jsStyles.multilineRoot(theme)] = isMultiline && !noWrap && !_isSubMenu && context.isOpened,
+            _b[jsStyles.multilineRootLarge(theme)] = isMultiline && !noWrap && isLarge,
             _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 })),
+        icon && (React.createElement(Icon, { _isSubMenu: _isSubMenu, icon: icon, isMultiline: isMultiline, disabled: disabled, _isBackButton: _isBackButton, _isAvatar: _isAvatar })),
         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 }))));
+            React.createElement(Caption, { _isSubMenu: _isSubMenu, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, hasIcon: !!icon, hasMarker: !!marker, isMultiline: isMultiline, noWrap: noWrap, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef })),
+        marker && (React.createElement(Marker, { _isSubMenu: _isSubMenu, marker: marker, isMultiline: isMultiline, isMinimized: !context.isOpened, disabled: disabled }))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

package/src/internal/ItemContent/ItemContent.styles.d.ts

@@ -1,13 +1,13 @@
 import type { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
-    largeRoot(t: SideMenuTheme): string;
-    subItemLargeRoot(t: SideMenuTheme): string;
+    rootLarge(t: SideMenuTheme): string;
+    subItemRoot(t: SideMenuTheme): string;
+    subItemRootLarge(t: SideMenuTheme): string;
     multilineRoot(t: SideMenuTheme): string;
-    largeMultilineRoot(t: SideMenuTheme): string;
+    multilineRootLarge(t: SideMenuTheme): string;
     rootForTouchScreens(t: SideMenuTheme): string;
     subItemRootForTouchScreens(t: SideMenuTheme): string;
-    subItemRoot(t: SideMenuTheme): string;
     textAndMarkerWrapper(): string;
     textAndMarkerWrapperDropdown(): string;
     textAndMarkerWrapperMinimized(): string;

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

@@ -5,26 +5,26 @@ 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);
     },
-    largeRoot: function (t) {
+    rootLarge: 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);
     },
-    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);
+    subItemRoot: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
+    },
+    subItemRootLarge: 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.sideMenuSubItemContentLargePaddingY, t.sideMenuSubItemContentLargePaddingY);
     },
     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);
+        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.sideMenuItemContentMultilinePaddingTop, t.sideMenuItemContentMultilinePaddingBottom);
     },
-    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);
+    multilineRootLarge: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentLargeMultilinePaddingTop, t.sideMenuItemContentLargeMultilinePaddingBottom);
     },
     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);
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingYForTouchScreens, 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);
-    },
-    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);
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
     },
     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    "])));

package/src/internal/ItemContent/Marker.d.ts

@@ -1,7 +1,7 @@
 import type { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface MarkerProps extends Pick<SideMenuItemProps, 'marker' | '_isSubMenu' | 'disabled'> {
+interface MarkerProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'marker' | 'disabled'> {
     isMultiline: boolean;
     isMinimized?: boolean;
 }
-export declare const Marker: ({ isMultiline, marker, _isSubMenu, disabled, isMinimized }: MarkerProps) => JSX.Element;
+export declare const Marker: ({ _isSubMenu, marker, isMultiline, isMinimized, disabled }: MarkerProps) => JSX.Element;
 export {};

package/src/internal/ItemContent/Marker.js

@@ -5,11 +5,10 @@ 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 _isSubMenu = _a._isSubMenu, marker = _a.marker, isMultiline = _a.isMultiline, isMinimized = _a.isMinimized, disabled = _a.disabled;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var emptyMarker = marker === true || marker === '';
-    return (React.createElement("span", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
+    return (React.createElement("span", { className: cx(jsStyles.root(theme), (_b = {},
             _b[jsStyles.rootDisabled(theme)] = disabled,
             _b[jsStyles.rootEmpty(theme)] = emptyMarker,
             _b[jsStyles.rootMultiline(theme)] = isMultiline,