@skbkontur/side-menu 1.11.4-collpsing.0 → 1.11.5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
 ## [1.11.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.11.3...@skbkontur/side-menu@1.11.4) (2024-03-01)
 
 

package/README.md

@@ -1,5 +1,7 @@
 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` или выше
+
 [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
 
 ```jsx harmony
@@ -689,9 +691,9 @@ const [isOpen, setIsOpen] = React.useState(true);
   sideMenuNestedMenuPaddingLeft: string;
   //#endregion
   //#region RightBorder
-  sideMenuRightBorderWidth: string;
-  sideMenuRightBorderIconColor: string;
-  sideMenuRightBorderHoverIconColor: string;
+  MenuRightBorderWidth: string;
+  sideMenuRightBorderColor: string;
+  sideMenuRightBorderHoverWidth: string;
   // #region BackButton (for Mobiles)
   sideMenuBackButtonCaptionFontWeight: string;
   sideMenuBackButtonCaptionFontSize: string;

package/SideMenuDataTids.d.ts

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

package/SideMenuDataTids.js

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

package/hooks/useMemoIcon.d.ts

@@ -1,3 +1,2 @@
 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,7 +1,6 @@
 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) {
@@ -14,13 +13,3 @@ 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,8 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuDividerBgColor: string;
     static sideMenuNestedMenuPaddingLeft: string;
     static sideMenuRightBorderWidth: string;
-    static sideMenuRightBorderIconColor: string;
-    static sideMenuRightBorderHoverIconColor: string;
+    static get sideMenuRightBorderColor(): string;
+    static sideMenuRightBorderHoverWidth: string;
     static sideMenuLogotypePaddingLeft: string;
     static sideMenuLogotypePaddingTop: string;
     static sideMenuLogotypePaddingBottom: string;

package/internal/themes/SideMenuTheme.js

@@ -107,6 +107,13 @@ var SideMenuTheme = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SideMenuTheme, "sideMenuRightBorderColor", {
+        get: function () {
+            return this.sideMenuProductColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SideMenuTheme, "sideMenuFooterDividerColor", {
         get: function () {
             return this.sideMenuDividerBgColor;
@@ -231,9 +238,8 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuNestedMenuPaddingLeft = '16px';
     //#endregion
     //#region RightBorder
-    SideMenuTheme.sideMenuRightBorderWidth = '16px';
-    SideMenuTheme.sideMenuRightBorderIconColor = '#adadad';
-    SideMenuTheme.sideMenuRightBorderHoverIconColor = '#222222';
+    SideMenuTheme.sideMenuRightBorderWidth = '20px';
+    SideMenuTheme.sideMenuRightBorderHoverWidth = '2px';
     //#endregion
     //#region Logotype
     SideMenuTheme.sideMenuLogotypePaddingLeft = '8px';

package/package.json

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

package/src/SideMenu/SideMenu.d.ts

@@ -17,15 +17,7 @@ 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, _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 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 transitionTimer = useRef(null);
     var sideMenuRef = useRef(null);
     var contentWrapperRef = useRef(null);
@@ -43,31 +43,26 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _m = useResponsiveLayout({
+    var _l = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _m.isMobileQuery, isTabletQuery = _m.isTabletQuery, isNarrowDesktopQuery = _m.isNarrowDesktopQuery, isDesktopQuery = _m.isDesktopQuery;
+    }), isMobileQuery = _l.isMobileQuery, isTabletQuery = _l.isTabletQuery, isNarrowDesktopQuery = _l.isNarrowDesktopQuery, isDesktopQuery = _l.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 _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(false), 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];
+    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];
     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);
@@ -127,33 +122,30 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         if ((isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen) {
             return;
         }
-        setIsHovered(true);
-        if (isNarrowDesktop || (isDesktopQuery && !isOpened && isCollapsable)) {
+        if (isNarrowDesktop || (isDesktopQuery && !isOpened)) {
             isMouseOutside && showMinimizedRoot(false);
             setIsMouseOutside(false);
         }
     };
     var handleMouseLeave = function () {
-        setIsHovered(false);
-        if (isNarrowDesktop || (isDesktopQuery && isCollapsable)) {
+        if (isNarrowDesktop) {
             handleIsOpened(false, !manual);
         }
-        if ((isNarrowDesktop || (isDesktopQuery && isCollapsable)) && !manual) {
+        if ((isNarrowDesktop || (isDesktopQuery && !isOpened)) && !manual) {
             setIsMouseOutside(true);
         }
     };
     var showMinimizedRootForNarrowDesktop = function (e) {
-        if (!isSeparatedMenuShown || !(isNarrowDesktop || (isDesktopQuery && isCollapsable)) || isTouchScreen)
+        if (!isSeparatedMenu || !isNarrowDesktop)
             return;
-        var relativeXCoordinate = e.clientX - leftPosition;
-        var sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
-        if (relativeXCoordinate <= sideMenuMinimizedWidth && mousePositionX >= sideMenuMinimizedWidth) {
+        if (e.clientX <= parseInt(theme.sideMenuMinimizedWidth) &&
+            mousePositionX >= parseInt(theme.sideMenuMinimizedWidth)) {
             showMinimizedRoot(false);
         }
-        else if (relativeXCoordinate > parseInt(theme.sideMenuWidth)) {
+        if (e.clientX > parseInt(theme.sideMenuWidth)) {
             showMinimizedRoot(true);
         }
-        setMousePositionX(relativeXCoordinate);
+        setMousePositionX(e.clientX);
     };
     var switchActiveMenuItem = function (id) {
         if (id !== value) {
@@ -175,14 +167,13 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }, burgerTransitionDuration);
         }
     };
-    var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown) || (isDesktopQuery && isCollapsable)) &&
-        isOpened;
-    var _1 = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
+    var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
+    var _x = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
         opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
-    var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop || (isDesktopQuery && isCollapsable)) && isOpened;
+    }), shouldShowBackdrop = _x[0], backdropStyle = _x[1];
+    var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop) && isOpened;
     var setScrollBar = function () {
         var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
         if (isOpened && !isBeingTransitioned && !isSeparatedMenuShownInMobile) {
@@ -190,18 +181,8 @@ 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,
@@ -235,10 +216,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 || (isDesktopQuery && isCollapsable),
-                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && (isNarrowDesktop || (isDesktopQuery && isCollapsable)),
-                _b[jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && (isNarrowDesktop || (isDesktopQuery && isCollapsable)),
-                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery && !isCollapsable,
+                _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.separatedRootForTouchScreensForDesktops(theme)] = isDesktopQuery && isSeparatedMenuShown && isTouchScreen,
                 _b)) },
             React.createElement(React.Fragment, null,
@@ -264,7 +245,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                                         _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
                                         _e[jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
                                         _e)), ref: contentWrapperRef }, children))),
