@skbkontur/side-menu 0.9.5 → 0.10.0

package/lib/theming/ThemeHelpers.js

@@ -0,0 +1,66 @@
+import { isFunction } from '@skbkontur/react-ui/lib/utils';
+import { memo } from '../utils/memo';
+import { SideMenuThemeInternal, isSideMenuTheme, markAsSideMenuTheme } from '../../internal/themes/SideMenuTheme';
+/**
+ * Creates SideMenuTheme out of ReactUI's Theme.
+ *
+ * Inserts SideMenu vars in the theme, puts them over ReactUI's vars,
+ * but respects these SideMenu vars values that might have been specified in ReactUI's theme before that.
+ *
+ * This allows inserting SideMenu vars in the theme on the fly
+ * (without need for users to do it manually in their apps),
+ * and using ReactUI's ThemeContext.Provider for overriding them.
+ */
+export var createSideMenuTheme = function (theme) {
+    if (isSideMenuTheme(theme))
+        return theme;
+    var sideMenuTheme = Object.create(theme, Object.assign(Object.getOwnPropertyDescriptors(SideMenuThemeInternal), {}));
+    var _loop_1 = function (key) {
+        var descriptor = Object.getOwnPropertyDescriptor(sideMenuTheme, key);
+        Object.defineProperty(sideMenuTheme, key, {
+            get: function () {
+                if (descriptor) {
+                    var get = descriptor.get, value = descriptor.value;
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    return theme[key] || (isFunction(get) ? get.call(this) : value);
+                }
+            },
+        });
+    };
+    for (var _i = 0, _a = Object.keys(sideMenuTheme); _i < _a.length; _i++) {
+        var key = _a[_i];
+        _loop_1(key);
+    }
+    return markAsSideMenuTheme(sideMenuTheme);
+};
+export var getSideMenuTheme = memo(function (theme) {
+    return createSideMenuTheme(theme);
+});
+function isZeroArgs(fn) {
+    return fn.length == 0;
+}
+var memoize = function (fn) {
+    if (isZeroArgs(fn)) {
+        var isCalled_1 = false;
+        var result_1;
+        return function () {
+            if (!isCalled_1) {
+                isCalled_1 = true;
+                result_1 = fn();
+            }
+            return result_1;
+        };
+    }
+    var cache = new WeakMap();
+    return function (arg) {
+        if (!cache.has(arg))
+            cache.set(arg, fn(arg));
+        return cache.get(arg);
+    };
+};
+export var memoizeStyle = function (styles) {
+    Object.keys(styles).forEach(function (className) { return (styles[className] = memoize(styles[className])); });
+    return styles;
+};
+export var cssName = function (className) { return "." + className; };

package/lib/theming/ThemeTypes.d.ts

@@ -0,0 +1,3 @@
+import { SideMenuThemeInternal } from '../../internal/themes/SideMenuTheme';
+export declare type SideMenuTheme = Readonly<typeof SideMenuThemeInternal>;
+export declare type SideMenuThemeIn = Partial<SideMenuTheme>;

package/lib/utils/memo.d.ts

@@ -0,0 +1 @@
+export declare const memo: <A extends Record<string, unknown>, R>(fn: (() => R) | ((arg: A) => R)) => (() => R) | ((arg: A) => R);

package/lib/utils/memo.js

@@ -0,0 +1,9 @@
+export var memo = function (fn) {
+    var cache = new WeakMap();
+    return function (arg) {
+        if (!cache.has(arg)) {
+            cache.set(arg, fn(arg));
+        }
+        return cache.get(arg);
+    };
+};

package/{utils → lib/utils}/scripts.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { FlattedArrayElementType } from '../src/internal/InnerBody';
+import { FlattedArrayElementType } from '../../src/internal/InnerBody';
 export declare const getItemId: (prefix: 'body' | 'footer', id: string | number) => string;
 export declare const isClickableSubElement: (element: string) => boolean;
 export declare const isClickableElement: (element: string) => boolean;
