@skbkontur/side-menu 3.4.8 → 3.4.9

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.9](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.4.8...@skbkontur/side-menu@3.4.9) (2025-12-25)
+
+
+### Bug Fixes
+
+* **SideMenu:** add `aria-current="page"` to active menu item ([76a5e37](https://git.skbkontur.ru/ui/ui-parking-2/commits/76a5e3794cf8331d2970cf852354030774827824))
+* **SideMenu:** render RightBorder icon on top of scrollbar ([8ee36f4](https://git.skbkontur.ru/ui/ui-parking-2/commits/8ee36f43b1449d95df3d094baf87654902174d08))
+
+
+
+
+
 ## [3.4.8](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/side-menu@3.4.7...@skbkontur/side-menu@3.4.8) (2025-12-19)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/package.json

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

package/src/internal/ClickableElement.js

@@ -131,7 +131,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
             _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
             _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, 
             // @ts-expect-error: SideMenuItem should have icon
-            icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled, noWrap: noWrap })), ref: ref, href: href }, rest);
+            icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled, noWrap: noWrap })), ref: ref, href: href, 'aria-current': isActive ? 'page' : undefined }, rest);
     return (React.createElement(Component, (_c = { "data-tid": SideMenuDataTids.clickableElement }, _c[navigationAttribute] = currentId, _c),
         React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
             ? __assign(__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : __assign({}, newProps)),

package/src/internal/RightBorder.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { Hint } from '@skbkontur/react-ui/components/Hint/Hint';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { useMemoBorderIcon } from '../../hooks/useMemoIcon';
 import { SideMenuContext } from '../SideMenuContext';
@@ -27,7 +28,8 @@ var RightBorder = forwardRef(function (_a, ref) {
                 if (e.key === 'Enter' || e.key === 'Space') {
                     onClick();
                 }
-            }, role: "button", tabIndex: 0, "data-tid": SideMenuDataTids.rightBorder }, icon)));
+            }, role: "button", tabIndex: 0, "data-tid": SideMenuDataTids.rightBorder },
+            React.createElement(ZIndex, { priority: 1 }, icon))));
 });
 RightBorder.displayName = 'RightBorder';
 var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });

package/src/internal/RightBorder.styles.js

@@ -3,7 +3,7 @@ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
     root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "], ["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sideMenuRightBorderWidth, t.sideMenuRightBorderIconColor, t.sideMenuRightBorderHoverIconColor);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "], ["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sideMenuRightBorderWidth, t.sideMenuRightBorderIconColor, t.sideMenuRightBorderHoverIconColor);
     },
     rootWithButton: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));