@skbkontur/side-menu 1.11.5 → 1.12.2

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.
 
+## [1.12.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.1...@skbkontur/side-menu@1.12.2) (2024-03-29)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [1.12.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.12.0...@skbkontur/side-menu@1.12.1) (2024-03-27)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+# [1.12.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.11.5...@skbkontur/side-menu@1.12.0) (2024-03-22)
+
+
+### Features
+
+* **SideMenu:** collapsing menu in wide desktop with right border button ([01556f4](https://git.skbkontur.ru/ui/ui-parking/commits/01556f4cbb138cd8d795889a67341542b4bf6c5b))
+
+
+
+
+
 ## [1.11.5](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.11.4...@skbkontur/side-menu@1.11.5) (2024-03-21)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -1,6 +1,6 @@
 SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
 
-Для корректной работы SideMenu с версии `1.11.0` необходим пакет `@skbkontur/react-ui` версии `4.19.0` или выше
+Для корректной работы SideMenu с версии `1.11.0` необходим пакет `@skbkontur/react-ui` версии `4.20.0` или выше
 
 [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
 
@@ -21,7 +21,7 @@ import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
 
 <div style={{height: '600px', position: 'relative'}}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
-    <SideMenu disableSwipe={false}>
+    <SideMenu>
           <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
           <SideMenu.Body>
               <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'}>
@@ -616,7 +616,7 @@ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
 
 <div style={{ height: '200px', position: 'relative' }}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px', sideMenuProductColor: '#64b419' })}>
-    <SideMenu disableSwipe={false}>
+    <SideMenu>
       <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
       <SideMenu.Body>
         <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'2'} />
@@ -691,9 +691,9 @@ const [isOpen, setIsOpen] = React.useState(true);
   sideMenuNestedMenuPaddingLeft: string;
   //#endregion
   //#region RightBorder
-  MenuRightBorderWidth: string;
-  sideMenuRightBorderColor: string;
-  sideMenuRightBorderHoverWidth: string;
+  sideMenuRightBorderWidth: string;
+  sideMenuRightBorderIconColor: string;
+  sideMenuRightBorderHoverIconColor: string;
   // #region BackButton (for Mobiles)
   sideMenuBackButtonCaptionFontWeight: string;
   sideMenuBackButtonCaptionFontSize: string;

package/SideMenuDataTids.d.ts

@@ -3,4 +3,5 @@ export declare const SideMenuDataTids: {
     burger: string;
     backButton: string;
     separatedSubMenu: string;
+    rightBorder: string;
 };

package/SideMenuDataTids.js

@@ -3,4 +3,5 @@ export var SideMenuDataTids = {
     burger: 'SideMenu__burger',
     backButton: 'SideMenu__backButton',
     separatedSubMenu: 'SideMenu__separatedSubMenu',
+    rightBorder: 'SideMenu__rightBorder',
 };

package/hooks/useMemoIcon.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
 export declare const useMemoIcon: (children: React.ReactNode, isOpened: boolean) => JSX.Element | undefined;
+export declare const useMemoBorderIcon: (isCollapsed?: boolean | undefined) => JSX.Element;

package/hooks/useMemoIcon.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { ArrowCDownIcon16Regular } from '@skbkontur/icons/icons/ArrowCDownIcon/ArrowCDownIcon16Regular';
 import { ArrowCRightIcon16Regular } from '@skbkontur/icons/icons/ArrowCRightIcon/ArrowCRightIcon16Regular';
+import { ArrowCLeftIcon16Regular } from '@skbkontur/icons/icons/ArrowCLeftIcon/ArrowCLeftIcon16Regular';
 export var useMemoIcon = function (children, isOpened) {
     return useMemo(function () {
         if (children) {
@@ -13,3 +14,13 @@ export var useMemoIcon = function (children, isOpened) {
         }
     }, [isOpened, children]);
 };
+export var useMemoBorderIcon = function (isCollapsed) {
+    return useMemo(function () {
+        if (isCollapsed) {
+            return React.createElement(ArrowCRightIcon16Regular, null);
+        }
+        else {
+            return React.createElement(ArrowCLeftIcon16Regular, null);
+        }
+    }, [isCollapsed]);
+};

package/internal/themes/SideMenuTheme.d.ts

@@ -101,8 +101,16 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuDividerBgColor: string;
     static sideMenuNestedMenuPaddingLeft: string;
     static sideMenuRightBorderWidth: string;
+    /**
+     * @deprecated doesn't work since v 1.12
+     */
     static get sideMenuRightBorderColor(): string;
+    /**
+     * @deprecated doesn't work since v 1.12
+     */
     static sideMenuRightBorderHoverWidth: string;
+    static sideMenuRightBorderIconColor: string;
+    static sideMenuRightBorderHoverIconColor: string;
     static sideMenuLogotypePaddingLeft: string;
     static sideMenuLogotypePaddingTop: string;
     static sideMenuLogotypePaddingBottom: string;

package/internal/themes/SideMenuTheme.js

@@ -108,6 +108,9 @@ var SideMenuTheme = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SideMenuTheme, "sideMenuRightBorderColor", {
+        /**
+         * @deprecated doesn't work since v 1.12
+         */
         get: function () {
             return this.sideMenuProductColor;
         },
@@ -238,8 +241,13 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuNestedMenuPaddingLeft = '16px';
     //#endregion
     //#region RightBorder
-    SideMenuTheme.sideMenuRightBorderWidth = '20px';
+    SideMenuTheme.sideMenuRightBorderWidth = '16px';
+    /**
+     * @deprecated doesn't work since v 1.12
+     */
     SideMenuTheme.sideMenuRightBorderHoverWidth = '2px';
+    SideMenuTheme.sideMenuRightBorderIconColor = '#adadad';
+    SideMenuTheme.sideMenuRightBorderHoverIconColor = '#222222';
     //#endregion
     //#region Logotype
     SideMenuTheme.sideMenuLogotypePaddingLeft = '8px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.11.5",
+  "version": "1.12.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
     "@skbkontur/react-ui": "4.20.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "^1.7.3",
+    "@skbkontur/icons": "^1.9.0",
     "@skbkontur/react-ui-addons": "^4.10.2",
     "tslib": "^1"
   }

package/src/SideMenu/SideMenu.d.ts

@@ -17,7 +17,14 @@ export interface SideMenuProps extends CommonProps {
     children?: React.ReactNode;
     size?: 'small' | 'large';
     isSeparatedMenu?: boolean;
+    /**
+     * @deprecated use disableCollapsing
+     */
     disableSwipe?: boolean;
+    /**
+     * Заблокировать возможность сворачивания меню до иконок на широких экранах
+     */
+    disableCollapsing?: boolean;
     value?: string;
     onValueChange?: (value: string) => void;
     desktopMediaQuery?: string;

package/src/SideMenu/SideMenu.js

@@ -31,7 +31,7 @@ export var transitionDuration = 300; //ms
 export var burgerTransitionDuration = (transitionDuration * 2) / 3;
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _j = _a.hideScrollBar, hideScrollBar = _j === void 0 ? undefined : _j, _k = _a.showScrollBar, showScrollBar = _k === void 0 ? 'hover' : _k, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "onOpen", "onClose"]);
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? false : _h, _j = _a.disableCollapsing, disableCollapsing = _j === void 0 ? false : _j, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _k = _a.hideScrollBar, hideScrollBar = _k === void 0 ? undefined : _k, _l = _a.showScrollBar, showScrollBar = _l === void 0 ? 'hover' : _l, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "onOpen", "onClose"]);
     var transitionTimer = useRef(null);
     var sideMenuRef = useRef(null);
     var contentWrapperRef = useRef(null);
