@skbkontur/side-menu 0.10.0 → 0.11.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.11.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.10.1...@skbkontur/side-menu@0.11.0) (2023-05-30)
+
+
+### Features
+
+* **SideMenu:** add truncation to dropdown ([20296d4](https://git.skbkontur.ru/ui/ui-parking/commits/20296d494623e343ad4f425f6fbfa1718634fba2))
+
+
+
+
+
+## [0.10.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.10.0...@skbkontur/side-menu@0.10.1) (2023-05-30)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 # [0.10.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.5...@skbkontur/side-menu@0.10.0) (2023-05-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^0.16.0",
-    "@skbkontur/react-ui-addons": "^4.6.3",
+    "@skbkontur/react-ui-addons": "^4.7.0",
     "tslib": "^1"
   }
 }

package/src/SideMenuAvatar/SideMenuAvatar.js

@@ -6,7 +6,7 @@ var SideMenuAvatarInner = forwardRef(function (_a, ref) {
     var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon"]);
     return (
     // @ts-expect-error: icon is not provided as _avatar replaces it
-    React.createElement(SideMenuDropdown, __assign({ _avatar: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], ref: ref }, rest), children));
+    React.createElement(SideMenuDropdown, __assign({ _avatar: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
 });
 SideMenuAvatarInner.displayName = 'SideMenuAvatar';
 /**

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

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

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -8,15 +8,16 @@ import { SideMenuContext } from '../SideMenuContext';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "subCaption", "className", "disableAnimations", "menuWidth"]);
+    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },
         React.createElement(DropdownMenu, __assign({ caption: React.createElement("div", { className: cx((_c = {},
                     _c[jsStyles.label(theme)] = true,
+                    _c[jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
                     _c[jsStyles.minimizedLabel()] = context.isMinimized,
                     _c)) },
-                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, _avatar: _avatar, id: id, _isDropdown: true })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
+                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, _avatar: _avatar, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
             // @ts-expect-error: accessing private property
             if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
                 return React.cloneElement(child, {

package/src/SideMenuDropdown/SideMenuDropdown.styles.d.ts

@@ -1,6 +1,7 @@
 import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
     label(t: SideMenuTheme): string;
+    labelForTouchScreens(t: SideMenuTheme): string;
     minimizedLabel(): string;
     wrapper(): string;
 };

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -6,12 +6,15 @@ var styles = {
     label: function (t) {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: calc(", " - 2 * ", ");\n      transition: width ", "ms ease-out;\n    "], ["\n      width: calc(", " - 2 * ", ");\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuMarginX, transitionDuration);
     },
+    labelForTouchScreens: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: calc(", " - 2 * ", ");\n    "], ["\n      width: calc(", " - 2 * ", ");\n    "])), t.sideMenuWidthForTouchScreens, t.sideMenuMarginX);
+    },
     minimizedLabel: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
     wrapper: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/src/internal/BackButton.js

@@ -11,7 +11,7 @@ import { SideMenuContext } from '../SideMenuContext';
 var BackButton = forwardRef(function (_a, ref) {
     var caption = _a.caption, id = _a.id, href = _a.href, generatedId = _a.generatedId;
     var context = useContext(SideMenuContext);
-    return (React.createElement(SideMenuItem, { "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isDropdown: true, _isSubMenu: true, onClick: function () {
+    return (React.createElement(SideMenuItem, { "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isSubMenu: true, onClick: function () {
             var _a, _b, _c, _d;
             (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
             if (id) {

package/src/internal/ClickableElement.d.ts

@@ -18,6 +18,8 @@ export interface CommonClickableElementProps extends CommonProps {
     /** @ignore */
     _isDropdown?: boolean;
     /** @ignore */
+    _isAvatar?: boolean;
+    /** @ignore */
     _isBackButton?: boolean;
 }
 export interface ClickableElementProps extends CommonClickableElementProps {

package/src/internal/ClickableElement.js

@@ -17,7 +17,7 @@ import { ThemeContext } from '@skbkontur/react-ui';
  */
 var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
-    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 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, _isAvatar = _a._isAvatar, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
@@ -74,7 +74,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var handleClick = function (e) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        var lastElementInTheHierarchy = !hasChildren(id || rest.href, _generatedId) && !_isDropdown;
+        var lastElementInTheHierarchy = !hasChildren(id || rest.href, _generatedId) && !_isDropdown && !_isBackButton;
         switchActiveItem();
         toggleIsShown(lastElementInTheHierarchy);
         setIsMinimized(lastElementInTheHierarchy);
@@ -104,7 +104,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
                     shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
                     shouldHighlightTopLevelItemWhenMenuIsMinimized,
                 _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
-                _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)),
+                _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, _isDropdown: _isDropdown, _isAvatar: _isAvatar })), 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' | 'subCaption'> {
+interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption' | '_isBackButton' | '_isDropdown' | '_isAvatar' | 'subCaption'> {
     hasShortcutImage: boolean;
     isMultiline: boolean;
 }

package/src/internal/ItemContent/Caption.js

