@skbkontur/side-menu 1.12.7 → 1.12.9-any-level.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.9](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.8...@skbkontur/side-menu@1.12.9) (2024-06-07)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [1.12.8](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.7...@skbkontur/side-menu@1.12.8) (2024-06-05)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [1.12.7](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.6...@skbkontur/side-menu@1.12.7) (2024-05-20)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -328,15 +328,6 @@ const items = [
 </div>
 ```
 
-Если не хочется передавать свой `id`, то для ручного управления можно воспользоваться автоматически сгенерированными айдишниками. А также комбинировать свои `id` с автоматически сгенерированными.
-
-Автоматическая генерация айдишников происходит по следующей схеме:
-элементы меню первого уровня получают `id` равный `body-x`, где `x` - индекс элемента.
-Элементы меню следующих уровней добавляют свой индекс: `body-x-y`.
-
-Например, в пункте `Документы к подписанию` передан проп `id='documents'`, а также есть автоматически сгенерированный `id='body-0'`. Управлять можно по любому из них.
-
-
 ```jsx harmony
 import { useState } from 'react';
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';

package/SideMenuDataTids.d.ts

@@ -4,4 +4,5 @@ export declare const SideMenuDataTids: {
     backButton: string;
     separatedSubMenu: string;
     rightBorder: string;
+    clickableElement: string;
 };

package/SideMenuDataTids.js

@@ -4,4 +4,5 @@ export var SideMenuDataTids = {
     backButton: 'SideMenu__backButton',
     separatedSubMenu: 'SideMenu__separatedSubMenu',
     rightBorder: 'SideMenu__rightBorder',
+    clickableElement: 'SideMenu__clickableElement',
 };

package/hooks/useAnimateOnMount.js

@@ -1,7 +1,8 @@
+import { __read } from "tslib";
 import { useEffect, useState } from 'react';
 export function useAnimateOnMount(isMounted, delayTime, mountStyles, unmountStyles) {
-    var _a = useState(isMounted ? mountStyles : unmountStyles), style = _a[0], setStyle = _a[1];
-    var _b = useState(isMounted), shouldShowComponent = _b[0], setShouldShowComponent = _b[1];
+    var _a = __read(useState(isMounted ? mountStyles : unmountStyles), 2), style = _a[0], setStyle = _a[1];
+    var _b = __read(useState(isMounted), 2), shouldShowComponent = _b[0], setShouldShowComponent = _b[1];
     useEffect(function () {
         var timeoutId;
         if (isMounted) {

package/lib/theming/ThemeHelpers.js

@@ -1,3 +1,4 @@
+import { __values } from "tslib";
 import { isFunction } from '@skbkontur/react-ui/lib/utils';
 import { memo } from '../utils/memo';
 import { SideMenuThemeInternal, isSideMenuTheme, markAsSideMenuTheme } from '../../internal/themes/SideMenuTheme';
@@ -12,6 +13,7 @@ import { SideMenuThemeInternal, isSideMenuTheme, markAsSideMenuTheme } from '../
  * and using ReactUI's ThemeContext.Provider for overriding them.
  */
 export var createSideMenuTheme = function (theme) {
+    var e_1, _a;
     if (isSideMenuTheme(theme))
         return theme;
     var sideMenuTheme = Object.create(theme, Object.assign(Object.getOwnPropertyDescriptors(SideMenuThemeInternal), {}));
@@ -28,9 +30,18 @@ export var createSideMenuTheme = function (theme) {
             },
         });
     };
-    for (var _i = 0, _a = Object.keys(sideMenuTheme); _i < _a.length; _i++) {
-        var key = _a[_i];
-        _loop_1(key);
+    try {
+        for (var _b = __values(Object.keys(sideMenuTheme)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var key = _c.value;
+            _loop_1(key);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
     }
     return markAsSideMenuTheme(sideMenuTheme);
 };

package/lib/utils/scripts.d.ts

@@ -1,13 +1,4 @@
-import React, { ReactElement } from 'react';
-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;
-export declare const getAllParents: (id: string, flattedArrayOfAllElements: FlattedArrayElementType[]) => string[];
-export declare const getChildrenIdArray: (childrenArray: FlattedArrayElementType[], id: string, isIdGenerated?: boolean) => string[];
-export declare const getElementsChildren: (element: ReactElement, levelIndex: string) => FlattedArrayElementType[];
-export declare const isParentOpened: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean | "" | undefined;
-export declare const isElementActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
+import React from 'react';
 export declare const isBrowser: boolean;
 export declare const isTouchDevice: () => boolean;
 export declare const isKonturIcon: (icon: React.ReactElement) => boolean;

package/lib/utils/scripts.js

@@ -1,78 +1,3 @@
-import React, { isValidElement } from 'react';
-import { isNonNullable } from '@skbkontur/react-ui/lib/utils';
-export var getItemId = function (prefix, id) {
-    return prefix + "-" + id;
-};
-var SideMenuClickableSubElements = ['SideMenuSubItem', 'SideMenuSubLink'];
-export var isClickableSubElement = function (element) {
-    return SideMenuClickableSubElements.includes(element);
-};
-var SideMenuClickableElements = ['SideMenuItem', 'SideMenuLink'];
-export var isClickableElement = function (element) {
-    return SideMenuClickableElements.includes(element);
-};
-export var getAllParents = function (id, flattedArrayOfAllElements) {
-    var parentsArray = [];
-    var element = flattedArrayOfAllElements.find(function (element) { return element.id === id || element.generatedId === id; });
-    if (element && element.id && isNonNullable(element.parentId)) {
-        parentsArray.push(element.parentId);
-        parentsArray.push.apply(parentsArray, getAllParents(element.parentId, flattedArrayOfAllElements));
-    }
-    else if (element && isNonNullable(element.generatedParentId)) {
-        parentsArray.push(element.generatedParentId);
-        parentsArray.push.apply(parentsArray, getAllParents(element.generatedParentId, flattedArrayOfAllElements));
-    }
-    return parentsArray;
-};
-export var getChildrenIdArray = function (childrenArray, id, isIdGenerated) {
-    if (isIdGenerated === void 0) { isIdGenerated = false; }
-    var parentId = isIdGenerated ? 'generatedParentId' : 'parentId';
-    var childId = isIdGenerated ? 'generatedId' : 'id';
-    return childrenArray.filter(function (el) { return el[parentId] === id; }).map(function (el) { return el[childId]; });
-};
-export var getElementsChildren = function (element, levelIndex) {
-    var childrenArray = [];
-    if (element.props.children) {
-        var childLevelIndex_1 = 0;
-        React.Children.map(element.props.children, function (child) {
-            var _a, _b;
-            var isClickableComponent = 
-            // @ts-expect-error: accessing private property
-            isClickableElement((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.__KONTUR_REACT_UI__) ||
-                // @ts-expect-error: accessing private property
-                isClickableSubElement((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.__KONTUR_REACT_UI__);
-            if (isValidElement(child) && isClickableComponent) {
-                var id = child.props.id;
-                var generatedId = levelIndex + "-" + childLevelIndex_1;
-                var subChildrenArray = getElementsChildren(child, levelIndex + "-" + childLevelIndex_1);
-                var childrenIdArray = getChildrenIdArray(subChildrenArray, id);
-                var generatedChildrenIdArray = getChildrenIdArray(subChildrenArray, generatedId, true);
-                childrenArray.push({
-                    id: id || child.props.href,
-                    generatedId: generatedId,
-                    parentId: element.props.id || element.props.href,
-                    generatedParentId: "" + levelIndex,
-                    childrenId: childrenIdArray,
-                    generatedChildrenId: generatedChildrenIdArray,
-                });
-                childrenArray.push.apply(childrenArray, subChildrenArray);
-                childLevelIndex_1++;
-            }
-        });
-    }
-    return childrenArray;
-};
-export var isParentOpened = function (id, generatedId, openedParents) {
-    if (!openedParents || (openedParents === null || openedParents === void 0 ? void 0 : openedParents.length) === 0) {
-        return false;
-    }
-    var idIsOpened = id && openedParents.includes(id);
-    var generatedIdIsOpened = generatedId && openedParents.includes(generatedId);
-    return idIsOpened || generatedIdIsOpened;
-};
-export var isElementActive = function (id, activeMenuItem) {
-    return !!id && !!activeMenuItem && id === activeMenuItem;
-};
 export var isBrowser = typeof window !== 'undefined';
 export var isTouchDevice = function () {
     return isBrowser && ('ontouchstart' in window || navigator.maxTouchPoints > 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.12.7",
+  "version": "1.12.9-any-level.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^1.10.0",
-    "@skbkontur/react-ui-addons": "^4.11.0",
+    "@skbkontur/react-ui-addons": "^4.11.2",
     "tslib": "^1"
   }
 }

package/src/Navigation.d.ts

@@ -0,0 +1,47 @@
+import { RefObject } from 'react';
+import { Tree, TreeNode } from './Tree';
+export interface NavigableElement {
+    setIsActive: (value: boolean) => void;
+    setIsOpened: (value: boolean) => void;
+    setIsNestedSubMenu: (value: boolean) => void;
+    setHasSubIcons: (value: boolean) => void;
+    setIsFirstLevelParentOfActiveMenuItem: (value: boolean) => void;
+    isSubMenu?: boolean;
+}
+interface MenuNavigationOptions {
+    root: RefObject<HTMLDivElement> | null;
+    activeMenuItem?: string;
+    setActiveMenuItem: (id: string) => void;
+    isSeparatedMenu: boolean;
+    isSeparatedMenuShown: boolean;
+    setIsSeparatedMenuShown: (value: boolean) => void;
+    isOpened?: boolean;
+    isDesktopQuery?: boolean;
+    isMobile?: boolean;
+    isCollapsable?: boolean;
+}
+export declare class MenuNavigation {
+    private readonly root;
+    navigationTree: Tree | null;
+    activeMenuItem?: string;
+    isSeparatedMenuShown?: boolean;
+    setIsSeparatedMenuShown?: (value: boolean) => void;
+    private readonly setActiveMenuItem?;
+    private readonly isSeparatedMenu;
+    activeMenuItemTreeNode?: TreeNode;
+    private readonly isOpened?;
+    private readonly isDesktop?;
+    private readonly isMobile?;
+    private readonly isCollapsable?;
+    constructor(options: MenuNavigationOptions);
+    updateNavigationTree(): void;
+    addValue(id: string, value: NavigableElement): void;
+    switchActiveMenuItem(id?: string, isButton?: boolean): void;
+    private setActiveFirstLevelMenuItemInSeparatedMenu;
+    private setHighlightedFirstLevelMenuItemInMinimizedInnerMenu;
+    private openMenuItems;
+    private openAllParents;
+    private getParentId;
+    private switchVisibilityOfSeparatedMenu;
+}
+export {};

package/src/Navigation.js

@@ -0,0 +1,146 @@
+import { __read, __spread } from "tslib";
+import { SideMenuDataTids } from '../SideMenuDataTids';
+import { Tree } from './Tree';
+var MENU_ROOT_ID = 'menu-root-id';
+var MenuNavigation = /** @class */ (function () {
+    function MenuNavigation(options) {
+        this.navigationTree = null;
+        this.navigationTree = new Tree(MENU_ROOT_ID);
+        this.activeMenuItemTreeNode = this.navigationTree.find(options.activeMenuItem);
+        this.root = options.root;
+        this.activeMenuItem = options.activeMenuItem;
+        this.setActiveMenuItem = options.setActiveMenuItem;
+        this.isSeparatedMenu = options.isSeparatedMenu;
+        this.isSeparatedMenuShown = options.isSeparatedMenuShown;
+        this.setIsSeparatedMenuShown = options.setIsSeparatedMenuShown;
+        this.isOpened = options.isOpened;
+        this.isDesktop = options.isDesktopQuery;
+        this.isMobile = options.isMobile;
+        this.isCollapsable = options.isCollapsable;
+    }
+    MenuNavigation.prototype.updateNavigationTree = function () {
+        var _this = this;
+        var _a;
+        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.current) {
+            var menuItems = Array.from(this.root.current.querySelectorAll("[data-tid=\"SideMenu__clickableElement\"]")).filter(function (item) { return !item.querySelector('button[data-tid="SideMenu__backButton"]'); });
+            menuItems.forEach(function (menuItem) {
+                var _a, _b, _c;
+                var id = menuItem.getAttribute('data-navigation-id');
+                var parentId = _this.getParentId(menuItem);
+                var oldValue = (_b = (_a = _this.navigationTree) === null || _a === void 0 ? void 0 : _a.find(id)) === null || _b === void 0 ? void 0 : _b.value;
+                (_c = _this.navigationTree) === null || _c === void 0 ? void 0 : _c.insert(parentId, id, oldValue);
+            });
+        }
+    };
+    MenuNavigation.prototype.addValue = function (id, value) {
+        var _a, _b, _c;
+        this.updateNavigationTree();
+        var foundTreeNode = (_a = this.navigationTree) === null || _a === void 0 ? void 0 : _a.find(id);
+        if (foundTreeNode) {
+            foundTreeNode.value = value;
+        }
+        if ((foundTreeNode === null || foundTreeNode === void 0 ? void 0 : foundTreeNode.parent) && foundTreeNode.parent.parent && foundTreeNode.parent.parent.id !== MENU_ROOT_ID) {
+            (_b = foundTreeNode.value) === null || _b === void 0 ? void 0 : _b.setIsNestedSubMenu(true);
+        }
+        if (this.isSeparatedMenu && (foundTreeNode === null || foundTreeNode === void 0 ? void 0 : foundTreeNode.hasChildren)) {
+            (_c = foundTreeNode.value) === null || _c === void 0 ? void 0 : _c.setHasSubIcons(true);
+        }
+    };
+    MenuNavigation.prototype.switchActiveMenuItem = function (id, isButton) {
+        var _a, _b, _c, _d;
+        !isButton &&
+            __spread((_a = this.navigationTree) === null || _a === void 0 ? void 0 : _a.preOrderTraversal()).map(function (x) {
+                var _a;
+                (_a = x.value) === null || _a === void 0 ? void 0 : _a.setIsActive(false);
+            });
+        var foundTreeNode = (_b = this.navigationTree) === null || _b === void 0 ? void 0 : _b.find(id);
+        if (foundTreeNode) {
+            if (!isButton) {
+                this.activeMenuItem = foundTreeNode.id;
+                this.activeMenuItemTreeNode = foundTreeNode;
+                (_c = this.setActiveMenuItem) === null || _c === void 0 ? void 0 : _c.call(this, foundTreeNode.id);
+                this.isSeparatedMenu && this.setActiveFirstLevelMenuItemInSeparatedMenu(foundTreeNode);
+                this.setHighlightedFirstLevelMenuItemInMinimizedInnerMenu(foundTreeNode);
+                (_d = foundTreeNode.value) === null || _d === void 0 ? void 0 : _d.setIsActive(true);
+            }
+            this.isSeparatedMenu && this.switchVisibilityOfSeparatedMenu();
+            this.openMenuItems(foundTreeNode);
+        }
+    };
+    MenuNavigation.prototype.setActiveFirstLevelMenuItemInSeparatedMenu = function (treeNode) {
+        var _a;
+        var parentTreeNode = treeNode.parent;
+        while (parentTreeNode) {
+            var foundNode = parentTreeNode.parent;
+            if ((foundNode === null || foundNode === void 0 ? void 0 : foundNode.id) === MENU_ROOT_ID) {
+                break;
+            }
+            parentTreeNode = foundNode;
+        }
+        (_a = parentTreeNode === null || parentTreeNode === void 0 ? void 0 : parentTreeNode.value) === null || _a === void 0 ? void 0 : _a.setIsFirstLevelParentOfActiveMenuItem(true);
+    };
+    MenuNavigation.prototype.setHighlightedFirstLevelMenuItemInMinimizedInnerMenu = function (treeNode) {
+        var _a, _b;
+        __spread((_a = this.navigationTree) === null || _a === void 0 ? void 0 : _a.preOrderTraversal()).map(function (x) {
+            var _a;
+            (_a = x.value) === null || _a === void 0 ? void 0 : _a.setIsFirstLevelParentOfActiveMenuItem(false);
+        });
+        var parentTreeNode = treeNode.parent;
+        while (parentTreeNode) {
+            var foundNode = parentTreeNode.parent;
+            if ((foundNode === null || foundNode === void 0 ? void 0 : foundNode.id) === MENU_ROOT_ID) {
+                break;
+            }
+            parentTreeNode = foundNode;
+        }
+        (_b = parentTreeNode === null || parentTreeNode === void 0 ? void 0 : parentTreeNode.value) === null || _b === void 0 ? void 0 : _b.setIsFirstLevelParentOfActiveMenuItem(true);
+    };
+    MenuNavigation.prototype.openMenuItems = function (treeNode) {
+        var _a, _b, _c;
+        !((_a = treeNode.value) === null || _a === void 0 ? void 0 : _a.isSubMenu) && __spread((_b = this.navigationTree) === null || _b === void 0 ? void 0 : _b.preOrderTraversal()).map(function (x) { var _a; return (_a = x.value) === null || _a === void 0 ? void 0 : _a.setIsOpened(false); });
+        if (treeNode.children.length > 0) {
+            (_c = treeNode.value) === null || _c === void 0 ? void 0 : _c.setIsOpened(true);
+        }
+        this.openAllParents(treeNode);
+    };
+    MenuNavigation.prototype.openAllParents = function (treeNode) {
+        var _a;
+        var parentTreeNode = treeNode.parent;
+        while (parentTreeNode && parentTreeNode.id !== MENU_ROOT_ID) {
+            (_a = parentTreeNode.value) === null || _a === void 0 ? void 0 : _a.setIsOpened(true);
+            parentTreeNode = parentTreeNode.parent;
+        }
+    };
+    MenuNavigation.prototype.getParentId = function (menuItem) {
+        var _a, _b, _c;
+        var parentElement;
+        var clickableElementSelector = "[data-tid=" + SideMenuDataTids.clickableElement + "]";
+        var separatedMenuSelector = "[data-tid=" + SideMenuDataTids.separatedSubMenu + "]";
+        parentElement = (_a = menuItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(clickableElementSelector);
+        if (!parentElement) {
+            var separatedMenu = menuItem.closest(separatedMenuSelector);
+            if (separatedMenu) {
+                var firstLevelMenuId = separatedMenu.getAttribute('data-parent-navigation-id');
+                parentElement = (_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-navigation-id=\"" + firstLevelMenuId + "\"]");
+            }
+        }
+        return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-navigation-id')) || MENU_ROOT_ID;
+    };
+    MenuNavigation.prototype.switchVisibilityOfSeparatedMenu = function () {
+        var _a, _b, _c, _d, _e;
+        if (!this.isSeparatedMenu)
+            return;
+        var activeItemHasParent = (_b = (_a = this.activeMenuItemTreeNode) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.isSubMenu;
+        var activeMenuItemHasChildren = (_c = this.activeMenuItemTreeNode) === null || _c === void 0 ? void 0 : _c.hasChildren;
+        var isActive = activeItemHasParent || activeMenuItemHasChildren || false;
+        var isMinimizedInWideDesktop = !this.isOpened && this.isDesktop && !this.isCollapsable;
+        if (this.isMobile && !activeItemHasParent && this.isSeparatedMenuShown) {
+            this.isSeparatedMenuShown = false;
+            return (_d = this.setIsSeparatedMenuShown) === null || _d === void 0 ? void 0 : _d.call(this, false);
+        }
+        this.isSeparatedMenuShown = isActive && !isMinimizedInWideDesktop;
+        (_e = this.setIsSeparatedMenuShown) === null || _e === void 0 ? void 0 : _e.call(this, this.isSeparatedMenuShown);
+    };
+    return MenuNavigation;
+}());
+export { MenuNavigation };

package/src/SideMenu/SideMenu.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 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';
@@ -27,15 +27,18 @@ import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 import { useAnimateOnMount } from '../../hooks/useAnimateOnMount';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
+import { MenuNavigation } from '../Navigation';
 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 ? false : _h, _j = _a.disableCollapsing, disableCollapsing = _j === void 0 ? false : _j, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _k = _a.hideScrollBar, hideScrollBar = _k === void 0 ? undefined : _k, _l = _a.showScrollBar, showScrollBar = _l === void 0 ? 'hover' : _l, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "onOpen", "onClose"]);
+    var _f;
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _g = _a.size, size = _g === void 0 ? 'small' : _g, _h = _a.isSeparatedMenu, isSeparatedMenu = _h === void 0 ? false : _h, className = _a.className, _j = _a.disableSwipe, disableSwipe = _j === void 0 ? false : _j, _k = _a.disableCollapsing, disableCollapsing = _k === void 0 ? false : _k, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _l = _a.hideScrollBar, hideScrollBar = _l === void 0 ? undefined : _l, _m = _a.showScrollBar, showScrollBar = _m === void 0 ? 'hover' : _m, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "onOpen", "onClose"]);
     var transitionTimer = useRef(null);
     var sideMenuRef = useRef(null);
     var contentWrapperRef = useRef(null);
     var scrollContainerRef = useRef(null);
+    var navigation = useRef(null);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var customMediaQueries = {
         isMobileQuery: mobileMediaQuery || theme.sideMenuMobileMediaQuery,
@@ -43,31 +46,49 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _m = useResponsiveLayout({
+    var _o = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _m.isMobileQuery, isTabletQuery = _m.isTabletQuery, isNarrowDesktopQuery = _m.isNarrowDesktopQuery, isDesktopQuery = _m.isDesktopQuery;
+    }), isMobileQuery = _o.isMobileQuery, isTabletQuery = _o.isTabletQuery, isNarrowDesktopQuery = _o.isNarrowDesktopQuery, isDesktopQuery = _o.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
     var manual = isOpen !== undefined;
-    var _o = useState(isDesktopQuery), isOpened = _o[0], setIsOpened = _o[1];
-    var _p = useState(false), isBeingTransitioned = _p[0], setIsBeingTransitioned = _p[1];
-    var _q = useState(value), activeMenuItem = _q[0], setActiveMenuItem = _q[1];
-    var _r = useState(null), clickedButton = _r[0], setClickedButton = _r[1];
-    var _s = useState(false), isSeparatedMenuShown = _s[0], setIsSeparatedMenuShown = _s[1];
-    var _t = useState(true), isMouseOutside = _t[0], setIsMouseOutside = _t[1];
-    var _u = useState('top'), scrollState = _u[0], setScrollState = _u[1];
-    var _v = useState(false), hasScrollBar = _v[0], setHasScrollBar = _v[1];
-    var _w = useState(0), mousePositionX = _w[0], setMousePositionX = _w[1];
-    var _x = useState(0), headerHeight = _x[0], setHeaderHeight = _x[1];
-    var _y = useState(isNarrowDesktop), isCollapsable = _y[0], setIsCollapsable = _y[1];
-    var _z = useState(0), leftPosition = _z[0], setLeftPosition = _z[1];
-    var _0 = useState(false), isHovered = _0[0], setIsHovered = _0[1];
+    var _p = __read(useState(isDesktopQuery), 2), isOpened = _p[0], setIsOpened = _p[1];
+    var _q = __read(useState(false), 2), isBeingTransitioned = _q[0], setIsBeingTransitioned = _q[1];
+    var _r = __read(useState(value), 2), activeMenuItem = _r[0], setActiveMenuItem = _r[1];
+    var _s = __read(useState(null), 2), clickedButton = _s[0], setClickedButton = _s[1];
+    var _t = __read(useState(false), 2), isSeparatedMenuShown = _t[0], setIsSeparatedMenuShown = _t[1];
+    var _u = __read(useState(true), 2), isMouseOutside = _u[0], setIsMouseOutside = _u[1];
+    var _v = __read(useState('top'), 2), scrollState = _v[0], setScrollState = _v[1];
+    var _w = __read(useState(false), 2), hasScrollBar = _w[0], setHasScrollBar = _w[1];
+    var _x = __read(useState(0), 2), mousePositionX = _x[0], setMousePositionX = _x[1];
+    var _y = __read(useState(0), 2), headerHeight = _y[0], setHeaderHeight = _y[1];
+    var _z = __read(useState(isNarrowDesktop), 2), isCollapsable = _z[0], setIsCollapsable = _z[1];
+    var _0 = __read(useState(0), 2), leftPosition = _0[0], setLeftPosition = _0[1];
+    var _1 = __read(useState(false), 2), isHovered = _1[0], setIsHovered = _1[1];
+    var switchActiveMenuItem = function (id) {
+        if (id !== value) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
+            setActiveMenuItem(id);
+        }
+    };
     useEffect(function () {
         var _a;
         setLeftPosition(((_a = sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0);
+        navigation.current = new MenuNavigation({
+            root: sideMenuRef,
+            activeMenuItem: activeMenuItem,
+            setActiveMenuItem: switchActiveMenuItem,
+            isSeparatedMenu: isSeparatedMenu,
+            isSeparatedMenuShown: isSeparatedMenuShown,
+            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
+            isOpened: isOpened,
+            isDesktopQuery: isDesktopQuery,
+            isMobile: isMobile,
+            isCollapsable: isCollapsable,
+        });
         return function () {
             if (transitionTimer.current) {
                 clearTimeout(transitionTimer.current);
@@ -108,8 +129,9 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktop && setIsCollapsable(true);
     }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile]);
     useEffect(function () {
-        setActiveMenuItem(value);
-    }, [value]);
+        var _a;
+        (_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(value);
+    }, [value, (_f = navigation.current) === null || _f === void 0 ? void 0 : _f.navigationTree]);
     useEffect(function () {
         handleIsOpened(isOpen, manual);
     }, [isOpen]);
@@ -157,12 +179,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         setMousePositionX(relativeXCoordinate);
     };
-    var switchActiveMenuItem = function (id) {
-        if (id !== value) {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
-            setActiveMenuItem(id);
-        }
-    };
     var showMenu = function (newIsShown) {
         if (!isTabletOrMobile)
             return;
@@ -178,11 +194,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
-    var _1 = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
+    var _2 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
         opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
+    }), 2), shouldShowBackdrop = _2[0], backdropStyle = _2[1];
     var isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
     var setScrollBar = function () {
         var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
@@ -208,8 +224,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             isBeingTransitioned: isBeingTransitioned,
             isSeparatedMenu: isSeparatedMenu,
             size: size,
-            activeMenuItem: activeMenuItem,
-            switchActiveMenuItem: switchActiveMenuItem,
             clickedButton: clickedButton,
             setClickedButton: setClickedButton,
             isDesktop: isDesktopQuery,
@@ -217,8 +231,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             isTablet: isTablet,
             isMobile: isMobile,
             isTouchScreen: isTouchScreen,
-            isSeparatedMenuShown: isSeparatedMenuShown,
-            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
             setIsMouseOutside: setIsMouseOutside,
             scrollState: scrollState,
             setScrollState: setScrollState,
@@ -229,6 +241,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             hideScrollBar: hideScrollBar,
             showScrollBar: showScrollBar,
             sideMenuRef: sideMenuRef,
+            navigation: navigation.current,
         } },
         (isOpened || isBeingTransitioned) && isTabletOrMobile && React.createElement("div", { style: { height: headerHeight } }),
         React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},

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

@@ -23,4 +23,5 @@ export declare const jsStylesForSideMenu: {
     wrapperWithShadow(t: SideMenuTheme): string;
     collapsedContainerForTabletsOrMobiles(): string;
     list(): string;
+    hidden(): string;
 };

package/src/SideMenu/SideMenu.styles.js

@@ -64,11 +64,14 @@ var styles = {
     list: function () {
         return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
     },
+    hidden: function () {
+        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+    },
 };
 export var customStyles = {
     rootForTabletsOrMobiles: function (headerHeight) {
-        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
+        return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
     },
 };
 export var jsStylesForSideMenu = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;

package/src/SideMenuBody/SideMenuBody.js

@@ -3,22 +3,20 @@ import React, { forwardRef, useContext } 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 { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
 var SideMenuBodyInner = forwardRef(function (_a, ref) {
-    var _b;
+    var _b, _c;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    if (!(context.isMobile || context.isTablet) || (context.isOpened && (context.isMobile || context.isTablet))) {
-        return (React.createElement("div", { ref: ref, className: cx(jsStyles.root(theme), className) },
-            React.createElement("nav", null,
-                React.createElement("ul", __assign({ className: cx((_b = {}, _b[jsStylesForSideMenu.list()] = true, _b[jsStyles.wrapper(theme)] = true, _b)) }, rest),
-                    React.createElement(InnerBody, null, children)))));
-    }
-    return null;
+    return (React.createElement("div", { ref: ref, className: cx((_b = {},
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStylesForSideMenu.hidden()] = !context.isOpened && (context.isMobile || context.isTablet),
+            _b)) },
+        React.createElement("nav", null,
+            React.createElement("ul", __assign({ className: cx((_c = {}, _c[jsStylesForSideMenu.list()] = true, _c[jsStyles.wrapper(theme)] = true, _c)) }, rest), children))));
 });
 SideMenuBodyInner.displayName = 'SideMenuBody';
 /**