@skbkontur/side-menu 3.2.6 → 3.3.0-beta.0

package/README.md

@@ -576,6 +576,24 @@ React.useEffect(() => {
 </div>
 ```
 
+#### Пример с использованием компонента `SideMenu.Notifications`
+
+[Документация](https://wiki.skbkontur.ru/pages/viewpage.action?pageId=952721322) по встройке Колокольчика в боковое меню. По вопросам интеграции обращайтесь в ММ [notification-support](https://chat.skbkontur.ru/kontur/channels/notification-support).
+
+```jsx harmony
+import { SideMenu } from '@skbkontur/side-menu';
+
+<SideMenu>
+  <SideMenu.Body>
+    <SideMenu.Notifications
+      widgetApi={widgetApi}
+      count={count}
+      showDivider
+    />
+  </SideMenu.Body>
+</SideMenu>
+```
+
 #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
 
 ```typescript static

package/SideMenuDataTids.d.ts

@@ -5,4 +5,7 @@ export declare const SideMenuDataTids: {
     separatedSubMenu: string;
     rightBorder: string;
     clickableElement: string;
+    bellSideMenuDropdownButton: string;
+    bellCloseButton: string;
+    bellHeader: string;
 };

package/SideMenuDataTids.js

@@ -1,8 +1,14 @@
-export var SideMenuDataTids = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuDataTids = void 0;
+exports.SideMenuDataTids = {
     root: 'SideMenu__root',
     burger: 'SideMenu__burger',
     backButton: 'SideMenu__backButton',
     separatedSubMenu: 'SideMenu__separatedSubMenu',
     rightBorder: 'SideMenu__rightBorder',
     clickableElement: 'SideMenu__clickableElement',
+    bellSideMenuDropdownButton: 'SideMenu__bellDropdownButton',
+    bellCloseButton: 'SideMenu__bellCloseButton',
+    bellHeader: 'SideMenu__bellHeaderWidget',
 };

package/hooks/useAnimateOnMount.js

@@ -1,9 +1,12 @@
-import { __read } from "tslib";
-import { useEffect, useState } from 'react';
-export function useAnimateOnMount(isMounted, delayTime, mountStyles, unmountStyles) {
-    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 () {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnimateOnMount = useAnimateOnMount;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+function useAnimateOnMount(isMounted, delayTime, mountStyles, unmountStyles) {
+    var _a = tslib_1.__read((0, react_1.useState)(isMounted ? mountStyles : unmountStyles), 2), style = _a[0], setStyle = _a[1];
+    var _b = tslib_1.__read((0, react_1.useState)(isMounted), 2), shouldShowComponent = _b[0], setShouldShowComponent = _b[1];
+    (0, react_1.useEffect)(function () {
         var timeoutId;
         if (isMounted) {
             setShouldShowComponent(true);

package/hooks/useMemoIcon.js

@@ -1,23 +1,29 @@
-import React, { useMemo } from 'react';
-import { ArrowCDownIcon16Regular } from '@skbkontur/icons/icons/ArrowCDownIcon/ArrowCDownIcon16Regular';
-import { ArrowCRightIcon16Regular } from '@skbkontur/icons/icons/ArrowCRightIcon/ArrowCRightIcon16Regular';
-import { ArrowCLeftIcon16Regular } from '@skbkontur/icons/icons/ArrowCLeftIcon/ArrowCLeftIcon16Regular';
-export var useMemoIcon = function (children, _a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMemoBorderIcon = exports.useMemoIcon = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var ArrowCDownIcon16Regular_1 = require("@skbkontur/icons/icons/ArrowCDownIcon/ArrowCDownIcon16Regular");
+var ArrowCRightIcon16Regular_1 = require("@skbkontur/icons/icons/ArrowCRightIcon/ArrowCRightIcon16Regular");
+var ArrowCLeftIcon16Regular_1 = require("@skbkontur/icons/icons/ArrowCLeftIcon/ArrowCLeftIcon16Regular");
+var useMemoIcon = function (children, _a) {
     var isOpened = _a.isOpened, onClick = _a.onClick;
-    return useMemo(function () {
+    return (0, react_1.useMemo)(function () {
         if (children) {
             if (isOpened) {
-                return React.createElement(ArrowCDownIcon16Regular, { onClick: onClick });
+                return react_1.default.createElement(ArrowCDownIcon16Regular_1.ArrowCDownIcon16Regular, { onClick: onClick });
             }
-            return React.createElement(ArrowCRightIcon16Regular, null);
+            return react_1.default.createElement(ArrowCRightIcon16Regular_1.ArrowCRightIcon16Regular, null);
         }
     }, [isOpened, children]);
 };
-export var useMemoBorderIcon = function (isCollapsed) {
-    return useMemo(function () {
+exports.useMemoIcon = useMemoIcon;
+var useMemoBorderIcon = function (isCollapsed) {
+    return (0, react_1.useMemo)(function () {
         if (isCollapsed) {
-            return React.createElement(ArrowCRightIcon16Regular, null);
+            return react_1.default.createElement(ArrowCRightIcon16Regular_1.ArrowCRightIcon16Regular, null);
         }
-        return React.createElement(ArrowCLeftIcon16Regular, null);
+        return react_1.default.createElement(ArrowCLeftIcon16Regular_1.ArrowCLeftIcon16Regular, null);
     }, [isCollapsed]);
 };
+exports.useMemoBorderIcon = useMemoBorderIcon;

package/index.js

@@ -1,14 +1,17 @@
-export * from './src/SideMenu/SideMenu';
-export * from './src/SideMenuOrganisations/SideMenuOrganisations';
-export * from './src/SideMenuBody/SideMenuBody';
-export * from './src/SideMenuFooter/SideMenuFooter';
-export * from './src/SideMenuHeader/SideMenuHeader';
-export * from './src/SideMenuItem/SideMenuItem';
-export * from './src/SideMenuAvatar/SideMenuAvatar';
-export * from './src/SideMenuSubItem/SideMenuSubItem';
-export * from './src/SideMenuDivider/SideMenuDivider';
-export * from './src/SideMenuSubItemHeader/SideMenuSubItemHeader';
-export * from './src/SideMenuDropdown/SideMenuDropdown';
-export * from './src/SideMenuLink/SideMenuLink';
-export * from './src/SideMenuSubLink/SideMenuSubLink';
-export * from './lib/theming/ThemeTypes';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./src/SideMenu/SideMenu"), exports);
+tslib_1.__exportStar(require("./src/SideMenuOrganisations/SideMenuOrganisations"), exports);
+tslib_1.__exportStar(require("./src/SideMenuBody/SideMenuBody"), exports);
+tslib_1.__exportStar(require("./src/SideMenuFooter/SideMenuFooter"), exports);
+tslib_1.__exportStar(require("./src/SideMenuHeader/SideMenuHeader"), exports);
+tslib_1.__exportStar(require("./src/SideMenuItem/SideMenuItem"), exports);
+tslib_1.__exportStar(require("./src/SideMenuAvatar/SideMenuAvatar"), exports);
+tslib_1.__exportStar(require("./src/SideMenuSubItem/SideMenuSubItem"), exports);
+tslib_1.__exportStar(require("./src/SideMenuDivider/SideMenuDivider"), exports);
+tslib_1.__exportStar(require("./src/SideMenuSubItemHeader/SideMenuSubItemHeader"), exports);
+tslib_1.__exportStar(require("./src/SideMenuDropdown/SideMenuDropdown"), exports);
+tslib_1.__exportStar(require("./src/SideMenuLink/SideMenuLink"), exports);
+tslib_1.__exportStar(require("./src/SideMenuSubLink/SideMenuSubLink"), exports);
+tslib_1.__exportStar(require("./lib/theming/ThemeTypes"), exports);

package/internal/themes/SideMenuTheme.d.ts

@@ -124,6 +124,11 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuHeaderPaddingBottom: string;
     static get sideMenuHeaderDividerColor(): string;
     static sideMenuHeaderPaddingTopForTouchScreens: string;
+    static sideMenuNotificationsMarkerBg: string;
+    /**
+     * от 400px до 784px
+     */
+    static sideMenuNotificationsWrapperHeight: string;
 }
 export declare const REACT_UI_SIDE_MENU_THEME_KEY = "__IS_REACT_UI_SIDE_MENU_THEME__";
 export declare const markAsSideMenuTheme: <T extends object>(theme: T) => T;

package/internal/themes/SideMenuTheme.js

@@ -1,7 +1,10 @@
-import { __extends } from "tslib";
-import { exposeGetters } from '@skbkontur/react-ui/lib/theming/ThemeHelpers';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuThemeInternal = exports.isSideMenuTheme = exports.markAsSideMenuTheme = exports.REACT_UI_SIDE_MENU_THEME_KEY = exports.SideMenuTheme = void 0;
+var tslib_1 = require("tslib");
+var ThemeHelpers_1 = require("@skbkontur/react-ui/lib/theming/ThemeHelpers");
 var SideMenuTheme = /** @class */ (function (_super) {
-    __extends(SideMenuTheme, _super);
+    tslib_1.__extends(SideMenuTheme, _super);
     function SideMenuTheme() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -264,18 +267,25 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuHeaderPaddingTop = '24px';
     SideMenuTheme.sideMenuHeaderPaddingBottom = '8px';
     SideMenuTheme.sideMenuHeaderPaddingTopForTouchScreens = '16px';
+    //#endregion
+    //#region SideMenuNotifications
+    SideMenuTheme.sideMenuNotificationsMarkerBg = '#222222';
+    /**
+     * от 400px до 784px
+     */
+    SideMenuTheme.sideMenuNotificationsWrapperHeight = 'calculated';
     return SideMenuTheme;
 }(/** @class */ (function () {
     function class_1() {
     }
     return class_1;
 }())));
-export { SideMenuTheme };
-export var REACT_UI_SIDE_MENU_THEME_KEY = '__IS_REACT_UI_SIDE_MENU_THEME__';
-export var markAsSideMenuTheme = function (theme) {
+exports.SideMenuTheme = SideMenuTheme;
+exports.REACT_UI_SIDE_MENU_THEME_KEY = '__IS_REACT_UI_SIDE_MENU_THEME__';
+var markAsSideMenuTheme = function (theme) {
     var _a;
     return Object.create(theme, (_a = {},
-        _a[REACT_UI_SIDE_MENU_THEME_KEY] = {
+        _a[exports.REACT_UI_SIDE_MENU_THEME_KEY] = {
             value: true,
             writable: false,
             enumerable: false,
@@ -283,9 +293,11 @@ export var markAsSideMenuTheme = function (theme) {
         },
         _a));
 };
-export var isSideMenuTheme = function (theme) {
+exports.markAsSideMenuTheme = markAsSideMenuTheme;
+var isSideMenuTheme = function (theme) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
-    return theme[REACT_UI_SIDE_MENU_THEME_KEY] === true;
+    return theme[exports.REACT_UI_SIDE_MENU_THEME_KEY] === true;
 };
-export var SideMenuThemeInternal = exposeGetters(SideMenuTheme);
+exports.isSideMenuTheme = isSideMenuTheme;
+exports.SideMenuThemeInternal = (0, ThemeHelpers_1.exposeGetters)(SideMenuTheme);

package/lib/theming/ThemeHelpers.js

@@ -1,7 +1,10 @@
-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';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssName = exports.memoizeStyle = exports.getSideMenuTheme = exports.createSideMenuTheme = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("@skbkontur/react-ui/lib/utils");
+var memo_1 = require("../utils/memo");
+var SideMenuTheme_1 = require("../../internal/themes/SideMenuTheme");
 /**
  * Creates SideMenuTheme out of ReactUI's Theme.
  *
@@ -12,12 +15,12 @@ import { SideMenuThemeInternal, isSideMenuTheme, markAsSideMenuTheme } from '../
  * (without need for users to do it manually in their apps),
  * and using ReactUI's ThemeContext.Provider for overriding them.
  */
-export var createSideMenuTheme = function (theme) {
+var createSideMenuTheme = function (theme) {
     var e_1, _a;
-    if (isSideMenuTheme(theme)) {
+    if ((0, SideMenuTheme_1.isSideMenuTheme)(theme)) {
         return theme;
     }
-    var sideMenuTheme = Object.create(theme, Object.assign(Object.getOwnPropertyDescriptors(SideMenuThemeInternal), {}));
+    var sideMenuTheme = Object.create(theme, Object.assign(Object.getOwnPropertyDescriptors(SideMenuTheme_1.SideMenuThemeInternal), {}));
     var _loop_1 = function (key) {
         var descriptor = Object.getOwnPropertyDescriptor(sideMenuTheme, key);
         Object.defineProperty(sideMenuTheme, key, {
@@ -26,13 +29,13 @@ export var createSideMenuTheme = function (theme) {
                     var get = descriptor.get, value = descriptor.value;
                     // eslint-disable-next-line @typescript-eslint/naming-convention
                     // @ts-ignore
-                    return theme[key] || (isFunction(get) ? get.call(this) : value);
+                    return theme[key] || ((0, utils_1.isFunction)(get) ? get.call(this) : value);
                 }
             },
         });
     };
     try {
-        for (var _b = __values(Object.keys(sideMenuTheme)), _c = _b.next(); !_c.done; _c = _b.next()) {
+        for (var _b = tslib_1.__values(Object.keys(sideMenuTheme)), _c = _b.next(); !_c.done; _c = _b.next()) {
             var key = _c.value;
             _loop_1(key);
         }
@@ -44,10 +47,11 @@ export var createSideMenuTheme = function (theme) {
         }
         finally { if (e_1) throw e_1.error; }
     }
-    return markAsSideMenuTheme(sideMenuTheme);
+    return (0, SideMenuTheme_1.markAsSideMenuTheme)(sideMenuTheme);
 };
-export var getSideMenuTheme = memo(function (theme) {
-    return createSideMenuTheme(theme);
+exports.createSideMenuTheme = createSideMenuTheme;
+exports.getSideMenuTheme = (0, memo_1.memo)(function (theme) {
+    return (0, exports.createSideMenuTheme)(theme);
 });
 // eslint-disable-next-line @typescript-eslint/ban-types
 function isZeroArgs(fn) {
@@ -73,8 +77,10 @@ var memoize = function (fn) {
         return cache.get(arg);
     };
 };
-export var memoizeStyle = function (styles) {
+var memoizeStyle = function (styles) {
     Object.keys(styles).forEach(function (className) { return (styles[className] = memoize(styles[className])); });
     return styles;
 };
-export var cssName = function (className) { return ".".concat(className); };
+exports.memoizeStyle = memoizeStyle;
+var cssName = function (className) { return ".".concat(className); };
+exports.cssName = cssName;

package/lib/theming/ThemeTypes.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/memo.js

@@ -1,4 +1,7 @@
-export var memo = function (fn) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memo = void 0;
+var memo = function (fn) {
     var cache = new WeakMap();
     return function (arg) {
         if (!cache.has(arg)) {
@@ -7,3 +10,4 @@ export var memo = function (fn) {
         return cache.get(arg);
     };
 };
+exports.memo = memo;

package/lib/utils/scripts.js

@@ -1,10 +1,16 @@
-export var isBrowser = typeof window !== 'undefined';
-export var isTouchDevice = function () {
-    return isBrowser && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateId = exports.isKonturIcon = exports.isTouchDevice = exports.isBrowser = void 0;
+exports.isBrowser = typeof window !== 'undefined';
+var isTouchDevice = function () {
+    return exports.isBrowser && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
 };
-export var isKonturIcon = function (icon) {
+exports.isTouchDevice = isTouchDevice;
+var isKonturIcon = function (icon) {
     return Object.prototype.hasOwnProperty.call(icon === null || icon === void 0 ? void 0 : icon.type, '__KONTUR_ICON__');
 };
-export var generateId = function () {
+exports.isKonturIcon = isKonturIcon;
+var generateId = function () {
     return Date.now().toString(36) + Math.random().toString(36).substr(2);
 };
+exports.generateId = generateId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "3.2.6",
+  "version": "3.3.0-beta.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -9,8 +9,8 @@
   "license": "UNLICENSED",
   "scripts": {
     "clean": "git clean -fdxqe node_modules",
-    "build": "yarn tsc",
-    "lint": "yarn tsc --noEmit"
+    "build": "node node_modules/typescript/bin/tsc",
+    "lint": "tsc --noEmit -p tsconfig.json"
   },
   "author": "Kontur",
   "peerDependencies": {
@@ -19,11 +19,15 @@
     "react-dom": ">=16.9"
   },
   "devDependencies": {
-    "@skbkontur/react-ui": "^5.0.0"
+    "@skbkontur/react-ui": "^5.0.0",
+    "typescript": "5.8.3"
   },
   "dependencies": {
+    "@skbkontur/bell-widget-npm-loader": "^0.2.3",
+    "@skbkontur/empty-state": "1.1.1",
     "@skbkontur/icons": "^1.19.0",
     "@skbkontur/react-ui-addons": "^5.2.1",
+    "@skbkontur/widget-consumer-react-utils": "^1.6.12",
     "tslib": "^2.8.0"
   }
 }

package/src/Navigation.js

@@ -1,14 +1,17 @@
-import { __values } from "tslib";
-import { Tree } from './Tree';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuNavigation = exports.navigationAttributeBackButton = exports.navigationAttributeForSeparatedMenu = exports.navigationAttribute = void 0;
+var tslib_1 = require("tslib");
+var Tree_1 = require("./Tree");
 var MENU_ROOT_ID = 'menu-root-id';
-export var navigationAttribute = 'data-navigation-id';
-export var navigationAttributeForSeparatedMenu = 'data-parent-navigation-id';
-export var navigationAttributeBackButton = 'data-navigation-back-button';
+exports.navigationAttribute = 'data-navigation-id';
+exports.navigationAttributeForSeparatedMenu = 'data-parent-navigation-id';
+exports.navigationAttributeBackButton = 'data-navigation-back-button';
 var MenuNavigation = /** @class */ (function () {
     function MenuNavigation(options) {
         this.navigationTree = null;
         this.menuItemsIds = '';
-        this.navigationTree = new Tree(MENU_ROOT_ID);
+        this.navigationTree = new Tree_1.Tree(MENU_ROOT_ID);
         this.activeMenuItemTreeNode = this.navigationTree.find(options.activeMenuItem);
         this.rootRef = options.rootRef;
         this.activeMenuItem = options.activeMenuItem;
@@ -25,15 +28,15 @@ var MenuNavigation = /** @class */ (function () {
         var _this = this;
         var _a;
         if ((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current) {
-            var menuItems = Array.from(this.rootRef.current.querySelectorAll("[".concat(navigationAttribute, "]"))).filter(function (item) { return !item.querySelector("[".concat(navigationAttributeBackButton, "]")); });
-            var newItemsIds = menuItems.map(function (node) { return node.getAttribute(navigationAttribute); }).join('');
+            var menuItems = Array.from(this.rootRef.current.querySelectorAll("[".concat(exports.navigationAttribute, "]"))).filter(function (item) { return !item.querySelector("[".concat(exports.navigationAttributeBackButton, "]")); });
+            var newItemsIds = menuItems.map(function (node) { return node.getAttribute(exports.navigationAttribute); }).join('');
             if (this.menuItemsIds === newItemsIds) {
                 return;
             }
             this.menuItemsIds = newItemsIds;
             menuItems.forEach(function (menuItem) {
                 var _a, _b, _c;
-                var id = menuItem.getAttribute(navigationAttribute);
+                var id = menuItem.getAttribute(exports.navigationAttribute);
                 var parentId = _this.getParentId(menuItem);
                 var oldValue = (_b = (_a = _this.navigationTree) === null || _a === void 0 ? void 0 : _a.find(id)) === null || _b === void 0 ? void 0 : _b.value;
                 (_c = _this.navigationTree) === null || _c === void 0 ? void 0 : _c.insert(parentId, id, oldValue);
@@ -59,7 +62,7 @@ var MenuNavigation = /** @class */ (function () {
         var _b, _c, _d, _e, _f;
         if (!isButton) {
             try {
-                for (var _g = __values(((_b = this.navigationTree) === null || _b === void 0 ? void 0 : _b.preOrderTraversal()) || []), _h = _g.next(); !_h.done; _h = _g.next()) {
+                for (var _g = tslib_1.__values(((_b = this.navigationTree) === null || _b === void 0 ? void 0 : _b.preOrderTraversal()) || []), _h = _g.next(); !_h.done; _h = _g.next()) {
                     var node = _h.value;
                     (_c = node.value) === null || _c === void 0 ? void 0 : _c.setIsActive(false);
                 }
@@ -96,7 +99,7 @@ var MenuNavigation = /** @class */ (function () {
         var e_2, _a;
         var _b, _c, _d;
         try {
-            for (var _e = __values(((_b = this.navigationTree) === null || _b === void 0 ? void 0 : _b.preOrderTraversal()) || []), _f = _e.next(); !_f.done; _f = _e.next()) {
+            for (var _e = tslib_1.__values(((_b = this.navigationTree) === null || _b === void 0 ? void 0 : _b.preOrderTraversal()) || []), _f = _e.next(); !_f.done; _f = _e.next()) {
                 var node = _f.value;
                 (_c = node.value) === null || _c === void 0 ? void 0 : _c.setIsFirstLevelParentOfActiveMenuItem(false);
             }
@@ -129,7 +132,7 @@ var MenuNavigation = /** @class */ (function () {
         var _b, _c, _d, _e;
         if (!((_b = treeNode.value) === null || _b === void 0 ? void 0 : _b.isSubMenu) || firstLevelParentChanged) {
             try {
-                for (var _f = __values(((_c = this.navigationTree) === null || _c === void 0 ? void 0 : _c.preOrderTraversal()) || []), _g = _f.next(); !_g.done; _g = _f.next()) {
+                for (var _f = tslib_1.__values(((_c = this.navigationTree) === null || _c === void 0 ? void 0 : _c.preOrderTraversal()) || []), _g = _f.next(); !_g.done; _g = _f.next()) {
                     var node = _g.value;
                     (_d = node.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
                 }
@@ -158,17 +161,17 @@ var MenuNavigation = /** @class */ (function () {
     MenuNavigation.prototype.getParentId = function (menuItem) {
         var _a, _b, _c;
         var parentElement;
-        var clickableElementSelector = "[".concat(navigationAttribute, "]");
-        var separatedMenuSelector = "[".concat(navigationAttributeForSeparatedMenu, "]");
+        var clickableElementSelector = "[".concat(exports.navigationAttribute, "]");
+        var separatedMenuSelector = "[".concat(exports.navigationAttributeForSeparatedMenu, "]");
         parentElement = (_a = menuItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(clickableElementSelector);
         if (!parentElement) {
             var separatedMenu = menuItem.closest(separatedMenuSelector);
             if (separatedMenu) {
-                var firstLevelMenuId = separatedMenu.getAttribute(navigationAttributeForSeparatedMenu);
-                parentElement = (_c = (_b = this.rootRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.querySelector("[".concat(navigationAttribute, "=\"").concat(firstLevelMenuId, "\"]"));
+                var firstLevelMenuId = separatedMenu.getAttribute(exports.navigationAttributeForSeparatedMenu);
+                parentElement = (_c = (_b = this.rootRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.querySelector("[".concat(exports.navigationAttribute, "=\"").concat(firstLevelMenuId, "\"]"));
             }
         }
-        return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute(navigationAttribute)) || MENU_ROOT_ID;
+        return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute(exports.navigationAttribute)) || MENU_ROOT_ID;
     };
     MenuNavigation.prototype.switchVisibilityOfSeparatedMenu = function () {
         var _a, _b, _c, _d, _e, _f;
@@ -189,4 +192,4 @@ var MenuNavigation = /** @class */ (function () {
     };
     return MenuNavigation;
 }());
-export { MenuNavigation };
+exports.MenuNavigation = MenuNavigation;

package/src/SideMenu/SideMenu.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
+import { SideMenuNotifications } from '../SideMenuNotifications/SideMenuNotifications';
 import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
 import { SideMenuFooter } from '../SideMenuFooter/SideMenuFooter';
 import { SideMenuHeader } from '../SideMenuHeader/SideMenuHeader';
@@ -78,6 +79,7 @@ interface SubComponents {
     SubItemHeader: typeof SideMenuSubItemHeader;
     Avatar: typeof SideMenuAvatar;
     Organisations: typeof SideMenuOrganisations;
+    Notifications: typeof SideMenuNotifications;
     Divider: typeof SideMenuDivider;
     Dropdown: typeof SideMenuDropdown;
     Link: typeof SideMenuLink;