@skbkontur/side-menu 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.6.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.5.1...@skbkontur/side-menu@0.6.0) (2023-02-08)
+
+
+### Features
+
+* **SideMenu:** implement mobile adaptive version ([9a1e347](https://git.skbkontur.ru/ui/ui-parking/commits/9a1e347519afd0684c30b98a42191ced336b075f))
+
+
+
+
+
 ## [0.5.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.5.0...@skbkontur/side-menu@0.5.1) (2023-01-24)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -19,7 +19,7 @@ import {
   AttachLinkIcon,
 } from '@skbkontur/icons';
 
-<div style={{height: '600px'}}>
+<div style={{height: '600px', position: 'relative'}}>
     <SideMenu disableSwipe={false}>
         <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
         <SideMenu.Body>
@@ -120,7 +120,7 @@ const renderModal = () => {
   );
 }
 
-<div style={{height: '600px', width: '100%'}}>
+<div style={{height: '600px', width: '100%', position: 'relative'}}>
   <SideMenu isSeparatedMenu={true}>
     <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
     <SideMenu.Body>

package/SideMenuDataTids.d.ts

@@ -0,0 +1,6 @@
+export declare const SideMenuDataTids: {
+    root: string;
+    burger: string;
+    backButton: string;
+    separatedSubMenu: string;
+};

package/SideMenuDataTids.js

@@ -0,0 +1,6 @@
+export var SideMenuDataTids = {
+    root: 'SideMenu__root',
+    burger: 'SideMenu__burger',
+    backButton: 'SideMenu__backButton',
+    separatedSubMenu: 'SideMenu__separatedSubMenu',
+};

package/hooks/useMobileSeparatedMenuScroll.d.ts

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

package/hooks/useMobileSeparatedMenuScroll.js

@@ -0,0 +1,21 @@
+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.setMobileSeparatedMenuIsScrolling) === 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.setMobileSeparatedMenuIsScrolling) === null || _b === void 0 ? void 0 : _b.call(context, false);
+        };
+    }, []);
+    return separatedMenuRef;
+};

package/hooks/useOpenedState.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const useOpenedState: (id?: string | undefined, generatedId?: string | undefined, openedParents?: string[] | undefined, isActive?: boolean, children?: React.ReactNode) => boolean;
+export declare const useOpenedState: (id?: string | undefined, generatedId?: string | undefined, openedParents?: string[] | undefined, isActive?: boolean, children?: React.ReactNode, separatedMenuIsShown?: boolean | undefined, isMobileAndSeparatedMenu?: boolean | undefined) => boolean;

package/hooks/useOpenedState.js

@@ -1,11 +1,14 @@
 import { useEffect, useState } from 'react';
 import { isParentOpened } from '../utils/scripts';
-export var useOpenedState = function (id, generatedId, openedParents, isActive, children) {
+export var useOpenedState = function (id, generatedId, openedParents, isActive, children, separatedMenuIsShown, isMobileAndSeparatedMenu) {
     if (isActive === void 0) { isActive = false; }
     var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
     useEffect(function () {
         var isOpenedParent = isParentOpened(id, generatedId, openedParents);
-        setIsOpened(!!children && (isOpenedParent || isActive));
-    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), isActive]);
+        var isOpenedOrActiveClickableElement = !!children && (isOpenedParent || isActive);
+        var isOpenedInOpenedSeparatedMenu = isOpenedOrActiveClickableElement && !!separatedMenuIsShown;
+        var isOpened = isMobileAndSeparatedMenu ? isOpenedInOpenedSeparatedMenu : isOpenedOrActiveClickableElement;
+        setIsOpened(isOpened);
+    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), isActive, separatedMenuIsShown]);
     return isOpened;
 };

package/hooks/useOpenedSubElementState.js

@@ -7,6 +7,6 @@ export var useOpenedSubElementState = function (id, generatedId, openedParents,
         var idIsActive = isIdActive(id, activeMenuItem);
         var generatedIdIsActive = isIdActive(generatedId, activeMenuItem);
         setIsOpened(isOpenedParent || isOpened || idIsActive || generatedIdIsActive);
-    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString()]);
+    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), activeMenuItem]);
     return isOpened;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/SideMenu/SideMenu.d.ts

