@skbkontur/side-menu 1.2.0 → 1.3.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.
 
+# [1.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.2.1...@skbkontur/side-menu@1.3.0) (2023-08-22)
+
+
+### Features
+
+* **SideMenu:** fix animation logic ([0d80df9](https://git.skbkontur.ru/ui/ui-parking/commits/0d80df987faae0970f67680239b8a933fa32bcc7))
+
+
+
+
+
+## [1.2.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.2.0...@skbkontur/side-menu@1.2.1) (2023-08-21)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 # [1.2.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.1.0...@skbkontur/side-menu@1.2.0) (2023-08-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^1.4.3",
-    "@skbkontur/react-ui-addons": "^4.9.0",
+    "@skbkontur/react-ui-addons": "^4.9.1",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.js

@@ -207,12 +207,14 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                                 _d[jsStylesForSideMenu.container(theme)] = true,
                                 _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
                                 _d[jsStylesForSideMenu.minimizedContainer(theme)] = isMinimized,
-                                _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenu,
+                                _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenuShown,
                                 _d[jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
                                 _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
                                 _d)) },
                             React.createElement("div", { className: cx((_e = {},
-                                    _e[jsStylesForSideMenu.contentWrapper()] = true,
+                                    _e[jsStylesForSideMenu.contentWrapper(theme)] = true,
+                                    _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
+                                    _e[jsStylesForSideMenu.minimizedContentWrapper()] = isMinimized,
                                     _e)) }, children)),
                         !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
 });

package/src/SideMenu/SideMenu.styles.d.ts

@@ -13,7 +13,9 @@ export declare const jsStylesForSideMenu: {
     innerContainer(): string;
     containerForTouchScreens(t: SideMenuTheme): string;
     separatedContainerForMobiles(t: SideMenuTheme): string;
-    contentWrapper(): string;
+    contentWrapper(t: SideMenuTheme): string;
+    contentWrapperForTouchScreens(t: SideMenuTheme): string;
+    minimizedContentWrapper(): string;
     wrapper(): string;
     wrapperIE(): string;
     wrapperWithShadow(t: SideMenuTheme): string;

package/src/SideMenu/SideMenu.styles.js

@@ -33,30 +33,36 @@ var styles = {
     separatedContainerForMobiles: function (t) {
         return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
-    contentWrapper: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n    "])));
+    contentWrapper: function (t) {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n      width: ", ";\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n      width: ", ";\n    "])), t.sideMenuWidth);
+    },
+    contentWrapperForTouchScreens: function (t) {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
+    },
+    minimizedContentWrapper: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
     wrapper: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     wrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
     wrapperWithShadow: function (t) {
-        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
     },
     collapsedContainerForTabletsOrMobiles: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
     },
     list: function () {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
     },
 };
 export var customStyles = {
     rootForTabletsOrMobiles: function (headerHeight) {
-        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
     },
 };
 export var jsStylesForSideMenu = 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, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+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, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/src/SideMenuHeader/SideMenuHeader.js

@@ -10,7 +10,7 @@ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { getDOMRect } from '@skbkontur/react-ui/lib/dom/getDOMRect';
 var SideMenuHeaderInner = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, withWidget = _a.withWidget, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget"]);
+    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, withWidget = _a.withWidget, dataTid = _a["data-tid"], rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var headerWrapperRef = useRef(null);
@@ -20,13 +20,13 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
             (_a = context.setHeaderHeight) === null || _a === void 0 ? void 0 : _a.call(context, getDOMRect(headerWrapperRef.current).height);
         }
     }, []);
