@skbkontur/side-menu 0.7.4 → 0.8.1

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.8.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.8.0...@skbkontur/side-menu@0.8.1) (2023-04-19)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+# [0.8.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.7.4...@skbkontur/side-menu@0.8.0) (2023-03-31)
+
+
+### Features
+
+* **SideMenu:** improve minimize animation ([acc6f27](https://git.skbkontur.ru/ui/ui-parking/commits/acc6f27df7c96a8a4e0fc6d595c40ad962a75b4d))
+
+
+
+
+
 ## [0.7.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.7.3...@skbkontur/side-menu@0.7.4) (2023-03-30)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/hooks/useAnimateOnMount.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from 'react';
+export declare function useAnimateOnMount(isMounted: boolean, delayTime: number, mountStyles: CSSProperties, unmountStyles: CSSProperties): [boolean, CSSProperties];

package/hooks/useAnimateOnMount.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+export function useAnimateOnMount(isMounted, delayTime, mountStyles, unmountStyles) {
+    var _a = useState(isMounted ? mountStyles : unmountStyles), style = _a[0], setStyle = _a[1];
+    var _b = useState(isMounted), shouldShowComponent = _b[0], setShouldShowComponent = _b[1];
+    useEffect(function () {
+        var timeoutId;
+        if (isMounted) {
+            setShouldShowComponent(true);
+            timeoutId = setTimeout(function () { return setStyle(mountStyles); }, 0);
+        }
+        else {
+            timeoutId = setTimeout(function () { return setShouldShowComponent(false); }, delayTime);
+            setStyle(unmountStyles);
+        }
+        return function () { return clearTimeout(timeoutId); };
+    }, [isMounted, delayTime]);
+    return [shouldShowComponent, style];
+}

package/hooks/useNumberOfTextLinesInItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const useNumberOfTextLinesInItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>) => void;
+export declare const useNumberOfTextLinesInItem: (textRef: React.RefObject<HTMLDivElement>, setLinesNumber: React.Dispatch<React.SetStateAction<number>>, text?: string, marker?: string, size?: string) => void;

package/hooks/useNumberOfTextLinesInItem.js

@@ -1,13 +1,38 @@
-export var useNumberOfTextLinesInItem = function (textRef, setIsMultilineText) {
-    if (textRef.current) {
-        var el_1 = textRef.current;
-        setTimeout(function () {
-            var textHeight = +el_1.offsetHeight;
-            var lineHeight = typeof window !== undefined ? parseInt(window.getComputedStyle(el_1).getPropertyValue('line-height')) : 0;
-            var lines = textHeight / lineHeight;
-            if (lines >= 2) {
-                setIsMultilineText(true);
+export var useNumberOfTextLinesInItem = function (textRef, setLinesNumber, text, marker, size) {
+    if (text === void 0) { text = ''; }
+    if (marker === void 0) { marker = ''; }
+    if (size === void 0) { size = 'small'; }
+    var getContainerWidth = function (ctx, marker) {
+        var containerWidth = 232 - 2 * 16 - 24 - 2 * 8; //TODO после перехода на переменные темы заменить на формулу: side-menu-width - 2 * side-menu-paddingX - iconWidth - 2 * iconPaddingX
+        var markerPaddings = marker ? 2 * 6 + 8 : 0; //TODO после перехода на переменные темы заменить на marker-padding-x и marker-margin-right
+        var markerWidth = ctx.measureText(marker).width + markerPaddings;
+        return containerWidth - markerWidth - 8; //TODO после перехода на переменные темы заменить на caption-margin-right
+    };
+    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++;
             }
-        }, 0);
+            else {
+                line = testLine;
+            }
+        });
+        return lineCount;
+    };
+    var fontSize = size === 'small' ? 14 : 16; //TODO после перехода на переменные темы заменить на side-menu-font-size-small и side-menu-font-size-large
+    var fontFamily = textRef.current && typeof window !== undefined
+        ? 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 = text.split(' ');
+        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, marker)));
     }
 };

package/hooks/useNumberOfTextLinesInSubItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>) => void;

package/hooks/useNumberOfTextLinesInSubItem.js

