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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.2.7...@skbkontur/side-menu@3.3.0) (2025-07-24)
+
+
+### Features
+
+* **SideMenu:** add SideMenu.Notifications widget component ([06f80be](https://git.skbkontur.ru/ui/ui-parking-2/commits/06f80be441baffae42d30293d7c7e6e7ec02d432))
+
+
+
+
+
+## [3.2.7](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.2.6...@skbkontur/side-menu@3.2.7) (2025-07-24)
+
+
+### Bug Fixes
+
+* **SideMenu:** update scrollbar and items after dynamic updates ([b26abdf](https://git.skbkontur.ru/ui/ui-parking-2/commits/b26abdff7aed26e2fa01387119cae6157dc5388d))
+
+
+
+
+
 ## [3.2.6](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.2.5...@skbkontur/side-menu@3.2.6) (2025-07-04)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -96,7 +96,7 @@ import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
 </div>
 ```
 
-SideMenu с меню второго уровня в отдельной колонке
+С меню второго уровня в отдельной колонке
 
 ```jsx harmony
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
@@ -216,7 +216,7 @@ const renderModal = () => {
 </div>
 ```
 
-SideMenu с ручным управлением.
+С ручным управлением
 
 Для управления активным пунктом меню используйте проп `activeItem`.
 
@@ -380,11 +380,9 @@ const items = [
     </div>
   </div>
 </div>
-```
-
-где
 
-```css static
+<style>
+{`
   .layout {
     display: flex;
     flex-direction: column;
@@ -404,6 +402,8 @@ const items = [
           height: 100%;
       }
   }
+`}
+</style>
  ```
 
 
@@ -486,6 +486,25 @@ const SideMenuReactRouterLink: React.FunctionComponent<SideMenuReactRouterLinkPr
 
 Пример в [песочнице](https://codesandbox.io/s/side-menu-react-router-dom-vtv6r8)
 
+## Подключение виджета уведомлений `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>
+```
+
 #### Пример кастомизации
 
 ```jsx harmony
@@ -576,24 +595,6 @@ 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,6 +5,7 @@ export declare const SideMenuDataTids: {
     separatedSubMenu: string;
     rightBorder: string;
     clickableElement: string;
+    footer: string;
     bellSideMenuDropdownButton: string;
     bellCloseButton: string;
     bellHeader: string;

package/SideMenuDataTids.js

@@ -8,6 +8,7 @@ exports.SideMenuDataTids = {
     separatedSubMenu: 'SideMenu__separatedSubMenu',
     rightBorder: 'SideMenu__rightBorder',
     clickableElement: 'SideMenu__clickableElement',
+    footer: 'SideMenu__footer',
     bellSideMenuDropdownButton: 'SideMenu__bellDropdownButton',
     bellCloseButton: 'SideMenu__bellCloseButton',
     bellHeader: 'SideMenu__bellHeaderWidget',

package/package.json

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

package/src/SideMenu/SideMenu.js

@@ -39,6 +39,7 @@ var SideMenuInner = (0, react_1.forwardRef)(function (_a, ref) {
     var _f, _g;
     var children = _a.children, value = _a.value, activeItem = _a.activeItem, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.isSeparatedMenu, isSeparatedMenu = _j === void 0 ? false : _j, className = _a.className, _k = _a.disableSwipe, disableSwipe = _k === void 0 ? false : _k, _l = _a.disableCollapsing, disableCollapsing = _l === void 0 ? false : _l, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _m = _a.showScrollBar, showScrollBar = _m === void 0 ? 'hover' : _m, isOpen = _a.isOpen, isPinned = _a.isPinned, onValueChange = _a.onValueChange, onActiveItemChange = _a.onActiveItemChange, onOpen = _a.onOpen, onClose = _a.onClose, onPinnedValueChange = _a.onPinnedValueChange, rest = tslib_1.__rest(_a, ["children", "value", "activeItem", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "showScrollBar", "isOpen", "isPinned", "onValueChange", "onActiveItemChange", "onOpen", "onClose", "onPinnedValueChange"]);
     var transitionTimer = (0, react_1.useRef)(null);
+    var timerScrollbar = (0, react_1.useRef)(null);
     var sideMenuRef = (0, react_1.useRef)(null);
     var contentWrapperRef = (0, react_1.useRef)(null);
     var scrollContainerRef = (0, react_1.useRef)(null);
@@ -103,7 +104,8 @@ var SideMenuInner = (0, react_1.forwardRef)(function (_a, ref) {
         if (isMobile && isSeparatedMenuShown) {
             return;
         }
-        setTimeout(function () {
+        clearTimeout(timerScrollbar.current);
+        timerScrollbar.current = setTimeout(function () {
             var _a;
             var contentWrapper = contentWrapperRef.current;
             var scrollContainer = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.inner;
@@ -112,7 +114,10 @@ var SideMenuInner = (0, react_1.forwardRef)(function (_a, ref) {
             }
             setHasScrollBar(scrollContainer.clientHeight < contentWrapper.scrollHeight);
         }, 50);
-    }, [activeMenuItem, isOpened, isBeingTransitioned]);
+        return function () {
+            clearTimeout(timerScrollbar.current);
+        };
+    });
     (0, react_1.useEffect)(function () {
         isDesktopQuery && setIsOpened(!isPinned);
     }, [isPinned, isDesktopQuery]);

package/src/SideMenuFooter/SideMenuFooter.js

@@ -8,6 +8,7 @@ var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
 var SideMenuContext_1 = require("../SideMenuContext");
 var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
 var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var SideMenuDataTids_1 = require("../../SideMenuDataTids");
 var SideMenuFooter_styles_1 = require("./SideMenuFooter.styles");
 var SideMenuFooterInner = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
@@ -19,7 +20,7 @@ var SideMenuFooterInner = (0, react_1.forwardRef)(function (_a, ref) {
         setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
     }, [context.hasScrollBar, context.scrollState]);
     if (!(context.isMobile || context.isTablet) || (context.isOpened && (context.isMobile || context.isTablet))) {
-        return (react_1.default.createElement("footer", tslib_1.__assign({ className: (0, Emotion_1.cx)((_b = {},
+        return (react_1.default.createElement("footer", tslib_1.__assign({ "data-tid": SideMenuDataTids_1.SideMenuDataTids.footer, "data-visual-state-fixed": isFixed, className: (0, Emotion_1.cx)((_b = {},
                 _b[SideMenuFooter_styles_1.jsStyles.root(theme)] = true,
                 _b[SideMenuFooter_styles_1.jsStyles.rootFixed(theme)] = isFixed,
                 _b[SideMenuFooter_styles_1.jsStyles.rootTransitionedForTabletsOrMobiles()] = context.isBeingTransitioned && (context.isMobile || context.isTablet),

package/src/SideMenuNotifications/SideMenuNotifications.d.ts

@@ -4,11 +4,11 @@ import type { ImportFaults, WidgetApi, RenderFault, RenderDisposeFault } from '@
 import { type SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
 export interface NotificationApiProps extends Omit<SideMenuDropdownProps, 'icon' | 'marker' | 'subCaption'> {
     /**
-     * API виджета, является результатом вызова importWidgetModule(bellWidgetConfig). Подробнее смотреть в документации Колокольчика - https://wiki.skbkontur.ru/pages/viewpage.action?pageId=868998405
+     * API виджета, результат вызова importWidgetModule(bellWidgetConfig). Подробнее смотреть в документации Колокольчика - https://wiki.skbkontur.ru/pages/viewpage.action?pageId=868998405
      */
     widgetApi: Promise<OperationResult<ImportFaults, WidgetApi>>;
     /**
-     * Счетчик уведомлений
+     * Счётчик уведомлений
      */
     count: number;
     /**