@skbkontur/side-menu 0.14.0 → 0.14.2

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 (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/hooks/useNumberOfTextLinesInItem.js +1 -1
  3. package/internal/themes/SideMenuTheme.d.ts +2 -2
  4. package/internal/themes/SideMenuTheme.js +2 -2
  5. package/package.json +1 -1
  6. package/src/SideMenuItem/SideMenuItem.md +2 -2
  7. package/src/internal/ItemContent/Caption.js +3 -5
  8. package/src/internal/ItemContent/Icon.styles.js +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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
+ ## [0.14.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.1...@skbkontur/side-menu@0.14.2) (2023-06-22)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **SideMenu:** fix truncation in dynamic avatar change ([82b1337](https://git.skbkontur.ru/ui/ui-parking/commits/82b13373283a3871b6e959defcaf20afc922113c))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.14.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.0...@skbkontur/side-menu@0.14.1) (2023-06-19)
18
+
19
+ **Note:** Version bump only for package @skbkontur/side-menu
20
+
21
+
22
+
23
+
24
+
6
25
  # [0.14.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.13.0...@skbkontur/side-menu@0.14.0) (2023-06-14)
7
26
 
8
27
 
package/hooks/useNumberOfTextLinesInItem.js CHANGED
@@ -20,7 +20,7 @@ var getContainerWidth = function (ctx, marker, theme, isTouchScreen) {
20
20
  var containerWidth = parseInt(isTouchScreen ? theme.sideMenuWidthForTouchScreens : theme.sideMenuWidth) -
21
21
  2 * parseInt(theme.sideMenuMarginX) -
22
22
  parseInt(theme.sideMenuIconSize) -
23
- 2 * parseInt(theme.sideMenuIconPaddingX);
23
+ 2 * parseInt(theme.sideMenuIconMarginX);
24
24
  var markerPaddings = marker
25
25
  ? 2 * parseInt(theme.sideMenuMarkerPaddingX) + parseInt(theme.sideMenuMarkerMarginRight)
26
26
  : 0;
package/internal/themes/SideMenuTheme.d.ts CHANGED
@@ -45,8 +45,8 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
45
45
  static sideMenuBackButtonIconPaddingRight: string;
46
46
  static sideMenuIconSize: string;
47
47
  static sideMenuIconSubItemSize: string;
48
- static sideMenuIconPaddingY: string;
49
- static sideMenuIconPaddingX: string;
48
+ static sideMenuIconMarginY: string;
49
+ static sideMenuIconMarginX: string;
50
50
  static sideMenuIconMinHeight: string;
51
51
  static get sideMenuIconLineHeight(): string;
52
52
  static sideMenuIconLargeMinHeight: string;
package/internal/themes/SideMenuTheme.js CHANGED
@@ -137,8 +137,8 @@ var SideMenuTheme = /** @class */ (function (_super) {
137
137
  // #region Icon
138
138
  SideMenuTheme.sideMenuIconSize = '24';
139
139
  SideMenuTheme.sideMenuIconSubItemSize = '16';
140
- SideMenuTheme.sideMenuIconPaddingY = '0';
141
- SideMenuTheme.sideMenuIconPaddingX = '8px';
140
+ SideMenuTheme.sideMenuIconMarginY = '0';
141
+ SideMenuTheme.sideMenuIconMarginX = '8px';
142
142
  SideMenuTheme.sideMenuIconMinHeight = '32px';
143
143
  SideMenuTheme.sideMenuIconLargeMinHeight = '30px';
144
144
  SideMenuTheme.sideMenuIconSubItemPaddingLeft = '20px';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "0.14.0",
3
+ "version": "0.14.2",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenuItem/SideMenuItem.md CHANGED
@@ -26,8 +26,8 @@
26
26
  // #region Icon
27
27
  sideMenuIconSize: string;
28
28
  sideMenuIconSubItemSize: string;
29
- sideMenuIconPaddingY: string;
30
- sideMenuIconPaddingX: string;
29
+ sideMenuIconMarginY: string;
30
+ sideMenuIconMarginX: string;
31
31
  sideMenuIconMinHeight: string;
32
32
  sideMenuIconLineHeight: string;
33
33
  sideMenuIconLargeMinHeight: string;
package/src/internal/ItemContent/Caption.js CHANGED
@@ -28,15 +28,15 @@ export var Caption = forwardRef(function (_a, ref) {
28
28
  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;
29
29
  var captionRef = useRef(null);
30
30
  var _e = useState(''), tail = _e[0], setTail = _e[1];
31
- var _f = useState(caption), truncatedUserName = _f[0], setTruncatedUserName = _f[1];
32
31
  useEffect(function () {
33
32
  if (!_isDropdown || !captionRef.current || !caption) {
34
33
  return;
35
34
  }
35
+ captionRef.current.innerText = caption;
36
36
  var fullWidth = captionRef.current.scrollWidth;
37
37
  var visibleWidth = captionRef.current.offsetWidth;
38
38
  if (_isAvatar) {
39
- setTruncatedUserName(getTruncatedUserName(caption, visibleWidth, fullWidth));
39
+ captionRef.current.innerText = getTruncatedUserName(caption, visibleWidth, fullWidth);
40
40
  }
41
41
  else {
42
42
  setTail(getCaptionTail(caption, visibleWidth, fullWidth));
@@ -64,9 +64,7 @@ export var Caption = forwardRef(function (_a, ref) {
64
64
  _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
65
65
  _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
66
66
  _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
67
- _c)), ref: mergeRefs([ref, captionRef]), "data-tail": tail },
68
- !_isAvatar && caption,
69
- _isAvatar && truncatedUserName),
67
+ _c)), ref: mergeRefs([ref, captionRef]), "data-tail": tail }, caption),
70
68
  subCaption));
71
69
  });
72
70
  Caption.displayName = 'Caption';
package/src/internal/ItemContent/Icon.styles.js CHANGED
@@ -3,7 +3,7 @@ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
3
  import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
4
4
  var styles = {
5
5
  root: function (t) {
6
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n padding: ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconPaddingY, t.sideMenuIconPaddingX, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
6
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n margin: ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconMarginY, t.sideMenuIconMarginX, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
7
7
  },
8
8
  rootMultiline: function () {
9
9
  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-self: flex-start;\n align-items: flex-start;\n "], ["\n align-self: flex-start;\n align-items: flex-start;\n "])));
@@ -15,7 +15,7 @@ var styles = {
15
15
  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: ", ";\n "], ["\n min-height: ", ";\n "])), t.sideMenuIconLargeSubItemMinHeight);
16
16
  },
17
17
  rootSubItem: function (t) {
18
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
18
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "], ["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
19
19
  },
20
20
  rootSubItemSeparatedMenu: function (t) {
21
21
  return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);