@skbkontur/side-menu 3.0.1 → 3.0.3

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.
 
+## [3.0.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@3.0.2...@skbkontur/side-menu@3.0.3) (2024-11-06)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [3.0.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@3.0.1...@skbkontur/side-menu@3.0.2) (2024-10-31)
+
+
+### Bug Fixes
+
+* **SideMenu:** speed up SideMenu when there are many items ([2346ea1](https://git.skbkontur.ru/ui/ui-parking/commits/2346ea1ea253513aabb80f073dcb88a64da95c28))
+
+
+
+
+
 ## [3.0.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@3.0.0...@skbkontur/side-menu@3.0.1) (2024-10-25)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -2,11 +2,28 @@ SideMenu в фирменном стиле (макеты живут [здесь](
 
 [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
 
+Пример типизации кастомной темы SideMenu.
+
+```jsx static
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { SideMenu, SideMenuThemeIn } from '@skbkontur/side-menu';
+
+const myTheme = ThemeFactory.create<SideMenuThemeIn>({
+  sideMenuProductColor: '#64b419',
+});
+
+<ThemeContext.Provider value={myTheme}>
+  <SideMenu />
+</ThemeContext.Provider>;
+```
+
+Базовый пример использования SideMenu
+
 ```jsx harmony
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Kontur, Ofd } from '@skbkontur/logos';
-import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
-import { SideMenu } from './index';
+import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+import { SideMenu } from '@skbkontur/side-menu';
 import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
 import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
 import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
@@ -18,7 +35,7 @@ import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/F
 import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
 
 <div style={{height: '600px', position: 'relative'}}>
-  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
+  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
     <SideMenu>
           <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
           <SideMenu.Body>
@@ -84,8 +101,8 @@ SideMenu с меню второго уровня в отдельной коло
 ```jsx harmony
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Buhgalteria, Kontur } from '@skbkontur/logos';
-import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
-import { SideMenu } from './index';
+import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator } from '@skbkontur/react-ui';
+import { SideMenu } from '@skbkontur/side-menu';
 import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
 import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
 import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
@@ -126,7 +143,7 @@ const renderModal = () => {
 }
 
 <div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
-  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#b750d1' }, THEME_2022)}>
+  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#b750d1' })}>
     <SideMenu isSeparatedMenu={true}>
       <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
       <SideMenu.Body>
@@ -209,8 +226,8 @@ SideMenu с ручным управлением.
 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 { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator} from '@skbkontur/react-ui';
+import { SideMenu } from '@skbkontur/side-menu';
 import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
 import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
 import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
@@ -249,7 +266,7 @@ const items = [
 ];
 
 <div style={{ height: '600px', display: 'flex', position: 'relative' }}>
-  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
+  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
     <SideMenu activeItem={activeItem} onActiveItemChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
       <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} withWidget={false} />
       <SideMenu.Body>
@@ -473,7 +490,7 @@ const SideMenuReactRouterLink: React.FunctionComponent<SideMenuReactRouterLinkPr
 
 ```jsx harmony
 import { Kontur, Ofd } from '@skbkontur/logos';
-import { SideMenu } from './index';
+import { SideMenu } from '@skbkontur/side-menu';
 import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
 import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
 import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
@@ -497,7 +514,7 @@ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
 
 ```jsx harmony
 import { Kontur, Ofd } from '@skbkontur/logos';
-import { SideMenu } from './index';
+import { SideMenu } from '@skbkontur/side-menu';
 import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
 import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
 import { ThemeContext, ThemeFactory, Button } from '@skbkontur/react-ui';
@@ -527,7 +544,7 @@ const [isOpen, setIsOpen] = React.useState(true);
 
 ```jsx harmony
 import { Kontur, Ofd } from '@skbkontur/logos';
-import { SideMenu } from './index';
+import { SideMenu } from '@skbkontur/side-menu';
 import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
 import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
 import { ThemeContext, ThemeFactory, Button } from '@skbkontur/react-ui';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
     "@skbkontur/react-ui": "5.0.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "^1.13.0",
+    "@skbkontur/icons": "^1.13.1",
     "@skbkontur/react-ui-addons": "^5.0.0",
     "tslib": "^1"
   }

package/src/Navigation.d.ts

@@ -36,6 +36,7 @@ export declare class MenuNavigation {
     private readonly isDesktop?;
     private readonly isMobile?;
     isCollapsable?: boolean;
+    private menuItemsIds;
     constructor(options: MenuNavigationOptions);
     updateNavigationTree(): void;
     addValue(id: string, value: NavigableElement): void;

package/src/Navigation.js

@@ -7,6 +7,7 @@ export var 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.activeMenuItemTreeNode = this.navigationTree.find(options.activeMenuItem);
         this.rootRef = options.rootRef;
@@ -25,6 +26,11 @@ var MenuNavigation = /** @class */ (function () {
         var _a;
         if ((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current) {
             var menuItems = Array.from(this.rootRef.current.querySelectorAll("[" + navigationAttribute + "]")).filter(function (item) { return !item.querySelector("[" + navigationAttributeBackButton + "]"); });
+            var newItemsIds = menuItems.map(function (node) { return node.getAttribute(navigationAttribute); }).join('');
+            if (this.menuItemsIds === newItemsIds) {
+                return;
+            }
+            this.menuItemsIds = newItemsIds;
             menuItems.forEach(function (menuItem) {
                 var _a, _b, _c;
                 var id = menuItem.getAttribute(navigationAttribute);