@skbkontur/side-menu 3.4.6 → 3.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +1 -1
  3. package/src/internal/ItemContent/Caption.js +29 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **SideMenu:** trim avatar & organization captions on resize ([5f8a4ad](https://git.skbkontur.ru/ui/ui-parking-2/commits/5f8a4ad3243dc0f06ba399df60913701dbae53b1))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [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)
7
18
 
8
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "3.4.6",
3
+ "version": "3.4.7",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/internal/ItemContent/Caption.js CHANGED
@@ -5,18 +5,18 @@ import React, { forwardRef, useContext, useEffect, useRef, useState } from 'reac
5
5
  import { SideMenuContext } from '../../SideMenuContext';
6
6
  import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
7
7
  import { jsStyles } from './Caption.styles';
8
- var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
8
+ var getTruncatedUserName = function (caption, captionWidth, maxCaptionWidth) {
9
9
  var _a = __read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
10
- if (visibleWidth < fullWidth && lastName) {
10
+ if (captionWidth > maxCaptionWidth && lastName) {
11
11
  return "".concat(firstName, " ").concat(lastName[0], ".");
12
12
  }
13
13
  return caption;
14
14
  };
15
- var getCaptionTail = function (caption, visibleWidth, fullWidth) {
16
- if (visibleWidth < fullWidth) {
15
+ var getCaptionTail = function (caption, captionWidth, maxCaptionWidth) {
16
+ if (captionWidth > maxCaptionWidth) {
17
17
  var symbolsCount = caption.length;
18
- var symbolLength = fullWidth / symbolsCount;
19
- var halfVisibleSymbols = visibleWidth / symbolLength / 2;
18
+ var symbolLength = captionWidth / symbolsCount;
19
+ var halfVisibleSymbols = maxCaptionWidth / symbolLength / 2;
20
20
  return caption.slice(symbolsCount - halfVisibleSymbols);
21
21
  }
22
22
  return '';
@@ -25,25 +25,40 @@ export var Caption = forwardRef(function (_a, ref) {
25
25
  var _b, _c;
26
26
  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;
27
27
  var theme = getSideMenuTheme(useContext(ThemeContext));
28
- var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
28
+ var _d = useContext(SideMenuContext), isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons, isBeingTransitioned = _d.isBeingTransitioned, sideMenuRef = _d.sideMenuRef;
29
29
  var isLarge = size === 'large';
30
30
  var isCaptionPlainText = typeof caption === 'string';
31
31
  var captionRef = useRef(null);
32
32
  var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
33
- useEffect(function () {
34
- if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
33
+ var truncateSpecialCaption = function () {
34
+ if (!caption || !isCaptionPlainText || !captionRef.current || !_isDropdown) {
35
35
  return;
36
36
  }
37
37
  captionRef.current.innerText = caption;
38
- var fullWidth = captionRef.current.scrollWidth;
39
- var visibleWidth = captionRef.current.offsetWidth;
38
+ var captionWidth = captionRef.current.scrollWidth;
39
+ var maxCaptionWidth = captionRef.current.offsetWidth;
40
40
  if (_isAvatar) {
41
- captionRef.current.innerText = getTruncatedUserName(caption, visibleWidth, fullWidth);
41
+ captionRef.current.innerText = getTruncatedUserName(caption, captionWidth, maxCaptionWidth);
42
42
  }
43
43
  else {
44
- setTail(getCaptionTail(caption, visibleWidth, fullWidth));
44
+ setTail(getCaptionTail(caption, captionWidth, maxCaptionWidth));
45
45
  }
46
- }, [isBeingTransitioned, caption]);
46
+ };
47
+ useEffect(function () {
48
+ truncateSpecialCaption();
49
+ }, [caption]);
50
+ useEffect(function () {
51
+ var _a;
52
+ var handleTransition = function (e) {
53
+ if (e.propertyName === 'width') {
54
+ truncateSpecialCaption();
55
+ }
56
+ };
57
+ (_a = sideMenuRef === null || sideMenuRef === void 0 ? void 0 : sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionend', handleTransition);
58
+ return function () {
59
+ removeEventListener('transitionend', handleTransition);
60
+ };
61
+ }, [isBeingTransitioned]);
47
62
  var isAvatarCaptionSingleWord = function (userName, _isAvatar) {
48
63
  if (userName === void 0) { userName = ''; }
49
64
  if (_isAvatar === void 0) { _isAvatar = false; }