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

package/src/SideMenuContext.d.ts

@@ -1,17 +1,14 @@
 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 +18,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 +28,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;
+}

package/src/Tree.js

@@ -0,0 +1,133 @@
+import { __generator, __values } from "tslib";
+var TreeNode = /** @class */ (function () {
+    function TreeNode(id, value, parent) {
+        if (value === void 0) { value = null; }
+        if (parent === void 0) { parent = null; }
+        this.id = id;
+        this.value = value;
+        this.parent = parent;
+        this.children = [];
+    }
+    Object.defineProperty(TreeNode.prototype, "hasChildren", {
+        get: function () {
+            return this.children.length !== 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return TreeNode;
+}());
+export { TreeNode };
+var Tree = /** @class */ (function () {
+    function Tree(id, value) {
+        if (value === void 0) { value = null; }
+        this.root = new TreeNode(id, value);
+    }
+    Tree.prototype.preOrderTraversal = function (node) {
+        var _a, _b, child, e_1_1;
+        var e_1, _c;
+        if (node === void 0) { node = this.root; }
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0: return [4 /*yield*/, node];
+                case 1:
+                    _d.sent();
+                    if (!node.children.length) return [3 /*break*/, 9];
+                    _d.label = 2;
+                case 2:
+                    _d.trys.push([2, 7, 8, 9]);
+                    _a = __values(node.children), _b = _a.next();
+                    _d.label = 3;
+                case 3:
+                    if (!!_b.done) return [3 /*break*/, 6];
+                    child = _b.value;
+                    return [5 /*yield**/, __values(this.preOrderTraversal(child))];
+                case 4:
+                    _d.sent();
+                    _d.label = 5;
+                case 5:
+                    _b = _a.next();
+                    return [3 /*break*/, 3];
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    e_1_1 = _d.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 9];
+                case 8:
+                    try {
+                        if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    };
+    Tree.prototype.insert = function (parentId, id, value) {
+        var e_2, _a;
+        if (value === void 0) { value = null; }
+        if (!id)
+            return false;
+        try {
+            for (var _b = __values(this.preOrderTraversal()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var node = _c.value;
+                if (node.id === parentId && node.children.every(function (node) { return node.id !== id; })) {
+                    node.children.push(new TreeNode(id, value, node));
+                    return true;
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return false;
+    };
+    Tree.prototype.remove = function (id) {
+        var e_3, _a;
+        try {
+            for (var _b = __values(this.preOrderTraversal()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var node = _c.value;
+                var filtered = node.children.filter(function (c) { return c.id !== id; });
+                if (filtered.length !== node.children.length) {
+                    node.children = filtered;
+                    return true;
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        return false;
+    };
+    Tree.prototype.find = function (id) {
+        var e_4, _a;
+        if (!id) {
+            return undefined;
+        }
+        try {
+            for (var _b = __values(this.preOrderTraversal()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var node = _c.value;
+                if (node.id === id)
+                    return node;
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        return undefined;
+    };
+    return Tree;
+}());
+export { Tree };

package/src/internal/BackButton.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { CommonClickableElementProps } from './ClickableElement';
 export interface BackButtonProps extends Pick<CommonClickableElementProps, 'caption' | 'id'> {
     href?: string;
-    generatedId?: string;
 }
 declare const BackButtonWithStaticFields: React.ForwardRefExoticComponent<BackButtonProps & React.RefAttributes<HTMLButtonElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/BackButton.js

@@ -9,23 +9,11 @@ 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 caption = _a.caption, id = _a.id, href = _a.href;
     var context = useContext(SideMenuContext);
     var handleClick = function () {
-        var _a, _b, _c, _d;
-        var currentId = id || href || generatedId;
-        if (context.activeMenuItem === currentId) {
-            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
-        }
-        if (id) {
-            return (_b = context.switchActiveMenuItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
-        }
-        if (href) {
-            return (_c = context.switchActiveMenuItem) === null || _c === void 0 ? void 0 : _c.call(context, href);
-        }
-        if (generatedId) {
-            return (_d = context.switchActiveMenuItem) === null || _d === void 0 ? void 0 : _d.call(context, generatedId);
-        }
+        var _a;
+        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(id);
     };
     return (React.createElement(SideMenuItem, { "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isSubMenu: true, onClick: handleClick, _isBackButton: true, ref: ref }));
 });

package/src/internal/ClickableElement.d.ts

@@ -10,12 +10,8 @@ export interface CommonClickableElementProps extends CommonProps {
     isButton?: boolean;
     disabled?: boolean;
     /** @ignore */
-    _generatedId?: string;
-    /** @ignore */
     _isSubMenu?: boolean;
     /** @ignore */
-    _isNestedSubMenu?: boolean;
-    /** @ignore */
     _isDropdown?: boolean;
     /** @ignore */
     _isAvatar?: boolean;
@@ -30,7 +26,7 @@ export interface ClickableElementProps extends CommonClickableElementProps {
     onFocus?: React.EventHandler<React.FocusEvent>;
     onBlur?: React.EventHandler<React.FocusEvent>;
 }
-declare const ClickableElementWithStaticFields: React.ForwardRefExoticComponent<ClickableElementProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
+declare const ClickableElementWithStaticFields: React.ForwardRefExoticComponent<ClickableElementProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { ClickableElementWithStaticFields as ClickableElement };

package/src/internal/ClickableElement.js

@@ -1,15 +1,15 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useState } from 'react';
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
 import { SideMenuContext } from '../SideMenuContext';
 import { ItemContent } from './ItemContent/ItemContent';
 import { SubMenu } from './SubMenu';
-import { useOpenedState } from '../../hooks/useOpenedState';
-import { useActiveState } from '../../hooks/useActiveState';
 import { jsStyles } from './ClickableElement.styles';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
+import { useMemoIcon } from '../../hooks/useMemoIcon';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
 /**
  * Элемент списка (пункт меню либо ссылка)
  *
@@ -17,31 +17,35 @@ import { ThemeContext } from '@skbkontur/react-ui';
  */
 var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
-    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, 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, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
+    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    var isActive = !isButton && useActiveState(id, href, _generatedId, context.activeMenuItem);
-    var isClickedButton = isButton && useActiveState(id, href, _generatedId, context.clickedButton);
-    var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
-    var isOpened = useOpenedState(id || href, _generatedId, context.openedParents, isActive || isClickedButton, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
-    var hasChildren = function (id, generatedId) {
-        var _a, _b;
-        var parentId = id ? 'parentId' : 'generatedParentId';
-        var childId = id !== null && id !== void 0 ? id : generatedId;
-        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 switchItem = function (context, isButton, id, href, _generatedId) {
-        var _a, _b;
-        var itemId = id || href || _generatedId;
-        if (!itemId)
-            return;
-        if (!isButton) {
-            (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, itemId);
-        }
-        else {
-            (_b = context.setClickedButton) === null || _b === void 0 ? void 0 : _b.call(context, itemId);
+    var _c = __read(useState(false), 2), isActive = _c[0], setIsActive = _c[1];
+    var _d = __read(useState(false), 2), isFirstLevelParentOfActiveMenuItem = _d[0], setIsFirstLevelParentOfActiveMenuItem = _d[1];
+    var _e = __read(useState(false), 2), isOpened = _e[0], setIsOpened = _e[1];
+    var _f = __read(useState(false), 2), isNestedSubMenu = _f[0], setIsNestedSubMenu = _f[1];
+    var _g = __read(useState(false), 2), hasSubIcons = _g[0], setHasSubIcons = _g[1];
+    var _h = __read(useState(false), 2), isFocusedByTab = _h[0], setIsFocusedByTab = _h[1];
+    var _j = __read(useState(id || href || ''), 2), currentId = _j[0], setCurrentId = _j[1];
+    useEffect(function () {
+        var _a;
+        if (!currentId) {
+            var generatedId = Date.now().toString(36) + Math.random().toString(36).substr(2);
+            setCurrentId(generatedId);
         }
-    };
+        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
+            setIsActive: setIsActive,
+            setIsOpened: setIsOpened,
+            isSubMenu: _isSubMenu,
+            setIsNestedSubMenu: setIsNestedSubMenu,
+            setHasSubIcons: setHasSubIcons,
+            setIsFirstLevelParentOfActiveMenuItem: setIsFirstLevelParentOfActiveMenuItem,
+        });
+        return function () {
+            var _a;
+            (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.updateNavigationTree();
+        };
+    });
     var toggleIsShown = function (lastElementInTheHierarchy) {
         var _a;
         if ((context.isMobile || context.isTablet) && lastElementInTheHierarchy) {
@@ -67,21 +71,16 @@ var ClickableElement = forwardRef(function (_a, ref) {
         }
     };
     var handleClick = function (e) {
-        var _a;
+        var _a, _b, _c;
         if (disabled) {
             return;
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        if (_isBackButton) {
+        if (_isBackButton || _isDropdown) {
             return;
         }
-        var currentId = id || href || _generatedId;
-        var isMobileWithClosedSeparatedMenu = context.isMobile && context.isSeparatedMenu && !context.isSeparatedMenuShown;
-        if (isMobileWithClosedSeparatedMenu && context.activeMenuItem === currentId) {
-            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, true);
-        }
-        var lastElementInTheHierarchy = !hasChildren(id || href, _generatedId) && !_isDropdown && !_isBackButton;
-        switchItem(context, isButton, id, href, _generatedId);
+        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(currentId, isButton);
+        var lastElementInTheHierarchy = !_isDropdown && !_isBackButton && !((_c = (_b = context.navigation) === null || _b === void 0 ? void 0 : _b.activeMenuItemTreeNode) === null || _c === void 0 ? void 0 : _c.hasChildren);
         toggleIsShown(lastElementInTheHierarchy);
         setIsMinimized(lastElementInTheHierarchy);
         setMouseIsOutside(lastElementInTheHierarchy);
@@ -98,24 +97,26 @@ var ClickableElement = forwardRef(function (_a, ref) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
         setIsFocusedByTab(false);
     };
-    var shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
-    var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isCollapsable && !context.isOpened;
     var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
+    var isHighlighted = isActive ||
+        (isFirstLevelParentOfActiveMenuItem && !context.isOpened && context.isCollapsable) ||
+        (isFirstLevelParentOfActiveMenuItem && context.isSeparatedMenu);
     var newProps = __assign({ className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.rootButton(theme)] = isButton,
             _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
             _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
             _b[jsStyles.disabledRoot(theme)] = disabled,
-            _b[jsStyles.activeRoot(theme)] = isActive ||
-                shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
-                shouldHighlightTopLevelItemWhenMenuIsMinimized,
+            _b[jsStyles.activeRoot(theme)] = isHighlighted,
             _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
-            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
-    return (React.createElement(Component, null,
+            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, 
+            // @ts-expect-error: SideMenuItem should have icon
+            icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, isOpened) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
+    return (React.createElement(Component, { "data-tid": SideMenuDataTids.clickableElement, "data-navigation-id": currentId },
         React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
-            ? __assign(__assign({}, newProps), { 'aria-expanded': isOpened, 'aria-controls': "" + (id || _generatedId) }) : __assign({}, newProps)),
-        React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: !context.isOpened && !(context.isMobile || context.isTablet), htmlId: "" + (id || _generatedId) }, children)));
+            ? __assign(__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : __assign({}, newProps)),
+        React.createElement(SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
+            React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubIcons }, context) }, children))));
 });
 ClickableElement.displayName = 'ClickableElement';
 var ClickableElementWithStaticFields = Object.assign(ClickableElement, {

package/src/internal/InnerSubMenu.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 interface InnerSubMenuProps {
     children?: React.ReactNode;
-    generatedId?: string;
     htmlId: string;
+    isOpened?: boolean;
 }
 declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLUListElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/InnerSubMenu.js

@@ -1,29 +1,20 @@
-import React, { forwardRef } from 'react';
-import { isClickableSubElement } from '../../lib/utils/scripts';
+import React, { forwardRef, useContext } from 'react';
 import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { SideMenuContext } from '../SideMenuContext';
 /**
  * Подменю, раскрывающееся внутри основного меню
  *
  * @visibleName InnerSubMenu
  */
 var InnerSubMenu = forwardRef(function (_a, ref) {
-    var children = _a.children, generatedId = _a.generatedId, htmlId = _a.htmlId;
-    var levelIndex = 0;
-    return (React.createElement("ul", { ref: ref, id: htmlId, className: jsStylesForSideMenu.list() }, React.Children.map(children, function (child) {
-        if (React.isValidElement(child)) {
-            if (
-            // @ts-expect-error: accessing private property
-            isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
-                var oldIndex = levelIndex;
-                levelIndex++;
-                return React.cloneElement(child, {
-                    _generatedId: generatedId + "-" + oldIndex,
-                });
-            }
-            return React.cloneElement(child);
-        }
-        return child;
-    })));
+    var _b;
+    var children = _a.children, htmlId = _a.htmlId, isOpened = _a.isOpened;
+    var context = useContext(SideMenuContext);
+    return (React.createElement("ul", { ref: ref, id: htmlId, className: cx((_b = {},
+            _b[jsStylesForSideMenu.list()] = true,
+            _b[jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
+            _b)) }, children));
 });
 InnerSubMenu.displayName = 'InnerSubMenu';
 var InnerSubMenuWithStaticFields = Object.assign(InnerSubMenu, { __KONTUR_REACT_UI__: 'InnerSubMenu' });

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption' | '_isBackButton' | '_isDropdown' | '_isAvatar' | 'subCaption'> {
+interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'caption' | '_isBackButton' | '_isDropdown' | '_isAvatar' | 'subCaption'> {
     hasIcon: boolean;
     isMultiline: boolean;
+    isNestedSubMenu?: boolean;
 }
 export declare const Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLParagraphElement>>;
 export {};

package/src/internal/ItemContent/Caption.js

@@ -1,3 +1,4 @@
+import { __read } from "tslib";
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Caption.styles';
@@ -5,7 +6,7 @@ import React, { forwardRef, useContext, useEffect, useRef, useState } from 'reac
 import { SideMenuContext } from '../../SideMenuContext';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
-    var _a = caption.split(' '), firstName = _a[0], lastName = _a[1];
+    var _a = __read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
     if (visibleWidth < fullWidth && lastName) {
         return firstName + " " + lastName[0] + ".";
     }
@@ -22,11 +23,11 @@ var getCaptionTail = function (caption, visibleWidth, fullWidth) {
 };
 export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
+    var _isSubMenu = _a._isSubMenu, isNestedSubMenu = _a.isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
     var captionRef = useRef(null);
-    var _e = useState(''), tail = _e[0], setTail = _e[1];
+    var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
     var isCaptionPlainText = typeof caption === 'string';
     useEffect(function () {
         if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
@@ -58,8 +59,8 @@ export var Caption = forwardRef(function (_a, ref) {
                     _isDropdown &&
                     (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
                 _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
-                _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu && !hasIcon,
-                _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasIcon,
+                _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
+                _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
                 _c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
                 _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
                 _c[jsStyles.captionLarge(theme)] = size === 'large',