@skbkontur/side-menu 0.6.2 → 0.7.1

package/src/internal/InnerBody.styles.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    innerBodyDivider: function () {
+    divider: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: #d6d6d6;\n      margin-left: 8px;\n      margin-right: 8px;\n    "], ["\n      background: #d6d6d6;\n      margin-left: 8px;\n      margin-right: 8px;\n    "])));
     },
 };

package/src/internal/ItemContent/Caption.js

@@ -6,20 +6,20 @@ export var Caption = forwardRef(function (_a, ref) {
     var _b;
     var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
-    var isTransitioned = context.isTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
+    var isBeingTransitioned = context.isBeingTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
     return (React.createElement("p", { className: cx((_b = {},
-            _b[jsStyles.caption()] = true,
-            _b[jsStyles.captionTransitioned()] = isTransitioned,
-            _b[jsStyles.subCaption()] = _isSubMenu,
-            _b[jsStyles.subCaptionSeparatedMenuFirstLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
-            _b[jsStyles.nestedSubCaptionSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
-            _b[jsStyles.captionWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
-            _b[jsStyles.subCaptionWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
-            _b[jsStyles.captionLarge()] = size === 'large',
-            _b[jsStyles.captionMultiline()] = isMultiline,
-            _b[jsStyles.captionForTouchScreens()] = isTouchScreen,
-            _b[jsStyles.subCaptionForTouchScreens()] = isTouchScreen && _isSubMenu,
-            _b[jsStyles.captionInBackButton()] = _isBackButton,
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu,
+            _b[jsStyles.rootSubItem()] = _isSubMenu,
+            _b[jsStyles.rootSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
+            _b[jsStyles.rootNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
+            _b[jsStyles.rootWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
+            _b[jsStyles.rootSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
+            _b[jsStyles.rootLarge()] = size === 'large',
+            _b[jsStyles.rootMultiline()] = isMultiline,
+            _b[jsStyles.rootForTouchScreens()] = isTouchScreen,
+            _b[jsStyles.rootSubItemForTouchScreens()] = isTouchScreen && _isSubMenu,
+            _b[jsStyles.rootInBackButton()] = _isBackButton,
             _b)), ref: ref }, caption));
 });
 Caption.displayName = 'Caption';

package/src/internal/ItemContent/Caption.styles.d.ts

@@ -1,14 +1,14 @@
 export declare const jsStyles: {
-    caption(): string;
-    captionTransitioned(): string;
-    captionMultiline(): string;
-    captionForTouchScreens(): string;
-    subCaption(): string;
-    subCaptionForTouchScreens(): string;
-    subCaptionSeparatedMenuFirstLevel(): string;
-    nestedSubCaptionSeparatedMenu(): string;
-    captionWithoutItemIcon(): string;
-    subCaptionWithoutColumnIcons(): string;
-    captionLarge(): string;
-    captionInBackButton(): string;
+    root(): string;
+    rootBeingTransitioned(): string;
+    rootMultiline(): string;
+    rootForTouchScreens(): string;
+    rootSubItem(): string;
+    rootSubItemForTouchScreens(): string;
+    rootSubItemSeparatedMenuTopLevel(): string;
+    rootNestedItemSeparatedMenu(): string;
+    rootWithoutItemIcon(): string;
+    rootSubItemWithoutColumnIcons(): string;
+    rootLarge(): string;
+    rootInBackButton(): string;
 };

package/src/internal/ItemContent/Caption.styles.js

@@ -1,40 +1,40 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    caption: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
     },
-    captionTransitioned: function () {
+    rootBeingTransitioned: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));
     },
-    captionMultiline: function () {
+    rootMultiline: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
-    captionForTouchScreens: function () {
+    rootForTouchScreens: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 18px;\n      line-height: 24px;\n    "], ["\n      font-size: 18px;\n      line-height: 24px;\n    "])));
     },
-    subCaption: function () {
+    rootSubItem: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
     },
-    subCaptionForTouchScreens: function () {
+    rootSubItemForTouchScreens: function () {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
     },
-    subCaptionSeparatedMenuFirstLevel: function () {
+    rootSubItemSeparatedMenuTopLevel: function () {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
     },
-    nestedSubCaptionSeparatedMenu: function () {
+    rootNestedItemSeparatedMenu: function () {
         return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
     },
-    captionWithoutItemIcon: function () {
+    rootWithoutItemIcon: function () {
         return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
-    subCaptionWithoutColumnIcons: function () {
+    rootSubItemWithoutColumnIcons: function () {
         return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
-    captionLarge: function () {
+    rootLarge: function () {
         return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "], ["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "])));
     },
-    captionInBackButton: function () {
+    rootInBackButton: function () {
         return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "], ["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "])));
     },
 };

package/src/internal/ItemContent/Icon.js

@@ -13,14 +13,14 @@ export var Icon = function (_a) {
         color: _isSubMenu ? '#858585' : undefined,
         disableCompensation: !_isBackButton,
         className: cx((_b = {},
-            _b[jsStyles.icon()] = true,
-            _b[jsStyles.iconMultiline()] = isMultiline,
-            _b[jsStyles.iconLarge()] = size === 'large',
-            _b[jsStyles.iconMultilineLarge()] = size === 'large' && isMultiline,
-            _b[jsStyles.iconSubItem()] = _isSubMenu,
-            _b[jsStyles.iconSubItemSeparatedMenu()] = isSeparatedMenu && _isSubMenu,
-            _b[jsStyles.iconSubItemLarge()] = _isSubMenu && size === 'large',
-            _b[jsStyles.iconBackButton()] = _isBackButton,
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.rootMultiline()] = isMultiline && !context.isMinimized,
+            _b[jsStyles.rootLarge()] = size === 'large',
+            _b[jsStyles.rootMultilineLarge()] = size === 'large' && isMultiline,
+            _b[jsStyles.rootSubItem()] = _isSubMenu,
+            _b[jsStyles.rootSubItemSeparatedMenu()] = isSeparatedMenu && _isSubMenu,
+            _b[jsStyles.rootSubItemLarge()] = _isSubMenu && size === 'large',
+            _b[jsStyles.rootBackButton()] = _isBackButton,
             _b)),
     });
 };

package/src/internal/ItemContent/Icon.styles.d.ts

@@ -1,10 +1,10 @@
 export declare const jsStyles: {
-    icon(): string;
-    iconMultiline(): string;
-    iconLarge(): string;
-    iconMultilineLarge(): string;
-    iconSubItemLarge(): string;
-    iconSubItem(): string;
-    iconSubItemSeparatedMenu(): string;
-    iconBackButton(): string;
+    root(): string;
+    rootMultiline(): string;
+    rootLarge(): string;
+    rootMultilineLarge(): string;
+    rootSubItemLarge(): string;
+    rootSubItem(): string;
+    rootSubItemSeparatedMenu(): string;
+    rootBackButton(): string;
 };

package/src/internal/ItemContent/Icon.styles.js

@@ -1,28 +1,28 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    icon: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "])));
     },
-    iconMultiline: function () {
+    rootMultiline: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
     },
-    iconLarge: function () {
+    rootLarge: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
     },
-    iconMultilineLarge: function () {
+    rootMultilineLarge: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-height: 0;\n    "], ["\n      min-height: 0;\n    "])));
     },
-    iconSubItemLarge: function () {
+    rootSubItemLarge: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
     },
-    iconSubItem: function () {
+    rootSubItem: function () {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
     },
-    iconSubItemSeparatedMenu: function () {
+    rootSubItemSeparatedMenu: function () {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
     },
-    iconBackButton: function () {
+    rootBackButton: function () {
         return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-left: 10px;\n      padding-right: 6px;\n    "], ["\n      padding-left: 10px;\n      padding-right: 6px;\n    "])));
     },
 };

package/src/internal/ItemContent/ItemContent.js

@@ -18,21 +18,21 @@ var ItemContent = forwardRef(function (_a, ref) {
     var _c = useState(false), isMultiline = _c[0], setIsMultiline = _c[1];
     useEffect(function () {
         !_isBackButton && useNumberOfTextLinesInItem(textRef, setIsMultiline);
-    }, [textRef.current]);
+    }, [textRef.current, context.isBeingTransitioned]);
     var hasShortcutImage = !!icon || !!_avatar;
     return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.itemWrapper()] = true,
-            _b[jsStyles.itemMultilineWrapper()] = isMultiline,
-            _b[jsStyles.subItemWrapper()] = _isSubMenu,
-            _b[jsStyles.itemLargeWrapper()] = context.size === 'large',
-            _b[jsStyles.subItemLargeWrapper()] = context.size === 'large' && _isSubMenu,
-            _b[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
-            _b[jsStyles.itemWrapperForTouchScreens()] = context.isTouchScreen,
-            _b[jsStyles.subItemWrapperForTouchScreens()] = context.isTouchScreen && _isSubMenu,
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.multilineRoot()] = isMultiline,
+            _b[jsStyles.subItemRoot()] = _isSubMenu,
+            _b[jsStyles.largeRoot()] = context.size === 'large',
+            _b[jsStyles.subItemLargeRoot()] = context.size === 'large' && _isSubMenu,
+            _b[jsStyles.largeMultilineRoot()] = isMultiline && context.size === 'large',
+            _b[jsStyles.rootForTouchScreens()] = context.isTouchScreen,
+            _b[jsStyles.subItemRootForTouchScreens()] = context.isTouchScreen && _isSubMenu,
             _b)), ref: ref },
         icon && React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton }),
         _avatar && React.createElement(Avatar, { _avatar: _avatar }),
-        !context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
+        (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, _isBackButton: _isBackButton, ref: textRef }),
             marker && React.createElement(Marker, { isMultiline: isMultiline, marker: marker })))));
 });

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

@@ -1,11 +1,11 @@
 export declare const jsStyles: {
-    itemWrapper(): string;
-    itemMultilineWrapper(): string;
-    itemLargeWrapper(): string;
-    subItemLargeWrapper(): string;
-    itemLargeMultilineWrapper(): string;
-    itemWrapperForTouchScreens(): string;
-    subItemWrapperForTouchScreens(): string;
-    subItemWrapper(): string;
+    root(): string;
+    multilineRoot(): string;
+    largeRoot(): string;
+    subItemLargeRoot(): string;
+    largeMultilineRoot(): string;
+    rootForTouchScreens(): string;
+    subItemRootForTouchScreens(): string;
+    subItemRoot(): string;
     textAndMarkerWrapper(): string;
 };

package/src/internal/ItemContent/ItemContent.styles.js

@@ -1,28 +1,28 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    itemWrapper: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
-    itemMultilineWrapper: function () {
+    multilineRoot: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
-    itemLargeWrapper: function () {
+    largeRoot: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "], ["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "])));
     },
-    subItemLargeWrapper: function () {
+    subItemLargeRoot: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
     },
-    itemLargeMultilineWrapper: function () {
+    largeMultilineRoot: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
-    itemWrapperForTouchScreens: function () {
+    rootForTouchScreens: function () {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
-    subItemWrapperForTouchScreens: function () {
+    subItemRootForTouchScreens: function () {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
     },
-    subItemWrapper: function () {
+    subItemRoot: function () {
         return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
     textAndMarkerWrapper: function () {

package/src/internal/ItemContent/Marker.js

@@ -5,7 +5,7 @@ export var Marker = function (_a) {
     var _b;
     var isMultiline = _a.isMultiline, marker = _a.marker;
     return (React.createElement("span", { className: cx((_b = {},
-            _b[jsStyles.marker()] = true,
-            _b[jsStyles.markerMultiline()] = isMultiline,
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.rootMultiline()] = isMultiline,
             _b)) }, marker));
 };

package/src/internal/ItemContent/Marker.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const jsStyles: {
-    marker(): string;
-    markerMultiline(): string;
+    root(): string;
+    rootMultiline(): string;
 };

package/src/internal/ItemContent/Marker.styles.js

@@ -1,10 +1,10 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    marker: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "], ["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "])));
     },
-    markerMultiline: function () {
+    rootMultiline: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
 };

package/src/internal/NestedMenu.js

@@ -9,7 +9,7 @@ import { isClickableSubElement } from '../../utils/scripts';
 var NestedMenu = forwardRef(function (_a, ref) {
     var _generatedId = _a._generatedId, children = _a.children;
     var levelIndex = 0;
-    return (React.createElement("div", { className: jsStyles.nestedMenu() }, React.Children.map(children, function (child) {
+    return (React.createElement("div", { className: jsStyles.root() }, React.Children.map(children, function (child) {
         if (React.isValidElement(child) &&
             // @ts-expect-error: accessing private property
             isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    nestedMenu(): string;
+    root(): string;
 };

package/src/internal/NestedMenu.styles.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    nestedMenu: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
     },
 };

package/src/internal/RightBorder.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface RightBorderProps {
-    setIsMinimised: (value: boolean) => void;
+    setIsMinimized: (value: boolean) => void;
 }
 declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/RightBorder.js

@@ -9,7 +9,7 @@ import { SideMenuContext } from '../SideMenuContext';
  */
 var RightBorder = forwardRef(function (_a, ref) {
     var _b;
-    var setIsMinimised = _a.setIsMinimised;
+    var setIsMinimized = _a.setIsMinimized;
     var context = useContext(SideMenuContext);
     var resizeTimer = null;
     var _c = useState(false), isAbleToResize = _c[0], setIsAbleToResize = _c[1];
@@ -35,7 +35,7 @@ var RightBorder = forwardRef(function (_a, ref) {
             return;
         }
         if (event.pageX < startX && isAbleToResize) {
-            setIsMinimised(true);
+            setIsMinimized(true);
         }
         return;
     };
@@ -62,9 +62,9 @@ var RightBorder = forwardRef(function (_a, ref) {
         };
     });
     return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.rightBorder()] = true,
-            _b[jsStyles.resizableRightBorder()] = isAbleToResize,
-            _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: customStyles.rightBorderHovered(context.productColor) })));
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.resizableRoot()] = isAbleToResize,
+            _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: customStyles.rootHovered(context.productColor) })));
 });
 RightBorder.displayName = 'RightBorder';
 var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });

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

@@ -1,7 +1,7 @@
 export declare const customStyles: {
-    rightBorderHovered(color?: string | undefined): string;
+    rootHovered(color?: string | undefined): string;
 };
 export declare const jsStyles: {
-    rightBorder(): string;
-    resizableRightBorder(): string;
+    root(): string;
+    resizableRoot(): string;
 };

package/src/internal/RightBorder.styles.js

@@ -1,15 +1,15 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    rightBorder: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "])));
     },