-    return (React.createElement("header", __assign({ className: cx((_b = {},
+    return (React.createElement("header", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.rootForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
             _b[jsStyles.fixedRoot(theme)] = context.isShown && !(context.scrollState === 'top'),
             _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown || context.isBeingTransitioned,
             _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isShown && context.isMobile && context.isSeparatedMenuShown,
-            _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style }, rest),
+            _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style, "data-tid": dataTid },
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });
 SideMenuHeaderInner.displayName = 'SideMenuHeader';

package/src/internal/ItemContent/Caption.js

@@ -3,7 +3,6 @@ import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Caption.styles';
 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];
@@ -25,7 +24,7 @@ export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
     var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _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, isTablet = _d.isTablet, isMobile = _d.isMobile;
+    var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
     var captionRef = useRef(null);
     var _e = useState(''), tail = _e[0], setTail = _e[1];
     useEffect(function () {
@@ -48,7 +47,6 @@ export var Caption = forwardRef(function (_a, ref) {
     };
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu && !(isTablet || isMobile),
             _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b)), ref: ref },
         React.createElement("p", { className: cx((_c = {},
@@ -64,7 +62,7 @@ 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: mergeRefs([ref, captionRef]), "data-tail": tail }, caption),
+                _c)), ref: captionRef, "data-tail": tail }, caption),
         subCaption));
 });
 Caption.displayName = 'Caption';

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

@@ -3,7 +3,6 @@ export declare const sideMenuMultilineCaptionPaddingTop = "4px";
 export declare const sideMenuCaptionMarginRight = "8px";
 export declare const jsStyles: {
     root(): string;
-    rootBeingTransitioned(): string;
     rootMultiline(): string;
     caption(t: SideMenuTheme): string;
     captionForTouchScreens(t: SideMenuTheme): string;

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

@@ -7,48 +7,45 @@ var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\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    "])));
-    },
     rootMultiline: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), sideMenuMultilineCaptionPaddingTop);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), sideMenuMultilineCaptionPaddingTop);
     },
     caption: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
     },
     captionForTouchScreens: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
     },
     captionSubItem: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
     },
     captionSubItemForTouchScreens: function (t) {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
     },
     captionSubItemSeparatedMenuTopLevel: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
     },
     captionNestedItemSeparatedMenu: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
     },
     captionWithoutItemIcon: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
     captionSubItemWithoutColumnIcons: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
     captionLarge: function (t) {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
     },
     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);
+        return css(templateObject_12 || (templateObject_12 = __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    "])));
+        return css(templateObject_13 || (templateObject_13 = __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    "])));
+        return css(templateObject_14 || (templateObject_14 = __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, templateObject_14, templateObject_15;
+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;

package/src/internal/ItemContent/ItemContent.js

@@ -1,19 +1,12 @@
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { customStyles, jsStyles } from './ItemContent.styles';
+import { jsStyles } from './ItemContent.styles';
 import { SideMenuContext } from '../../SideMenuContext';
-import { useNumberOfTextLinesInItem } from '../../../hooks/useNumberOfTextLinesInItem';
-import { useNumberOfTextLinesInSubItem } from '../../../hooks/useNumberOfTextLinesInSubItem';
 import { Icon } from './Icon';
 import { Caption } from './Caption';
 import { Marker } from './Marker';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
-import { sideMenuMultilineCaptionPaddingTop } from './Caption.styles';
-var getItemContentHeight = function (theme, linesNumber, size) {
-    var lineHeight = size === 'large' ? parseInt(theme.sideMenuLargeLineHeight) : parseInt(theme.sideMenuLineHeight);
-    return linesNumber * lineHeight + parseInt(sideMenuMultilineCaptionPaddingTop);
-};
 /**
  * Контент для SideMenuItem или SideMenuLink
  */
@@ -23,58 +16,35 @@ var ItemContent = forwardRef(function (_a, ref) {
     var context = useContext(SideMenuContext);
     var size = context.size, isTouchScreen = context.isTouchScreen;
     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) || !!subCaption;
+    var _d = useState(false), isMultiline = _d[0], setIsMultiline = _d[1];
     var theme = getSideMenuTheme(useContext(ThemeContext));
     useEffect(function () {
-        if (!_isBackButton && !_isSubMenu && !_isDropdown) {
-            useNumberOfTextLinesInItem({
-                textRef: textRef,
-                setLinesNumber: setLinesNumber,
-                theme: theme,
-                caption: caption,
-                marker: marker,
-                size: size,
-                isTouchScreen: isTouchScreen,
-            });
+        if (!textRef.current || _isBackButton)
+            return;
+        var text = textRef.current.querySelector('p');
+        if ((text && parseInt(getComputedStyle(text).lineHeight) < text.clientHeight) || subCaption) {
+            setIsMultiline(true);
         }
-        if (!_isBackButton && _isSubMenu) {
-            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, size, theme);
-        }
-    }, [caption]);
-    useEffect(function () {
-        if (!_isBackButton && !_isDropdown) {
-            useNumberOfTextLinesInItem({
-                textRef: textRef,
-                setLinesNumber: setLinesNumber,
-                theme: theme,
-                caption: caption,
-                marker: marker,
-                size: size,
-                isTouchScreen: isTouchScreen,
-            });
-        }
-    }, [textRef.current, context.isBeingTransitioned]);
+    });
     var isSeparatedSubMenuInNarrowDesktop = _isSubMenu && context.isSeparatedMenu && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
             _b[jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
             _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
-            _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu,
+            _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu && !context.isMinimized,
             _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
             _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
             _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
             _b)), ref: ref },
         icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar })),