@@ -43,26 +43,31 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _l = useResponsiveLayout({
+    var _m = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _l.isMobileQuery, isTabletQuery = _l.isTabletQuery, isNarrowDesktopQuery = _l.isNarrowDesktopQuery, isDesktopQuery = _l.isDesktopQuery;
+    }), isMobileQuery = _m.isMobileQuery, isTabletQuery = _m.isTabletQuery, isNarrowDesktopQuery = _m.isNarrowDesktopQuery, isDesktopQuery = _m.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
     var manual = isOpen !== undefined;
-    var _m = useState(isDesktopQuery), isOpened = _m[0], setIsOpened = _m[1];
-    var _o = useState(false), isBeingTransitioned = _o[0], setIsBeingTransitioned = _o[1];
-    var _p = useState(value), activeMenuItem = _p[0], setActiveMenuItem = _p[1];
-    var _q = useState(null), clickedButton = _q[0], setClickedButton = _q[1];
-    var _r = useState(false), isSeparatedMenuShown = _r[0], setIsSeparatedMenuShown = _r[1];
-    var _s = useState(true), isMouseOutside = _s[0], setIsMouseOutside = _s[1];
-    var _t = useState('top'), scrollState = _t[0], setScrollState = _t[1];
-    var _u = useState(false), hasScrollBar = _u[0], setHasScrollBar = _u[1];
-    var _v = useState(0), mousePositionX = _v[0], setMousePositionX = _v[1];
-    var _w = useState(0), headerHeight = _w[0], setHeaderHeight = _w[1];
+    var _o = useState(isDesktopQuery), isOpened = _o[0], setIsOpened = _o[1];
+    var _p = useState(false), isBeingTransitioned = _p[0], setIsBeingTransitioned = _p[1];
+    var _q = useState(value), activeMenuItem = _q[0], setActiveMenuItem = _q[1];
+    var _r = useState(null), clickedButton = _r[0], setClickedButton = _r[1];
+    var _s = useState(false), isSeparatedMenuShown = _s[0], setIsSeparatedMenuShown = _s[1];
+    var _t = useState(true), isMouseOutside = _t[0], setIsMouseOutside = _t[1];
+    var _u = useState('top'), scrollState = _u[0], setScrollState = _u[1];
+    var _v = useState(false), hasScrollBar = _v[0], setHasScrollBar = _v[1];
+    var _w = useState(0), mousePositionX = _w[0], setMousePositionX = _w[1];
+    var _x = useState(0), headerHeight = _x[0], setHeaderHeight = _x[1];
+    var _y = useState(isNarrowDesktop), isCollapsable = _y[0], setIsCollapsable = _y[1];
+    var _z = useState(0), leftPosition = _z[0], setLeftPosition = _z[1];
+    var _0 = useState(false), isHovered = _0[0], setIsHovered = _0[1];
     useEffect(function () {
+        var _a;
+        setLeftPosition(((_a = sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0);
         return function () {
             if (transitionTimer.current) {
                 clearTimeout(transitionTimer.current);
@@ -95,10 +100,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     useEffect(function () {
         if (isDesktopQuery) {
             setIsOpened(true);
+            setIsCollapsable(false);
         }
         if (isNarrowDesktop || isTablet || isMobile) {
             setIsOpened(false);
         }
+        isNarrowDesktop && setIsCollapsable(true);
     }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile]);
     useEffect(function () {
         setActiveMenuItem(value);
@@ -119,33 +126,36 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var handleMouseEnter = function () {
+        setIsHovered(true);
         if ((isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen) {
             return;
         }
-        if (isNarrowDesktop || (isDesktopQuery && !isOpened)) {
+        if (isCollapsable && !isOpened && !isSeparatedMenuShown) {
             isMouseOutside && showMinimizedRoot(false);
             setIsMouseOutside(false);
         }
     };
     var handleMouseLeave = function () {
-        if (isNarrowDesktop) {
+        setIsHovered(false);
+        if (isCollapsable) {
             handleIsOpened(false, !manual);
-        }
-        if ((isNarrowDesktop || (isDesktopQuery && !isOpened)) && !manual) {
-            setIsMouseOutside(true);
+            if (!manual) {
+                setIsMouseOutside(true);
+            }
         }
     };
     var showMinimizedRootForNarrowDesktop = function (e) {
-        if (!isSeparatedMenu || !isNarrowDesktop)
+        if (!isSeparatedMenuShown || !isCollapsable || isTouchScreen)
             return;
-        if (e.clientX <= parseInt(theme.sideMenuMinimizedWidth) &&
-            mousePositionX >= parseInt(theme.sideMenuMinimizedWidth)) {
+        var relativeXCoordinate = e.clientX - leftPosition;
+        var sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
+        if (relativeXCoordinate <= sideMenuMinimizedWidth && mousePositionX >= sideMenuMinimizedWidth) {
             showMinimizedRoot(false);
         }
-        if (e.clientX > parseInt(theme.sideMenuWidth)) {
+        else if (relativeXCoordinate > parseInt(theme.sideMenuWidth)) {
             showMinimizedRoot(true);
         }
-        setMousePositionX(e.clientX);
+        setMousePositionX(relativeXCoordinate);
     };
     var switchActiveMenuItem = function (id) {
         if (id !== value) {
@@ -167,13 +177,13 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }, burgerTransitionDuration);
         }
     };
-    var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
-    var _x = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
+    var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
+    var _1 = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
         opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), shouldShowBackdrop = _x[0], backdropStyle = _x[1];
-    var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop) && isOpened;
+    }), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
+    var isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
     var setScrollBar = function () {
         var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
         if (isOpened && !isBeingTransitioned && !isSeparatedMenuShownInMobile) {
@@ -181,8 +191,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         return 'never';
     };
+    var handleRightBorderClick = function () {
+        if (isCollapsable) {
+            setIsCollapsable(false);
+        }
+        else {
+            setIsOpened(false);
+            setIsCollapsable(true);
+        }
+    };
     return (React.createElement(SideMenuContext.Provider, { value: {
             isOpened: isOpened,
+            isCollapsable: isCollapsable,
             toggleIsOpened: function () { return showMenu(!isOpened); },
             setIsMinimized: showMinimizedRoot,
             isBeingTransitioned: isBeingTransitioned,
@@ -216,10 +236,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                 _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
                 _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isOpened && isTabletOrMobile,
                 _b[jsStylesForSideMenu.transitionedRootForTabletsOrMobiles()] = isBeingTransitioned && isTabletOrMobile,
-                _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
-                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isNarrowDesktop,
-                _b[jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && isNarrowDesktop,
-                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery,
+                _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isCollapsable,
+                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isCollapsable,
+                _b[jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && isCollapsable,
+                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery && !isCollapsable,
                 _b[jsStylesForSideMenu.separatedRootForTouchScreensForDesktops(theme)] = isDesktopQuery && isSeparatedMenuShown && isTouchScreen,
                 _b)) },
             React.createElement(React.Fragment, null,
@@ -245,7 +265,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                                         _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
                                         _e[jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
                                         _e)), ref: contentWrapperRef }, children))),
-                        !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsOpened: handleIsOpened, manual: manual }))))))));
+                        !disableSwipe && !disableCollapsing && isDesktopQuery && isOpened && (React.createElement(RightBorder, { onClick: handleRightBorderClick, showButton: isHovered }))))))));
 });
 SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {

package/src/SideMenuContext.d.ts

@@ -18,6 +18,7 @@ export interface SideMenuContextType {
     isMobile?: boolean;
     isTouchScreen?: boolean;
     isOpened?: boolean;
+    isCollapsable?: boolean;
     toggleIsOpened?: () => void;
     setIsMinimized?: (isMinimized: boolean) => void;
     flattedArrayOfAllElements?: FlattedArrayElementType[];

package/src/internal/ClickableElement.js

@@ -50,10 +50,10 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var setIsMinimized = function (lastElementInTheHierarchy) {
         var _a, _b;
-        if (context.isMobile || context.isTablet || context.isDesktop)
+        if (context.isMobile || context.isTablet || (context.isDesktop && !context.isCollapsable))
             return;
         var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
-        if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
+        if (context.isCollapsable && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
             (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
         }
         if (!_isSubMenu) {
@@ -99,7 +99,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
         setIsFocusedByTab(false);
     };
     var shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
-    var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isNarrowDesktop && !context.isOpened;
+    var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isCollapsable && !context.isOpened;
     var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
     var newProps = __assign({ className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,

package/src/internal/InnerBody.js

@@ -64,7 +64,7 @@ var InnerBody = function (_a) {
             return;
         var activeItemHasParent = activeMenuItemHasParent();
         var isActive = activeItemHasParent || activeMenuItemHasChildren() || false;
-        var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop;
+        var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop && !context.isCollapsable;
         if (context.isMobile && !activeItemHasParent && context.isSeparatedMenuShown) {
             return (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
         }

package/src/internal/RightBorder.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface RightBorderProps {
-    setIsOpened: (newValue: boolean | undefined, shouldSetState: boolean) => void;
-    manual: boolean;
+    onClick: () => void;
+    showButton: boolean;
 }
 declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/RightBorder.js

@@ -1,8 +1,11 @@
-import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './RightBorder.styles';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { ThemeContext } from '@skbkontur/react-ui';
+import { Hint, ThemeContext } from '@skbkontur/react-ui';
+import { useMemoBorderIcon } from '../../hooks/useMemoIcon';
+import { SideMenuContext } from '../SideMenuContext';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
 /**
  * Элемент интерактивной правой границы
  *
@@ -10,63 +13,20 @@ import { ThemeContext } from '@skbkontur/react-ui';
  */
 var RightBorder = forwardRef(function (_a, ref) {
     var _b;
-    var setIsOpened = _a.setIsOpened, manual = _a.manual;
+    var onClick = _a.onClick, showButton = _a.showButton;
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    var resizeTimer = useRef(null);
-    var _c = useState(false), isAbleToResize = _c[0], setIsAbleToResize = _c[1];
-    var rightBorderRef = useRef(null);
-    var handleMouseEnter = function () {
-        resizeTimer.current = setTimeout(function () {
-            setIsAbleToResize(true);
-        }, 500);
-    };
-    var handleMouseLeave = function () {
-        if (resizeTimer.current) {
-            clearTimeout(resizeTimer.current);
-        }
-        setIsAbleToResize(false);
-    };
-    var isMouseDown = false, startX = 0;
-    var checkStart = function (event) {
-        startX = event.pageX;
-        isMouseDown = true;
-    };
-    var checkMove = function (event) {
-        if (!isMouseDown) {
-            return;
-        }
-        if (event.pageX < startX) {
-            setIsOpened(false, !manual);
-            isMouseDown = false;
-        }
-        return;
-    };
-    var checkEnd = function () {
-        isMouseDown = false;
-    };
-    var swipe = function (rightBorder) {
-        if (rightBorder) {
-            rightBorder.addEventListener('mousedown', checkStart);
-            rightBorder.addEventListener('mousemove', checkMove);
-            document.addEventListener('mouseup', checkEnd);
-        }
-    };
-    useEffect(function () {
-        if (rightBorderRef.current) {
-            swipe(rightBorderRef.current);
-        }
-        return function () {
-            if (rightBorderRef.current) {
-                rightBorderRef.current.removeEventListener('mousedown', checkStart, true);
-                rightBorderRef.current.removeEventListener('mousemove', checkMove, true);
-            }
-            document.removeEventListener('mouseup', checkEnd, true);
-        };
-    }, []);
-    return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
-            _b[jsStyles.resizableRoot()] = isAbleToResize,
-            _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: jsStyles.rootHovered(theme) })));
+    var context = useContext(SideMenuContext);
+    var icon = useMemoBorderIcon(context.isCollapsable);
+    var hintText = context.isCollapsable ? 'Закрепить меню' : 'Свернуть меню';
+    return (React.createElement(Hint, { text: hintText, pos: 'right' },
+        React.createElement("div", { className: cx((_b = {},
+                _b[jsStyles.root(theme)] = true,
+                _b[jsStyles.rootWithButton()] = showButton,
+                _b)), ref: ref, onClick: onClick, onKeyDown: function (e) {
+                if (e.key === 'Enter' || e.key === 'Space') {
+                    onClick();
+                }
+            }, role: "button", tabIndex: 0, "data-tid": SideMenuDataTids.rightBorder }, icon)));
 });
 RightBorder.displayName = 'RightBorder';
 var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });

package/src/internal/RightBorder.styles.d.ts

@@ -1,6 +1,5 @@
 import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
-    resizableRoot(): string;
-    rootHovered(t: SideMenuTheme): string;
+    rootWithButton(): string;
 };

package/src/internal/RightBorder.styles.js

@@ -3,15 +3,11 @@ 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      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: -", "px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: -", "px;\n      background: transparent;\n    "])), t.sideMenuRightBorderWidth, parseInt(t.sideMenuRightBorderWidth) / 2);
+        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);
     },