-    resizableRightBorder: function () {
+    resizableRoot: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
     },
 };
 export var customStyles = {
-    rightBorderHovered: function (color) {
+    rootHovered: function (color) {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "], ["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "])), color);
     },
 };

package/src/internal/SeparatedSubMenu.js

@@ -9,6 +9,7 @@ import { BackButton } from './BackButton';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { useMobileSeparatedMenuScroll } from '../../hooks/useMobileSeparatedMenuScroll';
+import { isIE11 } from '@skbkontur/react-ui/lib/client';
 /**
  * Отдельностоящее подменю
  *
@@ -32,11 +33,16 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     };
     var separatedMenuRef = useMobileSeparatedMenuScroll();
     var levelIndex = 0;
+    var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
+    var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
     return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.root()] = true,
-            _b[jsStyles.rootForTouchScreens()] = context.isTouchScreen,
-            _b[jsStylesForSeparatedSubMenu.separatedSubMenu()] = true,
-            _b[jsStylesForSeparatedSubMenu.separatedSubMenuForMobiles()] = context.isMobile,
+            _b[jsStyles.container()] = true,
+            _b[jsStyles.containerForTouchScreens()] = context.isTouchScreen,
+            _b[jsStylesForSeparatedSubMenu.root()] = true,
+            _b[jsStylesForSeparatedSubMenu.rootForMobiles()] = context.isMobile,
+            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlay()] = context.separatedMenuWithoutOverlay && context.isDesktop,
+            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlayForNarrowDesktop()] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
+            _b[jsStylesForSeparatedSubMenu.rootWithShadow()] = isSeparatedSubMenuOverContent,
             _b)), ref: mergeRefs([separatedMenuRef, ref]), "data-tid": SideMenuDataTids.separatedSubMenu },
         context.isMobile && React.createElement(BackButton, { caption: caption, id: id, href: href, generatedId: generatedId }),
         React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {

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

@@ -1,4 +1,7 @@
 export declare const jsStylesForSeparatedSubMenu: {
-    separatedSubMenu(): string;
-    separatedSubMenuForMobiles(): string;
+    root(): string;
+    rootForMobiles(): string;
+    rootWithoutOverlayForNarrowDesktop(): string;
+    rootWithoutOverlay(): string;
+    rootWithShadow(): string;
 };

package/src/internal/SeparatedSubMenu.styles.js

@@ -1,13 +1,23 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { sideMenuBoxShadow, sideMenuMinimizedWidth, sideMenuStandardWidth } from '../SideMenu/SideMenu.styles';
 var styles = {
-    separatedSubMenu: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "])));
     },
-    separatedSubMenuForMobiles: function () {
+    rootForMobiles: function () {
         var headerHeight = '68px';
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n      padding-top: 0;\n    "], ["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n      padding-top: 0;\n    "])), headerHeight, headerHeight);
     },
+    rootWithoutOverlayForNarrowDesktop: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), sideMenuMinimizedWidth);
+    },
+    rootWithoutOverlay: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), sideMenuStandardWidth);
+    },
+    rootWithShadow: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: ", ";\n      clip-path: inset(0 -24px 0 0);\n      border-right: none;\n    "], ["\n      box-shadow: ", ";\n      clip-path: inset(0 -24px 0 0);\n      border-right: none;\n    "])), sideMenuBoxShadow);
+    },
 };
 export var jsStylesForSeparatedSubMenu = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/src/internal/SideMenuLogotype.js

@@ -42,8 +42,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     var getStaticIconPath = function () {
         return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-32.svg";
     };
-    if (context.isMinimised || context.isTransitioned) {
-        return React.createElement("img", { className: jsStyles.logotypeIcon(), src: iconUrl || getStaticIconPath(), alt: productName });
+    if (context.isMinimized || context.isBeingTransitioned) {
+        return React.createElement("img", { className: jsStyles.icon(), src: iconUrl || getStaticIconPath(), alt: productName });
     }
     var getWidget = function (withWidget, isTouchScreen, showWidget) {
         if (withWidget !== undefined) {
@@ -54,7 +54,7 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
         }
         return showWidget;
     };
-    return (React.createElement("div", { className: jsStyles.logotypeWrapper(), ref: ref },
+    return (React.createElement("div", { className: jsStyles.root(), ref: ref },
         (context.isTablet || context.isMobile) && React.createElement(Burger, null),
         React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.showWidget) }, rest))));
 });

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

@@ -1,4 +1,4 @@
 export declare const jsStyles: {
-    logotypeIcon(): string;
-    logotypeWrapper(): string;
+    icon(): string;
+    root(): string;
 };

package/src/internal/SideMenuLogotype.styles.js

@@ -1,10 +1,10 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    logotypeIcon: function () {
+    icon: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
     },
-    logotypeWrapper: function () {
+    root: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
     },
 };

package/src/internal/SubMenu.d.ts

@@ -4,7 +4,7 @@ interface SubMenuProps {
     generatedId?: string;
     isOpened?: boolean;
     isSubMenu?: boolean;
-    isMinimised?: boolean;
+    isMinimized?: boolean;
     isSeparatedMenu?: boolean;
     id?: string;
     href?: string;

package/src/internal/SubMenu.js

@@ -1,14 +1,17 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { SeparatedSubMenu } from './SeparatedSubMenu';
 import { InnerSubMenu } from './InnerSubMenu';
+import { SideMenuContext } from '../SideMenuContext';
 /**
  * Подменю
  *
  * @visibleName InnerSubMenu
  */
 var SubMenu = forwardRef(function (_a, ref) {
-    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimised = _a.isMinimised, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
-    if (!children || !isOpened || isSubMenu || isMinimised) {
+    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimized = _a.isMinimized, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
+    var context = useContext(SideMenuContext);
+    var shouldHideOverlayMenu = isMinimized && !context.separatedMenuWithoutOverlay;
+    if (!children || !isOpened || isSubMenu || shouldHideOverlayMenu) {
         return null;
     }
     if (isSeparatedMenu) {

package/utils/scripts.d.ts

@@ -7,6 +7,6 @@ export declare const getAllParents: (id: string, flattedArrayOfAllElements: Flat
 export declare const getChildrenIdArray: (childrenArray: FlattedArrayElementType[], id: string, isIdGenerated?: boolean) => string[];
 export declare const getElementsChildren: (element: ReactElement, levelIndex: string) => FlattedArrayElementType[];
 export declare const isParentOpened: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean | "" | undefined;
-export declare const isIdActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
-export declare const isTouchScreen: () => boolean;
+export declare const isElementActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
+export declare const isTouchDevice: () => boolean;
 export declare const getIconSize: (_isSubMenu?: boolean | undefined, _isBackButton?: boolean | undefined) => 24 | 16 | undefined;