@skbkontur/side-menu 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
+## [2.0.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@2.0.0...@skbkontur/side-menu@2.0.1) (2024-07-18)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 # [2.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.9...@skbkontur/side-menu@2.0.0) (2024-07-09)
 
 

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.0",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^1.10.0",
-    "@skbkontur/react-ui-addons": "^4.11.2",
+    "@skbkontur/react-ui-addons": "^4.11.4",
     "tslib": "^1"
   }
 }

package/src/Navigation.d.ts

@@ -34,7 +34,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/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,