@@ -0,0 +1,13 @@
+export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText) {
+    if (textRef.current) {
+        var el_1 = textRef.current;
+        setTimeout(function () {
+            var textHeight = +el_1.offsetHeight;
+            var lineHeight = typeof window !== undefined ? parseInt(window.getComputedStyle(el_1).getPropertyValue('line-height')) : 0;
+            var lines = textHeight / lineHeight;
+            if (lines >= 2) {
+                setIsMultilineText(true);
+            }
+        }, 0);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.7.4",
+  "version": "0.8.1",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
     "@skbkontur/react-ui": "4.13.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "^0.15.0",
+    "@skbkontur/icons": "^0.16.0",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.d.ts

@@ -40,5 +40,7 @@ interface SubComponents {
     SubLink: typeof SideMenuSubLink;
     __KONTUR_REACT_UI__: string;
 }
+export declare const transitionDuration = 300;
+export declare const burgerTransitionDuration: number;
 export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
 export {};

package/src/SideMenu/SideMenu.js

@@ -17,12 +17,15 @@ import { RightBorder } from '../internal/RightBorder';
 import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
 import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
 import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
-import { useResponsiveLayout } from '@skbkontur/react-ui';
+import { DEFAULT_THEME, useResponsiveLayout } from '@skbkontur/react-ui';
 import { Backdrop } from '../internal/Backdrop';
 import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
 import { isTouchDevice } from '../../utils/scripts';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
+import { useAnimateOnMount } from '../../hooks/useAnimateOnMount';
+export var transitionDuration = 300; //ms
+export var burgerTransitionDuration = (transitionDuration * 2) / 3;
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
     var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, _j = _a.desktopMediaQuery, desktopMediaQuery = _j === void 0 ? '(min-width: 1200px)' : _j, _k = _a.narrowDesktopMediaQuery, narrowDesktopMediaQuery = _k === void 0 ? '(min-width: 992px)' : _k, _l = _a.tabletMediaQuery, tabletMediaQuery = _l === void 0 ? '(min-width: 768px)' : _l, _m = _a.mobileMediaQuery, mobileMediaQuery = _m === void 0 ? '(min-width: 0px)' : _m, _o = _a.separatedMenuWithOverlay, separatedMenuWithOverlay = _o === void 0 ? false : _o, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "separatedMenuWithOverlay"]);
@@ -53,6 +56,17 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     var _x = useState(true), isMouseOutside = _x[0], setIsMouseOutside = _x[1];
     var _y = useState('top'), scrollState = _y[0], setScrollState = _y[1];
     var _z = useState(false), hasScrollBar = _z[0], setHasScrollBar = _z[1];
+    var _0 = useState(0), mousePositionX = _0[0], setMousePositionX = _0[1];
+    useEffect(function () {
+        return function () {
+            if (transitionTimer) {
+                clearTimeout(transitionTimer);
+            }
+            if (widgetTimer) {
+                clearTimeout(widgetTimer);
+            }
+        };
+    }, []);
     useEffect(function () {
         if (isNarrowDesktop || isDesktopQuery) {
             setIsShown(true);
@@ -83,7 +97,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
             transitionTimer = setTimeout(function () {
                 setIsBeingTransitioned(false);
-            }, 1000);
+            }, transitionDuration);
         }
     };
     var handleMouseEnter = function () {
@@ -107,14 +121,15 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         setIsMouseOutside(true);
     };
     var showMinimizedRootForNarrowDesktopWithOverlay = function (e) {
-        if (separatedMenuWithoutOverlay && isNarrowDesktop) {
-            if (e.clientX < parseInt(sideMenuMinimizedWidth)) {
-                showMinimizedRoot(false);
-            }
-            if (e.clientX > parseInt(sideMenuStandardWidth)) {
-                showMinimizedRoot(true);
-            }
+        if (!separatedMenuWithoutOverlay || !isNarrowDesktop)
+            return;
+        if (e.clientX < parseInt(sideMenuMinimizedWidth) && mousePositionX > parseInt(sideMenuMinimizedWidth)) {
+            showMinimizedRoot(false);
+        }
+        if (e.clientX > parseInt(sideMenuStandardWidth)) {
+            showMinimizedRoot(true);
         }
+        setMousePositionX(e.clientX);
     };
     var switchActiveMenuItem = function (id) {
         if (id !== value) {
@@ -122,13 +137,26 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setActiveMenuItem(id);
         }
     };
-    var toggleIsShown = function () {
-        isTabletOrMobile && setIsShown(!isShown);
-    };
-    var turnOffIsShown = function () {
-        isTabletOrMobile && setIsShown(false);
+    var handleIsShown = function (newIsShown) {
+        if (!isTabletOrMobile)
+            return;
+        if (!isBeingTransitioned && newIsShown !== isShown) {
+            setIsBeingTransitioned(true);
+            setIsShown(newIsShown);
+            if (transitionTimer) {
+                clearTimeout(transitionTimer);
+            }
+            transitionTimer = setTimeout(function () {
+                setIsBeingTransitioned(false);
+            }, burgerTransitionDuration);
+        }
     };
     var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
+    var _1 = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
+        opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
+    }, {
+        opacity: 0,
+    }), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimized: isMinimized,
             setIsMinimized: showMinimizedRoot,