@@ -1,22 +1,60 @@
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Caption.styles';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { SideMenuContext } from '../../SideMenuContext';
+import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
+    var _a = caption.split(' '), firstName = _a[0], lastName = _a[1];
+    if (visibleWidth < fullWidth && lastName) {
+        return firstName + " " + lastName[0] + ".";
+    }
+    return caption;
+};
+var getCaptionTail = function (caption, visibleWidth, fullWidth) {
+    if (visibleWidth < fullWidth) {
+        var symbolsCount = caption.length;
+        var symbolLength = fullWidth / symbolsCount;
+        var halfVisibleSymbols = visibleWidth / symbolLength / 2;
+        return caption.slice(symbolsCount - halfVisibleSymbols);
+    }
+    return '';
+};
 export var Caption = forwardRef(function (_a, ref) {
     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 _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    var isBeingTransitioned = context.isBeingTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
+    var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons, isTablet = _d.isTablet, isMobile = _d.isMobile;
+    var captionRef = useRef(null);
+    var _e = useState(''), tail = _e[0], setTail = _e[1];
+    var _f = useState(caption), truncatedUserName = _f[0], setTruncatedUserName = _f[1];
+    useEffect(function () {
+        if (!_isDropdown || !captionRef.current || !caption) {
+            return;
+        }
+        var fullWidth = captionRef.current.scrollWidth;
+        var visibleWidth = captionRef.current.offsetWidth;
+        if (_isAvatar) {
+            setTruncatedUserName(getTruncatedUserName(caption, visibleWidth, fullWidth));
+        }
+        else {
+            setTail(getCaptionTail(caption, visibleWidth, fullWidth));
+        }
+    }, [isBeingTransitioned]);
+    var isAvatarCaptionSingleWord = function (userName, _isAvatar) {
+        if (userName === void 0) { userName = ''; }
+        return _isAvatar && userName.split(' ').length === 1;
+    };
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu && !(context.isTablet || context.isMobile),
+            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu && !(isTablet || isMobile),
             _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b)), ref: ref },
         React.createElement("p", { className: cx((_c = {},
                 _c[jsStyles.caption(theme)] = true,
+                _c[jsStyles.captionDropdown()] = _isDropdown,
+                _c[jsStyles.captionTruncated()] = _isDropdown && (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
                 _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
                 _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
                 _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
@@ -26,7 +64,9 @@ export var Caption = forwardRef(function (_a, ref) {
                 _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
                 _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
                 _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
-                _c)), ref: ref }, caption),
+                _c)), ref: mergeRefs([ref, captionRef]), "data-tail": tail },
+            !_isAvatar && caption,
+            _isAvatar && truncatedUserName),
         subCaption));
 });
 Caption.displayName = 'Caption';

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

@@ -15,4 +15,6 @@ export declare const jsStyles: {
     captionSubItemWithoutColumnIcons(): string;
     captionLarge(t: SideMenuTheme): string;
     captionInBackButton(t: SideMenuTheme): string;
+    captionDropdown(): string;
+    captionTruncated(): string;
 };

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

@@ -43,6 +43,12 @@ var styles = {
     captionInBackButton: function (t) {
         return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
     },
+    captionDropdown: function () {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+    },
+    captionTruncated: function () {
+        return css(templateObject_15 || (templateObject_15 = __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    "])));
+    },
 };
 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;
+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;

package/src/internal/ItemContent/ItemContent.js

@@ -20,7 +20,7 @@ var getItemContentHeight = function (theme, linesNumber, size) {
  */
 var ItemContent = forwardRef(function (_a, ref) {
     var _b, _c;
-    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 _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     var context = useContext(SideMenuContext);
     var size = context.size, isTouchScreen = context.isTouchScreen;
     var textRef = useRef(null);
@@ -29,7 +29,7 @@ var ItemContent = forwardRef(function (_a, ref) {
     var isMultiline = (!_isSubMenu && linesNumber > 1) || (!!_isSubMenu && isMultilineSubItem) || !!subCaption;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     useEffect(function () {
-        if (!_isBackButton && !_isSubMenu) {
+        if (!_isBackButton && !_isSubMenu && !_isDropdown) {
             useNumberOfTextLinesInItem({
                 textRef: textRef,
                 setLinesNumber: setLinesNumber,
@@ -45,7 +45,7 @@ var ItemContent = forwardRef(function (_a, ref) {
         }
     }, []);
     useEffect(function () {
-        if (!_isBackButton) {
+        if (!_isBackButton && !_isDropdown) {
             useNumberOfTextLinesInItem({
                 textRef: textRef,
                 setLinesNumber: setLinesNumber,
@@ -72,9 +72,10 @@ var ItemContent = forwardRef(function (_a, ref) {
         _avatar && React.createElement(Avatar, { _avatar: _avatar }),
         (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: cx((_c = {},
                 _c[jsStyles.textAndMarkerWrapper()] = true,
+                _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
                 _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
                 _c)) },
-            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, ref: textRef }),
+            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
             marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
 });
 ItemContent.displayName = 'ItemContent';

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

@@ -11,4 +11,5 @@ export declare const jsStyles: {
     subItemRootForTouchScreens(t: SideMenuTheme): string;
     subItemRoot(t: SideMenuTheme): string;
     textAndMarkerWrapper(): string;
+    textAndMarkerWrapperDropdown(): string;
 };

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

@@ -26,11 +26,14 @@ var styles = {
     textAndMarkerWrapper: function () {
         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    "])));
     },
+    textAndMarkerWrapperDropdown: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+    },
 };
 export var customStyles = {
     textAndMarkerWrapperMultiline: function (height) {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;