@skbkontur/side-menu 2.0.2 → 2.1.1

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.
 
+## [2.1.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.1.0...@skbkontur/side-menu@2.1.1) (2024-08-08)
+
+
+### Bug Fixes
+
+* **SideMenu:** use special attrs instead of data-tids attrs ([27db556](https://git.skbkontur.ru/ui/ui-parking/commits/27db5569a22014f8b18f4d6ce64844e7a61a722b))
+
+
+
+
+
+# [2.1.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.0.2...@skbkontur/side-menu@2.1.0) (2024-07-19)
+
+
+### Features
+
+* **SideMenu:** add isPinned prop ([3e6e080](https://git.skbkontur.ru/ui/ui-parking/commits/3e6e080f37054e0e86ded3034a4975b0c99a2942))
+
+
+
+
+
 ## [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

package/README.md

@@ -525,6 +525,42 @@ const [isOpen, setIsOpen] = React.useState(true);
 </div>
 ```
 
+#### Пример с использованием пропа `isPinned`
+
+```jsx harmony
+import { Kontur, Ofd } from '@skbkontur/logos';
+import { SideMenu } from './index';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
+import { ThemeContext, ThemeFactory, Button } from '@skbkontur/react-ui';
+
+const [isPinned, setIsPinned] = React.useState(localStorage.getItem('sideMenuIsPinned') === 'true');
+
+React.useEffect(() => {
+  window.addEventListener('storage', () => {
+    setIsPinned(localStorage.getItem('sideMenuIsPinned') === 'true');
+  });
+}, []);
+
+<div style={{ height: '200px', position: 'relative', display: 'flex' }}>
+  <ThemeContext.Provider
+    value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuProductColor: '#64b419' })}>
+    <SideMenu isPinned={isPinned}
+              onPinnedValueChange={(isPinned) => {
+                localStorage.setItem('sideMenuIsPinned', String(isPinned));
+              }}>
+      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
+      <SideMenu.Body>
+        <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} />
+      </SideMenu.Body>
+      <SideMenu.Footer>
+        <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
+      </SideMenu.Footer>
+    </SideMenu>
+  </ThemeContext.Provider>
+</div>
+```
+
 #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
 
 ```typescript

package/package.json

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

package/src/Navigation.d.ts

@@ -2,6 +2,7 @@ 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 declare const navigationAttributeBackButton = "data-navigation-back-button";
 export interface NavigableElement {
     setIsActive: (value: boolean) => void;
     setIsOpened: (value: boolean) => void;
@@ -34,7 +35,7 @@ export declare class MenuNavigation {
     private readonly isOpened?;
     private readonly isDesktop?;
     private readonly isMobile?;
-    private readonly isCollapsable?;
+    isCollapsable?: boolean;
     constructor(options: MenuNavigationOptions);
     updateNavigationTree(): void;
     addValue(id: string, value: NavigableElement): void;

package/src/Navigation.js

@@ -1,9 +1,9 @@
 import { __read, __spread } from "tslib";
-import { SideMenuDataTids } from '../SideMenuDataTids';
 import { Tree } from './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';
 var MenuNavigation = /** @class */ (function () {
     function MenuNavigation(options) {
         this.navigationTree = null;
@@ -24,7 +24,7 @@ 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("[data-tid=" + SideMenuDataTids.clickableElement + "]")).filter(function (item) { return !item.querySelector("button[data-tid=" + SideMenuDataTids.backButton + "]"); });
+            var menuItems = Array.from(this.rootRef.current.querySelectorAll("[" + navigationAttribute + "]")).filter(function (item) { return !item.querySelector("[" + navigationAttributeBackButton + "]"); });
             menuItems.forEach(function (menuItem) {
                 var _a, _b, _c;
                 var id = menuItem.getAttribute(navigationAttribute);
@@ -116,8 +116,8 @@ var MenuNavigation = /** @class */ (function () {
     MenuNavigation.prototype.getParentId = function (menuItem) {
         var _a, _b, _c;
         var parentElement;
-        var clickableElementSelector = "[data-tid=" + SideMenuDataTids.clickableElement + "]";
-        var separatedMenuSelector = "[data-tid=" + SideMenuDataTids.separatedSubMenu + "]";
+        var clickableElementSelector = "[" + navigationAttribute + "]";
+        var separatedMenuSelector = "[" + navigationAttributeForSeparatedMenu + "]";
         parentElement = (_a = menuItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(clickableElementSelector);
         if (!parentElement) {
             var separatedMenu = menuItem.closest(separatedMenuSelector);

package/src/SideMenu/SideMenu.d.ts

@@ -16,7 +16,18 @@ export declare type showScrollBarType = 'always' | 'scroll' | 'hover' | 'never';
 export interface SideMenuProps extends CommonProps {
     children?: React.ReactNode;
     size?: 'small' | 'large';
+    /**
+     * Проп для отображения подменю в отдельной колонке
+     */
     isSeparatedMenu?: boolean;
+    /**
+     * Проп для закрепленного состояния (работает только на широких экранах)
+     */
+    isPinned?: boolean;
+    /**
+     * Коллбэк для закрепленного состояния (работает только на широких экранах)
+     */
+    onPinnedValueChange?: (isPinned: boolean) => void;
     /**
      * @deprecated use disableCollapsing
      */

package/src/SideMenu/SideMenu.js

@@ -33,7 +33,7 @@ export var burgerTransitionDuration = (transitionDuration * 2) / 3;
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
     var _f, _g;
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, activeItem = _a.activeItem, onActiveItemChange = _a.onActiveItemChange, _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.hideScrollBar, hideScrollBar = _m === void 0 ? undefined : _m, _o = _a.showScrollBar, showScrollBar = _o === void 0 ? 'hover' : _o, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "activeItem", "onActiveItemChange", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "onOpen", "onClose"]);
+    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.hideScrollBar, hideScrollBar = _m === void 0 ? undefined : _m, _o = _a.showScrollBar, showScrollBar = _o === void 0 ? 'hover' : _o, isOpen = _a.isOpen, isPinned = _a.isPinned, onValueChange = _a.onValueChange, onActiveItemChange = _a.onActiveItemChange, onOpen = _a.onOpen, onClose = _a.onClose, onPinnedValueChange = _a.onPinnedValueChange, rest = __rest(_a, ["children", "value", "activeItem", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "isPinned", "onValueChange", "onActiveItemChange", "onOpen", "onClose", "onPinnedValueChange"]);
     var transitionTimer = useRef(null);
     var sideMenuRef = useRef(null);
     var contentWrapperRef = useRef(null);
@@ -55,7 +55,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
     var manual = isOpen !== undefined;
-    var _q = __read(useState(isDesktopQuery), 2), isOpened = _q[0], setIsOpened = _q[1];
+    var _q = __read(useState(isDesktopQuery && !isPinned), 2), isOpened = _q[0], setIsOpened = _q[1];
     var _r = __read(useState(false), 2), isBeingTransitioned = _r[0], setIsBeingTransitioned = _r[1];
     var _s = __read(useState(value !== null && value !== void 0 ? value : activeItem), 2), activeMenuItem = _s[0], setActiveMenuItem = _s[1];
     var _t = __read(useState(false), 2), isSeparatedMenuShown = _t[0], setIsSeparatedMenuShown = _t[1];
@@ -64,7 +64,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     var _w = __read(useState(false), 2), hasScrollBar = _w[0], setHasScrollBar = _w[1];
     var _x = __read(useState(0), 2), mousePositionX = _x[0], setMousePositionX = _x[1];
     var _y = __read(useState(0), 2), headerHeight = _y[0], setHeaderHeight = _y[1];
-    var _z = __read(useState(isNarrowDesktop), 2), isCollapsable = _z[0], setIsCollapsable = _z[1];
+    var _z = __read(useState(isNarrowDesktop || (isDesktopQuery && isPinned)), 2), isCollapsable = _z[0], setIsCollapsable = _z[1];
     var _0 = __read(useState(0), 2), leftPosition = _0[0], setLeftPosition = _0[1];
     var _1 = __read(useState(false), 2), isHovered = _1[0], setIsHovered = _1[1];
     var switchActiveMenuItem = function (id) {
@@ -107,6 +107,9 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setHasScrollBar(scrollContainer.clientHeight < contentWrapper.scrollHeight);
         }, 50);
     }, [activeMenuItem, isOpened, isBeingTransitioned]);
+    useEffect(function () {
+        isDesktopQuery && setIsOpened(!isPinned);
+    }, [isPinned, isDesktopQuery]);
     var handleIsOpened = function (newIsOpened, shouldSetState) {
         if (newIsOpened === isOpened || !shouldSetState)
             return;
@@ -119,7 +122,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     useEffect(function () {
-        if (isDesktopQuery) {
+        if (isDesktopQuery && !isPinned) {
             setIsOpened(true);
             setIsCollapsable(false);
         }
@@ -127,7 +130,13 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setIsOpened(false);
         }
         isNarrowDesktop && setIsCollapsable(true);
-    }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile]);
+        if (isDesktopQuery && isPinned) {
+            setIsCollapsable(true);
+            if (navigation.current) {
+                navigation.current.isCollapsable = true;
+            }
+        }
+    }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile, isPinned]);
     useEffect(function () {
         var _a;
         !activeItem && ((_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(value));
@@ -155,17 +164,21 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }, transitionDuration + 200);
         }
     };
+    var shouldNotOpenOnHover = (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen;
     var handleMouseEnter = function () {
-        setIsHovered(true);
-        if ((isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen) {
+        if (shouldNotOpenOnHover) {
             return;
         }
+        setIsHovered(true);
         if (isCollapsable && !isOpened && !isSeparatedMenuShown) {
             isMouseOutside && showMinimizedRoot(false);
             setIsMouseOutside(false);
         }
     };
     var handleMouseLeave = function () {
+        if (shouldNotOpenOnHover) {
+            return;
+        }
         setIsHovered(false);
         if (isCollapsable) {
             handleIsOpened(false, !manual);
@@ -216,13 +229,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         return 'never';
     };
     var handleRightBorderClick = function () {
-        if (isCollapsable) {
-            setIsCollapsable(false);
-        }
-        else {
+        if (!isCollapsable) {
             setIsOpened(false);
-            setIsCollapsable(true);
         }
+        onPinnedValueChange === null || onPinnedValueChange === void 0 ? void 0 : onPinnedValueChange(!isCollapsable);
+        setIsCollapsable(!isCollapsable);
     };
     return (React.createElement(SideMenuContext.Provider, { value: {
             isOpened: isOpened,

package/src/internal/BackButton.js

@@ -1,21 +1,24 @@
+import { __assign } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ArrowALeftIcon20Regular } from '@skbkontur/icons/icons/ArrowALeftIcon/ArrowALeftIcon20Regular';
 import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
 import { SideMenuContext } from '../SideMenuContext';
+import { navigationAttributeBackButton } from '../Navigation';
 /**
  * Кнопка возврата в меню первого уровня
  *
  * @visibleName BackButton
  */
 var BackButton = forwardRef(function (_a, ref) {
+    var _b;
     var caption = _a.caption, id = _a.id, href = _a.href;
     var context = useContext(SideMenuContext);
     var handleClick = function () {
         var _a;
         (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(id);
     };
-    return (React.createElement(SideMenuItem, { "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isSubMenu: true, onClick: handleClick, _isBackButton: true, ref: ref }));
+    return (React.createElement(SideMenuItem, __assign({ "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isSubMenu: true, onClick: handleClick, _isBackButton: true, ref: ref }, (_b = {}, _b[navigationAttributeBackButton] = '', _b))));
 });
 BackButton.displayName = 'BackButton';
 var BackButtonWithStaticFields = Object.assign(BackButton, { __KONTUR_REACT_UI__: 'BackButton' });