@@ -146,7 +174,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             isMobile: isMobile,
             isTouchScreen: isTouchScreen,
             isShown: isShown,
-            toggleIsShown: toggleIsShown,
+            toggleIsShown: function () { return handleIsShown(!isShown); },
             isSeparatedMenuShown: isSeparatedMenuShown,
             setIsSeparatedMenuShown: setIsSeparatedMenuShown,
             separatedMenuWithoutOverlay: separatedMenuWithoutOverlay,
@@ -165,8 +193,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                 _b[jsStyles.separatedRootForDesktops()] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
                 _b)) },
             React.createElement(React.Fragment, null,
-                isTabletOrMobile && isShown && React.createElement(Backdrop, null),
-                React.createElement(RenderLayer, { onClickOutside: turnOffIsShown },
+                shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
+                React.createElement(RenderLayer, { onClickOutside: function () { return handleIsShown(false); } },
                     React.createElement("aside", __assign({ className: cx((_c = {},
                             _c[jsStyles.wrapper()] = true,
                             _c[jsStyles.wrapperIE()] = isIE11,
@@ -174,15 +202,14 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                             _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktopWithOverlay }),
                         React.createElement("div", { className: cx((_d = {},
                                 _d[jsStyles.container()] = true,
-                                _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown,
+                                _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
                                 _d[jsStyles.minimizedContainer()] = isMinimized,
                                 _d[jsStyles.innerContainer()] = !isSeparatedMenu,
                                 _d[jsStyles.containerForTouchScreens()] = isTouchScreen,
-                                _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && isShown,
+                                _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
                                 _d)) },
                             React.createElement("div", { className: cx((_e = {},
                                     _e[jsStyles.contentWrapper()] = true,
-                                    _e[jsStyles.collapsedContentWrapperForTabletsOrMobiles()] = !isShown || isSeparatedMenuShown,
                                     _e)) }, children)),
                         !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
 });

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

@@ -11,7 +11,6 @@ export declare const jsStyles: {
     separatedRootForNarrowDesktops(): string;
     separatedRootForDesktops(): string;
     container(): string;
-    collapsedContentWrapperForTabletsOrMobiles(): string;
     minimizedContainer(): string;
     innerContainer(): string;
     containerForTouchScreens(): string;

package/src/SideMenu/SideMenu.styles.js

@@ -1,5 +1,6 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { burgerTransitionDuration, transitionDuration } from './SideMenu';
 export var sideMenuMinimizedWidth = '72px';
 export var sideMenuStandardWidth = '232px';
 export var sideMenuForTouchScreenWidth = '328px';
@@ -10,10 +11,10 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "], ["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "])));
     },
     rootForTabletsOrMobiles: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 68px;\n      position: absolute;\n      top: 0;\n    "], ["\n      height: 68px;\n      position: absolute;\n      top: 0;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 68px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: 68px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), burgerTransitionDuration);
     },
     shownRootForTabletsOrMobiles: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 100vh;\n    "], ["\n      height: 100vh;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 100vh;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: 100vh;\n      transition: height ", "ms ease-out;\n    "])), burgerTransitionDuration);
     },
     rootForNarrowDesktops: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), sideMenuMinimizedWidth);
@@ -25,39 +26,36 @@ var styles = {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: #fff;\n    "], ["\n      width: calc(", " + ", ");\n      background: #fff;\n    "])), sideMenuStandardWidth, sideMenuStandardWidth);
     },
     container: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])), sideMenuStandardWidth);