-    resizableRoot: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
-    },
-    rootHovered: function (t) {
-        var left = parseInt(t.sideMenuRightBorderWidth) / 2 - parseInt(t.sideMenuRightBorderHoverWidth) / 2; //левое положение подсвеченной границы: вычисляется как половина активной ширины (`10`) минус половина ширины подсвеченной границы (`1`)
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      width: ", ";\n      background: ", ";\n      height: 100%;\n      left: ", "px;\n    "], ["\n      position: absolute;\n      width: ", ";\n      background: ", ";\n      height: 100%;\n      left: ", "px;\n    "])), t.sideMenuRightBorderHoverWidth, t.sideMenuRightBorderColor, left);
+    rootWithButton: function () {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;

package/src/internal/SeparatedSubMenu.js

@@ -56,8 +56,8 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
             _b[jsStyles.root(theme)] = true,
             _b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
             _b[jsStyles.rootForDesktop()] = context.isDesktop,
-            _b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isNarrowDesktop,
-            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isNarrowDesktop,
+            _b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isCollapsable,
+            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isCollapsable,
             _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
             _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {

package/src/internal/SideMenuLogotype.js

@@ -72,7 +72,7 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
                 _d[jsStyles.logoWrapperHidden()] = !context.isOpened && !(context.isMobile || context.isTablet),
                 _d)) },
             (context.isTablet || context.isMobile) && React.createElement(Burger, null),
-            React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, !context.isOpened && context.isNarrowDesktop) }, rest)))));
+            React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, !context.isOpened && context.isCollapsable) }, rest)))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });