@skbkontur/side-menu 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.3.2...@skbkontur/side-menu@0.4.0) (2022-11-30)
+
+
+### Features
+
+* **SideMenu:** allow control active MenuItem ([c4d898d](https://git.skbkontur.ru/ui/ui-parking/commits/c4d898d894f1a72a6ddcf97c5520ecec19650b2a))
+
+
+
+
+
+## [0.3.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.3.1...@skbkontur/side-menu@0.3.2) (2022-11-30)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [0.3.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.3.0...@skbkontur/side-menu@0.3.1) (2022-11-10)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -187,3 +187,227 @@ const renderModal = () => {
   </SideMenu>
 </div>
 ```
+
+SideMenu с ручным управлением
+
+```jsx harmony
+import { useState } from 'react';
+import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
+import { Kontur, Ofd } from '@skbkontur/logos';
+import { MenuItem, Select } from '@skbkontur/react-ui';
+import { SideMenu } from './index';
+import {
+  DocTextIcon24Regular,
+  CommentRectTextIcon24Regular,
+  LightbulbIcon24Regular,
+  BookOpenTextIcon24Regular,
+  BookmarkIcon24Regular,
+  StackHDownIcon24Regular,
+  SettingsGearIcon24Regular,
+  FaceAHappyIcon24Regular
+} from '@skbkontur/icons';
+
+
+const [activeItem, setActiveItem] = useState('122');
+const items = [
+  "100",
+  "110",
+  "120",
+  "121",
+  "122",
+  "130",
+  "140",
+  "150",
+  "160",
+  "170",
+  "200",
+  "300",
+  "310",
+  "320",
+  "330",
+  "340",
+  "350",
+  "400",
+  "500",
+  "600",
+];
+
+<div style={{height: '600px', display: 'flex'}}>
+    <SideMenu value={activeItem} onValueChange={setActiveItem}>
+        <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
+        <SideMenu.Body>
+            <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'новое'} id={'100'}>
+                <SideMenu.SubItem caption={'Входящие id=110'} id={'110'}/>
+                <SideMenu.SubItem caption={'Исходящие id=120'} marker={'2'} id={'120'}>
+                    <SideMenu.SubItem caption={'Исходящие1 id=121'} id={'121'}/>
+                    <SideMenu.SubItem caption={'Исходящие2 id=122'} id={'122'}/>
+                </SideMenu.SubItem>
+                <SideMenu.SubItem caption={'Внутренние id=130'} id={'130'}/>
+                <SideMenu.SubItem caption={'Черновики id=140'} id={'140'}/>
+                <SideMenu.SubItem caption={'Удаленные id=150'} id={'150'}/>
+                <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
+                <SideMenu.SubItem caption={'Требуют обработки id=160'} id={'160'}/>
+                <SideMenu.SubItem caption={'Обработанные id=170'} id={'170'}/>
+            </SideMenu.Item>
+            <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты id=200'} id={'200'}/>
+            <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения id=300'} marker={'5'} id={'300'}>
+                <SideMenu.SubItem caption={'Входящие id=310'} marker={'5'} id={'310'}/>
+                <SideMenu.SubItem caption={'Исходящие id=320'} id={'320'}/>
+                <SideMenu.SubItem caption={'Внутренние id=330'} id={'330'}/>
+                <SideMenu.SubItem caption={'Черновики id=340'} id={'340'}/>
+                <SideMenu.SubItem caption={'Удаленные id=350'} id={'350'}/>
+            </SideMenu.Item>
+            <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная id=400'} id={'400'}/>
+            <SideMenu.Divider/>
+            <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
+            <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
+        </SideMenu.Body>
+        <SideMenu.Footer>
+            <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
+                <MenuItem>СКБ Контур</MenuItem>
+                <MenuItem>Сириус Базинес</MenuItem>
+                <MenuItem>Контур НТТ</MenuItem>
+                <MenuItem>Промэлектроника</MenuItem>
+                <SideMenu.Divider/>
+                <MenuItem>Список организаций</MenuItem>
+            </SideMenu.Dropdown>
+            <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+            <SideMenu.Avatar
+                userName={'Ишматова Елена'}
+                avatarUrl={getKonturAvatarUrl({
+                    userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
+                })}
+            >
+              <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
+                Личный кабинет
+              </MenuItem>
+              <MenuItem >Безопасность</MenuItem>
+              <SideMenu.Divider />
+              <MenuItem >Выйти</MenuItem>
+            </SideMenu.Avatar>
+        </SideMenu.Footer>
+    </SideMenu>
+  <div>
+    <p>Active Item: {activeItem}</p>
+    <Select items={items} value={activeItem} onValueChange={setActiveItem} />
+  </div>
+</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';
+import { Kontur, Ofd } from '@skbkontur/logos';
+import { MenuItem, Select } from '@skbkontur/react-ui';
+import { SideMenu } from './index';
+import {
+  DocTextIcon24Regular,
+  CommentRectTextIcon24Regular,
+  LightbulbIcon24Regular,
+  BookOpenTextIcon24Regular,
+  BookmarkIcon24Regular,
+  StackHDownIcon24Regular,
+  SettingsGearIcon24Regular,
+  FaceAHappyIcon24Regular
+} from '@skbkontur/icons';
+
+
+const [activeItem, setActiveItem] = useState(undefined);
+const items = [
+  'body-0',
+  'documents',
+  'body-0-0',
+  'my-id-for-incoming-documents',
+  'body-0-1',
+  'body-0-1-0',
+  'body-0-1-1',
+  'body-0-2',
+  'body-0-3',
+  'body-0-4',
+  'body-0-5',
+  'body-0-6',
+  'body-1',
+  'body-2',
+  'body-2-0',
+  'body-2-1',
+  'body-2-2',
+  'body-2-3',
+  'body-2-4',
+  'body-3',
+  'body-4',
+  'body-5',
+  'footer-0',
+  'footer-1',
+  'footer-2',
+];
+
+<div style={{height: '600px', display: 'flex'}}>
+    <SideMenu value={activeItem} onValueChange={setActiveItem}>
+        <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
+        <SideMenu.Body>
+            <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'} id={'documents'}>
+                <SideMenu.SubItem caption={'Входящие'} id={'my-id-for-incoming-documents'}/>
+                <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
+                    <SideMenu.SubItem caption={'Исходящие1'}/>
+                    <SideMenu.SubItem caption={'Исходящие2'}/>
+                </SideMenu.SubItem>
+                <SideMenu.SubItem caption={'Внутренние'}/>
+                <SideMenu.SubItem caption={'Черновики'}/>
+                <SideMenu.SubItem caption={'Удаленные'}/>
+                <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
+                <SideMenu.SubItem caption={'Требуют обработки'}/>
+                <SideMenu.SubItem caption={'Обработанные'}/>
+            </SideMenu.Item>
+            <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
+            <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
+                <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
+                <SideMenu.SubItem caption={'Исходящие'}/>
+                <SideMenu.SubItem caption={'Внутренние'}/>
+                <SideMenu.SubItem caption={'Черновики'}/>
+                <SideMenu.SubItem caption={'Удаленные'}/>
+            </SideMenu.Item>
+            <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
+            <SideMenu.Divider/>
+            <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
+            <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'} id={'600'}/>
+        </SideMenu.Body>
+        <SideMenu.Footer>
+            <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
+                <MenuItem>СКБ Контур</MenuItem>
+                <MenuItem>Сириус Базинес</MenuItem>
+                <MenuItem>Контур НТТ</MenuItem>
+                <MenuItem>Промэлектроника</MenuItem>
+                <SideMenu.Divider/>
+                <MenuItem>Список организаций</MenuItem>
+            </SideMenu.Organisations>
+            <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+            <SideMenu.Avatar
+                userName={'Ишматова Елена'}
+                avatarUrl={getKonturAvatarUrl({
+                    userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
+                })}
+            >
+              <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
+                Личный кабинет
+              </MenuItem>
+              <MenuItem >Безопасность</MenuItem>
+              <SideMenu.Divider />
+              <MenuItem >Выйти</MenuItem>
+            </SideMenu.Avatar>
+        </SideMenu.Footer>
+    </SideMenu>
+  <div>
+    <p>Active Item: {activeItem}</p>
+    <Select items={items} value={activeItem} onValueChange={setActiveItem} />
+  </div>
+</div>
+```

package/hooks/useNumberOfTextLinesInItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useNumberOfTextLinesInItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>) => void;

package/hooks/useNumberOfTextLinesInItem.js

@@ -0,0 +1,13 @@
+export var useNumberOfTextLinesInItem = function (textRef, setIsMultilineText) {
+    if (textRef.current) {
+        var el_1 = textRef.current;
+        setTimeout(function () {
+            var textHeight = +el_1.offsetHeight;
+            var lineHeight = parseInt(window.getComputedStyle(el_1).getPropertyValue('line-height'));
+            var lines = textHeight / lineHeight;
+            if (lines >= 2) {
+                setIsMultilineText(true);
+            }
+        }, 0);
+    }
+};

package/package.json

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

package/src/InnerSubMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface InnerSubMenuProps {
     children?: React.ReactNode;
-    id: string;
+    generatedId?: string;
 }
 declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/InnerSubMenu.js

@@ -5,10 +5,19 @@ import React, { forwardRef } from 'react';
  * @visibleName InnerSubMenu
  */
 var InnerSubMenu = forwardRef(function (_a, ref) {
-    var children = _a.children, id = _a.id;
+    var children = _a.children, generatedId = _a.generatedId;
+    var levelIndex = 0;
     return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
-            return React.cloneElement(child, { _parent: id, ref: ref });
+            // @ts-expect-error: accessing private property
+            if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem') {
+                var oldIndex = levelIndex;
+                levelIndex++;
+                return React.cloneElement(child, {
+                    _generatedId: generatedId + "-" + oldIndex,
+                });
+            }
+            return React.cloneElement(child, { ref: ref });
         }
         return child;
     })));

package/src/SeparatedSubMenu.d.ts

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

package/src/SeparatedSubMenu.js

@@ -10,7 +10,7 @@ import { SideMenuContext } from './SideMenuContext';
  */
 var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children;
+    var children = _a.children, generatedId = _a.generatedId;
     var context = useContext(SideMenuContext);
     var isSubItemWithChildren = function (child) {
         // @ts-expect-error: accessing private property
@@ -24,8 +24,21 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
             return child;
         });
     };
+    var levelIndex = 0;
     return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.separatedMenu()] = true, _b)), ref: ref },
-        React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, children)));
+        React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {
+            if (React.isValidElement(child)) {
+                // @ts-expect-error: accessing private property
+                if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem') {
+                    var oldIndex = levelIndex;
+                    levelIndex++;
+                    return React.cloneElement(child, {
+                        _generatedId: generatedId + "-" + oldIndex,
+                    });
+                }
+                return child;
+            }
+        }))));
 });
 SeparatedSubMenu.displayName = 'SeparatedSubMenu';
 var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });

package/src/SideMenu.d.ts

@@ -9,11 +9,14 @@ import { SideMenuAvatar } from './SideMenuAvatar';
 import { SideMenuSubItem } from './SideMenuSubItem';
 import { SideMenuDivider } from './SideMenuDivider';
 import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
+import { SideMenuDropdown } from './SideMenuDropdown';
 export interface SideMenuProps extends CommonProps {
     children?: React.ReactNode;
     size?: 'small' | 'large';
     isSeparatedMenu?: boolean;
     disableSwipe?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
 }
 interface SubComponents {
     Body: typeof SideMenuBody;
@@ -25,6 +28,7 @@ interface SubComponents {
     Avatar: typeof SideMenuAvatar;
     Organisations: typeof SideMenuOrganisations;
     Divider: typeof SideMenuDivider;
+    Dropdown: typeof SideMenuDropdown;
     __KONTUR_REACT_UI__: string;
 }
 export declare const SideMenuDataTids: {

package/src/SideMenu.js

@@ -14,22 +14,22 @@ import { SideMenuSubItem } from './SideMenuSubItem';
 import { SideMenuDivider } from './SideMenuDivider';
 import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
 import { RightBorder } from './RightBorder';
+import { SideMenuDropdown } from './SideMenuDropdown';
 export var SideMenuDataTids = {
     root: 'SideMenu__root',
 };
 var SideMenu = forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.isSeparatedMenu, isSeparatedMenu = _e === void 0 ? false : _e, className = _a.className, _f = _a.disableSwipe, disableSwipe = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "size", "isSeparatedMenu", "className", "disableSwipe"]);
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.isSeparatedMenu, isSeparatedMenu = _e === void 0 ? false : _e, className = _a.className, _f = _a.disableSwipe, disableSwipe = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe"]);
     var scrollTimer = null;
     var transitionTimer = null;
     var widgetTimer;
     var _g = useState(false), isMinimised = _g[0], setIsMinimised = _g[1];
-    var _h = useState(null), activeItem = _h[0], setActiveItem = _h[1];
-    var _j = useState(null), activeSubItem = _j[0], setActiveSubItem = _j[1];
-    var _k = useState(false), hasScrollBar = _k[0], setHasScrollBar = _k[1];
-    var _l = useState(false), isTransitioned = _l[0], setIsTransitioned = _l[1];
-    var _m = useState('#2291ff'), productColor = _m[0], setProductColor = _m[1];
-    var _o = useState(false), showWidget = _o[0], setShowWidget = _o[1];
+    var _h = useState(false), hasScrollBar = _h[0], setHasScrollBar = _h[1];
+    var _j = useState(false), isTransitioned = _j[0], setIsTransitioned = _j[1];
+    var _k = useState('#2291ff'), productColor = _k[0], setProductColor = _k[1];
+    var _l = useState(false), showWidget = _l[0], setShowWidget = _l[1];
+    var _m = useState(value), activeMenuItem = _m[0], setActiveMenuItem = _m[1];
     useEffect(function () {
         return function () {
             if (scrollTimer) {
@@ -37,6 +37,9 @@ var SideMenu = forwardRef(function (_a, ref) {
             }
         };
     });
+    useEffect(function () {
+        setActiveMenuItem(value);
+    }, [value]);
     var showMinimisedRoot = function () {
         if (isMinimised) {
             setIsTransitioned(true);
@@ -75,18 +78,22 @@ var SideMenu = forwardRef(function (_a, ref) {
         }
         setShowWidget(false);
     };
+    var handleSwitchActiveItem = function (id) {
+        if (id !== value) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
+            setActiveMenuItem(id);
+        }
+    };
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimised: isMinimised,
             isTransitioned: isTransitioned,
             isSeparatedMenu: isSeparatedMenu,
             size: size,
-            activeItem: activeItem,
             productColor: productColor,
-            setActiveItem: setActiveItem,
-            activeSubItem: activeSubItem,
-            setActiveSubItem: setActiveSubItem,
             setProductColor: setProductColor,
             showWidget: showWidget,
+            activeMenuItem: activeMenuItem,
+            switchActiveMenuItem: handleSwitchActiveItem,
         } },
         React.createElement("aside", __assign({ className: cx((_b = {}, _b[jsStyles.rootWrapper()] = true, _b[jsStyles.rootWrapperIE()] = isIE11, _b), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
             React.createElement("div", { className: cx((_c = {},
@@ -109,6 +116,7 @@ var STATIC_PROPS = {
     Avatar: SideMenuAvatar,
     Organisations: SideMenuOrganisations,
     Divider: SideMenuDivider,
+    Dropdown: SideMenuDropdown,
     __KONTUR_REACT_UI__: 'SideMenu',
 };
 var SideMenuWithStaticFields = Object.assign(SideMenu, STATIC_PROPS);

package/src/SideMenuAvatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
 import { SideMenuDropdownProps } from './SideMenuDropdown';
-export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon'>> {
+export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
 }
 declare const SideMenuAvatarWithStaticFields: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/SideMenuBodyChildren.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface FlattedArrayElementType {
+    id: string;
+    generatedId: string;
+    parentId: string | null;
+    generatedParentId: string | null;
+}
 declare const SideMenuBodyChildrenWithStaticFields: React.FC<CommonProps> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuBodyChildren.js

@@ -1,5 +1,8 @@
-import React from 'react';
+import { __assign } from "tslib";
+import React, { isValidElement, useContext, useEffect, useRef, useState } from 'react';
 import { jsStyles } from './SideMenu.styles';
+import { SideMenuContext } from './SideMenuContext';
+import { getAllParents, getElementsChildren, getItemId } from '../utils/scripts';
 /**
  * Внутренняя часть SideMenuBody
  *
@@ -7,7 +10,39 @@ import { jsStyles } from './SideMenu.styles';
  */
 var SideMenuBodyChildren = function (_a) {
     var children = _a.children;
-    return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
+    var context = useContext(SideMenuContext);
+    var _b = useState([]), parents = _b[0], setParents = _b[1];
+    var flattedArrayOfAllElements = useRef([]);
+    var getFlattedArrayOfAllElements = function () {
+        var levelIndex = 0;
+        React.Children.map(children, function (child) {
+            if (isValidElement(child) &&
+                // @ts-expect-error: accessing private property
+                child.type.__KONTUR_REACT_UI__ === 'SideMenuItem') {
+                var generatedId = getItemId('body', levelIndex++);
+                flattedArrayOfAllElements.current.push({
+                    id: child.props.id,
+                    generatedId: generatedId,
+                    parentId: null,
+                    generatedParentId: null,
+                });
+                getElementsChildren(child, generatedId).forEach(function (el) { return flattedArrayOfAllElements.current.push(el); });
+            }
+        });
+    };
+    var getOpenedParents = function () {
+        if (context.activeMenuItem) {
+            setParents(getAllParents(context.activeMenuItem, flattedArrayOfAllElements.current));
+        }
+    };
+    useEffect(function () {
+        getFlattedArrayOfAllElements();
+    }, []);
+    useEffect(function () {
+        getOpenedParents();
+    }, [context.activeMenuItem]);
+    var levelIndex = 0;
+    return (React.createElement(SideMenuContext.Provider, { value: __assign({ openedParents: parents }, context) }, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
             // @ts-expect-error: accessing private property
             if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuDivider') {
@@ -15,6 +50,14 @@ var SideMenuBodyChildren = function (_a) {
                     className: jsStyles.dividerInSideMenu(),
                 });
             }
+            // @ts-expect-error: accessing private property
+            if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuItem') {
+                var oldIndex = levelIndex;
+                levelIndex++;
+                return React.cloneElement(child, {
+                    _generatedId: getItemId('body', oldIndex),
+                });
+            }
             return child;
         }
     })));

package/src/SideMenuContext.d.ts

@@ -3,13 +3,12 @@ export interface SideMenuContextType {
     isTransitioned?: boolean;
     isSeparatedMenu?: boolean;
     size?: 'small' | 'large';
-    activeItem?: string | null;
-    setActiveItem?: (item: string | null) => void;
-    activeSubItem?: string | null;
-    setActiveSubItem?: (item: string | null) => void;
+    activeMenuItem?: string | null;
+    switchActiveMenuItem?: (id: string) => void;
     hasSubIcons?: boolean;
     productColor?: string;
     setProductColor?: (color: string) => void;
     showWidget?: boolean;
+    openedParents?: string[];
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDropdown.d.ts

@@ -7,6 +7,7 @@ export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuPro
     caption?: string;
     disableAnimations?: boolean;
     _avatar?: React.ReactElement;
+    id?: string;
 }
 declare const SideMenuDropdownWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/SideMenuDropdown.js

@@ -13,13 +13,13 @@ import { SideMenuContext } from './SideMenuContext';
  */
 var SideMenuDropdown = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
+    var icon = _a.icon, id = _a.id, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
     var context = useContext(SideMenuContext);
     var label = (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.dropdownLabel()] = true,
             _b[jsStyles.dropdownLabelMinimized()] = context.isMinimised,
             _b)) },
-        React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar })));
+        React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar, id: id })));
     return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
             menuItemHoverBg: '#f6f6f6',
             menuItemHoverColor: '#222',

package/src/SideMenuFooter.js

@@ -2,6 +2,7 @@ import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
+import { getItemId } from '../utils/scripts';
 /**
  * Нижняя часть меню
  *
@@ -10,7 +11,14 @@ import { jsStyles } from './SideMenu.styles';
 var SideMenuFooter = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), children));
+    return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                _generatedId: getItemId('footer', index++),
+            });
+        }
+        return child;
+    })));
 });
 SideMenuFooter.displayName = 'SideMenuFooter';
 var SideMenuFooterWithStaticFields = Object.assign(SideMenuFooter, { __KONTUR_REACT_UI__: 'SideMenuFooter' });

package/src/SideMenuHeader.js

@@ -12,7 +12,7 @@ import { SideMenuLogotype } from './SideMenuLogotype';
  */
 var SideMenuHeader = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl"]);
+    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, withWidget = _a.withWidget, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "withWidget"]);
     var context = useContext(SideMenuContext);
     var headerWrapperRef = useRef(null);
     var _c = useState(false), fixed = _c[0], setFixed = _c[1];
@@ -35,7 +35,7 @@ var SideMenuHeader = forwardRef(function (_a, ref) {
             _b[jsStyles.headerFixedWrapper()] = fixed,
             _b[jsStyles.headerMinimisedWrapper()] = context.isMinimised || context.isTransitioned,
             _b), className), ref: mergeRefs([headerWrapperRef, ref]) }, rest),
-        React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl }, rest))));
+        React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });
 SideMenuHeader.displayName = 'SideMenuHeader';
 var SideMenuHeaderWithStaticFields = Object.assign(SideMenuHeader, { __KONTUR_REACT_UI__: 'SideMenuHeader' });

package/src/SideMenuItem.d.ts

@@ -7,8 +7,9 @@ export interface SideMenuItemProps extends CommonProps {
     icon: React.ReactElement;
     marker?: string;
     caption?: string;
+    id?: string;
+    _generatedId?: string;
     _isSubMenu?: boolean;
-    _parent?: string;
     _isNestedSubMenu?: boolean;
     _avatar?: React.ReactElement;
 }

package/src/SideMenuItem.js

@@ -6,6 +6,8 @@ import { jsStyles } from './SideMenu.styles';
 import { SideMenuContext } from './SideMenuContext';
 import { SeparatedSubMenu } from './SeparatedSubMenu';
 import { InnerSubMenu } from './InnerSubMenu';
+import { useNumberOfTextLinesInItem } from '../hooks/useNumberOfTextLinesInItem';
+import { isIdActive, isOpenedParents } from '../utils/scripts';
 /**
  * Элемент списка
  *
@@ -13,59 +15,35 @@ import { InnerSubMenu } from './InnerSubMenu';
  */
 var SideMenuItem = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f, _g;
-    var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, _parent = _a._parent, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "_avatar", "marker", "caption", "_parent", "_isSubMenu", "children", "_isNestedSubMenu"]);
+    var _h;
+    var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId"]);
     var context = useContext(SideMenuContext);
     var textRef = useRef(null);
-    var _h = useState(false), isOpened = _h[0], setIsOpened = _h[1];
-    var _j = useState(false), focusedByTab = _j[0], setFocusedByTab = _j[1];
-    var _k = useState(false), isMultiline = _k[0], setIsMultiline = _k[1];
-    var _l = useState(context), oldContext = _l[0], setOldContext = _l[1];
-    var id = useState('id' + Math.floor(Math.random() * 10000))[0];
-    var getNumberOfTextLines = function () {
-        if (textRef.current) {
-            var el = textRef.current;
-            var textHeight = +el.offsetHeight;
-            var lineHeight = parseInt(window.getComputedStyle(textRef.current).getPropertyValue('line-height'));
-            var lines = textHeight / lineHeight;
-            if (lines >= 2) {
-                setIsMultiline(true);
-            }
-        }
-    };
+    var _j = useState(false), isOpened = _j[0], setIsOpened = _j[1];
+    var _k = useState(false), isActive = _k[0], setIsActive = _k[1];
+    var _l = useState(false), focusedByTab = _l[0], setFocusedByTab = _l[1];
+    var _m = useState(false), isMultiline = _m[0], setIsMultiline = _m[1];
     useEffect(function () {
-        getNumberOfTextLines();
-    });
+        useNumberOfTextLinesInItem(textRef, setIsMultiline);
+    }, [textRef.current]);
     useEffect(function () {
-        if (oldContext.activeItem !== context.activeItem && context.activeItem !== id) {
-            setIsOpened(false);
-        }
-        setOldContext(context);
-    }, [context.activeItem]);
-    var setActive = function () {
-        var _a, _b, _c, _d;
-        if (_isSubMenu) {
-            if (_parent) {
-                (_a = context.setActiveItem) === null || _a === void 0 ? void 0 : _a.call(context, _parent);
-            }
-            (_b = context.setActiveSubItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
-        }
-        else {
-            if (!context.isSeparatedMenu) {
-                (_c = context.setActiveSubItem) === null || _c === void 0 ? void 0 : _c.call(context, null);
-            }
-            (_d = context.setActiveItem) === null || _d === void 0 ? void 0 : _d.call(context, id);
-        }
-    };
-    var active = false;
-    if (context) {
-        active = context.activeItem === id || context.activeSubItem === id;
-    }
+        var isOpenedParent = isOpenedParents(id, _generatedId, context.openedParents);
+        setIsOpened(!!children && (isOpenedParent || isActive));
+    }, [(_h = context.openedParents) === null || _h === void 0 ? void 0 : _h.toString(), isActive]);
+    useEffect(function () {
+        var idIsActive = isIdActive(id, context.activeMenuItem);
+        var generatedIdIsActive = isIdActive(_generatedId, context.activeMenuItem);
+        setIsActive(idIsActive || generatedIdIsActive);
+    }, [context.activeMenuItem]);
     var handleClick = function (e) {
-        if (onClick) {
-            onClick(e);
+        var _a, _b;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (id) {
+            (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
+        }
+        else if (_generatedId) {
+            (_b = context.switchActiveMenuItem) === null || _b === void 0 ? void 0 : _b.call(context, _generatedId);
         }
-        setActive();
-        setIsOpened(!!children);
     };
     var handleFocus = function () {
         requestAnimationFrame(function () {
@@ -77,35 +55,26 @@ var SideMenuItem = forwardRef(function (_a, ref) {
     var handleBlur = function () {
         setFocusedByTab(false);
     };
-    var handleKeyDown = function (e) {
-        if (e.key === 'Enter') {
-            setIsOpened(!isOpened);
-            setActive();
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    };
     var renderSubMenu = function () {
         if (children && isOpened && !_isSubMenu && !context.isMinimised) {
             if (context.isSeparatedMenu) {
-                return React.createElement(SeparatedSubMenu, null, children);
+                return React.createElement(SeparatedSubMenu, { generatedId: _generatedId }, children);
             }
             else {
-                return React.createElement(InnerSubMenu, { id: id }, children);
+                return React.createElement(InnerSubMenu, { generatedId: _generatedId }, children);
             }
         }
     };
     var hasShortcutImage = icon || _avatar;
+    var isOpenedFirstLevelItemInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
     return (React.createElement("div", null,
         React.createElement("button", __assign({ className: cx((_b = {},
                 _b[jsStyles.item()] = true,
                 _b[jsStyles.subItem()] = context.isSeparatedMenu && _isSubMenu,
                 _b[jsStyles.focusedItem()] = focusedByTab,
-                _b[jsStyles.activeItem()] = (active && !isOpened) ||
-                    (active && isOpened && !context.activeSubItem) ||
-                    (active && isOpened && _isSubMenu) ||
-                    (active && context.isSeparatedMenu),
-                _b[jsStyles.activeSubItem()] = active && context.isSeparatedMenu && _isSubMenu,
-                _b), className), onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, onFocus: handleFocus, onBlur: handleBlur, ref: ref }, rest),
+                _b[jsStyles.activeItem()] = isActive || isOpenedFirstLevelItemInSeparatedMenu,
+                _b[jsStyles.activeSubItem()] = isActive && context.isSeparatedMenu && _isSubMenu,
+                _b), className), onClick: handleClick, tabIndex: 0, onFocus: handleFocus, onBlur: handleBlur, ref: ref }, rest),
             React.createElement("div", { className: cx((_c = {},
                     _c[jsStyles.itemWrapper()] = true,
                     _c[jsStyles.itemMultilineWrapper()] = isMultiline,

package/src/SideMenuSubItem.js

@@ -1,27 +1,31 @@
-import { __assign } from "tslib";
-import React, { forwardRef, useMemo, useState } from 'react';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useMemo, useState } from 'react';
 import { ArrowCDownIcon16Regular, ArrowCRightIcon16Regular } from '@skbkontur/icons';
 import { SideMenuItem } from './SideMenuItem';
 import { jsStyles } from './SideMenu.styles';
+import { SideMenuContext } from './SideMenuContext';
+import { isIdActive, isOpenedParents } from '../utils/scripts';
 /**
  * Элемент списка второго уровня
  *
  * @visibleName SideMenu.SubItem
  */
-var SideMenuSubItem = forwardRef(function (props, ref) {
-    var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
+var SideMenuSubItem = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, _generatedId = _a._generatedId, id = _a.id, props = __rest(_a, ["children", "_generatedId", "id"]);
+    var _c = useState(false), isOpened = _c[0], setIsOpened = _c[1];
+    var context = useContext(SideMenuContext);
     var handleClick = function () {
         setIsOpened(true);
     };
-    var handleKeyDown = function (e) {
-        var _a;
-        if (e.key === 'Enter') {
-            setIsOpened(true);
-        }
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
+    useEffect(function () {
+        var isOpenedParent = isOpenedParents(id, _generatedId, context.openedParents);
+        var idIsActive = isIdActive(id, context.activeMenuItem);
+        var generatedIdIsActive = isIdActive(_generatedId, context.activeMenuItem);
+        setIsOpened(isOpenedParent || isOpened || idIsActive || generatedIdIsActive);
+    }, [(_b = context.openedParents) === null || _b === void 0 ? void 0 : _b.toString()]);
     var icon = useMemo(function () {
-        if (props.children) {
+        if (children) {
             if (isOpened) {
                 return React.createElement(ArrowCDownIcon16Regular, null);
             }
@@ -29,12 +33,22 @@ var SideMenuSubItem = forwardRef(function (props, ref) {
                 return React.createElement(ArrowCRightIcon16Regular, null);
             }
         }
-    }, [isOpened, props.children]);
+    }, [isOpened, children]);
+    var levelIndex = 0;
     return (React.createElement("div", { ref: ref },
-        React.createElement(SideMenuItem, __assign({ onClick: handleClick, icon: icon, _isSubMenu: true, onKeyDown: handleKeyDown }, props)),
-        props.children && isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, React.Children.map(props.children, function (child) {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, { _isNestedSubMenu: true });
+        React.createElement(SideMenuItem, __assign({ onClick: handleClick, 
+            /*@ts-expect-error: SideMenuItem should have icon */
+            icon: icon, _isSubMenu: true, id: id, _generatedId: _generatedId }, props)),
+        children && isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, React.Children.map(children, function (child) {
+            // @ts-expect-error: accessing private property
+            if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem') {
+                var oldIndex = levelIndex;
+                levelIndex++;
+                return React.cloneElement(child, {
+                    _generatedId: _generatedId + "-" + oldIndex,
+                    _isNestedSubMenu: true,
+                    ref: ref,
+                });
             }
             return child;
         })))));

package/utils/scripts.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { FlattedArrayElementType } from '../src/SideMenuBodyChildren';
+export declare const getItemId: (prefix: 'body' | 'footer', id: string | number) => string;
+export declare const getAllParents: (id: string, flattedArrayOfAllElements: FlattedArrayElementType[]) => string[];
+export declare const getElementsChildren: (element: ReactElement, levelIndex: string) => FlattedArrayElementType[];
+export declare const isOpenedParents: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean;
+export declare const isIdActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;

package/utils/scripts.js

@@ -0,0 +1,58 @@
+import React, { isValidElement } from 'react';
+import { isNonNullable } from '@skbkontur/react-ui/lib/utils';
+export var getItemId = function (prefix, id) {
+    return prefix + "-" + id;
+};
+export var getAllParents = function (id, flattedArrayOfAllElements) {
+    var parentsArray = [];
+    var element = flattedArrayOfAllElements.find(function (element) { return element.id === id || element.generatedId === id; });
+    if (element && 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 getElementsChildren = function (element, levelIndex) {
+    var childrenArray = [];
+    if (element.props.children) {
+        var childLevelIndex_1 = 0;
+        React.Children.map(element.props.children, function (child) {
+            var isActionableComponent = 
+            // @ts-expect-error: accessing private property
+            child.type.__KONTUR_REACT_UI__ === 'SideMenuItem' ||
+                // @ts-expect-error: accessing private property
+                child.type.__KONTUR_REACT_UI__ === 'SideMenuSubItem';
+            if (isValidElement(child) && isActionableComponent) {
+                childrenArray.push({
+                    id: child.props.id,
+                    generatedId: levelIndex + "-" + childLevelIndex_1,
+                    parentId: element.props.id,
+                    generatedParentId: "" + levelIndex,
+                });
+                var subChildrenArray = getElementsChildren(child, levelIndex + "-" + childLevelIndex_1);
+                childrenArray.push.apply(childrenArray, subChildrenArray);
+                childLevelIndex_1++;
+            }
+        });
+    }
+    return childrenArray;
+};
+export var isOpenedParents = function (id, generatedId, openedParents) {
+    if (!openedParents || (openedParents === null || openedParents === void 0 ? void 0 : openedParents.length) === 0) {
+        return false;
+    }
+    if (id) {
+        return openedParents.includes(id);
+    }
+    if (generatedId) {
+        return openedParents.includes(generatedId);
+    }
+    return false;
+};
+export var isIdActive = function (id, activeMenuItem) {
+    return !!id && !!activeMenuItem && id === activeMenuItem;
+};