-    },
-    collapsedContentWrapperForTabletsOrMobiles: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "])), sideMenuStandardWidth, transitionDuration);
     },
     minimizedContainer: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), sideMenuMinimizedWidth);
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), sideMenuMinimizedWidth);
     },
     innerContainer: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
     containerForTouchScreens: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), sideMenuForTouchScreenWidth);
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), sideMenuForTouchScreenWidth);
     },
     separatedContainerForMobiles: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
     },
     contentWrapper: function () {
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n    "])));
+        return css(templateObject_12 || (templateObject_12 = __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    "])));
     },
     wrapper: function () {
-        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    "])));
+        return css(templateObject_13 || (templateObject_13 = __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_15 || (templateObject_15 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
     wrapperWithShadow: function () {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), sideMenuBoxShadow);
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), sideMenuBoxShadow);
     },
     collapsedContainerForTabletsOrMobiles: function () {
-        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\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, 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;

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { transitionDuration } from '../SideMenu/SideMenu';
 var styles = {
     label: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 200px;\n      transition: width 1s;\n    "], ["\n      width: 200px;\n      transition: width 1s;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 200px;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: 200px;\n      transition: width ", "ms ease-out;\n    "])), transitionDuration);
     },
     minimizedLabel: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));

package/src/SideMenuFooter/SideMenuFooter.js

@@ -13,7 +13,11 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
         setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
     }, [context.hasScrollBar, context.scrollState]);
     if (context.isShown) {
-        return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.rootFixed()] = isFixed, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
+        return (React.createElement("footer", __assign({ className: cx((_b = {},
+                _b[jsStyles.root()] = true,
+                _b[jsStyles.rootFixed()] = isFixed,
+                _b[jsStyles.rootTransitioned()] = context.isBeingTransitioned,
+                _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
             if (React.isValidElement(child)) {
                 return React.cloneElement(child, {
                     _generatedId: getItemId('footer', index++),

package/src/SideMenuFooter/SideMenuFooter.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const jsStyles: {
     root(): string;
     rootFixed(): string;
+    rootTransitioned(): string;
 };

package/src/SideMenuFooter/SideMenuFooter.styles.js

@@ -8,6 +8,9 @@ var styles = {
     rootFixed: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0 1px 0 #e6e6e6;\n    "], ["\n      box-shadow: inset 0 1px 0 #e6e6e6;\n    "])));
     },
+    rootTransitioned: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));
+    },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/src/SideMenuHeader/SideMenuHeader.js

@@ -12,9 +12,10 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
     var headerWrapperRef = useRef(null);
     return (React.createElement("header", __assign({ className: cx((_b = {},
             _b[jsStyles.root()] = true,
+            _b[jsStyles.rootForTabletsOrMobiles()] = context.isMobile || context.isTablet,
             _b[jsStyles.fixedRoot()] = context.isShown && !(context.scrollState === 'top'),
             _b[jsStyles.minimizedRoot()] = context.isMinimized || context.isBeingTransitioned,
-            _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown,
+            _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown || context.isBeingTransitioned,
             _b[jsStyles.rootWithSeparatedMenuShown()] = context.isShown && context.isMobile && context.isSeparatedMenuShown,
             _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style }, rest),
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));

package/src/SideMenuHeader/SideMenuHeader.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const jsStyles: {
     root(): string;
     minimizedRoot(): string;
+    rootForTabletsOrMobiles(): string;
     collapsedRootForTabletsOrMobiles(): string;
     rootWithSeparatedMenuShown(): string;
     fixedRoot(): string;

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -1,23 +1,25 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { sideMenuMarginX } from '../SideMenu/SideMenu.styles';
-var headerWrapperPaddingX = '8px';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", " - 2 * ", ");\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px ", " 16px;\n      margin: 0 ", ";\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", " - 2 * ", ");\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px ", " 16px;\n      margin: 0 ", ";\n    "])), headerWrapperPaddingX, sideMenuMarginX, headerWrapperPaddingX, sideMenuMarginX);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: 24px 0 8px;\n      margin: 0 ", ";\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: 24px 0 8px;\n      margin: 0 ", ";\n    "])), sideMenuMarginX, sideMenuMarginX);
     },
     minimizedRoot: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "], ["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 54px;\n    "], ["\n      width: 54px;\n    "])));
+    },
+    rootForTabletsOrMobiles: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 16px;\n    "], ["\n      padding-top: 16px;\n    "])));
     },
     collapsedRootForTabletsOrMobiles: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
     },
     rootWithSeparatedMenuShown: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
     },
     fixedRoot: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-bottom: 8px;\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "], ["\n      padding-bottom: 8px;\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "])));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-bottom: 8px;\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "], ["\n      padding-bottom: 8px;\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/src/internal/Backdrop.d.ts

@@ -1 +1,4 @@
-export declare const Backdrop: () => JSX.Element;
+import { CSSProperties } from 'react';
+export declare const Backdrop: (props: {
+    style: CSSProperties;
+}) => JSX.Element;

package/src/internal/Backdrop.js

@@ -1,15 +1,13 @@
+import { __assign } from "tslib";
 import React from 'react';
 import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
 import { jsStyles } from './Backdrop.styles';
 import { DEFAULT_THEME } from '@skbkontur/react-ui';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-export var Backdrop = function () {
+export var Backdrop = function (props) {
     var _a;
     return (React.createElement("div", { className: cx((_a = {},
             _a[jsStyles.rootForTabletsOrMobiles()] = true,
-            _a)), style: {
-            background: DEFAULT_THEME.sidePageBackingBg,
-            opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
-        } },
+            _a)), style: __assign({ background: DEFAULT_THEME.sidePageBackingBg }, props.style) },
         React.createElement(HideBodyVerticalScroll, null)));
 };

package/src/internal/Backdrop.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { burgerTransitionDuration } from '../SideMenu/SideMenu';
 var styles = {
     rootForTabletsOrMobiles: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-in;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-in;\n    "])), burgerTransitionDuration);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/ClickableElement.styles.js

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: transparent;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: transparent;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
     },
     rootSubItem: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "], ["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "])));

package/src/internal/ItemContent/Caption.js

@@ -9,14 +9,14 @@ export var Caption = forwardRef(function (_a, ref) {
     var isBeingTransitioned = context.isBeingTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
     return (React.createElement("p", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu,
+            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu && !(context.isTablet || context.isMobile),
             _b[jsStyles.rootSubItem()] = _isSubMenu,
             _b[jsStyles.rootSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
             _b[jsStyles.rootNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
             _b[jsStyles.rootWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
             _b[jsStyles.rootSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
             _b[jsStyles.rootLarge()] = size === 'large',
-            _b[jsStyles.rootMultiline()] = isMultiline,
+            _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b[jsStyles.rootForTouchScreens()] = isTouchScreen,
             _b[jsStyles.rootSubItemForTouchScreens()] = isTouchScreen && _isSubMenu,
             _b[jsStyles.rootInBackButton()] = _isBackButton,

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

@@ -8,7 +8,7 @@ var styles = {
         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      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 4px;\n      align-self: flex-start;\n    "], ["\n      padding-top: 4px;\n      align-self: flex-start;\n    "])));
     },
     rootForTouchScreens: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 18px;\n      line-height: 24px;\n    "], ["\n      font-size: 18px;\n      line-height: 24px;\n    "])));

package/src/internal/ItemContent/Icon.js

@@ -14,9 +14,8 @@ export var Icon = function (_a) {
         disableCompensation: !_isBackButton,
         className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.rootMultiline()] = isMultiline && !context.isMinimized,
+            _b[jsStyles.rootMultiline()] = isMultiline && (!context.isMinimized || _isSubMenu),
             _b[jsStyles.rootLarge()] = size === 'large',
-            _b[jsStyles.rootMultilineLarge()] = size === 'large' && isMultiline,
             _b[jsStyles.rootSubItem()] = _isSubMenu,
             _b[jsStyles.rootSubItemSeparatedMenu()] = isSeparatedMenu && _isSubMenu,
             _b[jsStyles.rootSubItemLarge()] = _isSubMenu && size === 'large',

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

@@ -2,7 +2,6 @@ export declare const jsStyles: {
     root(): string;
     rootMultiline(): string;
     rootLarge(): string;
-    rootMultilineLarge(): string;
     rootSubItemLarge(): string;
     rootSubItem(): string;
     rootSubItemSeparatedMenu(): string;

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

@@ -5,26 +5,23 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "])));
     },
     rootMultiline: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
+        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    "])));
     },
     rootLarge: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
     },
-    rootMultilineLarge: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-height: 0;\n    "], ["\n      min-height: 0;\n    "])));
-    },
     rootSubItemLarge: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
     },
     rootSubItem: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
     },
     rootSubItemSeparatedMenu: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
     },
     rootBackButton: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-left: 10px;\n      padding-right: 6px;\n    "], ["\n      padding-left: 10px;\n      padding-right: 6px;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: 10px;\n      padding-right: 6px;\n    "], ["\n      padding-left: 10px;\n      padding-right: 6px;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/ItemContent/ItemContent.js

@@ -1,8 +1,9 @@
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './ItemContent.styles';
+import { customStyles, 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';
@@ -11,18 +12,30 @@ import { Avatar } from './Avatar';
  * Контент для SideMenuItem или SideMenuLink
  */
 var ItemContent = forwardRef(function (_a, ref) {
-    var _b;
+    var _b, _c;
     var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
     var textRef = useRef(null);
-    var _c = useState(false), isMultiline = _c[0], setIsMultiline = _c[1];
+    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);
     useEffect(function () {
-        !_isBackButton && useNumberOfTextLinesInItem(textRef, setIsMultiline);
+        if (!_isBackButton && !_isSubMenu) {
+            useNumberOfTextLinesInItem(textRef, setLinesNumber, caption, marker, context.size);
+        }
+        if (!_isBackButton && _isSubMenu) {
+            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem);
+        }
+    }, []);
+    useEffect(function () {
+        if (!_isBackButton) {
+            useNumberOfTextLinesInItem(textRef, setLinesNumber, caption, marker, context.size);
+        }
     }, [textRef.current, context.isBeingTransitioned]);
     var hasShortcutImage = !!icon || !!_avatar;
+    var isSeparatedSubMenuInNarrowDesktopWithoutOverlay = _isSubMenu && context.separatedMenuWithoutOverlay && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.multilineRoot()] = isMultiline,
             _b[jsStyles.subItemRoot()] = _isSubMenu,
             _b[jsStyles.largeRoot()] = context.size === 'large',
             _b[jsStyles.subItemLargeRoot()] = context.size === 'large' && _isSubMenu,
@@ -32,9 +45,13 @@ var ItemContent = forwardRef(function (_a, ref) {
             _b)), ref: ref },
         icon && React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton }),
         _avatar && React.createElement(Avatar, { _avatar: _avatar }),
