@skbkontur/side-menu 3.4.5 → 3.4.7

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.7](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.4.6...@skbkontur/side-menu@3.4.7) (2025-12-16)
+
+
+### Bug Fixes
+
+* **SideMenu:** trim avatar & organization captions on resize ([5f8a4ad](https://git.skbkontur.ru/ui/ui-parking-2/commits/5f8a4ad3243dc0f06ba399df60913701dbae53b1))
+
+
+
+
+
+## [3.4.6](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.4.5...@skbkontur/side-menu@3.4.6) (2025-12-11)
+
+
+### Bug Fixes
+
+* **SideMenu:** add aria-label to SideMenu.Dropdown ([7cc99b5](https://git.skbkontur.ru/ui/ui-parking-2/commits/7cc99b5bb1a7e9a74422160f3cb105723f64e86e))
+
+
+
+
+
 ## [3.4.5](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.4.4...@skbkontur/side-menu@3.4.5) (2025-12-10)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/package.json

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

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -9,7 +9,7 @@ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { jsStyles } from './SideMenuDropdown.styles';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, id = _a.id, children = _a.children, caption = _a.caption, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, onClose = _a.onClose, onOpen = _a.onOpen, rest = __rest(_a, ["icon", "id", "children", "caption", "marker", "subCaption", "className", "menuWidth", "_isAvatar", "onClose", "onOpen"]);
+    var icon = _a.icon, id = _a.id, children = _a.children, caption = _a.caption, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, onClose = _a.onClose, onOpen = _a.onOpen, ariaLabel = _a["aria-label"], rest = __rest(_a, ["icon", "id", "children", "caption", "marker", "subCaption", "className", "menuWidth", "_isAvatar", "onClose", "onOpen", 'aria-label']);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var handleOpen = function () {
@@ -28,7 +28,7 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
                     _c[jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
                     _c[jsStyles.minimizedLabel()] = !context.isOpened,
                     _c)) },
-                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth, onOpen: handleOpen, onClose: handleClose }, rest), React.Children.map(children, function (child) {
+                React.createElement(SideMenuItem, { "aria-label": ariaLabel, icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth, onOpen: handleOpen, onClose: handleClose }, 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/internal/ItemContent/Caption.js

@@ -5,18 +5,18 @@ import React, { forwardRef, useContext, useEffect, useRef, useState } from 'reac
 import { SideMenuContext } from '../../SideMenuContext';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { jsStyles } from './Caption.styles';
-var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
+var getTruncatedUserName = function (caption, captionWidth, maxCaptionWidth) {
     var _a = __read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
-    if (visibleWidth < fullWidth && lastName) {
+    if (captionWidth > maxCaptionWidth && lastName) {
         return "".concat(firstName, " ").concat(lastName[0], ".");
     }
     return caption;
 };
-var getCaptionTail = function (caption, visibleWidth, fullWidth) {
-    if (visibleWidth < fullWidth) {
+var getCaptionTail = function (caption, captionWidth, maxCaptionWidth) {
+    if (captionWidth > maxCaptionWidth) {
         var symbolsCount = caption.length;
-        var symbolLength = fullWidth / symbolsCount;
-        var halfVisibleSymbols = visibleWidth / symbolLength / 2;
+        var symbolLength = captionWidth / symbolsCount;
+        var halfVisibleSymbols = maxCaptionWidth / symbolLength / 2;
         return caption.slice(symbolsCount - halfVisibleSymbols);
     }
     return '';
@@ -25,25 +25,40 @@ export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
     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 _d = useContext(SideMenuContext), isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons, isBeingTransitioned = _d.isBeingTransitioned, sideMenuRef = _d.sideMenuRef;
     var isLarge = size === 'large';
     var isCaptionPlainText = typeof caption === 'string';
     var captionRef = useRef(null);
     var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
-    useEffect(function () {
-        if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
+    var truncateSpecialCaption = function () {
+        if (!caption || !isCaptionPlainText || !captionRef.current || !_isDropdown) {
             return;
         }
         captionRef.current.innerText = caption;
-        var fullWidth = captionRef.current.scrollWidth;
-        var visibleWidth = captionRef.current.offsetWidth;
+        var captionWidth = captionRef.current.scrollWidth;
+        var maxCaptionWidth = captionRef.current.offsetWidth;
         if (_isAvatar) {
-            captionRef.current.innerText = getTruncatedUserName(caption, visibleWidth, fullWidth);
+            captionRef.current.innerText = getTruncatedUserName(caption, captionWidth, maxCaptionWidth);
         }
         else {
-            setTail(getCaptionTail(caption, visibleWidth, fullWidth));
+            setTail(getCaptionTail(caption, captionWidth, maxCaptionWidth));
         }
-    }, [isBeingTransitioned, caption]);
+    };
+    useEffect(function () {
+        truncateSpecialCaption();
+    }, [caption]);
+    useEffect(function () {
+        var _a;
+        var handleTransition = function (e) {
+            if (e.propertyName === 'width') {
+                truncateSpecialCaption();
+            }
+        };
+        (_a = sideMenuRef === null || sideMenuRef === void 0 ? void 0 : sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionend', handleTransition);
+        return function () {
+            removeEventListener('transitionend', handleTransition);
+        };
+    }, [isBeingTransitioned]);
     var isAvatarCaptionSingleWord = function (userName, _isAvatar) {
         if (userName === void 0) { userName = ''; }
         if (_isAvatar === void 0) { _isAvatar = false; }