@@ -10,4 +10,3 @@ export declare const isParentOpened: (id: string | undefined, generatedId: strin
 export declare const isElementActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
 export declare const isBrowser: boolean;
 export declare const isTouchDevice: () => boolean;
-export declare const getIconSize: (_isSubMenu?: boolean | undefined, _isBackButton?: boolean | undefined) => 24 | 16 | undefined;

package/{utils → lib/utils}/scripts.js

@@ -77,11 +77,3 @@ export var isBrowser = typeof window !== 'undefined';
 export var isTouchDevice = function () {
     return isBrowser && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
 };
-export var getIconSize = function (_isSubMenu, _isBackButton) {
-    if (!_isSubMenu) {
-        return 24;
-    }
-    if (!_isBackButton) {
-        return 16;
-    }
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^0.16.0",
-    "@skbkontur/react-ui-addons": "^4.6.2",
+    "@skbkontur/react-ui-addons": "^4.6.3",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.js

@@ -1,8 +1,9 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
-import { jsStyles, sideMenuMinimizedWidth, sideMenuStandardWidth } from './SideMenu.styles';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { customStyles, jsStyles } from './SideMenu.styles';
 import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
 import { SideMenuContext } from '../SideMenuContext';
 import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
@@ -20,43 +21,45 @@ import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
 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 { isTouchDevice } from '../../lib/utils/scripts';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 import { useAnimateOnMount } from '../../hooks/useAnimateOnMount';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 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 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, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _j = _a.separatedMenuWithOverlay, separatedMenuWithOverlay = _j === void 0 ? false : _j, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "separatedMenuWithOverlay"]);
     var transitionTimer = useRef(null);
     var widgetTimer = useRef(null);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var customMediaQueries = {
-        isMobileQuery: mobileMediaQuery,
-        isTabletQuery: tabletMediaQuery,
-        isNarrowDesktopQuery: narrowDesktopMediaQuery,
-        isDesktopQuery: desktopMediaQuery,
+        isMobileQuery: mobileMediaQuery || theme.sideMenuMobileMediaQuery,
+        isTabletQuery: tabletMediaQuery || theme.sideMenuTabletMediaQuery,
+        isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
+        isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _p = useResponsiveLayout({
+    var _k = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _p.isMobileQuery, isTabletQuery = _p.isTabletQuery, isNarrowDesktopQuery = _p.isNarrowDesktopQuery, isDesktopQuery = _p.isDesktopQuery;
+    }), isMobileQuery = _k.isMobileQuery, isTabletQuery = _k.isTabletQuery, isNarrowDesktopQuery = _k.isNarrowDesktopQuery, isDesktopQuery = _k.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
     var separatedMenuWithoutOverlay = isSeparatedMenu && !separatedMenuWithOverlay;
-    var _q = useState(isNarrowDesktop), isMinimized = _q[0], setIsMinimized = _q[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];
+    var _l = useState(isNarrowDesktop), isMinimized = _l[0], setIsMinimized = _l[1];
+    var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
+    var _o = useState(false), showWidget = _o[0], setShowWidget = _o[1];
+    var _p = useState(value), activeMenuItem = _p[0], setActiveMenuItem = _p[1];
+    var _q = useState(isDesktopQuery || isNarrowDesktop), isShown = _q[0], setIsShown = _q[1];
+    var _r = useState(false), isSeparatedMenuShown = _r[0], setIsSeparatedMenuShown = _r[1];
+    var _s = useState(true), isMouseOutside = _s[0], setIsMouseOutside = _s[1];
+    var _t = useState('top'), scrollState = _t[0], setScrollState = _t[1];
+    var _u = useState(false), hasScrollBar = _u[0], setHasScrollBar = _u[1];
+    var _v = useState(0), mousePositionX = _v[0], setMousePositionX = _v[1];
+    var _w = useState(0), headerHeight = _w[0], setHeaderHeight = _w[1];
     useEffect(function () {
         return function () {
             if (transitionTimer.current) {
@@ -123,10 +126,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     var showMinimizedRootForNarrowDesktopWithOverlay = function (e) {
         if (!separatedMenuWithoutOverlay || !isNarrowDesktop)
             return;
-        if (e.clientX < parseInt(sideMenuMinimizedWidth) && mousePositionX > parseInt(sideMenuMinimizedWidth)) {
+        if (e.clientX < parseInt(theme.sideMenuMinimizedWidth) &&
+            mousePositionX > parseInt(theme.sideMenuMinimizedWidth)) {
             showMinimizedRoot(false);
         }
-        if (e.clientX > parseInt(sideMenuStandardWidth)) {
+        if (e.clientX > parseInt(theme.sideMenuWidth)) {
             showMinimizedRoot(true);
         }
         setMousePositionX(e.clientX);
@@ -152,19 +156,17 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
-    var _1 = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
+    var _x = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
         opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
+    }), shouldShowBackdrop = _x[0], backdropStyle = _x[1];
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimized: isMinimized,
             setIsMinimized: showMinimizedRoot,
             isBeingTransitioned: isBeingTransitioned,
             isSeparatedMenu: isSeparatedMenu,
             size: size,
-            productColor: productColor,
-            setProductColor: setProductColor,
             showWidget: showWidget,
             activeMenuItem: activeMenuItem,
             switchActiveMenuItem: switchActiveMenuItem,
@@ -183,14 +185,16 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setScrollState: setScrollState,
             hasScrollBar: hasScrollBar,
             setHasScrollBar: setHasScrollBar,
+            headerHeight: headerHeight,
+            setHeaderHeight: setHeaderHeight,
         } },
         React.createElement(ZIndex, { priority: isTabletOrMobile || isNarrowDesktop ? 8 : 0, className: cx((_b = {},
                 _b[jsStyles.root()] = true,
-                _b[jsStyles.rootForTabletsOrMobiles()] = isTabletOrMobile,
+                _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
                 _b[jsStyles.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
-                _b[jsStyles.rootForNarrowDesktops()] = isNarrowDesktop,
-                _b[jsStyles.separatedRootForNarrowDesktops()] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
-                _b[jsStyles.separatedRootForDesktops()] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
+                _b[jsStyles.rootForNarrowDesktops(theme)] = isNarrowDesktop,
+                _b[jsStyles.separatedRootForNarrowDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
+                _b[jsStyles.separatedRootForDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
                 _b)) },
             React.createElement(React.Fragment, null,
                 shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
@@ -198,15 +202,15 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                     React.createElement("aside", __assign({ className: cx((_c = {},
                             _c[jsStyles.wrapper()] = true,
                             _c[jsStyles.wrapperIE()] = isIE11,
-                            _c[jsStyles.wrapperWithShadow()] = isSideMenuOverContent,
+                            _c[jsStyles.wrapperWithShadow(theme)] = isSideMenuOverContent,
                             _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.container(theme)] = true,
                                 _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
-                                _d[jsStyles.minimizedContainer()] = isMinimized,
+                                _d[jsStyles.minimizedContainer(theme)] = isMinimized,
                                 _d[jsStyles.innerContainer()] = !isSeparatedMenu,
-                                _d[jsStyles.containerForTouchScreens()] = isTouchScreen,
-                                _d[jsStyles.separatedContainerForMobiles()] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
+                                _d[jsStyles.containerForTouchScreens(theme)] = isTouchScreen,
+                                _d[jsStyles.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
                                 _d)) },
                             React.createElement("div", { className: cx((_e = {},
                                     _e[jsStyles.contentWrapper()] = true,

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

@@ -1,23 +1,21 @@
-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";
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
+export declare const customStyles: {
+    rootForTabletsOrMobiles(headerHeight?: number | undefined): string;
+};
 export declare const jsStyles: {
     root(): string;
-    rootForTabletsOrMobiles(): string;
     shownRootForTabletsOrMobiles(): string;
-    rootForNarrowDesktops(): string;
-    separatedRootForNarrowDesktops(): string;
-    separatedRootForDesktops(): string;
-    container(): string;
-    minimizedContainer(): string;
+    rootForNarrowDesktops(t: SideMenuTheme): string;
+    separatedRootForNarrowDesktops(t: SideMenuTheme): string;
+    separatedRootForDesktops(t: SideMenuTheme): string;
+    container(t: SideMenuTheme): string;
+    minimizedContainer(t: SideMenuTheme): string;
     innerContainer(): string;
-    containerForTouchScreens(): string;
-    separatedContainerForMobiles(): string;
+    containerForTouchScreens(t: SideMenuTheme): string;
+    separatedContainerForMobiles(t: SideMenuTheme): string;
     contentWrapper(): string;
     wrapper(): string;
     wrapperIE(): string;
-    wrapperWithShadow(): string;
+    wrapperWithShadow(t: SideMenuTheme): string;
     collapsedContainerForTabletsOrMobiles(): string;
 };

package/src/SideMenu/SideMenu.styles.js

@@ -1,60 +1,58 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 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      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      transition: height ", "ms ease-out;\n    "], ["\n      height: 100vh;\n      transition: height ", "ms ease-out;\n    "])), burgerTransitionDuration);
+        return css(templateObject_2 || (templateObject_2 = __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);
+    rootForNarrowDesktops: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuMinimizedWidth);
     },
-    separatedRootForNarrowDesktops: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: #fff;\n    "], ["\n      width: calc(", " + ", ");\n      background: #fff;\n    "])), sideMenuMinimizedWidth, sideMenuStandardWidth);
+    separatedRootForNarrowDesktops: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
     },
-    separatedRootForDesktops: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: #fff;\n    "], ["\n      width: calc(", " + ", ");\n      background: #fff;\n    "])), sideMenuStandardWidth, sideMenuStandardWidth);
+    separatedRootForDesktops: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
     },
-    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 ", "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);
+    container: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuBgColor, transitionDuration);
     },
-    minimizedContainer: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), sideMenuMinimizedWidth);
+    minimizedContainer: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), t.sideMenuMinimizedWidth);
     },
     innerContainer: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
-    containerForTouchScreens: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), sideMenuForTouchScreenWidth);
+    containerForTouchScreens: function (t) {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
     },
-    separatedContainerForMobiles: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+    separatedContainerForMobiles: function (t) {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
     contentWrapper: function () {
-        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    "])));
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n    "])));
     },
     wrapper: function () {
-        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    "])));
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     wrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        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);
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
-    wrapperWithShadow: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), sideMenuBoxShadow);
+    wrapperWithShadow: function (t) {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
     },
     collapsedContainerForTabletsOrMobiles: function () {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+    },
+};
+export var customStyles = {
+    rootForTabletsOrMobiles: function (headerHeight) {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/SideMenuAvatar/SideMenuAvatar.md

@@ -0,0 +1,7 @@
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuAvatarMargin: string;
+}
+```

package/src/SideMenuBody/SideMenuBody.d.ts

@@ -1,6 +1,5 @@
 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;
 }
@@ -9,6 +8,6 @@ export interface SideMenuBodyProps extends CommonProps {
  *
  * @visibleName SideMenu.Body
  */
-export declare const SideMenuBody: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<ScrollContainer>> & {
+export declare const SideMenuBody: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuBody/SideMenuBody.js

@@ -1,9 +1,11 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './SideMenuBody.styles';
 import { InnerBody } from '../internal/InnerBody';
 import { SideMenuContext } from '../SideMenuContext';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { ScrollContainer, ScrollContainerDataTids } from '@skbkontur/react-ui';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 var SideMenuBodyInner = forwardRef(function (_a, ref) {
@@ -11,10 +13,13 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     var scrollContainerRef = useRef(null);
+    var sideMenuBodyRef = useRef(null);
     var setScrollContainerInnerPosition = function () {
-        var scrollContainerInner = document.querySelector("[data-tid=" + ScrollContainerDataTids.inner + "]");
-        if (scrollContainerInner) {
-            scrollContainerInner.style.position = 'static';
+        if (sideMenuBodyRef.current) {
+            var scrollContainerInner = sideMenuBodyRef.current.querySelector("[data-tid=" + ScrollContainerDataTids.inner + "]");
+            if (scrollContainerInner) {
+                scrollContainerInner.style.position = 'static';
+            }
         }
     };
     useEffect(function () {
@@ -25,13 +30,15 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
         }, 50);
         setScrollContainerInnerPosition();
     }, [context.activeMenuItem, context.isShown]);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     if (context.isShown) {
-        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 (React.createElement("div", { ref: mergeRefs([ref, sideMenuBodyRef]), style: { overflow: 'hidden', height: '100%' } },
+            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: scrollContainerRef },
+                React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className) }, rest),
+                    React.createElement(InnerBody, null, children)))));
     }
     return null;
 });

package/src/SideMenuBody/SideMenuBody.md

@@ -0,0 +1,7 @@
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuBodyPaddingBottom: string;
+}
+```

package/src/SideMenuBody/SideMenuBody.styles.d.ts

@@ -1,3 +1,4 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
+    root(t: SideMenuTheme): string;
 };

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -1,9 +1,9 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { sideMenuMarginX } from '../SideMenu/SideMenu.styles';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        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);
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: ", ";\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 1;\n      padding-bottom: ", ";\n      margin: 0 ", ";\n    "])), t.sideMenuBodyPaddingBottom, t.sideMenuMarginX);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/SideMenuContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FlattedArrayElementType } from './internal/InnerBody';
 import { ScrollContainerScrollStateY } from '@skbkontur/react-ui';
 export interface SideMenuContextType {
@@ -9,8 +10,6 @@ export interface SideMenuContextType {
     activeMenuItem?: string | null;
     switchActiveMenuItem?: (id: string) => void;
     hasSubIcons?: boolean;
-    productColor?: string;
-    setProductColor?: (color: string) => void;
     showWidget?: boolean;
     openedParents?: string[];
     isDesktop?: boolean;
@@ -29,5 +28,7 @@ export interface SideMenuContextType {
     setScrollState?: (state: ScrollContainerScrollStateY) => void;
     hasScrollBar?: boolean;
     setHasScrollBar?: (hasScrollBar: boolean) => void;
+    headerHeight?: number;
+    setHeaderHeight?: (mobileHeaderHeight: number) => void;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDivider/SideMenuDivider.md

@@ -0,0 +1,7 @@
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuDividerBgColor: string;
+  sideMenuDividerMarginX: string;
+}

package/src/SideMenuDivider/SideMenuDivider.styles.js

@@ -1,5 +1,6 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "], ["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "])));

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -1,21 +1,22 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext } from 'react';
-import { DropdownMenu } from '@skbkontur/react-ui';
+import { ThemeContext, DropdownMenu } 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';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 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, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "subCaption", "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, subCaption: subCaption, _avatar: _avatar, id: id, _isDropdown: true })));
-    return (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) {
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },
+        React.createElement(DropdownMenu, __assign({ caption: React.createElement("div", { className: cx((_c = {},
+                    _c[jsStyles.label(theme)] = true,
+                    _c[jsStyles.minimizedLabel()] = context.isMinimized,
+                    _c)) },
+                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, _avatar: _avatar, id: id, _isDropdown: true })), 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, {

package/src/SideMenuDropdown/SideMenuDropdown.styles.d.ts

@@ -1,5 +1,6 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    label(): string;
+    label(t: SideMenuTheme): string;
     minimizedLabel(): string;
     wrapper(): string;
 };