@skbkontur/side-menu 0.7.3 → 0.7.4

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "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.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';
@@ -26,7 +26,6 @@ import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 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 +44,15 @@ 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];
-    useEffect(function () {
-        return function () {
-            if (scrollTimer) {
-                clearTimeout(scrollTimer);
-            }
-        };
-    });
+    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];
     useEffect(function () {
         if (isNarrowDesktop || isDesktopQuery) {
             setIsShown(true);
@@ -72,6 +64,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]);
@@ -88,21 +86,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }, 1000);
         }
     };
-    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;
@@ -168,10 +151,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             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,
@@ -190,15 +175,13 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                         React.createElement("div", { className: cx((_d = {},
                                 _d[jsStyles.container()] = true,
                                 _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown,
-                                _d[jsStyles.containerSafari()] = isSafari,
                                 _d[jsStyles.minimizedContainer()] = isMinimized,
                                 _d[jsStyles.innerContainer()] = !isSeparatedMenu,
                                 _d[jsStyles.containerForTouchScreens()] = isTouchScreen,
                                 _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && isShown,
-                                _d)), onScroll: handleScroll },
+                                _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,8 +11,6 @@ export declare const jsStyles: {
     separatedRootForNarrowDesktops(): string;
     separatedRootForDesktops(): string;
     container(): string;
-    containerSafari(): string;
-    contentWrapperWithoutScrollBar(): string;
     collapsedContentWrapperForTabletsOrMobiles(): string;
     minimizedContainer(): string;
     innerContainer(): string;

package/src/SideMenu/SideMenu.styles.js

@@ -4,6 +4,7 @@ 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    "])));
@@ -26,43 +27,37 @@ var styles = {
     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_8 || (templateObject_8 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
     },
     minimizedContainer: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), sideMenuMinimizedWidth);
+        return css(templateObject_9 || (templateObject_9 = __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_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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_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    "])));
     },
     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_14 || (templateObject_14 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     wrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        return css(templateObject_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_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);
     },
     wrapperWithShadow: function () {
-        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), sideMenuBoxShadow);
+        return css(templateObject_16 || (templateObject_16 = __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_17 || (templateObject_17 = __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, templateObject_17;

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>;

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -1,40 +1,43 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
+import { DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenuDropdown.styles';
 import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
 import { SideMenuContext } from '../SideMenuContext';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
-    var _b, _c;
-    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
+    var _b;
+    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _c = _a.caption, caption = _c === void 0 ? 'СКБ Контур' : _c, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
     var context = useContext(SideMenuContext);
     var label = (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.label()] = true,
             _b[jsStyles.minimizedLabel()] = context.isMinimized,
             _b)) },
         React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar, id: id, _isDropdown: true })));
-    return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
-            menuItemHoverBg: '#f6f6f6',
-            menuItemHoverColor: '#222',
-            popupBorderRadius: '8px',
-            menuItemPaddingX: '32px',
-        }, DEFAULT_THEME) },
-        React.createElement("div", { className: cx((_c = {}, _c[jsStyles.wrapper()] = true, _c), className), ref: ref },
-            React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
-                // @ts-expect-error: accessing private property
-                if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
-                    return React.cloneElement(child, {
-                        onClick: function () {
-                            var _a, _b, _c;
-                            (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
-                            (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
-                        },
-                    });
-                }
-                return child;
-            })))));
+    return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+        var _a;
+        return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
+                menuItemHoverBg: '#f6f6f6',
+                menuItemHoverColor: '#222',
+                popupBorderRadius: '8px',
+                menuItemPaddingX: '32px',
+            }, theme) },
+            React.createElement("div", { className: cx((_a = {}, _a[jsStyles.wrapper()] = true, _a), className), ref: ref },
+                React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
+                    // @ts-expect-error: accessing private property
+                    if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
+                        return React.cloneElement(child, {
+                            onClick: function () {
+                                var _a, _b, _c;
+                                (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
+                                (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
+                            },
+                        });
+                    }
+                    return child;
+                })))));
+    }));
 });
 SideMenuDropdownInner.displayName = 'SideMenuDropdown';
 /**

package/src/SideMenuFooter/SideMenuFooter.d.ts

@@ -8,6 +8,6 @@ export interface SideMenuFooterProps extends CommonProps {
  *
  * @visibleName SideMenu.Footer
  */
-export declare const SideMenuFooter: React.FC<SideMenuFooterProps> & {
+export declare const SideMenuFooter: React.ForwardRefExoticComponent<SideMenuFooterProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuFooter/SideMenuFooter.js

@@ -1,5 +1,5 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenuFooter.styles';
 import { getItemId } from '../../utils/scripts';
@@ -8,8 +8,12 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
+    var _c = useState(false), isFixed = _c[0], setIsFixed = _c[1];
+    useEffect(function () {
+        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), 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), 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,3 +1,4 @@
 export declare const jsStyles: {
     root(): string;
+    rootFixed(): string;
 };

package/src/SideMenuFooter/SideMenuFooter.styles.js

@@ -1,9 +1,13 @@
 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: 0;\n    "], ["\n      flex-grow: 0;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: 24px;\n      padding-top: 8px;\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: 24px;\n      padding-top: 8px;\n      margin: 0 ", ";\n    "])), sideMenuMarginX);
+    },
+    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    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/src/SideMenuHeader/SideMenuHeader.js

@@ -1,5 +1,5 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { jsStyles } from './SideMenuHeader.styles';
@@ -10,29 +10,9 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
     var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, withWidget = _a.withWidget, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget"]);
     var context = useContext(SideMenuContext);
     var headerWrapperRef = useRef(null);
-    var _c = useState(false), isFixed = _c[0], setIsFixed = _c[1];
-    var checkFixed = function () {
-        if (headerWrapperRef.current && headerWrapperRef.current.offsetTop > 0) {
-            setIsFixed(true);
-        }
-        else {
-            setIsFixed(false);
-        }
-    };
-    useEffect(function () {
-        if (!context.isSeparatedMenuShown) {
-            window.addEventListener('scroll', checkFixed, true);
-        }
-        return function () {
-            window.removeEventListener('scroll', checkFixed, true);
-        };
-    });
-    useEffect(function () {
-        context.isMobileSeparatedMenuScrolling !== undefined && setIsFixed(context.isMobileSeparatedMenuScrolling);
-    }, [context.isMobileSeparatedMenuScrolling]);
     return (React.createElement("header", __assign({ className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.fixedRoot()] = isFixed,
+            _b[jsStyles.fixedRoot()] = context.isShown && !(context.scrollState === 'top'),
             _b[jsStyles.minimizedRoot()] = context.isMinimized || context.isBeingTransitioned,
             _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown,
             _b[jsStyles.rootWithSeparatedMenuShown()] = context.isShown && context.isMobile && context.isSeparatedMenuShown,

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -1,9 +1,10 @@
 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 * ", ");\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px ", " 16px;\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px ", " 16px;\n    "])), headerWrapperPaddingX, headerWrapperPaddingX);
+        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);
     },
     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    "])));
@@ -15,7 +16,7 @@ var styles = {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
     },
     fixedRoot: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "], ["\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "])));
+        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    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/SeparatedSubMenu.js

@@ -6,9 +6,8 @@ import { jsStylesForSeparatedSubMenu } from './SeparatedSubMenu.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { isClickableSubElement } from '../../utils/scripts';
 import { BackButton } from './BackButton';
-import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { useMobileSeparatedMenuScroll } from '../../hooks/useMobileSeparatedMenuScroll';
+import { ScrollContainer } from '@skbkontur/react-ui';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
 /**
  * Отдельностоящее подменю
@@ -16,7 +15,7 @@ import { isIE11 } from '@skbkontur/react-ui/lib/client';
  * @visibleName SeparatedSubMenu
  */
 var SeparatedSubMenu = forwardRef(function (_a, ref) {
-    var _b;
+    var _b, _c;
     var children = _a.children, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
     var context = useContext(SideMenuContext);
     var isSubItemWithChildren = function (child) {
@@ -31,7 +30,6 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
             return child;
         });
     };
-    var separatedMenuRef = useMobileSeparatedMenuScroll();
     var levelIndex = 0;
     var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
     var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
@@ -43,22 +41,30 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
             _b[jsStylesForSeparatedSubMenu.rootWithoutOverlay()] = context.separatedMenuWithoutOverlay && context.isDesktop,
             _b[jsStylesForSeparatedSubMenu.rootWithoutOverlayForNarrowDesktop()] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
             _b[jsStylesForSeparatedSubMenu.rootWithShadow()] = isSeparatedSubMenuOverContent,
-            _b)), ref: mergeRefs([separatedMenuRef, ref]), "data-tid": SideMenuDataTids.separatedSubMenu },
-        context.isMobile && React.createElement(BackButton, { caption: caption, id: id, href: href, generatedId: generatedId }),
-        React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {
-            if (React.isValidElement(child)) {
-                if (
-                // @ts-expect-error: accessing private property
-                isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
-                    var oldIndex = levelIndex;
-                    levelIndex++;
-                    return React.cloneElement(child, {
-                        _generatedId: generatedId + "-" + oldIndex,
-                    });
-                }
-                return child;
-            }
-        }))));
+            _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
+        React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
+                var _a;
+                (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
+            }, hideScrollBar: true },
+            React.createElement("div", { className: cx((_c = {},
+                    _c[jsStylesForSeparatedSubMenu.contentWrapper()] = true,
+                    _c[jsStylesForSeparatedSubMenu.contentWrapperForMobiles()] = context.isMobile,
+                    _c)) },
+                context.isMobile && React.createElement(BackButton, { caption: caption, id: id, href: href, generatedId: generatedId }),
+                React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {
+                    if (React.isValidElement(child)) {
+                        if (
+                        // @ts-expect-error: accessing private property
+                        isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
+                            var oldIndex = levelIndex;
+                            levelIndex++;
+                            return React.cloneElement(child, {
+                                _generatedId: generatedId + "-" + oldIndex,
+                            });
+                        }
+                        return child;
+                    }
+                }))))));
 });
 SeparatedSubMenu.displayName = 'SeparatedSubMenu';
 var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });

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

@@ -4,4 +4,6 @@ export declare const jsStylesForSeparatedSubMenu: {
     rootWithoutOverlayForNarrowDesktop(): string;
     rootWithoutOverlay(): string;
     rootWithShadow(): string;
+    contentWrapper(): string;
+    contentWrapperForMobiles(): string;
 };

package/src/internal/SeparatedSubMenu.styles.js

@@ -3,11 +3,11 @@ import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { sideMenuBoxShadow, sideMenuMinimizedWidth, sideMenuStandardWidth } from '../SideMenu/SideMenu.styles';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      border-right: 1px solid #e5e5e5;\n    "])));
     },
     rootForMobiles: function () {
         var headerHeight = '68px';
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n      padding-top: 0;\n    "], ["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n      padding-top: 0;\n    "])), headerHeight, headerHeight);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n    "], ["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n    "])), headerHeight, headerHeight);
     },
     rootWithoutOverlayForNarrowDesktop: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), sideMenuMinimizedWidth);
@@ -18,6 +18,12 @@ var styles = {
     rootWithShadow: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: ", ";\n      clip-path: inset(0 -24px 0 0);\n      border-right: none;\n    "], ["\n      box-shadow: ", ";\n      clip-path: inset(0 -24px 0 0);\n      border-right: none;\n    "])), sideMenuBoxShadow);
     },
+    contentWrapper: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: 24px 16px;\n    "], ["\n      padding: 24px 16px;\n    "])));
+    },
+    contentWrapperForMobiles: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
+    },
 };
 export var jsStylesForSeparatedSubMenu = 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, templateObject_7;

package/hooks/useMobileSeparatedMenuScroll.d.ts

@@ -1 +0,0 @@
-export declare const useMobileSeparatedMenuScroll: () => import("react").RefObject<HTMLDivElement>;

package/hooks/useMobileSeparatedMenuScroll.js

@@ -1,21 +0,0 @@
-import { useContext, useEffect, useRef } from 'react';
-import { SideMenuContext } from '../src/SideMenuContext';
-export var useMobileSeparatedMenuScroll = function () {
-    var separatedMenuRef = useRef(null);
-    var context = useContext(SideMenuContext);
-    var checkScroll = function () {
-        var _a, _b;
-        var isScrolledToTop = ((_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0;
-        (_b = context.setIsMobileSeparatedMenuScrolling) === null || _b === void 0 ? void 0 : _b.call(context, !isScrolledToTop);
-    };
-    useEffect(function () {
-        var _a;
-        context.isMobile && ((_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', checkScroll, true));
-        return function () {
-            var _a, _b;
-            (_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', checkScroll, true);
-            (_b = context.setIsMobileSeparatedMenuScrolling) === null || _b === void 0 ? void 0 : _b.call(context, false);
-        };
-    }, []);
-    return separatedMenuRef;
-};