@@ -20,6 +20,7 @@ export interface SideMenuProps extends CommonProps {
     value?: string;
     onValueChange?: (value: string) => void;
     tabletMediaQuery?: string;
+    mobileMediaQuery?: string;
 }
 interface SubComponents {
     Body: typeof SideMenuBody;
@@ -36,9 +37,5 @@ interface SubComponents {
     SubLink: typeof SideMenuSubLink;
     __KONTUR_REACT_UI__: string;
 }
-export declare const SideMenuDataTids: {
-    root: string;
-    burger: string;
-};
 export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
 export {};

package/src/SideMenu/SideMenu.js

@@ -19,38 +19,38 @@ import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
 import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
 import { useResponsiveLayout } from '@skbkontur/react-ui';
 import { Backdrop } from '../internal/Backdrop';
-import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
 import { isTouchScreen } from '../../utils/scripts';
-export var SideMenuDataTids = {
-    root: 'SideMenu__root',
-    burger: 'SideMenu__Burger',
-};
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+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.tabletMediaQuery, tabletMediaQuery = _j === void 0 ? '768px' : _j, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "tabletMediaQuery"]);
+    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.tabletMediaQuery, tabletMediaQuery = _j === void 0 ? '768px' : _j, _k = _a.mobileMediaQuery, mobileMediaQuery = _k === void 0 ? '0px' : _k, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "tabletMediaQuery", "mobileMediaQuery"]);
     var scrollTimer = null;
     var transitionTimer = null;
     var widgetTimer;
     var customMediaQueries = {
-        isMobile: '(min-width: 0px)',
+        isMobile: "(min-width: " + mobileMediaQuery + ")",
         isTablet: "(min-width: " + tabletMediaQuery + ")",
         isNarrowDesktop: '(min-width: 992px)',
         isDesktop: "(min-width: 1200px)",
     };
-    var _k = useResponsiveLayout({
+    var _l = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobile = _k.isMobile, isTablet = _k.isTablet, isNarrowDesktop = _k.isNarrowDesktop, isDesktop = _k.isDesktop;
+    }), isMobile = _l.isMobile, isTablet = _l.isTablet, isNarrowDesktop = _l.isNarrowDesktop, isDesktop = _l.isDesktop;
     var isTabletSideMenu = isTablet && !isNarrowDesktop;
     var isMobileSideMenu = isMobile && !isTablet;
+    var isTabletOrMobileSideMenu = isTabletSideMenu || isMobileSideMenu;
     var isTouchScreenSideMenu = isTouchScreen() || isMobileSideMenu || isTabletSideMenu;
-    var _l = useState(false), isMinimised = _l[0], setIsMinimised = _l[1];
-    var _m = useState(false), hasScrollBar = _m[0], setHasScrollBar = _m[1];
-    var _o = useState(false), isTransitioned = _o[0], setIsTransitioned = _o[1];
-    var _p = useState('#2291ff'), productColor = _p[0], setProductColor = _p[1];
-    var _q = useState(false), showWidget = _q[0], setShowWidget = _q[1];
-    var _r = useState(value), activeMenuItem = _r[0], setActiveMenuItem = _r[1];
-    var _s = useState(isDesktop || isNarrowDesktop), isShown = _s[0], setIsShown = _s[1];
+    var _m = useState(false), isMinimised = _m[0], setIsMinimised = _m[1];
+    var _o = useState(false), hasScrollBar = _o[0], setHasScrollBar = _o[1];
+    var _p = useState(false), isTransitioned = _p[0], setIsTransitioned = _p[1];
+    var _q = useState('#2291ff'), productColor = _q[0], setProductColor = _q[1];
+    var _r = useState(false), showWidget = _r[0], setShowWidget = _r[1];
+    var _s = useState(value), activeMenuItem = _s[0], setActiveMenuItem = _s[1];
+    var _t = useState(isDesktop || isNarrowDesktop), isShown = _t[0], setIsShown = _t[1];
+    var _u = useState(false), separatedMenuIsShown = _u[0], setSeparatedMenuIsShown = _u[1];
+    var _v = useState(false), mobileSeparatedMenuIsScrolling = _v[0], setMobileSeparatedMenuIsScrolling = _v[1];
     useEffect(function () {
         return function () {
             if (scrollTimer) {
@@ -106,10 +106,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var toggleIsShown = function () {
-        isTabletSideMenu && setIsShown(!isShown);
+        isTabletOrMobileSideMenu && setIsShown(!isShown);
     };
     var turnOffIsShown = function () {
-        isTabletSideMenu && setIsShown(false);
+        isTabletOrMobileSideMenu && setIsShown(false);
     };
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimised: isMinimised,
@@ -124,34 +124,41 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             isDesktop: isDesktop,
             isNarrowDesktop: isNarrowDesktop,
             isTablet: isTabletSideMenu,
-            isMobile: isMobile,
+            isMobile: isMobileSideMenu,
             isTouchScreen: isTouchScreenSideMenu,
             isShown: isShown,
             toggleIsShown: toggleIsShown,
+            separatedMenuIsShown: separatedMenuIsShown,
+            setSeparatedMenuIsShown: setSeparatedMenuIsShown,
+            mobileSeparatedMenuIsScrolling: mobileSeparatedMenuIsScrolling,
+            setMobileSeparatedMenuIsScrolling: setMobileSeparatedMenuIsScrolling,
         } },
-        isTabletSideMenu && isShown && React.createElement(Backdrop, null),
-        React.createElement(ZIndex, { priority: 8000, className: cx((_b = {},
+        React.createElement(ZIndex, { priority: isTabletOrMobileSideMenu ? 'Sidepage' : 0, className: cx((_b = {},
                 _b[jsStyles.sideMenuZIndex()] = true,
-                _b[jsStyles.sideMenuZIndexForTablets()] = isShown && isTabletSideMenu,
+                _b[jsStyles.sideMenuZIndexForTabletsOrMobiles()] = isShown && isTabletOrMobileSideMenu,
                 _b)) },
-            React.createElement(RenderLayer, { onClickOutside: turnOffIsShown },
-                React.createElement("aside", __assign({ className: cx((_c = {},
-                        _c[jsStyles.rootWrapper()] = true,
-                        _c[jsStyles.rootWrapperIE()] = isIE11,
-                        _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
-                    React.createElement("div", { className: cx((_d = {},
-                            _d[jsStyles.root()] = true,
-                            _d[jsStyles.collapsedRootForTablets()] = !isShown,
-                            _d[jsStyles.rootSafari()] = isSafari,
-                            _d[jsStyles.minimisedRoot()] = isMinimised,
-                            _d[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
-                            _d[jsStyles.rootForTouchScreens()] = isTouchScreenSideMenu,
-                            _d)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll },
-                        React.createElement("div", { className: cx((_e = {},
-                                _e[jsStyles.rootInnerContainer()] = true,
-                                _e[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
-                                _e)) }, children)),
-                    !disableSwipe && isDesktop && React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))))));
+            React.createElement(React.Fragment, null,
+                isTabletOrMobileSideMenu && isShown && React.createElement(Backdrop, null),
+                React.createElement(RenderLayer, { onClickOutside: turnOffIsShown },
+                    React.createElement("aside", __assign({ className: cx((_c = {},
+                            _c[jsStyles.rootWrapper()] = true,
+                            _c[jsStyles.rootWrapperIE()] = isIE11,
+                            _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
+                        React.createElement("div", { className: cx((_d = {},
+                                _d[jsStyles.root()] = true,
+                                _d[jsStyles.collapsedRootForTabletsOrMobiles()] = !isShown,
+                                _d[jsStyles.rootSafari()] = isSafari,
+                                _d[jsStyles.minimisedRoot()] = isMinimised,
+                                _d[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
+                                _d[jsStyles.rootForTouchScreens()] = isTouchScreenSideMenu,
+                                _d[jsStyles.rootInSeparatedMenuForMobiles()] = isMobileSideMenu && separatedMenuIsShown && isShown,
+                                _d)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll },
+                            React.createElement("div", { className: cx((_e = {},
+                                    _e[jsStyles.rootInnerContainer()] = true,
+                                    _e[jsStyles.rootInnerWithoutScrollBar()] = !hasScrollBar,
+                                    _e[jsStyles.collapsedRootInnerForTabletsOrMobiles()] = !isShown || separatedMenuIsShown,
+                                    _e)) }, children)),
+                        !disableSwipe && isDesktop && React.createElement(RightBorder, { setIsMinimised: setIsMinimised })))))));
 });
 SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {

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

@@ -1,14 +1,16 @@
 export declare const jsStyles: {
     sideMenuZIndex(): string;
-    sideMenuZIndexForTablets(): string;
+    sideMenuZIndexForTabletsOrMobiles(): string;
     root(): string;
     rootSafari(): string;
-    rootWithoutScrollBar(): string;
+    rootInnerWithoutScrollBar(): string;
+    collapsedRootInnerForTabletsOrMobiles(): string;
     minimisedRoot(): string;
     rootWithInnerSubMenu(): string;
     rootForTouchScreens(): string;
+    rootInSeparatedMenuForMobiles(): string;
     rootInnerContainer(): string;
     rootWrapper(): string;
     rootWrapperIE(): string;
-    collapsedRootForTablets(): string;
+    collapsedRootForTabletsOrMobiles(): string;
 };

package/src/SideMenu/SideMenu.styles.js

@@ -4,7 +4,7 @@ var styles = {
     sideMenuZIndex: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n    "], ["\n      position: relative;\n      height: 100%;\n    "])));
     },
-    sideMenuZIndexForTablets: function () {
+    sideMenuZIndexForTabletsOrMobiles: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n    "], ["\n      position: absolute;\n      top: 0;\n    "])));
     },
     root: function () {
@@ -13,31 +13,37 @@ var styles = {
     rootSafari: function () {
         return css(templateObject_4 || (templateObject_4 = __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    "])));
     },
-    rootWithoutScrollBar: function () {
+    rootInnerWithoutScrollBar: function () {
         return css(templateObject_5 || (templateObject_5 = __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    "])));
     },
+    collapsedRootInnerForTabletsOrMobiles: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+    },
     minimisedRoot: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: 72px !important;\n    "], ["\n      width: 72px !important;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: 72px !important;\n    "], ["\n      width: 72px !important;\n    "])));
     },
     rootWithInnerSubMenu: function () {
-        return css(templateObject_7 || (templateObject_7 = __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    "])));
     },
     rootForTouchScreens: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: 328px;\n    "], ["\n      width: 328px;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      width: 328px;\n    "], ["\n      width: 328px;\n    "])));
+    },
+    rootInSeparatedMenuForMobiles: function () {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
     },
     rootInnerContainer: function () {
-        return css(templateObject_9 || (templateObject_9 = __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_11 || (templateObject_11 = __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    "])));
     },
     rootWrapper: function () {
-        return css(templateObject_10 || (templateObject_10 = __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    "])));
     },
     rootWrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        return css(templateObject_11 || (templateObject_11 = __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: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
-    collapsedRootForTablets: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+    collapsedRootForTabletsOrMobiles: function () {
+        return css(templateObject_14 || (templateObject_14 = __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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/src/SideMenuContext.d.ts

@@ -19,5 +19,9 @@ export interface SideMenuContextType {
     isShown?: boolean;
     toggleIsShown?: () => void;
     flattedArrayOfAllElements?: FlattedArrayElementType[];
+    separatedMenuIsShown?: boolean;
+    setSeparatedMenuIsShown?: (separatedMenuIsShown: boolean) => void;
+    mobileSeparatedMenuIsScrolling?: boolean;
+    setMobileSeparatedMenuIsScrolling?: (isScrolling: boolean) => void;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -6,8 +6,10 @@ export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuPro
     children?: React.ReactNode;
     caption?: string;
     disableAnimations?: boolean;
+    /** @ignore */
     _avatar?: React.ReactElement;
     id?: string;
+    /** @ignore */
     _generatedId?: string;
 }
 /**

package/src/SideMenuHeader/SideMenuHeader.js

@@ -10,26 +10,32 @@ 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), fixed = _c[0], setFixed = _c[1];
+    var _c = useState(false), isFixed = _c[0], setIsFixed = _c[1];
     var checkFixed = function () {
         if (headerWrapperRef.current && headerWrapperRef.current.offsetTop > 0) {
-            setFixed(true);
+            setIsFixed(true);
         }
         else {
-            setFixed(false);
+            setIsFixed(false);
         }
     };
     useEffect(function () {
-        window.addEventListener('scroll', checkFixed, true);
+        if (!context.separatedMenuIsShown) {
+            window.addEventListener('scroll', checkFixed, true);
+        }
         return function () {
             window.removeEventListener('scroll', checkFixed, true);
         };
     });
+    useEffect(function () {
+        context.mobileSeparatedMenuIsScrolling !== undefined && setIsFixed(context.mobileSeparatedMenuIsScrolling);
+    }, [context.mobileSeparatedMenuIsScrolling]);
     return (React.createElement("header", __assign({ className: cx((_b = {},
             _b[jsStyles.headerWrapper()] = true,
-            _b[jsStyles.headerFixedWrapper()] = fixed,
+            _b[jsStyles.headerFixedWrapper()] = isFixed,
             _b[jsStyles.headerMinimisedWrapper()] = context.isMinimised || context.isTransitioned,
-            _b[jsStyles.headerCollapsedWrapperForTablets()] = !context.isShown,
+            _b[jsStyles.headerCollapsedWrapperForTabletsOrMobiles()] = !context.isShown,
+            _b[jsStyles.headerWithSeparatedMenuShown()] = context.isShown && context.isMobile && context.separatedMenuIsShown,
             _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style }, rest),
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });

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

@@ -1,6 +1,7 @@
 export declare const jsStyles: {
     headerWrapper(): string;
     headerMinimisedWrapper(): string;
-    headerCollapsedWrapperForTablets(): string;
+    headerCollapsedWrapperForTabletsOrMobiles(): string;
+    headerWithSeparatedMenuShown(): string;
     headerFixedWrapper(): string;
 };

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -1,18 +1,22 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var headerWrapperPaddingX = '8px';
 var styles = {
     headerWrapper: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "], ["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "])));
+        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);
     },
     headerMinimisedWrapper: 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    "])));
     },
-    headerCollapsedWrapperForTablets: function () {
+    headerCollapsedWrapperForTabletsOrMobiles: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
     },
+    headerWithSeparatedMenuShown: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+    },
     headerFixedWrapper: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      border-bottom: 1px solid #e6e6e6;\n    "], ["\n      border-bottom: 1px solid #e6e6e6;\n    "])));
+        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    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/src/SideMenuSubItem/SideMenuSubItem.js

@@ -4,7 +4,7 @@ import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
 import { SideMenuContext } from '../SideMenuContext';
 import { NestedMenu } from '../internal/NestedMenu';
 import { useOpenedSubElementState } from '../../hooks/useOpenedSubElementState';
-import { useMemoIcon } from '../../hooks/UseMemoIcon';
+import { useMemoIcon } from '../../hooks/useMemoIcon';
 var SideMenuSubItemInner = forwardRef(function (_a, ref) {
     var children = _a.children, _generatedId = _a._generatedId, id = _a.id, rest = __rest(_a, ["children", "_generatedId", "id"]);
     var context = useContext(SideMenuContext);

package/src/SideMenuSubLink/SideMenuSubLink.js

@@ -4,7 +4,7 @@ import { SideMenuContext } from '../SideMenuContext';
 import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
 import { NestedMenu } from '../internal/NestedMenu';
 import { useOpenedSubElementState } from '../../hooks/useOpenedSubElementState';
-import { useMemoIcon } from '../../hooks/UseMemoIcon';
+import { useMemoIcon } from '../../hooks/useMemoIcon';
 var SideMenuSubLinkInner = forwardRef(function (_a, ref) {
     var marker = _a.marker, id = _a.id, _generatedId = _a._generatedId, _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, children = _a.children, rest = __rest(_a, ["marker", "id", "_generatedId", "_isSubMenu", "_isNestedSubMenu", "children"]);
     var context = useContext(SideMenuContext);

package/src/internal/BackButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface BackButtonProps {
+    caption?: string;
+    id?: string;
+    href?: string;
+    generatedId?: string;
+}
+declare const BackButtonWithStaticFields: React.ForwardRefExoticComponent<BackButtonProps & React.RefAttributes<HTMLButtonElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { BackButtonWithStaticFields as BackButton };

package/src/internal/BackButton.js

@@ -0,0 +1,30 @@
+import React, { forwardRef, useContext } from 'react';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { ArrowALeftIcon20Regular } from '@skbkontur/icons';
+import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
+import { SideMenuContext } from '../SideMenuContext';
+/**
+ * Кнопка возврата в меню первого уровня
+ *
+ * @visibleName BackButton
+ */
+var BackButton = forwardRef(function (_a, ref) {
+    var caption = _a.caption, id = _a.id, href = _a.href, generatedId = _a.generatedId;
+    var context = useContext(SideMenuContext);
+    return (React.createElement(SideMenuItem, { "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isDropdown: true, _isSubMenu: true, onClick: function () {
+            var _a, _b, _c, _d;
+            (_a = context.setSeparatedMenuIsShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
+            if (id) {
+                (_b = context.switchActiveMenuItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
+            }
+            else if (href) {
+                (_c = context.switchActiveMenuItem) === null || _c === void 0 ? void 0 : _c.call(context, href);
+            }
+            else if (generatedId) {
+                (_d = context.switchActiveMenuItem) === null || _d === void 0 ? void 0 : _d.call(context, generatedId);
+            }
+        }, _isBackButton: true, ref: ref }));
+});
+BackButton.displayName = 'BackButton';
+var BackButtonWithStaticFields = Object.assign(BackButton, { __KONTUR_REACT_UI__: 'BackButton' });
+export { BackButtonWithStaticFields as BackButton };

package/src/internal/Backdrop.js

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

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    backdropForTablets(): string;
+    backdropForTabletsOrMobiles(): string;
 };

package/src/internal/Backdrop.styles.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    backdropForTablets: function () {
+    backdropForTabletsOrMobiles: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
     },
 };

package/src/internal/Burger.js

@@ -2,9 +2,9 @@ import React, { useContext } from 'react';
 import { jsStyles } from './Burger.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { UiMenuBarsThreeHIcon24Regular } from '@skbkontur/icons';
-import { SideMenuDataTids } from '../SideMenu/SideMenu';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
 export var Burger = function () {
     var context = useContext(SideMenuContext);
-    return (React.createElement("button", { className: jsStyles.burgerWrapperForTablets(), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
+    return (React.createElement("button", { className: jsStyles.burgerWrapperForTabletsOrMobiles(), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
         React.createElement(UiMenuBarsThreeHIcon24Regular, null)));
 };

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    burgerWrapperForTablets(): string;
+    burgerWrapperForTabletsOrMobiles(): string;
 };

package/src/internal/Burger.styles.js

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
 var styles = {
-    burgerWrapperForTablets: function () {
+    burgerWrapperForTabletsOrMobiles: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      margin-right: 8px;\n    "], ["\n      ", ";\n      margin-right: 8px;\n    "])), resetButton());
     },
 };

package/src/internal/ClickableElement.d.ts

@@ -6,11 +6,18 @@ export interface CommonClickableElementProps extends CommonProps {
     marker?: string;
     caption?: string;
     id?: string;
+    /** @ignore */
     _generatedId?: string;
+    /** @ignore */
     _isSubMenu?: boolean;
+    /** @ignore */
     _isNestedSubMenu?: boolean;
+    /** @ignore */
     _avatar?: React.ReactElement;
+    /** @ignore */
     _isDropdown?: boolean;
+    /** @ignore */
+    _isBackButton?: boolean;
 }
 export interface ClickableElementProps extends CommonClickableElementProps {
     element: 'a' | 'button';

package/src/internal/ClickableElement.js

@@ -15,11 +15,11 @@ import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
  */
 var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
-    var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown"]);
+    var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton"]);
     var context = useContext(SideMenuContext);
     var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
     var _c = useState(false), focusedByTab = _c[0], setFocusedByTab = _c[1];
-    var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children);
+    var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.separatedMenuIsShown, context.isMobile && context.isSeparatedMenu);
     var hasChildren = function (id, generatedId) {
         var _a, _b;
         var parentId = id ? 'id' : 'generatedParentId';
@@ -27,7 +27,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
         return (_b = (_a = context.flattedArrayOfAllElements) === null || _a === void 0 ? void 0 : _a.filter(function (el) { return el[parentId] === childId; })) === null || _b === void 0 ? void 0 : _b.length;
     };
     var handleClick = function (e) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         if (id) {
             (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
@@ -41,6 +41,9 @@ var ClickableElement = forwardRef(function (_a, ref) {
         if (!hasChildren(id || rest.href, _generatedId) && !_isDropdown) {
             (_d = context.toggleIsShown) === null || _d === void 0 ? void 0 : _d.call(context);
         }
+        if (context.isSeparatedMenu && !_isSubMenu && children) {
+            (_e = context.setSeparatedMenuIsShown) === null || _e === void 0 ? void 0 : _e.call(context, true);
+        }
     };
     var handleFocus = function (e) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -62,8 +65,8 @@ var ClickableElement = forwardRef(function (_a, ref) {
                 _b[jsStyles.focusedClickableElement()] = focusedByTab,
                 _b[jsStyles.activeClickableElement()] = isActive || isOpenedFirstLevelItemInSeparatedMenu,
                 _b[jsStyles.activeClickableSubElement()] = isActive && context.isSeparatedMenu && _isSubMenu,
-                _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, marker: marker, _avatar: _avatar })), ref: ref }, rest)),
-        React.createElement(SubMenu, { generatedId: _generatedId, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimised: context.isMinimised }, children)));
+                _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, marker: marker, _avatar: _avatar, _isBackButton: _isBackButton })), ref: ref }, rest)),
+        React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimised: context.isMinimised }, children)));
 });
 ClickableElement.displayName = 'ClickableElement';
 var ClickableElementWithStaticFields = Object.assign(ClickableElement, {

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ItemContentProps } from './ItemContent';
-import { SideMenuContextType } from '../../SideMenuContext';
-interface CaptionProps extends Pick<ItemContentProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption'>, Pick<SideMenuContextType, 'isTransitioned' | 'isSeparatedMenu' | 'hasSubIcons' | 'size'> {
+import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
+interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption' | '_isBackButton'> {
     hasShortcutImage: boolean;
     isMultiline: boolean;
 }

package/src/internal/ItemContent/Caption.js

@@ -4,8 +4,9 @@ import React, { forwardRef, useContext } from 'react';
 import { SideMenuContext } from '../../SideMenuContext';
 export var Caption = forwardRef(function (_a, ref) {
     var _b;
-    var isTransitioned = _a.isTransitioned, _isSubMenu = _a._isSubMenu, isSeparatedMenu = _a.isSeparatedMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, hasSubIcons = _a.hasSubIcons, size = _a.size, caption = _a.caption, isMultiline = _a.isMultiline;
+    var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
+    var isTransitioned = context.isTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
     return (React.createElement("p", { className: cx((_b = {},
             _b[jsStyles.caption()] = true,
             _b[jsStyles.captionTransitioned()] = isTransitioned,
@@ -16,8 +17,9 @@ export var Caption = forwardRef(function (_a, ref) {
             _b[jsStyles.subCaptionWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
             _b[jsStyles.captionLarge()] = size === 'large',
             _b[jsStyles.captionMultiline()] = isMultiline,
-            _b[jsStyles.captionForTouchScreens()] = context.isTouchScreen,
-            _b[jsStyles.subCaptionForTouchScreens()] = context.isTouchScreen && _isSubMenu,
+            _b[jsStyles.captionForTouchScreens()] = isTouchScreen,
+            _b[jsStyles.subCaptionForTouchScreens()] = isTouchScreen && _isSubMenu,
+            _b[jsStyles.captionInBackButton()] = _isBackButton,
             _b)), ref: ref }, caption));
 });
 Caption.displayName = 'Caption';

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

@@ -10,4 +10,5 @@ export declare const jsStyles: {
     captionWithoutItemIcon(): string;
     subCaptionWithoutColumnIcons(): string;
     captionLarge(): string;
+    captionInBackButton(): string;
 };

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

@@ -34,6 +34,9 @@ var styles = {
     captionLarge: function () {
         return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "], ["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "])));
     },
+    captionInBackButton: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "], ["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\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;
+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;

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ItemContentProps } from './ItemContent';
-import { SideMenuContextType } from '../../SideMenuContext';
-interface IconProps extends Pick<ItemContentProps, '_isSubMenu' | 'icon'>, Pick<SideMenuContextType, 'isSeparatedMenu' | 'size'> {
+import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
+interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton'> {
     isMultiline: boolean;
 }
-export declare const Icon: ({ icon, _isSubMenu, isMultiline, size, isSeparatedMenu }: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton }: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 export {};

package/src/internal/ItemContent/Icon.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './Icon.styles';
+import { SideMenuContext } from '../../SideMenuContext';
+import { getIconSize } from '../../../utils/scripts';
 export var Icon = function (_a) {
     var _b;
-    var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, size = _a.size, isSeparatedMenu = _a.isSeparatedMenu;
+    var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c;
+    var context = useContext(SideMenuContext);
+    var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
     return React.cloneElement(icon, {
-        size: _isSubMenu ? 16 : 24,
-        disableCompensation: true,
+        size: getIconSize(_isSubMenu, _isBackButton),
+        color: _isSubMenu ? '#858585' : undefined,
+        disableCompensation: !_isBackButton,
         className: cx((_b = {},
             _b[jsStyles.icon()] = true,
             _b[jsStyles.iconMultiline()] = isMultiline,
@@ -15,6 +20,7 @@ export var Icon = function (_a) {
             _b[jsStyles.iconSubItem()] = _isSubMenu,
             _b[jsStyles.iconSubItemSeparatedMenu()] = isSeparatedMenu && _isSubMenu,
             _b[jsStyles.iconSubItemLarge()] = _isSubMenu && size === 'large',
+            _b[jsStyles.iconBackButton()] = _isBackButton,
             _b)),
     });
 };

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

@@ -6,4 +6,5 @@ export declare const jsStyles: {
     iconSubItemLarge(): string;
     iconSubItem(): string;
     iconSubItemSeparatedMenu(): string;
+    iconBackButton(): string;
 };

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

@@ -22,6 +22,9 @@ var styles = {
     iconSubItemSeparatedMenu: function () {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
     },
+    iconBackButton: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-left: 10px;\n      padding-right: 6px;\n    "], ["\n      padding-left: 10px;\n      padding-right: 6px;\n    "])));
+    },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-export declare type ItemContentProps = Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isNestedSubMenu' | 'caption' | 'marker' | '_avatar'>;
-declare const ItemContentWithStaticFields: React.ForwardRefExoticComponent<Pick<SideMenuItemProps, "caption" | "marker" | "_isSubMenu" | "icon" | "_isNestedSubMenu" | "_avatar"> & React.RefAttributes<HTMLDivElement>> & {
+declare const ItemContentWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { ItemContentWithStaticFields as ItemContent };

package/src/internal/ItemContent/ItemContent.js

@@ -12,12 +12,12 @@ import { Avatar } from './Avatar';
  */
 var ItemContent = forwardRef(function (_a, ref) {
     var _b;
-    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, marker = _a.marker, _avatar = _a._avatar;
+    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
     var textRef = useRef(null);
     var _c = useState(false), isMultiline = _c[0], setIsMultiline = _c[1];
     useEffect(function () {
-        useNumberOfTextLinesInItem(textRef, setIsMultiline);
+        !_isBackButton && useNumberOfTextLinesInItem(textRef, setIsMultiline);
     }, [textRef.current]);
     var hasShortcutImage = !!icon || !!_avatar;
     return (React.createElement("div", { className: cx((_b = {},
@@ -30,10 +30,10 @@ var ItemContent = forwardRef(function (_a, ref) {
             _b[jsStyles.itemWrapperForTouchScreens()] = context.isTouchScreen,
             _b[jsStyles.subItemWrapperForTouchScreens()] = context.isTouchScreen && _isSubMenu,
             _b)), ref: ref },
-        icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, size: context.size, isSeparatedMenu: context.isSeparatedMenu })),
+        icon && React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton }),
         _avatar && React.createElement(Avatar, { _avatar: _avatar }),
         !context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
-            React.createElement(Caption, { isTransitioned: context.isTransitioned, _isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, size: context.size, hasSubIcons: context.hasSubIcons, isMultiline: isMultiline, caption: caption, ref: textRef }),
+            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, _isBackButton: _isBackButton, ref: textRef }),
             marker && React.createElement(Marker, { isMultiline: isMultiline, marker: marker })))));
 });
 ItemContent.displayName = 'ItemContent';

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

@@ -1,5 +1,5 @@
-import { ItemContentProps } from './ItemContent';
-interface MarkerProps extends Pick<ItemContentProps, 'marker'> {
+import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
+interface MarkerProps extends Pick<SideMenuItemProps, 'marker'> {
     isMultiline: boolean;
 }
 export declare const Marker: ({ isMultiline, marker }: MarkerProps) => JSX.Element;

package/src/internal/SeparatedSubMenu.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 interface SeparatedSubMenuProps {
     children?: React.ReactNode;
     generatedId?: string;
+    id?: string;
+    href?: string;
+    caption?: string;
 }
 declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/SeparatedSubMenu.js

@@ -5,6 +5,10 @@ import { jsStyles } from '../SideMenu/SideMenu.styles';
 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';
 /**
  * Отдельностоящее подменю
  *
@@ -12,7 +16,7 @@ import { isClickableSubElement } from '../../utils/scripts';
  */
 var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, generatedId = _a.generatedId;
+    var children = _a.children, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
     var context = useContext(SideMenuContext);
     var isSubItemWithChildren = function (child) {
         // @ts-expect-error: accessing private property
@@ -26,12 +30,15 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
             return child;
         });
     };
+    var separatedMenuRef = useMobileSeparatedMenuScroll();
     var levelIndex = 0;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
             _b[jsStyles.rootForTouchScreens()] = context.isTouchScreen,
             _b[jsStylesForSeparatedSubMenu.separatedSubMenu()] = true,
-            _b)), ref: ref },
+            _b[jsStylesForSeparatedSubMenu.separatedSubMenuForMobiles()] = context.isMobile,
+            _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 (

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

@@ -1,3 +1,4 @@
 export declare const jsStylesForSeparatedSubMenu: {
     separatedSubMenu(): string;
+    separatedSubMenuForMobiles(): string;
 };

package/src/internal/SeparatedSubMenu.styles.js

@@ -4,6 +4,10 @@ var styles = {
     separatedSubMenu: 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    "])));
     },
+    separatedSubMenuForMobiles: 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);
+    },
 };
 export var jsStylesForSeparatedSubMenu = memoizeStyle(styles);
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/src/internal/SideMenuLogotype.js

@@ -32,8 +32,11 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
             .join('');
     };
     var getProductName = function () {
+        var _a;
         // @ts-expect-error: accessing private property
-        return productLogo ? changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__) : 'kontur';
+        return ((_a = productLogo === null || productLogo === void 0 ? void 0 : productLogo.type) === null || _a === void 0 ? void 0 : _a.__KONTUR_REACT_UI__) ? // @ts-expect-error: accessing private property
+            changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__)
+            : 'kontur';
     };
     var productName = getProductName();
     var getStaticIconPath = function () {
@@ -42,18 +45,18 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     if (context.isMinimised || context.isTransitioned) {
         return React.createElement("img", { className: jsStyles.logotypeIcon(), src: iconUrl || getStaticIconPath(), alt: productName });
     }
-    var getWidget = function (withWidget, isTablet, showWidget) {
+    var getWidget = function (withWidget, isTouchScreen, showWidget) {
         if (withWidget !== undefined) {
             return withWidget;
         }
-        if (isTablet) {
+        if (isTouchScreen) {
             return true;
         }
         return showWidget;
     };
     return (React.createElement("div", { className: jsStyles.logotypeWrapper(), ref: ref },
-        context.isTablet && React.createElement(Burger, null),
-        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTablet, context.showWidget) }, rest))));
+        (context.isTablet || context.isMobile) && React.createElement(Burger, null),
+        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.showWidget) }, rest))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });

package/src/internal/SubMenu.d.ts

@@ -6,6 +6,9 @@ interface SubMenuProps {
     isSubMenu?: boolean;
     isMinimised?: boolean;
     isSeparatedMenu?: boolean;
+    id?: string;
+    href?: string;
+    caption?: string;
 }
 declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/SubMenu.js

@@ -7,12 +7,12 @@ import { InnerSubMenu } from './InnerSubMenu';
  * @visibleName InnerSubMenu
  */
 var SubMenu = forwardRef(function (_a, ref) {
-    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimised = _a.isMinimised, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId;
+    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimised = _a.isMinimised, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
     if (!children || !isOpened || isSubMenu || isMinimised) {
         return null;
     }
     if (isSeparatedMenu) {
-        return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, ref: ref }, children));
+        return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption }, children));
     }
     return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref }, children));
 });

package/utils/scripts.d.ts

@@ -9,3 +9,4 @@ export declare const getElementsChildren: (element: ReactElement, levelIndex: st
 export declare const isParentOpened: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean | "" | undefined;
 export declare const isIdActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
 export declare const isTouchScreen: () => boolean;
+export declare const getIconSize: (_isSubMenu?: boolean | undefined, _isBackButton?: boolean | undefined) => 24 | 16 | undefined;

package/utils/scripts.js

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