@skbkontur/side-menu 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.9.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.8.1...@skbkontur/side-menu@0.9.0) (2023-05-02)
+
+
+### Features
+
+* **SideMenu:** add subCaption prop ([9776fb4](https://git.skbkontur.ru/ui/ui-parking/commits/9776fb4e013a1c5353c660e89010c7a0841b0fd0))
+
+
+
+
+
+## [0.8.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.8.0...@skbkontur/side-menu@0.8.1) (2023-04-19)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 # [0.8.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.7.4...@skbkontur/side-menu@0.8.0) (2023-03-31)
 
 

package/hooks/useNumberOfTextLinesInSubItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>) => void;
+export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>, size?: string) => void;

package/hooks/useNumberOfTextLinesInSubItem.js

@@ -1,9 +1,10 @@
-export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText) {
+export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText, size) {
+    if (size === void 0) { size = 'small'; }
     if (textRef.current) {
         var el_1 = textRef.current;
         setTimeout(function () {
             var textHeight = +el_1.offsetHeight;
-            var lineHeight = typeof window !== undefined ? parseInt(window.getComputedStyle(el_1).getPropertyValue('line-height')) : 0;
+            var lineHeight = size === 'small' ? 20 : 22; //TODO после возврата кастомизации заменить на переменные темы sideMenuLineHeight : sideMenuLargeLineHeight
             var lines = textHeight / lineHeight;
             if (lines >= 2) {
                 setIsMultilineText(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
     "@skbkontur/react-ui": "4.13.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "^0.15.0",
+    "@skbkontur/icons": "^0.16.0",
     "tslib": "^1"
   }
 }

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
 import { DropdownMenuProps } from '@skbkontur/react-ui';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'> {
-    icon: React.ReactElement;
+import { SideMenuItemProps } from '../SideMenuItem/SideMenuItem';
+export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | '_avatar' | 'id' | '_generatedId' | 'subCaption'> {
     children?: React.ReactNode;
-    caption?: string;
     disableAnimations?: boolean;
-    /** @ignore */
-    _avatar?: React.ReactElement;
-    id?: string;
-    /** @ignore */
-    _generatedId?: string;
 }
 /**
  * Элемент списка с выпадающим меню

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -8,13 +8,13 @@ import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
 import { SideMenuContext } from '../SideMenuContext';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b;
-    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _c = _a.caption, caption = _c === void 0 ? 'СКБ Контур' : _c, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
+    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _c = _a.caption, caption = _c === void 0 ? 'СКБ Контур' : _c, subCaption = _a.subCaption, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "subCaption", "className", "disableAnimations", "menuWidth"]);
     var context = useContext(SideMenuContext);
     var label = (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.label()] = true,
             _b[jsStyles.minimizedLabel()] = context.isMinimized,
             _b)) },
-        React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar, id: id, _isDropdown: true })));
+        React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, _avatar: _avatar, id: id, _isDropdown: true })));
     return (React.createElement(ThemeContext.Consumer, null, function (theme) {
         var _a;
         return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({

package/src/internal/ClickableElement.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 export interface CommonClickableElementProps extends CommonProps {
     children?: React.ReactNode;
     icon: React.ReactElement;
     marker?: string;
     caption?: string;
+    subCaption?: ReactNode;
     id?: string;
     /** @ignore */
     _generatedId?: string;

package/src/internal/ClickableElement.js

@@ -15,7 +15,7 @@ import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
  */
 var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
-    var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton"]);
+    var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton"]);
     var context = useContext(SideMenuContext);
     var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
     var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
@@ -101,7 +101,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
                     shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
                     shouldHighlightTopLevelItemWhenMenuIsMinimized,
                 _b[jsStyles.activeRootSubItemInSeparatedSubMenu()] = isActive && context.isSeparatedMenu && _isSubMenu,
-                _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, marker: marker, _avatar: _avatar, _isBackButton: _isBackButton })), ref: ref }, rest)),
+                _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _avatar: _avatar, _isBackButton: _isBackButton })), ref: ref }, rest)),
         React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: context.isMinimized }, children)));
 });
 ClickableElement.displayName = 'ClickableElement';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption' | '_isBackButton'> {
+interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption' | '_isBackButton' | 'subCaption'> {
     hasShortcutImage: boolean;
     isMultiline: boolean;
 }

package/src/internal/ItemContent/Caption.js

@@ -3,23 +3,27 @@ import { jsStyles } from './Caption.styles';
 import React, { forwardRef, useContext } from 'react';
 import { SideMenuContext } from '../../SideMenuContext';
 export var Caption = forwardRef(function (_a, ref) {
-    var _b;
-    var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton;
+    var _b, _c;
+    var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
     var isBeingTransitioned = context.isBeingTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
-    return (React.createElement("p", { className: cx((_b = {},
+    return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
             _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu && !(context.isTablet || context.isMobile),
-            _b[jsStyles.rootSubItem()] = _isSubMenu,
-            _b[jsStyles.rootSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
-            _b[jsStyles.rootNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
-            _b[jsStyles.rootWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
-            _b[jsStyles.rootSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
-            _b[jsStyles.rootLarge()] = size === 'large',
             _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
-            _b[jsStyles.rootForTouchScreens()] = isTouchScreen,
-            _b[jsStyles.rootSubItemForTouchScreens()] = isTouchScreen && _isSubMenu,
-            _b[jsStyles.rootInBackButton()] = _isBackButton,
-            _b)), ref: ref }, caption));
+            _b)), ref: ref },
+        React.createElement("p", { className: cx((_c = {},
+                _c[jsStyles.caption()] = true,
+                _c[jsStyles.captionSubItem()] = _isSubMenu,
+                _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
+                _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
+                _c[jsStyles.captionWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
+                _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
+                _c[jsStyles.captionLarge()] = size === 'large',
+                _c[jsStyles.captionForTouchScreens()] = isTouchScreen,
+                _c[jsStyles.captionSubItemForTouchScreens()] = isTouchScreen && _isSubMenu,
+                _c[jsStyles.captionInBackButton()] = _isBackButton,
+                _c)), ref: ref }, caption),
+        subCaption));
 });
 Caption.displayName = 'Caption';

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

@@ -2,13 +2,14 @@ export declare const jsStyles: {
     root(): string;
     rootBeingTransitioned(): string;
     rootMultiline(): string;
-    rootForTouchScreens(): string;
-    rootSubItem(): string;
-    rootSubItemForTouchScreens(): string;
-    rootSubItemSeparatedMenuTopLevel(): string;
-    rootNestedItemSeparatedMenu(): string;
-    rootWithoutItemIcon(): string;
-    rootSubItemWithoutColumnIcons(): string;
-    rootLarge(): string;
-    rootInBackButton(): string;
+    caption(): string;
+    captionForTouchScreens(): string;
+    captionSubItem(): string;
+    captionSubItemForTouchScreens(): string;
+    captionSubItemSeparatedMenuTopLevel(): string;
+    captionNestedItemSeparatedMenu(): string;
+    captionWithoutItemIcon(): string;
+    captionSubItemWithoutColumnIcons(): string;
+    captionLarge(): string;
+    captionInBackButton(): string;
 };

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

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n    "])));
     },
     rootBeingTransitioned: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));
@@ -10,33 +10,36 @@ var styles = {
     rootMultiline: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 4px;\n      align-self: flex-start;\n    "], ["\n      padding-top: 4px;\n      align-self: flex-start;\n    "])));
     },
-    rootForTouchScreens: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 18px;\n      line-height: 24px;\n    "], ["\n      font-size: 18px;\n      line-height: 24px;\n    "])));
+    caption: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 14px;\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      font-size: 14px;\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
     },
-    rootSubItem: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
+    captionForTouchScreens: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: 18px;\n      line-height: 24px;\n    "], ["\n      font-size: 18px;\n      line-height: 24px;\n    "])));
     },
-    rootSubItemForTouchScreens: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+    captionSubItem: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
     },
-    rootSubItemSeparatedMenuTopLevel: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
+    captionSubItemForTouchScreens: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
     },
-    rootNestedItemSeparatedMenu: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
+    captionSubItemSeparatedMenuTopLevel: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
     },
-    rootWithoutItemIcon: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+    captionNestedItemSeparatedMenu: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
     },
-    rootSubItemWithoutColumnIcons: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+    captionWithoutItemIcon: function () {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
-    rootLarge: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "], ["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "])));
+    captionSubItemWithoutColumnIcons: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
-    rootInBackButton: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "], ["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "])));
+    captionLarge: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "], ["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "])));
+    },
+    captionInBackButton: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "], ["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "])));
     },
 };
 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;
+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;

package/src/internal/ItemContent/ItemContent.js

@@ -13,18 +13,18 @@ import { Avatar } from './Avatar';
  */
 var ItemContent = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton;
+    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
     var textRef = useRef(null);
     var _d = useState(1), linesNumber = _d[0], setLinesNumber = _d[1];
     var _e = useState(false), isMultilineSubItem = _e[0], setMultilineSubItem = _e[1];
-    var isMultiline = (!_isSubMenu && linesNumber > 1) || (!!_isSubMenu && isMultilineSubItem);
+    var isMultiline = (!_isSubMenu && linesNumber > 1) || (!!_isSubMenu && isMultilineSubItem) || !!subCaption;
     useEffect(function () {
         if (!_isBackButton && !_isSubMenu) {
             useNumberOfTextLinesInItem(textRef, setLinesNumber, caption, marker, context.size);
         }
         if (!_isBackButton && _isSubMenu) {
-            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem);
+            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, context.size);
         }
     }, []);
     useEffect(function () {
@@ -50,7 +50,7 @@ var ItemContent = forwardRef(function (_a, ref) {
                 _c[customStyles.textAndMarkerWrapperMultiline(linesNumber)] = isMultiline && !_isSubMenu,
                 _c[customStyles.largeTextAndMarkerWrapperMultiline(linesNumber)] = isMultiline && context.size === 'large' && !_isSubMenu,
                 _c)) },
-            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, _isBackButton: _isBackButton, ref: textRef }),
+            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, ref: textRef }),
             marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
 });
 ItemContent.displayName = 'ItemContent';

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

@@ -23,7 +23,7 @@ var styles = {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
     textAndMarkerWrapper: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __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    "])));
     },
 };
 export var customStyles = {