@skbkontur/side-menu 1.12.9 → 2.0.2

package/src/Navigation.js

@@ -0,0 +1,150 @@
+import { __read, __spread } from "tslib";
+import { SideMenuDataTids } from '../SideMenuDataTids';
+import { Tree } from './Tree';
+var MENU_ROOT_ID = 'menu-root-id';
+export var navigationAttribute = 'data-navigation-id';
+export var navigationAttributeForSeparatedMenu = 'data-parent-navigation-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.rootRef = options.rootRef;
+        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.rootRef) === null || _a === void 0 ? void 0 : _a.current) {
+            var menuItems = Array.from(this.rootRef.current.querySelectorAll("[data-tid=" + SideMenuDataTids.clickableElement + "]")).filter(function (item) { return !item.querySelector("button[data-tid=" + SideMenuDataTids.backButton + "]"); });
+            menuItems.forEach(function (menuItem) {
+                var _a, _b, _c;
+                var id = menuItem.getAttribute(navigationAttribute);
+                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);
+        var oldFirstLevelParent = this.getFirstLevelParent(this.activeMenuItemTreeNode);
+        var firstLevelParent = this.getFirstLevelParent(foundTreeNode);
+        var firstLevelParentChanged = oldFirstLevelParent !== firstLevelParent;
+        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.setHighlightedFirstLevelMenuItemInMinimizedInnerMenu(firstLevelParent);
+                (_d = foundTreeNode.value) === null || _d === void 0 ? void 0 : _d.setIsActive(true);
+            }
+            this.isSeparatedMenu && this.switchVisibilityOfSeparatedMenu();
+            this.openMenuItems(foundTreeNode, firstLevelParentChanged);
+        }
+    };
+    MenuNavigation.prototype.switchIsSeparatedMenu = function (value) {
+        this.isSeparatedMenu = value;
+        this.switchVisibilityOfSeparatedMenu();
+    };
+    MenuNavigation.prototype.setHighlightedFirstLevelMenuItemInMinimizedInnerMenu = function (firstLevelParent) {
+        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);
+        });
+        (_b = firstLevelParent === null || firstLevelParent === void 0 ? void 0 : firstLevelParent.value) === null || _b === void 0 ? void 0 : _b.setIsFirstLevelParentOfActiveMenuItem(true);
+    };
+    MenuNavigation.prototype.getFirstLevelParent = function (treeNode) {
+        if (!treeNode)
+            return;
+        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;
+        }
+        return parentTreeNode;
+    };
+    MenuNavigation.prototype.openMenuItems = function (treeNode, firstLevelParentChanged) {
+        var _a, _b, _c;
+        (!((_a = treeNode.value) === null || _a === void 0 ? void 0 : _a.isSubMenu) || firstLevelParentChanged) &&
+            __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(navigationAttributeForSeparatedMenu);
+                parentElement = (_c = (_b = this.rootRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.querySelector("[" + navigationAttribute + "=\"" + firstLevelMenuId + "\"]");
+            }
+        }
+        return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute(navigationAttribute)) || MENU_ROOT_ID;
+    };
+    MenuNavigation.prototype.switchVisibilityOfSeparatedMenu = function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (!this.isSeparatedMenu) {
+            this.isSeparatedMenuShown = false;
+            return (_a = this.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(this, false);
+        }
+        var activeItemHasParent = (_c = (_b = this.activeMenuItemTreeNode) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.isSubMenu;
+        var activeMenuItemHasChildren = (_d = this.activeMenuItemTreeNode) === null || _d === void 0 ? void 0 : _d.hasChildren;
+        var isActive = activeItemHasParent || activeMenuItemHasChildren || false;
+        var isMinimizedInWideDesktop = !this.isOpened && this.isDesktop && !this.isCollapsable;
+        if (this.isMobile && !activeItemHasParent && this.isSeparatedMenuShown) {
+            this.isSeparatedMenuShown = false;
+            return (_e = this.setIsSeparatedMenuShown) === null || _e === void 0 ? void 0 : _e.call(this, false);
+        }
+        this.isSeparatedMenuShown = isActive && !isMinimizedInWideDesktop;
+        (_f = this.setIsSeparatedMenuShown) === null || _f === void 0 ? void 0 : _f.call(this, this.isSeparatedMenuShown);
+    };
+    return MenuNavigation;
+}());
+export { MenuNavigation };

package/src/SideMenu/SideMenu.d.ts

@@ -25,8 +25,16 @@ export interface SideMenuProps extends CommonProps {
      * Заблокировать возможность сворачивания меню до иконок на широких экранах
      */
     disableCollapsing?: boolean;
+    /**
+     * @deprecated use activeItem
+     */
     value?: string;
+    /**
+     * @deprecated use onActiveItemChange
+     */
     onValueChange?: (value: string) => void;
+    activeItem?: string;
+    onActiveItemChange?: (value: string) => void;
     desktopMediaQuery?: string;
     narrowDesktopMediaQuery?: string;
     tabletMediaQuery?: string;

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, _g;
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, activeItem = _a.activeItem, onActiveItemChange = _a.onActiveItemChange, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.isSeparatedMenu, isSeparatedMenu = _j === void 0 ? false : _j, className = _a.className, _k = _a.disableSwipe, disableSwipe = _k === void 0 ? false : _k, _l = _a.disableCollapsing, disableCollapsing = _l === void 0 ? false : _l, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _m = _a.hideScrollBar, hideScrollBar = _m === void 0 ? undefined : _m, _o = _a.showScrollBar, showScrollBar = _o === void 0 ? 'hover' : _o, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "activeItem", "onActiveItemChange", "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 _p = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _m.isMobileQuery, isTabletQuery = _m.isTabletQuery, isNarrowDesktopQuery = _m.isNarrowDesktopQuery, isDesktopQuery = _m.isDesktopQuery;
+    }), isMobileQuery = _p.isMobileQuery, isTabletQuery = _p.isTabletQuery, isNarrowDesktopQuery = _p.isNarrowDesktopQuery, isDesktopQuery = _p.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 _q = __read(useState(isDesktopQuery), 2), isOpened = _q[0], setIsOpened = _q[1];
+    var _r = __read(useState(false), 2), isBeingTransitioned = _r[0], setIsBeingTransitioned = _r[1];
+    var _s = __read(useState(value !== null && value !== void 0 ? value : activeItem), 2), activeMenuItem = _s[0], setActiveMenuItem = _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 && id !== activeItem) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
+            onActiveItemChange === null || onActiveItemChange === void 0 ? void 0 : onActiveItemChange(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({
+            rootRef: 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,17 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktop && setIsCollapsable(true);
     }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile]);
     useEffect(function () {
-        setActiveMenuItem(value);
-    }, [value]);
+        var _a;
+        !activeItem && ((_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 () {
+        var _a;
+        !value && ((_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(activeItem));
+    }, [activeItem, (_g = navigation.current) === null || _g === void 0 ? void 0 : _g.navigationTree]);
+    useEffect(function () {
+        var _a;
+        (_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchIsSeparatedMenu(isSeparatedMenu);
+    }, [isSeparatedMenu]);
     useEffect(function () {
         handleIsOpened(isOpen, manual);
     }, [isOpen]);
@@ -122,7 +152,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
             transitionTimer.current = setTimeout(function () {
                 setIsBeingTransitioned(false);
-            }, transitionDuration);
+            }, transitionDuration + 200);
         }
     };
     var handleMouseEnter = function () {
@@ -157,12 +187,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 +202,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,17 +232,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             isBeingTransitioned: isBeingTransitioned,
             isSeparatedMenu: isSeparatedMenu,
             size: size,
-            activeMenuItem: activeMenuItem,
-            switchActiveMenuItem: switchActiveMenuItem,
-            clickedButton: clickedButton,
-            setClickedButton: setClickedButton,
             isDesktop: isDesktopQuery,
             isNarrowDesktop: isNarrowDesktop,
             isTablet: isTablet,
             isMobile: isMobile,
             isTouchScreen: isTouchScreen,
-            isSeparatedMenuShown: isSeparatedMenuShown,
-            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
             setIsMouseOutside: setIsMouseOutside,
             scrollState: scrollState,
             setScrollState: setScrollState,
@@ -229,6 +247,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';
 /**

package/src/SideMenuContext.d.ts

@@ -1,17 +1,12 @@
 import { RefObject } from 'react';
-import { FlattedArrayElementType } from './internal/InnerBody';
 import { ScrollContainerScrollStateY } from '@skbkontur/react-ui';
 import { showScrollBarType } from './SideMenu/SideMenu';
+import { MenuNavigation } from './Navigation';
 export interface SideMenuContextType {
     isBeingTransitioned?: boolean;
     isSeparatedMenu?: boolean;
     size?: 'small' | 'large';
-    activeMenuItem?: string | null;
-    switchActiveMenuItem?: (id: string) => void;
-    clickedButton?: string | null;
-    setClickedButton?: (id: string | null) => void;
     hasSubIcons?: boolean;
-    openedParents?: string[];
     isDesktop?: boolean;
     isNarrowDesktop?: boolean;
     isTablet?: boolean;
@@ -21,9 +16,6 @@ export interface SideMenuContextType {
     isCollapsable?: boolean;
     toggleIsOpened?: () => void;
     setIsMinimized?: (isMinimized: boolean) => void;
-    flattedArrayOfAllElements?: FlattedArrayElementType[];
-    isSeparatedMenuShown?: boolean;
-    setIsSeparatedMenuShown?: (separatedMenuIsShown: boolean) => void;
     setIsMouseOutside?: (v: boolean) => void;
     scrollState?: ScrollContainerScrollStateY;
     setScrollState?: (state: ScrollContainerScrollStateY) => void;
@@ -34,5 +26,6 @@ export interface SideMenuContextType {
     hideScrollBar?: boolean;
     showScrollBar?: showScrollBarType;
     sideMenuRef?: RefObject<HTMLDivElement>;
+    navigation?: MenuNavigation | null;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -2,12 +2,10 @@ import React from 'react';
 import { DropdownMenuProps } from '@skbkontur/react-ui';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 import { SideMenuItemProps } from '../SideMenuItem/SideMenuItem';
-export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'marker' | 'id' | '_generatedId' | 'subCaption' | '_isAvatar'> {
+export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'marker' | 'id' | 'subCaption' | '_isAvatar'> {
     children?: React.ReactNode;
     disableAnimations?: boolean;
     id?: string;
-    /** @ignore */
-    _generatedId?: string;
 }
 /**
  * Элемент списка с выпадающим меню

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -8,7 +8,7 @@ import { SideMenuContext } from '../SideMenuContext';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, children = _a.children, caption = _a.caption, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "_generatedId", "children", "caption", "marker", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
+    var icon = _a.icon, id = _a.id, children = _a.children, caption = _a.caption, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "children", "caption", "marker", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     return (React.createElement("li", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },

package/src/SideMenuFooter/SideMenuFooter.js

@@ -1,9 +1,8 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './SideMenuFooter.styles';
-import { getItemId } from '../../lib/utils/scripts';
 import { SideMenuContext } from '../SideMenuContext';
 import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
@@ -12,7 +11,7 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    var _c = useState(false), isFixed = _c[0], setIsFixed = _c[1];
+    var _c = __read(useState(false), 2), isFixed = _c[0], setIsFixed = _c[1];
     useEffect(function () {
         setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
     }, [context.hasScrollBar, context.scrollState]);
@@ -22,14 +21,7 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
                 _b[jsStyles.rootFixed(theme)] = isFixed,
                 _b[jsStyles.rootTransitionedForTabletsOrMobiles()] = context.isBeingTransitioned && (context.isMobile || context.isTablet),
                 _b), className), ref: ref }, rest),
-            React.createElement("ul", { className: jsStylesForSideMenu.list() }, React.Children.map(children, function (child, index) {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, {
-                        _generatedId: getItemId('footer', index++),
-                    });
-                }
-                return child;
-            }))));
+            React.createElement("ul", { className: jsStylesForSideMenu.list() }, children)));
     }
     return null;
 });

package/src/SideMenuHeader/SideMenuHeader.js

@@ -10,7 +10,8 @@ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { getDOMRect } from '@skbkontur/react-ui/lib/dom/getDOMRect';
 var SideMenuHeaderInner = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, _c = _a.withWidget, withWidget = _c === void 0 ? true : _c, dataTid = _a["data-tid"], rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
+    var _c;
+    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, _d = _a.withWidget, withWidget = _d === void 0 ? true : _d, dataTid = _a["data-tid"], rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var headerWrapperRef = useRef(null);
@@ -25,7 +26,7 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
             _b[jsStyles.rootForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
             _b[jsStyles.fixedRoot(theme)] = context.isOpened && !!context.hasScrollBar && !(context.scrollState === 'top'),
             _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isOpened && (context.isMobile || context.isTablet),
-            _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isOpened && context.isMobile && context.isSeparatedMenuShown,
+            _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isOpened && context.isMobile && ((_c = context.navigation) === null || _c === void 0 ? void 0 : _c.isSeparatedMenuShown),
             _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style, "data-tid": dataTid },
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });

package/src/SideMenuSubItem/SideMenuSubItem.js

@@ -1,23 +1,10 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
-import { SideMenuContext } from '../SideMenuContext';
-import { NestedMenu } from '../internal/NestedMenu';
-import { useOpenedSubElementState } from '../../hooks/useOpenedSubElementState';
-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);
-    var isOpened = useOpenedSubElementState(id, _generatedId, context.openedParents, context.activeMenuItem);
-    var isOpenedButton = useOpenedSubElementState(id, _generatedId, context.openedParents, context.clickedButton);
-    var icon = useMemoIcon(children, isOpened || isOpenedButton);
+    var props = __rest(_a, []);
     return (React.createElement("li", { ref: ref },
-        React.createElement(SideMenuItem
-        /*@ts-expect-error: SideMenuItem should have icon */
-        , __assign({ 
-            /*@ts-expect-error: SideMenuItem should have icon */
-            icon: icon, _isSubMenu: true, id: id, _generatedId: _generatedId, "aria-expanded": children ? isOpened || isOpenedButton : undefined, "aria-controls": children ? "" + (id || _generatedId) : undefined }, rest)),
-        children && (isOpened || isOpenedButton) && (React.createElement(NestedMenu, { _generatedId: _generatedId, htmlId: "" + (id || _generatedId) }, children))));
+        React.createElement(SideMenuItem, __assign({ _isSubMenu: true }, props))));
 });
 SideMenuSubItemInner.displayName = 'SideMenuSubItem';
 /**

package/src/SideMenuSubLink/SideMenuSubLink.js

@@ -1,22 +1,9 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
-import { SideMenuContext } from '../SideMenuContext';
+import { __assign } from "tslib";
+import React, { forwardRef } from 'react';
 import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
-import { NestedMenu } from '../internal/NestedMenu';
-import { useOpenedSubElementState } from '../../hooks/useOpenedSubElementState';
-import { useMemoIcon } from '../../hooks/useMemoIcon';
-var SideMenuSubLinkInner = forwardRef(function (_a, ref) {
-    var id = _a.id, _generatedId = _a._generatedId, _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, children = _a.children, rest = __rest(_a, ["id", "_generatedId", "_isSubMenu", "_isNestedSubMenu", "children"]);
-    var context = useContext(SideMenuContext);
-    var isOpened = useOpenedSubElementState(id, _generatedId, context.openedParents, context.activeMenuItem);
-    var icon = useMemoIcon(children, isOpened);
+var SideMenuSubLinkInner = forwardRef(function (props, ref) {
     return (React.createElement("li", { ref: ref },
-        React.createElement(SideMenuLink
-        /*@ts-expect-error: SideMenuItem should have icon */
-        , __assign({ 
-            /*@ts-expect-error: SideMenuItem should have icon */
-            icon: icon, _isSubMenu: true, _isNestedSubMenu: _isNestedSubMenu, id: id, _generatedId: _generatedId, "aria-expanded": children ? isOpened : undefined, "aria-controls": children ? "" + (id || _generatedId) : undefined }, rest)),
-        children && isOpened && (React.createElement(NestedMenu, { _generatedId: _generatedId, htmlId: "" + (id || _generatedId) }, children))));
+        React.createElement(SideMenuLink, __assign({ _isSubMenu: true }, props))));
 });
 SideMenuSubLinkInner.displayName = 'SideMenuSubLink';
 /**

package/src/Tree.d.ts

@@ -0,0 +1,17 @@
+import { NavigableElement } from './Navigation';
+export declare class TreeNode {
+    id: string;
+    value: NavigableElement | null;
+    parent: TreeNode | null;
+    children: TreeNode[];
+    constructor(id: string, value?: NavigableElement | null, parent?: TreeNode | null);
+    get hasChildren(): boolean;
+}
+export declare class Tree {
+    private root;
+    constructor(id: string, value?: NavigableElement | null);
+    preOrderTraversal(node?: TreeNode): Generator<TreeNode, void, undefined>;
+    insert(parentId: string, id: string | undefined | null, value?: NavigableElement | null): boolean;
+    remove(id: string): boolean;
+    find(id?: string | null): TreeNode | undefined;
+}