-        (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
+        (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: cx((_c = {},
+                _c[jsStyles.textAndMarkerWrapper()] = true,
+                _c[customStyles.textAndMarkerWrapperMultiline(linesNumber)] = isMultiline && !_isSubMenu,
+                _c[customStyles.largeTextAndMarkerWrapperMultiline(linesNumber)] = isMultiline && context.size === 'large' && !_isSubMenu,
+                _c)) },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, _isBackButton: _isBackButton, ref: textRef }),
-            marker && React.createElement(Marker, { isMultiline: isMultiline, marker: marker })))));
+            marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

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

@@ -1,6 +1,9 @@
+export declare const customStyles: {
+    textAndMarkerWrapperMultiline(linesNumber: number): string;
+    largeTextAndMarkerWrapperMultiline(linesNumber: number): string;
+};
 export declare const jsStyles: {
     root(): string;
-    multilineRoot(): string;
     largeRoot(): string;
     subItemLargeRoot(): string;
     largeMultilineRoot(): string;

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

@@ -4,30 +4,37 @@ var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
-    multilineRoot: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
-    },
     largeRoot: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "], ["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "], ["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "])));
     },
     subItemLargeRoot: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
     },
     largeMultilineRoot: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
     rootForTouchScreens: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
     subItemRootForTouchScreens: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
     },
     subItemRoot: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
     textAndMarkerWrapper: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
