@skbkontur/side-menu 0.7.3 → 0.8.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.
 
+# [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
+
+
+
+
+
 ## [0.7.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.7.2...@skbkontur/side-menu@0.7.3) (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.3",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -14,13 +14,13 @@
   },
   "author": "Kontur",
   "peerDependencies": {
-    "@skbkontur/react-ui": ">=4 <5",
+    "@skbkontur/react-ui": ">=4.5.0 <5",
     "@skbkontur/react-ui-addons": ">=4.0.1",
     "react": ">=16.9",
     "react-dom": ">=16.9"
   },
   "devDependencies": {
-    "@skbkontur/react-ui": "4.5.0"
+    "@skbkontur/react-ui": "4.13.0"
   },
   "dependencies": {
     "@skbkontur/icons": "^0.15.0",

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

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { isIE11, isSafari } from '@skbkontur/react-ui/lib/client';
+import { isIE11 } from '@skbkontur/react-ui/lib/client';
 import { jsStyles, sideMenuMinimizedWidth, sideMenuStandardWidth } from './SideMenu.styles';
 import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
 import { SideMenuContext } from '../SideMenuContext';
@@ -17,16 +17,18 @@ 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"]);
-    var scrollTimer = null;
     var transitionTimer = null;
     var widgetTimer;
     var customMediaQueries = {
@@ -45,22 +47,26 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
     var separatedMenuWithoutOverlay = isSeparatedMenu && !separatedMenuWithOverlay;
     var _q = useState(isNarrowDesktop), isMinimized = _q[0], setIsMinimized = _q[1];
-    var _r = useState(false), hasScrollBar = _r[0], setHasScrollBar = _r[1];
-    var _s = useState(false), isBeingTransitioned = _s[0], setIsBeingTransitioned = _s[1];
-    var _t = useState('#2291ff'), productColor = _t[0], setProductColor = _t[1];
-    var _u = useState(false), showWidget = _u[0], setShowWidget = _u[1];
-    var _v = useState(value), activeMenuItem = _v[0], setActiveMenuItem = _v[1];
-    var _w = useState(isDesktopQuery || isNarrowDesktop), isShown = _w[0], setIsShown = _w[1];
-    var _x = useState(false), isSeparatedMenuShown = _x[0], setIsSeparatedMenuShown = _x[1];
-    var _y = useState(true), isMouseOutside = _y[0], setIsMouseOutside = _y[1];
-    var _z = useState(false), isMobileSeparatedMenuScrolling = _z[0], setIsMobileSeparatedMenuScrolling = _z[1];
+    var _r = useState(false), isBeingTransitioned = _r[0], setIsBeingTransitioned = _r[1];
+    var _s = useState('#2291ff'), productColor = _s[0], setProductColor = _s[1];
+    var _t = useState(false), showWidget = _t[0], setShowWidget = _t[1];
+    var _u = useState(value), activeMenuItem = _u[0], setActiveMenuItem = _u[1];
+    var _v = useState(isDesktopQuery || isNarrowDesktop), isShown = _v[0], setIsShown = _v[1];
+    var _w = useState(false), isSeparatedMenuShown = _w[0], setIsSeparatedMenuShown = _w[1];
+    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 (scrollTimer) {
-                clearTimeout(scrollTimer);
+            if (transitionTimer) {
+                clearTimeout(transitionTimer);
+            }
+            if (widgetTimer) {
+                clearTimeout(widgetTimer);
             }
         };
-    });
+    }, []);
     useEffect(function () {
         if (isNarrowDesktop || isDesktopQuery) {
             setIsShown(true);
@@ -72,6 +78,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setIsMinimized(true);
         }
     }, [isNarrowDesktop, isDesktopQuery]);
+    useEffect(function () {
+        if (isTablet || isMobile) {
+            setIsMinimized(false);
+            setIsShown(false);
+        }
+    }, [isTablet, isMobile]);
     useEffect(function () {
         setActiveMenuItem(value);
     }, [value]);
@@ -85,24 +97,9 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
             transitionTimer = setTimeout(function () {
                 setIsBeingTransitioned(false);
-            }, 1000);
+            }, transitionDuration);
         }
     };
-    var handleScroll = function (event) {
-        var element = event.target;
-        if (Math.floor(element.scrollHeight - element.scrollTop) === element.clientHeight) {
-            return;
-        }
-        if (!hasScrollBar) {
-            setHasScrollBar(true);
-        }
-        if (scrollTimer) {
-            clearTimeout(scrollTimer);
-        }
-        scrollTimer = setTimeout(function () {
-            setHasScrollBar(false);
-        }, 200);
-    };
     var handleMouseEnter = function () {
         if (separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop) {
             return;
@@ -124,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) {
@@ -139,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,
@@ -163,15 +174,17 @@ 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,
             setIsMouseOutside: setIsMouseOutside,
-            isMobileSeparatedMenuScrolling: isMobileSeparatedMenuScrolling,
-            setIsMobileSeparatedMenuScrolling: setIsMobileSeparatedMenuScrolling,
+            scrollState: scrollState,
+            setScrollState: setScrollState,
+            hasScrollBar: hasScrollBar,
+            setHasScrollBar: setHasScrollBar,
         } },