-        (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: cx((_c = {},
+        React.createElement("div", { className: cx((_c = {},
                 _c[jsStyles.textAndMarkerWrapper()] = true,
                 _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
-                _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
+                _c[jsStyles.textAndMarkerWrapperMinimized()] = context.isMinimized && !_isSubMenu,
                 _c)) },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
-            marker !== undefined && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu }))))));
+            marker !== undefined && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu })))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

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

@@ -1,7 +1,4 @@
 import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
-export declare const customStyles: {
-    textAndMarkerWrapperMultiline(height: number): string;
-};
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
     largeRoot(t: SideMenuTheme): string;
@@ -13,4 +10,5 @@ export declare const jsStyles: {
     subItemRoot(t: SideMenuTheme): string;
     textAndMarkerWrapper(): string;
     textAndMarkerWrapperDropdown(): string;
+    textAndMarkerWrapperMinimized(): string;
 };

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

@@ -32,10 +32,8 @@ var styles = {
     textAndMarkerWrapperDropdown: function () {
         return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
     },
-};
-export var customStyles = {
-    textAndMarkerWrapperMultiline: function (height) {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
+    textAndMarkerWrapperMinimized: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/SideMenuLogotype.styles.js

@@ -9,19 +9,19 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
     },
     icon: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: 0;\n      opacity: 1;\n    "], ["\n      left: 0;\n      opacity: 1;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n      width: auto;\n    "], ["\n      opacity: 1;\n      width: auto;\n    "])));
     },
     iconHidden: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      left: -", ";\n      display: block;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", ";\n      display: block;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), sideMenuLogotypeGapBetweenIconAndLogo, t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
     },
     logoWrapper: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      left: -", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), sideMenuLogotypeIconSize, t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
     },
     logoWrapperForTabletsOrMobiles: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      left: 0;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      left: 0;\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
     },
     logoWrapperHidden: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: ", "px;\n      opacity: 0;\n    "], ["\n      left: ", "px;\n      opacity: 0;\n    "])), parseInt(sideMenuLogotypeGapBetweenIconAndLogo) - parseInt(sideMenuLogotypeIconSize));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      opacity: 0;\n    "], ["\n      opacity: 0;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/hooks/useNumberOfTextLinesInItem.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { SideMenuTheme } from '../lib/theming/ThemeTypes';
-interface UseNumberOfTextLinesInItem {
-    textRef: React.RefObject<HTMLDivElement>;
-    setLinesNumber: React.Dispatch<React.SetStateAction<number>>;
-    theme: SideMenuTheme;
-    caption?: string;
-    marker?: string | boolean;
-    size?: 'small' | 'large';
-    isTouchScreen?: boolean;
-}
-export declare const useNumberOfTextLinesInItem: ({ textRef, setLinesNumber, theme, caption, marker, size, isTouchScreen, }: UseNumberOfTextLinesInItem) => void;
-export {};

package/hooks/useNumberOfTextLinesInItem.js

@@ -1,64 +0,0 @@
-import { sideMenuCaptionMarginRight } from '../src/internal/ItemContent/Caption.styles';
-import { isBrowser } from '../lib/utils/scripts';
-var getNumberOfLines = function (ctx, words, containerWidth) {
-    var line = '';
-    var lineCount = 1;
-    words.forEach(function (word, i) {
-        var testLine = (line + " " + word).trim();
-        var testWidth = ctx.measureText(testLine).width;
-        if (testWidth > containerWidth && i > 0) {
-            line = '';
-            lineCount++;
-        }
-        else {
-            line = testLine;
-        }
-    });
-    return lineCount;
-};
-var getContainerWidth = function (ctx, theme, marker, isTouchScreen) {
-    var containerWidth = parseInt(isTouchScreen ? theme.sideMenuWidthForTouchScreens : theme.sideMenuWidth) -
-        2 * parseInt(theme.sideMenuMarginX) -
-        parseInt(theme.sideMenuIconSize) -
-        2 * parseInt(theme.sideMenuIconMarginX);
-    var markerPaddings = marker
-        ? 2 * parseInt(theme.sideMenuMarkerPaddingX) + parseInt(theme.sideMenuMarkerMarginRight)
-        : 0;
-    var emptyMarker = marker === true || marker === '';
-    var markerWidth;
-    if (emptyMarker) {
-        markerWidth = 8;
-    }
-    else if (typeof marker === 'string') {
-        markerWidth = ctx.measureText(marker).width + markerPaddings;
-    }
-    else {
-        markerWidth = 0;
-    }
-    return containerWidth - markerWidth - parseInt(sideMenuCaptionMarginRight);
-};
-var getFontSize = function (theme, isTouchScreen, size) {
-    if (size !== 'small') {
-        return parseInt(theme.sideMenuCaptionLargeFontSize);
-    }
-    if (isTouchScreen) {
-        return parseInt(theme.sideMenuCaptionFontSizeForTouchScreens);
-    }
-    else {
-        return parseInt(theme.sideMenuCaptionFontSize);
-    }
-};
-export var useNumberOfTextLinesInItem = function (_a) {
-    var textRef = _a.textRef, setLinesNumber = _a.setLinesNumber, theme = _a.theme, _b = _a.caption, caption = _b === void 0 ? '' : _b, marker = _a.marker, size = _a.size, isTouchScreen = _a.isTouchScreen;
-    var fontSize = getFontSize(theme, isTouchScreen, size);
-    var fontFamily = textRef.current && isBrowser
-        ? window.getComputedStyle(textRef.current).getPropertyValue('font-family')
-        : "'Lab Grotesque', 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif";
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    if (ctx) {
-        ctx.font = fontSize + "px " + fontFamily;
-        var words = caption.split(' ');
-        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, theme, marker, isTouchScreen)));
-    }
-};

package/hooks/useNumberOfTextLinesInSubItem.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SideMenuTheme } from '../lib/theming/ThemeTypes';
-export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>, size: string | undefined, theme: SideMenuTheme) => void;

package/hooks/useNumberOfTextLinesInSubItem.js

@@ -1,14 +0,0 @@
-export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText, size, theme) {
-    if (size === void 0) { size = 'small'; }
-    if (textRef.current) {
-        var el_1 = textRef.current;
-        setTimeout(function () {
-            var textHeight = +el_1.offsetHeight;
-            var lineHeight = size === 'small' ? parseInt(theme.sideMenuLineHeight) : parseInt(theme.sideMenuLargeLineHeight);
-            var lines = textHeight / lineHeight;
-            if (lines >= 2) {
-                setIsMultilineText(true);
-            }
-        }, 0);
-    }
-};