-                        !disableSwipe && !disableCollapsing && isDesktopQuery && isOpened && (React.createElement(RightBorder, { onClick: handleRightBorderClick, showButton: isHovered }))))))));
+                        !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsOpened: handleIsOpened, manual: manual }))))))));
 });
 SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {

package/src/SideMenuContext.d.ts

@@ -18,7 +18,6 @@ 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,11 +50,10 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var setIsMinimized = function (lastElementInTheHierarchy) {
         var _a, _b;
-        if (context.isMobile || context.isTablet || (context.isDesktop && !context.isCollapsable))
+        if (context.isMobile || context.isTablet || context.isDesktop)
             return;
         var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
-        if ((context.isNarrowDesktop || (context.isCollapsable && context.isDesktop)) &&
-            (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
+        if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
             (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
         }
         if (!_isSubMenu) {

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 && !context.isCollapsable;
+        var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop;
         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 {
-    onClick: () => void;
-    showButton: boolean;
+    setIsOpened: (newValue: boolean | undefined, shouldSetState: boolean) => void;
+    manual: boolean;
 }
 declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/RightBorder.js

@@ -1,11 +1,8 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './RightBorder.styles';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { Hint, ThemeContext } from '@skbkontur/react-ui';
-import { useMemoBorderIcon } from '../../hooks/useMemoIcon';
-import { SideMenuContext } from '../SideMenuContext';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Элемент интерактивной правой границы
  *
@@ -13,20 +10,63 @@ import { SideMenuDataTids } from '../../SideMenuDataTids';
  */
 var RightBorder = forwardRef(function (_a, ref) {
     var _b;
-    var onClick = _a.onClick, showButton = _a.showButton;
+    var setIsOpened = _a.setIsOpened, manual = _a.manual;
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    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)));
+    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) })));
 });
 RightBorder.displayName = 'RightBorder';
 var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });

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

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

package/src/internal/RightBorder.styles.js

@@ -3,11 +3,15 @@ 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      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);
     },
-    rootWithButton: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
+    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);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/src/internal/SeparatedSubMenu.js

@@ -56,10 +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 || (context.isDesktop && context.isCollapsable)),
-            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isNarrowDesktop || (context.isDesktop && context.isCollapsable),
+            _b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isNarrowDesktop,
+            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isNarrowDesktop,
             _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
             _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {