@skbkontur/side-menu 1.12.9 → 2.0.2

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.0.0...@skbkontur/side-menu@2.0.2) (2024-07-18)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [2.0.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.0.0...@skbkontur/side-menu@2.0.1) (2024-07-18)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+# [2.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.9...@skbkontur/side-menu@2.0.0) (2024-07-09)
+
+
+### Features
+
+* allow menu items at any level ([cfb1705](https://git.skbkontur.ru/ui/ui-parking/commits/cfb170500cb475b4601525e6bd74c121388e2da5))
+
+
+### BREAKING CHANGES
+
+* allow menu items at any level
+
+
+
+
+
 ## [1.12.9](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.8...@skbkontur/side-menu@1.12.9) (2024-06-07)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -202,6 +202,9 @@ const renderModal = () => {
 ```
 
 SideMenu с ручным управлением.
+
+Для управления активным пунктом меню используйте проп `activeItem`.
+
 Для `SideMenu.Link` при отсутствии `id` будет использован `href`
 
 ```jsx harmony
@@ -247,203 +250,66 @@ const items = [
   "https://google.com"
 ];
 
-<div style={{height: '600px', display: 'flex', position: 'relative'}}>
+<div style={{ height: '600px', display: 'flex', position: 'relative' }}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
-    <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
-          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
-          <SideMenu.Body>
-              <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'2'} 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.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
-          </SideMenu.Body>
-          <SideMenu.Footer>
-              <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
-                  <MenuItem>СКБ Контур</MenuItem>
-                  <MenuItem>Сириус Базинес</MenuItem>
-                  <MenuItem>Контур НТТ</MenuItem>
-                  <MenuItem>Промэлектроника</MenuItem>
-                  <MenuSeparator />
-                  <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>
-                <MenuSeparator />
-                <MenuItem >Выйти</MenuItem>
-              </SideMenu.Avatar>
-          </SideMenu.Footer>
-      </SideMenu>
-  </ThemeContext.Provider>
-  <div style={isSeparatedMenu? {position: 'absolute',  left: '464px'}:{}}>
-    <p>Active Item: {activeItem}</p>
-    <Select items={items} value={activeItem} onValueChange={setActiveItem} />
-    <Switcher
-      caption="isSeparatedMenu: "
-      items={[
-        {
-          label: 'True',
-          value: true,
-        },
-        {
-          label: 'False',
-          value: false,
-        }
-      ]
-      }
-      value={isSeparatedMenu}
-      onValueChange={setIsSeparatedMenu}
-    />
-  </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 { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
-import { SideMenu } from './index';
-import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
-import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
-import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
-import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
-import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
-import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
-import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
-import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
-
-
-
-const [activeItem, setActiveItem] = useState(undefined);
-const [isSeparatedMenu, setIsSeparatedMenu] = useState(false)
-
-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',
-  '600',
-  'footer-0',
-  'footer-1',
-  'footer-2',
-];
-
-<div style={{height: '600px', display: 'flex', position: 'relative'}}>
-  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
-    <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
-          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
-          <SideMenu.Body>
-              <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'} 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>
-                  <MenuSeparator />
-                  <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>
-                <MenuSeparator />
-                <MenuItem >Выйти</MenuItem>
-              </SideMenu.Avatar>
-          </SideMenu.Footer>
-      </SideMenu>
+    <SideMenu activeItem={activeItem} onActiveItemChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
+      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} withWidget={false} />
+      <SideMenu.Body>
+        <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию id=100'} marker={'2'} 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.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'}
+                       target={'_blank'} />
+      </SideMenu.Body>
+      <SideMenu.Footer>
+        <SideMenu.Dropdown icon={<StackHDownIcon24Regular />}>
+          <MenuItem>СКБ Контур</MenuItem>
+          <MenuItem>Сириус Базинес</MenuItem>
+          <MenuItem>Контур НТТ</MenuItem>
+          <MenuItem>Промэлектроника</MenuItem>
+          <MenuSeparator />
+          <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>
+          <MenuSeparator />
+          <MenuItem>Выйти</MenuItem>
+        </SideMenu.Avatar>
+      </SideMenu.Footer>
+    </SideMenu>
   </ThemeContext.Provider>
-  <div style={isSeparatedMenu? {position: 'absolute', left: '464px'}:{}}>
+  <div style={isSeparatedMenu ? { position: 'absolute', left: '464px' } : {}}>
     <p>Active Item: {activeItem}</p>
     <Select items={items} value={activeItem} onValueChange={setActiveItem} />
     <Switcher

package/SideMenuDataTids.d.ts

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

package/SideMenuDataTids.js

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

package/hooks/useAnimateOnMount.js

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

package/lib/theming/ThemeHelpers.js

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

package/lib/utils/scripts.d.ts

@@ -1,13 +1,5 @@
-import React, { ReactElement } from 'react';
-import { FlattedArrayElementType } from '../../src/internal/InnerBody';
-export declare const getItemId: (prefix: 'body' | 'footer', id: string | number) => string;
-export declare const isClickableSubElement: (element: string) => boolean;
-export declare const isClickableElement: (element: string) => boolean;
-export declare const getAllParents: (id: string, flattedArrayOfAllElements: FlattedArrayElementType[]) => string[];
-export declare const getChildrenIdArray: (childrenArray: FlattedArrayElementType[], id: string, isIdGenerated?: boolean) => string[];
-export declare const getElementsChildren: (element: ReactElement, levelIndex: string) => FlattedArrayElementType[];
-export declare const isParentOpened: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean | "" | undefined;
-export declare const isElementActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
+import React from 'react';
 export declare const isBrowser: boolean;
 export declare const isTouchDevice: () => boolean;
 export declare const isKonturIcon: (icon: React.ReactElement) => boolean;
+export declare const generateId: () => string;

package/lib/utils/scripts.js

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

package/package.json

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

package/src/Navigation.d.ts

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