-        React.createElement(ZIndex, { priority: isTabletOrMobile ? 'Sidepage' : 0, className: cx((_b = {},
+        React.createElement(ZIndex, { priority: isTabletOrMobile || isNarrowDesktop ? 'Sidepage' : 0, className: cx((_b = {},
                 _b[jsStyles.root()] = true,
                 _b[jsStyles.rootForTabletsOrMobiles()] = isTabletOrMobile,
                 _b[jsStyles.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
@@ -180,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,
@@ -189,17 +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.containerSafari()] = isSafari,
+                                _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
                                 _d[jsStyles.minimizedContainer()] = isMinimized,
                                 _d[jsStyles.innerContainer()] = !isSeparatedMenu,
                                 _d[jsStyles.containerForTouchScreens()] = isTouchScreen,
-                                _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && isShown,
-                                _d)), onScroll: handleScroll },
+                                _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
+                                _d)) },
                             React.createElement("div", { className: cx((_e = {},
                                     _e[jsStyles.contentWrapper()] = true,
-                                    _e[jsStyles.contentWrapperWithoutScrollBar()] = !hasScrollBar,
-                                    _e[jsStyles.collapsedContentWrapperForTabletsOrMobiles()] = !isShown || isSeparatedMenuShown,
                                     _e)) }, children)),
                         !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
 });

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

@@ -2,6 +2,7 @@ export declare const sideMenuMinimizedWidth = "72px";
 export declare const sideMenuStandardWidth = "232px";
 export declare const sideMenuForTouchScreenWidth = "328px";
 export declare const sideMenuBoxShadow = "4px 4px 24px rgba(0, 0, 0, 0.24)";
+export declare const sideMenuMarginX = "16px";
 export declare const jsStyles: {
     root(): string;
     rootForTabletsOrMobiles(): string;
@@ -10,9 +11,6 @@ export declare const jsStyles: {
     separatedRootForNarrowDesktops(): string;
     separatedRootForDesktops(): string;
     container(): string;
-    containerSafari(): string;
-    contentWrapperWithoutScrollBar(): string;
-    collapsedContentWrapperForTabletsOrMobiles(): string;
     minimizedContainer(): string;
     innerContainer(): string;
     containerForTouchScreens(): string;

package/src/SideMenu/SideMenu.styles.js

@@ -1,18 +1,20 @@
 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';
 export var sideMenuBoxShadow = '4px 4px 24px rgba(0, 0, 0, 0.24)';
+export var sideMenuMarginX = '16px';
 var styles = {
     root: function () {
         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);
@@ -24,45 +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);
-    },
-    containerSafari: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
-    },
-    contentWrapperWithoutScrollBar: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "], ["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "])));
-    },
-    collapsedContentWrapperForTabletsOrMobiles: function () {
-        return css(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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_13 || (templateObject_13 = __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_14 || (templateObject_14 = __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_15 || (templateObject_15 = __makeTemplateObject(["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "], ["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\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_16 || (templateObject_16 = __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_17 || (templateObject_17 = __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_18 || (templateObject_18 = __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_19 || (templateObject_19 = __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, templateObject_18, templateObject_19;
+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/SideMenuBody/SideMenuBody.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { ScrollContainer } from '@skbkontur/react-ui';
 export interface SideMenuBodyProps extends CommonProps {
     children?: React.ReactNode;
 }
@@ -8,6 +9,6 @@ export interface SideMenuBodyProps extends CommonProps {
  *
  * @visibleName SideMenu.Body
  */
-export declare const SideMenuBody: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const SideMenuBody: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<ScrollContainer>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuBody/SideMenuBody.js

@@ -1,16 +1,37 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenuBody.styles';
 import { InnerBody } from '../internal/InnerBody';
 import { SideMenuContext } from '../SideMenuContext';
+import { ScrollContainer, ScrollContainerDataTids } from '@skbkontur/react-ui';
+import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 var SideMenuBodyInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
+    var scrollContainerRef = useRef(null);
+    var setScrollContainerInnerPosition = function () {
+        var scrollContainerInner = document.querySelector("[data-tid=" + ScrollContainerDataTids.inner + "]");
+        if (scrollContainerInner) {
+            scrollContainerInner.style.position = 'static';
+        }
+    };
+    useEffect(function () {
+        setTimeout(function () {
+            var _a, _b;
+            // @ts-expect-error: accessing private method
+            (_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'));
+        }, 50);
+        setScrollContainerInnerPosition();
+    }, [context.activeMenuItem, context.isShown]);
     if (context.isShown) {
-        return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className), ref: ref }, rest),
-            React.createElement(InnerBody, null, children)));
+        return (React.createElement(ScrollContainer, { style: { position: 'static' }, onScrollStateChangeY: function (state) {
+                var _a;
+                (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
+            }, hideScrollBar: true, ref: mergeRefs([ref, scrollContainerRef]) },
+            React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className) }, rest),
+                React.createElement(InnerBody, null, children))));
     }
     return null;
 });

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { sideMenuMarginX } from '../SideMenu/SideMenu.styles';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 8px;\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 8px;\n      margin: 0 ", ";\n    "])), sideMenuMarginX);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/SideMenuContext.d.ts

@@ -1,4 +1,5 @@
 import { FlattedArrayElementType } from './internal/InnerBody';
+import { ScrollContainerScrollStateY } from '@skbkontur/react-ui';
 export interface SideMenuContextType {
     isMinimized?: boolean;
     setIsMinimized?: (isMinimized: boolean) => void;
@@ -24,7 +25,9 @@ export interface SideMenuContextType {
     setIsSeparatedMenuShown?: (separatedMenuIsShown: boolean) => void;
     separatedMenuWithoutOverlay?: boolean;
     setIsMouseOutside?: (v: boolean) => void;
-    isMobileSeparatedMenuScrolling?: boolean;
-    setIsMobileSeparatedMenuScrolling?: (isScrolling: boolean) => void;
+    scrollState?: ScrollContainerScrollStateY;
+    setScrollState?: (state: ScrollContainerScrollStateY) => void;
+    hasScrollBar?: boolean;
+    setHasScrollBar?: (hasScrollBar: boolean) => void;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;