+    },
+};
+export var customStyles = {
+    textAndMarkerWrapperMultiline: function (linesNumber) {
+        var height = linesNumber * 20 + 4; // TODO: после перехода на переменные темы заменить на формулу: linesNumber*line-height + caption-multiline-padding-top
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
+    },
+    largeTextAndMarkerWrapperMultiline: function (linesNumber) {
+        var height = linesNumber * 22 + 4; // TODO: после перехода на переменные темы заменить на формулу: linesNumber*line-height-large + caption-multiline-padding-top
+        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;

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

@@ -5,7 +5,7 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "], ["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "])));
     },
     rootMultiline: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: 4px;\n    "], ["\n      align-self: flex-start;\n      margin-top: 4px;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/SideMenuLogotype.js

@@ -4,16 +4,18 @@ import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
 import { jsStyles } from './SideMenuLogotype.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { Burger } from './Burger';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 /**
  * Логотип
  *
  * @visibleName SideMenu.Logotype
  */
 var SideMenuLogotype = forwardRef(function (_a, ref) {
+    var _b, _c;
     var productLogo = _a.productLogo, withWidget = _a.withWidget, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = __rest(_a, ["productLogo", "withWidget", "konturLogo", "iconUrl"]);
     var context = useContext(SideMenuContext);
     var refLogotype = useRef(null);
-    var _b = useState(28), size = _b[0], setSize = _b[1];
+    var _d = useState(28), size = _d[0], setSize = _d[1];
     useEffect(function () {
         var _a, _b, _c;
         (_a = context.setProductColor) === null || _a === void 0 ? void 0 : _a.call(context, productLogo === null || productLogo === void 0 ? void 0 : productLogo.props.color);
@@ -42,9 +44,6 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     var getStaticIconPath = function () {
         return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-32.svg";
     };
-    if (context.isMinimized || context.isBeingTransitioned) {
-        return React.createElement("img", { className: jsStyles.icon(), src: iconUrl || getStaticIconPath(), alt: productName });
-    }
     var getWidget = function (withWidget, isTouchScreen, showWidget) {
         if (withWidget !== undefined) {
             return withWidget;
@@ -55,8 +54,17 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
         return showWidget;
     };
     return (React.createElement("div", { className: jsStyles.root(), ref: ref },
-        (context.isTablet || context.isMobile) && React.createElement(Burger, null),
-        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.showWidget) }, rest))));
+        !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_b = {},
+                _b[jsStyles.iconHidden()] = true,
+                _b[jsStyles.icon()] = context.isMinimized,
+                _b)), src: iconUrl || getStaticIconPath(), alt: productName })),
+        React.createElement("div", { className: cx((_c = {},
+                _c[jsStyles.logoWrapper()] = true,
+                _c[jsStyles.logoWrapperForTabletsOrMobiles()] = context.isMobile || context.isTablet,
+                _c[jsStyles.logoWrapperHidden()] = context.isMinimized,
+                _c)) },
+            (context.isTablet || context.isMobile) && React.createElement(Burger, null),
+            React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.showWidget) }, rest)))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });

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

@@ -1,4 +1,8 @@
 export declare const jsStyles: {
-    icon(): string;
     root(): string;
+    icon(): string;
+    iconHidden(): string;
+    logoWrapper(): string;
+    logoWrapperForTabletsOrMobiles(): string;
+    logoWrapperHidden(): string;
 };

package/src/internal/SideMenuLogotype.styles.js

@@ -1,12 +1,27 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { transitionDuration } from '../SideMenu/SideMenu';
+var iconSize = 32;
+var gapBetweenIconAndLogo = 50;
 var styles = {
+    root: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+    },
     icon: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: 0;\n      opacity: 1;\n    "], ["\n      left: 0;\n      opacity: 1;\n    "])));
     },
-    root: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+    iconHidden: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      left: -", "px;\n      display: block;\n      padding-left: 4px;\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", "px;\n      display: block;\n      padding-left: 4px;\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), gapBetweenIconAndLogo, transitionDuration);
+    },
+    logoWrapper: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      left: -", "px;\n      padding-top: 2px;\n      padding-bottom: 6px;\n      padding-left: 8px;\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", "px;\n      padding-top: 2px;\n      padding-bottom: 6px;\n      padding-left: 8px;\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), iconSize, transitionDuration);
+    },
+    logoWrapperForTabletsOrMobiles: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      left: 0;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      left: 0;\n    "])));
+    },
+    logoWrapperHidden: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: ", "px;\n      opacity: 0;\n    "], ["\n      left: ", "px;\n      opacity: 0;\n    "])), gapBetweenIconAndLogo - iconSize);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/src/internal/SubMenu.js

@@ -14,7 +14,7 @@ var SubMenu = forwardRef(function (_a, ref) {
     if (!children || !isOpened || isSubMenu || shouldHideOverlayMenu) {
         return null;
     }
-    if (isSeparatedMenu) {
+    if (isSeparatedMenu && (context.isShown || context.isBeingTransitioned)) {
         return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption }, children));
     }
     return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref }, children));