@skbkontur/side-menu 0.2.4 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.5...@skbkontur/side-menu@0.3.0) (2022-11-03)
+
+
+### Features
+
+* **logos:** optimize svgo config ([753c221](https://git.skbkontur.ru/ui/ui-parking/commits/753c221300358e8196c11d36923eac8445ec93a1))
+
+
+
+
+
+## [0.2.5](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.2...@skbkontur/side-menu@0.2.5) (2022-10-17)
+
+
+### Bug Fixes
+
+* **importer.tsx:** fix validation column after remove row ([b81b7b8](https://git.skbkontur.ru/ui/ui-parking/commits/b81b7b83e93194279dae53d3ee5c4550d98163a8))
+* **importer.tsx:** validation columns after matching data ([4440160](https://git.skbkontur.ru/ui/ui-parking/commits/44401601a77a6f5c672ad87ef8f1a00b9640ec79))
+
+
+
+
+
 ## [0.2.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.2...@skbkontur/side-menu@0.2.4) (2022-10-14)
 
 

package/README.md

@@ -15,6 +15,7 @@ import {
   BookmarkIcon24Regular,
   StackHDownIcon24Regular,
   SettingsGearIcon24Regular,
+  FaceAHappyIcon24Regular
 } from '@skbkontur/icons';
 
 <div style={{height: '600px'}}>
@@ -34,7 +35,7 @@ import {
                 <SideMenu.SubItem caption={'Требуют обработки'}/>
                 <SideMenu.SubItem caption={'Обработанные'}/>
             </SideMenu.Item>
-            <SideMenu.Item caption={'Контрагенты'}/>
+            <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
             <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
                 <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
                 <SideMenu.SubItem caption={'Исходящие'}/>
@@ -83,8 +84,14 @@ import { Buhgalteria, Kontur } from '@skbkontur/logos';
 import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
 import {
+  DocTextIcon24Regular,
+  CommentRectTextIcon24Regular,
+  LightbulbIcon24Regular,
+  BookOpenTextIcon24Regular,
+  BookmarkIcon24Regular,
   StackHDownIcon24Regular,
   SettingsGearIcon24Regular,
+  FaceAHappyIcon24Regular
 } from '@skbkontur/icons';
 
 const [opened, setOpened] = React.useState(false);
@@ -111,10 +118,10 @@ const renderModal = () => {
 }
 
 <div style={{height: '600px', width: '100%'}}>
-  <SideMenu isSeparatedMenu={true}>
+  <SideMenu isSeparatedMenu={true} disableSwipe={true}>
     <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
     <SideMenu.Body>
-      <SideMenu.Item caption={'Документы'} marker={'новое'}>
+      <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
         <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
           <SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
             <SideMenu.SubItem caption={'Входящие11'}>
@@ -144,18 +151,18 @@ const renderModal = () => {
         <SideMenu.SubItem caption={'Требуют обработки'}/>
         <SideMenu.SubItem caption={'Обработанные'}/>
       </SideMenu.Item>
-      <SideMenu.Item caption={'Контрагенты'}/>
-      <SideMenu.Item caption={'Сообщения'} marker={'5'}>
+      <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
+      <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
         <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
         <SideMenu.SubItem caption={'Исходящие'}/>
         <SideMenu.SubItem caption={'Внутренние'}/>
         <SideMenu.SubItem caption={'Черновики'}/>
         <SideMenu.SubItem caption={'Удаленные'}/>
       </SideMenu.Item>
-      <SideMenu.Item caption={'Справочная'}/>
+      <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
       <SideMenu.Divider />
-      <SideMenu.Item caption={'Еще раздел'}/>
-      <SideMenu.Item caption={'Отчетность'}/>
+      <SideMenu.Item icon={<BookOpenTextIcon24Regular/>}  caption={'Еще раздел'}/>
+      <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
     </SideMenu.Body>
     <SideMenu.Footer>
       <div>

package/package.json

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

package/src/InnerSubMenu.js

@@ -8,7 +8,7 @@ var InnerSubMenu = forwardRef(function (_a, ref) {
     var children = _a.children, id = _a.id;
     return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
-            return React.cloneElement(child, { parent: id, ref: ref });
+            return React.cloneElement(child, { _parent: id, ref: ref });
         }
         return child;
     })));

package/src/SeparatedSubMenu.js

@@ -25,17 +25,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
         });
     };
     return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.separatedMenu()] = true, _b)), ref: ref },
-        React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {
-            if (React.isValidElement(child)) {
-                // @ts-expect-error: accessing private property
-                if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItemHeader' && !hasSubItems(children)) {
-                    return React.cloneElement(child, {
-                        className: jsStyles.subItemHeaderWithoutIcons(),
-                    });
-                }
-                return child;
-            }
-        }))));
+        React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, children)));
 });
 SeparatedSubMenu.displayName = 'SeparatedSubMenu';
 var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });

package/src/SideMenu.d.ts

@@ -13,6 +13,7 @@ export interface SideMenuProps extends CommonProps {
     children?: React.ReactNode;
     size?: 'small' | 'large';
     isSeparatedMenu?: boolean;
+    disableSwipe?: boolean;
 }
 interface SubComponents {
     Body: typeof SideMenuBody;

package/src/SideMenu.js

@@ -19,15 +19,17 @@ export var SideMenuDataTids = {
 };
 var SideMenu = forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.isSeparatedMenu, isSeparatedMenu = _e === void 0 ? false : _e, className = _a.className, rest = __rest(_a, ["children", "size", "isSeparatedMenu", "className"]);
+    var children = _a.children, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.isSeparatedMenu, isSeparatedMenu = _e === void 0 ? false : _e, className = _a.className, _f = _a.disableSwipe, disableSwipe = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "size", "isSeparatedMenu", "className", "disableSwipe"]);
     var scrollTimer = null;
     var transitionTimer = null;
-    var _f = useState(false), isMinimised = _f[0], setIsMinimised = _f[1];
-    var _g = useState(null), activeItem = _g[0], setActiveItem = _g[1];
-    var _h = useState(null), activeSubItem = _h[0], setActiveSubItem = _h[1];
-    var _j = useState(false), hasScrollBar = _j[0], setHasScrollBar = _j[1];
-    var _k = useState(false), isTransitioned = _k[0], setIsTransitioned = _k[1];
-    var _l = useState('#2291ff'), productColor = _l[0], setProductColor = _l[1];
+    var widgetTimer;
+    var _g = useState(false), isMinimised = _g[0], setIsMinimised = _g[1];
+    var _h = useState(null), activeItem = _h[0], setActiveItem = _h[1];
+    var _j = useState(null), activeSubItem = _j[0], setActiveSubItem = _j[1];
+    var _k = useState(false), hasScrollBar = _k[0], setHasScrollBar = _k[1];
+    var _l = useState(false), isTransitioned = _l[0], setIsTransitioned = _l[1];
+    var _m = useState('#2291ff'), productColor = _m[0], setProductColor = _m[1];
+    var _o = useState(false), showWidget = _o[0], setShowWidget = _o[1];
     useEffect(function () {
         return function () {
             if (scrollTimer) {
@@ -62,6 +64,17 @@ var SideMenu = forwardRef(function (_a, ref) {
             setHasScrollBar(false);
         }, 200);
     };
+    var handleMouseEnter = function () {
+        widgetTimer = setTimeout(function () {
+            setShowWidget(true);
+        }, 500);
+    };
+    var handleMouseLeave = function () {
+        if (widgetTimer) {
+            clearTimeout(widgetTimer);
+        }
+        setShowWidget(false);
+    };
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimised: isMinimised,
             isTransitioned: isTransitioned,
@@ -73,8 +86,9 @@ var SideMenu = forwardRef(function (_a, ref) {
             activeSubItem: activeSubItem,
             setActiveSubItem: setActiveSubItem,
             setProductColor: setProductColor,
+            showWidget: showWidget,
         } },
-        React.createElement("aside", __assign({ className: cx((_b = {}, _b[jsStyles.rootWrapper()] = true, _b[jsStyles.rootWrapperIE()] = isIE11, _b), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest),
+        React.createElement("aside", __assign({ className: cx((_b = {}, _b[jsStyles.rootWrapper()] = true, _b[jsStyles.rootWrapperIE()] = isIE11, _b), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
             React.createElement("div", { className: cx((_c = {},
                     _c[jsStyles.root()] = true,
                     _c[jsStyles.rootSafari()] = isSafari,
@@ -82,7 +96,7 @@ var SideMenu = forwardRef(function (_a, ref) {
                     _c[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
                     _c[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
                     _c)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll }, children),
-            React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
+            !disableSwipe && React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
 });
 SideMenu.displayName = 'SideMenu';
 var STATIC_PROPS = {

package/src/SideMenu.styles.d.ts

@@ -25,15 +25,14 @@ export declare const jsStyles: {
     itemLargeWrapper(): string;
     subItemLargeWrapper(): string;
     itemLargeMultilineWrapper(): string;
-    itemLargeWrapperWithoutIcon(): string;
     subItemWrapper(): string;
-    itemWrapperWithoutIcon(): string;
     itemText(): string;
     itemTextTransitioned(): string;
     itemTextMultiline(): string;
     subItemText(): string;
+    subItemTextSeparatedMenuFirstLevel(): string;
+    nestedSubItemTextSeparatedMenu(): string;
     itemTextWithoutItemIcon(): string;
-    itemTextWithoutColumnIcons(): string;
     subItemTextWithoutColumnIcons(): string;
     itemTextLarge(): string;
     dividerInDropdown(): string;
@@ -41,18 +40,21 @@ export declare const jsStyles: {
     icon(): string;
     iconMultiline(): string;
     iconLarge(): string;
+    iconMultilineLarge(): string;
     iconSubItemLarge(): string;
     iconSubItem(): string;
+    iconSubItemSeparatedMenu(): string;
     avatarIcon(): string;
     headerIcon(): string;
     marker(): string;
     textAndMarkerWrapper(): string;
     markerMultiline(): string;
     subItemHeader(): string;
-    subItemHeaderWithoutIcons(): string;
+    subItemHeaderInSeparatedSubMenu(): string;
     separatedMenu(): string;
     dropdownWrapper(): string;
     dropdownLabel(): string;
+    dropdownLabelMinimized(): string;
     subItemMenu(): string;
     rightBorder(): string;
 };

package/src/SideMenu.styles.js

@@ -1,5 +1,6 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var subItemTextSeparatedMenuFirstLevelXMargin = '8px';
 var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
@@ -20,7 +21,8 @@ var styles = {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     rootWrapperIE: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: relative;\n      top: -15px;\n    "], ["\n      position: relative;\n      top: -15px;\n    "])));
+        var ieRootWrapperCorrection = 15;
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
     resizableRightBorder: function () {
         return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
@@ -70,53 +72,53 @@ var styles = {
     itemLargeMultilineWrapper: function () {
         return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
-    itemLargeWrapperWithoutIcon: function () {
-        return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      padding-top: 13px !important;\n      padding-bottom: 13px !important;\n    "], ["\n      padding-top: 13px !important;\n      padding-bottom: 13px !important;\n    "])));
-    },
     subItemWrapper: function () {
-        return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
-    },
-    itemWrapperWithoutIcon: function () {
-        return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      min-height: 20px;\n      padding-top: 10px !important;\n      padding-bottom: 10px !important;\n    "], ["\n      min-height: 20px;\n      padding-top: 10px !important;\n      padding-bottom: 10px !important;\n    "])));
+        return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
     itemText: function () {
-        return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
+        return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
     },
     itemTextTransitioned: function () {
-        return css(templateObject_28 || (templateObject_28 = __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    "])));
+        return css(templateObject_26 || (templateObject_26 = __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    "])));
     },
     itemTextMultiline: function () {
-        return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
     subItemText: function () {
-        return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
+        return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
+    },
+    subItemTextSeparatedMenuFirstLevel: function () {
+        return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      margin: 0 ", ";\n    "], ["\n      margin: 0 ", ";\n    "])), subItemTextSeparatedMenuFirstLevelXMargin);
+    },
+    nestedSubItemTextSeparatedMenu: function () {
+        return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      margin: 0 20px;\n    "], ["\n      margin: 0 20px;\n    "])));
     },
     itemTextWithoutItemIcon: function () {
         return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
-    itemTextWithoutColumnIcons: function () {
-        return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      margin-left: 12px;\n    "], ["\n      margin-left: 12px;\n    "])));
-    },
     subItemTextWithoutColumnIcons: function () {
-        return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+        return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
     itemTextLarge: function () {
-        return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+        return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
     },
     dividerInDropdown: function () {
-        return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "], ["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "])));
+        return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "], ["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "])));
     },
     dividerInSideMenu: function () {
-        return css(templateObject_36 || (templateObject_36 = __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    "])));
+        return css(templateObject_35 || (templateObject_35 = __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    "])));
     },
     icon: function () {
-        return css(templateObject_37 || (templateObject_37 = __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    "])));
+        return css(templateObject_36 || (templateObject_36 = __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 () {
-        return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
+        return css(templateObject_37 || (templateObject_37 = __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 () {
-        return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
+        return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
+    },
+    iconMultilineLarge: function () {
+        return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      min-height: 0;\n    "], ["\n      min-height: 0;\n    "])));
     },
     iconSubItemLarge: function () {
         return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
@@ -124,47 +126,53 @@ var styles = {
     iconSubItem: function () {
         return css(templateObject_41 || (templateObject_41 = __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 () {
+        return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
+    },
     avatarIcon: function () {
-        return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+        return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      margin: 0 4px;\n      padding: 0;\n    "], ["\n      margin: 0 4px;\n      padding: 0;\n    "])));
     },
     headerIcon: function () {
-        return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+        return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
     },
     marker: function () {
-        return css(templateObject_44 || (templateObject_44 = __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    "])));
+        return css(templateObject_45 || (templateObject_45 = __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    "])));
     },
     textAndMarkerWrapper: function () {
-        return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
+        return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
     },
     markerMultiline: function () {
-        return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
     subItemHeader: function () {
-        return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "], ["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "])));
+        return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "], ["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "])));
     },
-    subItemHeaderWithoutIcons: function () {
-        return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      padding-left: 8px;\n    "], ["\n      padding-left: 8px;\n    "])));
+    subItemHeaderInSeparatedSubMenu: function () {
+        return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), subItemTextSeparatedMenuFirstLevelXMargin);
     },
     separatedMenu: function () {
-        return css(templateObject_49 || (templateObject_49 = __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-top: 24px;\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-top: 24px;\n      border-right: 1px solid #e5e5e5;\n    "])));
+        return css(templateObject_50 || (templateObject_50 = __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-top: 24px;\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-top: 24px;\n      border-right: 1px solid #e5e5e5;\n    "])));
     },
     dropdownWrapper: function () {
-        return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+        return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
     dropdownLabel: function () {
-        return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n      width: 200px;\n    "], ["\n      width: 200px;\n    "])));
+        return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n      width: 200px;\n      transition: width 1s;\n    "], ["\n      width: 200px;\n      transition: width 1s;\n    "])));
+    },
+    dropdownLabelMinimized: function () {
+        return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
     subItemMenu: function () {
-        return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
+        return css(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
     },
     rightBorder: function () {
-        return css(templateObject_53 || (templateObject_53 = __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    "])));
+        return css(templateObject_55 || (templateObject_55 = __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    "])));
     },
 };
 export var customStyles = {
     rightBorderHovered: function (color) {
-        return css(templateObject_54 || (templateObject_54 = __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);
+        return css(templateObject_56 || (templateObject_56 = __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);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56;

package/src/SideMenuAvatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
 import { SideMenuDropdownProps } from './SideMenuDropdown';
-export interface SideMenuAvatarProps extends UserAvatarProps, SideMenuDropdownProps {
+export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon'>> {
 }
 declare const SideMenuAvatarWithStaticFields: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/SideMenuAvatar.js

@@ -8,8 +8,10 @@ import { SideMenuDropdown } from './SideMenuDropdown';
  * @visibleName SideMenu.Avatar
  */
 var SideMenuAvatar = forwardRef(function (_a, ref) {
-    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, rest = __rest(_a, ["userName", "avatarUrl", "children"]);
-    return (React.createElement(SideMenuDropdown, __assign({ icon: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], ref: ref }, rest), children));
+    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon"]);
+    return (
+    // @ts-expect-error: icon is not provided as _avatar replaces it
+    React.createElement(SideMenuDropdown, __assign({ _avatar: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], ref: ref }, rest), children));
 });
 SideMenuAvatar.displayName = 'SideMenuAvatar';
 var SideMenuAvatarWithStaticFields = Object.assign(SideMenuAvatar, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });

package/src/SideMenuBody.js

@@ -1,7 +1,6 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { SideMenuContext } from './SideMenuContext';
 import { jsStyles } from './SideMenu.styles';
 import { SideMenuBodyChildren } from './SideMenuBodyChildren';
 /**
@@ -12,11 +11,8 @@ import { SideMenuBodyChildren } from './SideMenuBodyChildren';
 var SideMenuBody = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    var _c = useState(false), hasIcons = _c[0], setHasIcons = _c[1];
-    var context = useContext(SideMenuContext);
-    return (React.createElement(SideMenuContext.Provider, { value: __assign({ hasIcons: hasIcons, setHasIcons: function () { return setHasIcons(true); } }, context) },
-        React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
-            React.createElement(SideMenuBodyChildren, null, children))));
+    return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
+        React.createElement(SideMenuBodyChildren, null, children)));
 });
 SideMenuBody.displayName = 'SideMenuBody';
 var SideMenuBodyWithStaticFields = Object.assign(SideMenuBody, { __KONTUR_REACT_UI__: 'SideMenuBody' });

package/src/SideMenuContext.d.ts

@@ -3,8 +3,6 @@ export interface SideMenuContextType {
     isTransitioned?: boolean;
     isSeparatedMenu?: boolean;
     size?: 'small' | 'large';
-    hasIcons?: boolean;
-    setHasIcons?: () => void;
     activeItem?: string | null;
     setActiveItem?: (item: string | null) => void;
     activeSubItem?: string | null;
@@ -12,5 +10,6 @@ export interface SideMenuContextType {
     hasSubIcons?: boolean;
     productColor?: string;
     setProductColor?: (color: string) => void;
+    showWidget?: boolean;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDropdown.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import { DropdownMenuProps } from '@skbkontur/react-ui';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'> {
-    icon?: React.ReactElement;
+    icon: React.ReactElement;
     children?: React.ReactNode;
     caption?: string;
     disableAnimations?: boolean;
+    _avatar?: React.ReactElement;
 }
 declare const SideMenuDropdownWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/SideMenuDropdown.js

@@ -1,27 +1,32 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
 import { SideMenuItem } from './SideMenuItem';
+import { SideMenuContext } from './SideMenuContext';
 /**
  * Элемент списка с выпадающим меню
  *
  * @visibleName SideMenu.Dropdown
  */
 var SideMenuDropdown = forwardRef(function (_a, ref) {
-    var _b;
-    var icon = _a.icon, children = _a.children, _c = _a.caption, caption = _c === void 0 ? 'СКБ Контур' : _c, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "children", "caption", "className", "disableAnimations", "menuWidth"]);
-    var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
-        React.createElement(SideMenuItem, { icon: icon, caption: caption })));
+    var _b, _c;
+    var icon = _a.icon, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
+    var context = useContext(SideMenuContext);
+    var label = (React.createElement("div", { className: cx((_b = {},
+            _b[jsStyles.dropdownLabel()] = true,
+            _b[jsStyles.dropdownLabelMinimized()] = context.isMinimised,
+            _b)) },
+        React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar })));
     return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
             menuItemHoverBg: '#f6f6f6',
             menuItemHoverColor: '#222',
             popupBorderRadius: '8px',
             menuItemPaddingX: '32px',
         }, DEFAULT_THEME) },
-        React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.dropdownWrapper()] = true, _b), className), ref: ref }, rest),
+        React.createElement("div", __assign({ className: cx((_c = {}, _c[jsStyles.dropdownWrapper()] = true, _c), className), ref: ref }, rest),
             React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), children))));
 });
 SideMenuDropdown.displayName = 'SideMenuDropdown';

package/src/SideMenuFooter.js

@@ -1,8 +1,7 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
 /**
  * Нижняя часть меню
  *
@@ -11,9 +10,7 @@ import { SideMenuContext } from './SideMenuContext';
 var SideMenuFooter = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    var context = useContext(SideMenuContext);
-    return (React.createElement(SideMenuContext.Provider, { value: __assign({ hasIcons: true }, context) },
-        React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), children)));
+    return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), children));
 });
 SideMenuFooter.displayName = 'SideMenuFooter';
 var SideMenuFooterWithStaticFields = Object.assign(SideMenuFooter, { __KONTUR_REACT_UI__: 'SideMenuFooter' });

package/src/SideMenuItem.d.ts

@@ -4,11 +4,13 @@ export interface SideMenuItemProps extends CommonProps {
     onClick?: (event: React.MouseEvent) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
     children?: React.ReactNode;
-    icon?: React.ReactElement;
+    icon: React.ReactElement;
     marker?: string;
     caption?: string;
-    isSubMenu?: boolean;
-    parent?: string;
+    _isSubMenu?: boolean;
+    _parent?: string;
+    _isNestedSubMenu?: boolean;
+    _avatar?: React.ReactElement;
 }
 declare const SideMenuItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/SideMenuItem.js

@@ -12,14 +12,14 @@ import { InnerSubMenu } from './InnerSubMenu';
  * @visibleName SideMenu.Item
  */
 var SideMenuItem = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f;
-    var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, marker = _a.marker, caption = _a.caption, parent = _a.parent, isSubMenu = _a.isSubMenu, children = _a.children, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "marker", "caption", "parent", "isSubMenu", "children"]);
+    var _b, _c, _d, _e, _f, _g;
+    var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, _parent = _a._parent, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "_avatar", "marker", "caption", "_parent", "_isSubMenu", "children", "_isNestedSubMenu"]);
     var context = useContext(SideMenuContext);
     var textRef = useRef(null);
-    var _g = useState(false), isOpened = _g[0], setIsOpened = _g[1];
-    var _h = useState(false), focusedByTab = _h[0], setFocusedByTab = _h[1];
-    var _j = useState(false), isMultiline = _j[0], setIsMultiline = _j[1];
-    var _k = useState(context), oldContext = _k[0], setOldContext = _k[1];
+    var _h = useState(false), isOpened = _h[0], setIsOpened = _h[1];
+    var _j = useState(false), focusedByTab = _j[0], setFocusedByTab = _j[1];
+    var _k = useState(false), isMultiline = _k[0], setIsMultiline = _k[1];
+    var _l = useState(context), oldContext = _l[0], setOldContext = _l[1];
     var id = useState('id' + Math.floor(Math.random() * 10000))[0];
     var getNumberOfTextLines = function () {
         if (textRef.current) {
@@ -33,10 +33,6 @@ var SideMenuItem = forwardRef(function (_a, ref) {
         }
     };
     useEffect(function () {
-        var _a;
-        if (icon && !isSubMenu) {
-            (_a = context.setHasIcons) === null || _a === void 0 ? void 0 : _a.call(context);
-        }
         getNumberOfTextLines();
     });
     useEffect(function () {
@@ -47,9 +43,9 @@ var SideMenuItem = forwardRef(function (_a, ref) {
     }, [context.activeItem]);
     var setActive = function () {
         var _a, _b, _c, _d;
-        if (isSubMenu) {
-            if (parent) {
-                (_a = context.setActiveItem) === null || _a === void 0 ? void 0 : _a.call(context, parent);
+        if (_isSubMenu) {
+            if (_parent) {
+                (_a = context.setActiveItem) === null || _a === void 0 ? void 0 : _a.call(context, _parent);
             }
             (_b = context.setActiveSubItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
         }
@@ -64,8 +60,6 @@ var SideMenuItem = forwardRef(function (_a, ref) {
     if (context) {
         active = context.activeItem === id || context.activeSubItem === id;
     }
-    // @ts-expect-error: accessing private property
-    var isIconUserAvatar = typeof (icon === null || icon === void 0 ? void 0 : icon.type) === 'function' && icon.type.__KONTUR_REACT_UI__ === 'UserAvatar';
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -91,7 +85,7 @@ var SideMenuItem = forwardRef(function (_a, ref) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     };
     var renderSubMenu = function () {
-        if (children && isOpened && !isSubMenu && !context.isMinimised) {
+        if (children && isOpened && !_isSubMenu && !context.isMinimised) {
             if (context.isSeparatedMenu) {
                 return React.createElement(SeparatedSubMenu, null, children);
             }
@@ -100,52 +94,62 @@ var SideMenuItem = forwardRef(function (_a, ref) {
             }
         }
     };
+    var hasShortcutImage = icon || _avatar;
     return (React.createElement("div", null,
         React.createElement("button", __assign({ className: cx((_b = {},
                 _b[jsStyles.item()] = true,
-                _b[jsStyles.subItem()] = context.isSeparatedMenu && isSubMenu,
+                _b[jsStyles.subItem()] = context.isSeparatedMenu && _isSubMenu,
                 _b[jsStyles.focusedItem()] = focusedByTab,
                 _b[jsStyles.activeItem()] = (active && !isOpened) ||
                     (active && isOpened && !context.activeSubItem) ||
-                    (active && isOpened && isSubMenu),
-                _b[jsStyles.activeSubItem()] = active && context.isSeparatedMenu && isSubMenu,
+                    (active && isOpened && _isSubMenu) ||
+                    (active && context.isSeparatedMenu),
+                _b[jsStyles.activeSubItem()] = active && context.isSeparatedMenu && _isSubMenu,
                 _b), className), onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, onFocus: handleFocus, onBlur: handleBlur, ref: ref }, rest),
             React.createElement("div", { className: cx((_c = {},
                     _c[jsStyles.itemWrapper()] = true,
                     _c[jsStyles.itemMultilineWrapper()] = isMultiline,
-                    _c[jsStyles.subItemWrapper()] = isSubMenu,
-                    _c[jsStyles.itemWrapperWithoutIcon()] = !icon && !isSubMenu,
+                    _c[jsStyles.subItemWrapper()] = _isSubMenu,
                     _c[jsStyles.itemLargeWrapper()] = context.size === 'large',
-                    _c[jsStyles.subItemLargeWrapper()] = context.size === 'large' && isSubMenu,
+                    _c[jsStyles.subItemLargeWrapper()] = context.size === 'large' && _isSubMenu,
                     _c[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
-                    _c[jsStyles.itemLargeWrapperWithoutIcon()] = !icon && !isSubMenu && context.size === 'large',
                     _c)) },
-                icon && (React.createElement("span", { className: cx((_d = {},
-                        _d[jsStyles.icon()] = true,
-                        _d[jsStyles.iconMultiline()] = isMultiline,
-                        _d[jsStyles.iconLarge()] = context.size === 'large',
-                        _d[jsStyles.iconSubItem()] = isSubMenu,
-                        _d[jsStyles.iconSubItemLarge()] = isSubMenu && context.size === 'large',
-                        _d[jsStyles.avatarIcon()] = isIconUserAvatar,
-                        _d)) }, React.cloneElement(icon, {
-                    size: isSubMenu ? 16 : 24,
-                    disableCompensation: true,
-                }))),
+                icon &&
+                    React.cloneElement(icon, {
+                        size: _isSubMenu ? 16 : 24,
+                        disableCompensation: true,
+                        className: cx((_d = {},
+                            _d[jsStyles.icon()] = true,
+                            _d[jsStyles.iconMultiline()] = isMultiline,
+                            _d[jsStyles.iconLarge()] = context.size === 'large',
+                            _d[jsStyles.iconMultilineLarge()] = context.size === 'large' && isMultiline,
+                            _d[jsStyles.iconSubItem()] = _isSubMenu,
+                            _d[jsStyles.iconSubItemSeparatedMenu()] = context.isSeparatedMenu && _isSubMenu,
+                            _d[jsStyles.iconSubItemLarge()] = _isSubMenu && context.size === 'large',
+                            _d)),
+                    }),
+                _avatar &&
+                    React.cloneElement(_avatar, {
+                        className: cx((_e = {},
+                            _e[jsStyles.avatarIcon()] = true,
+                            _e)),
+                    }),
                 !context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
-                    React.createElement("p", { className: cx((_e = {},
-                            _e[jsStyles.itemText()] = true,
-                            _e[jsStyles.itemTextTransitioned()] = context.isTransitioned,
-                            _e[jsStyles.subItemText()] = isSubMenu,
-                            _e[jsStyles.itemTextWithoutItemIcon()] = !icon,
-                            _e[jsStyles.itemTextWithoutColumnIcons()] = !context.hasIcons && !isSubMenu,
-                            _e[jsStyles.subItemTextWithoutColumnIcons()] = isSubMenu && context.isSeparatedMenu && !context.hasSubIcons,
-                            _e[jsStyles.itemTextLarge()] = context.size === 'large',
-                            _e[jsStyles.itemTextMultiline()] = isMultiline,
-                            _e)), ref: textRef }, caption),
-                    marker && (React.createElement("span", { className: cx((_f = {},
-                            _f[jsStyles.marker()] = true,
-                            _f[jsStyles.markerMultiline()] = isMultiline,
-                            _f)) }, marker)))))),
+                    React.createElement("p", { className: cx((_f = {},
+                            _f[jsStyles.itemText()] = true,
+                            _f[jsStyles.itemTextTransitioned()] = context.isTransitioned,
+                            _f[jsStyles.subItemText()] = _isSubMenu,
+                            _f[jsStyles.subItemTextSeparatedMenuFirstLevel()] = context.isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
+                            _f[jsStyles.nestedSubItemTextSeparatedMenu()] = context.isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
+                            _f[jsStyles.itemTextWithoutItemIcon()] = !hasShortcutImage && !context.isSeparatedMenu,
+                            _f[jsStyles.subItemTextWithoutColumnIcons()] = _isSubMenu && context.isSeparatedMenu && !context.hasSubIcons,
+                            _f[jsStyles.itemTextLarge()] = context.size === 'large',
+                            _f[jsStyles.itemTextMultiline()] = isMultiline,
+                            _f)), ref: textRef }, caption),
+                    marker && (React.createElement("span", { className: cx((_g = {},
+                            _g[jsStyles.marker()] = true,
+                            _g[jsStyles.markerMultiline()] = isMultiline,
+                            _g)) }, marker)))))),
         renderSubMenu()));
 });
 SideMenuItem.displayName = 'SideMenuItem';

package/src/SideMenuLogotype.js

@@ -22,19 +22,6 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
             setSize(24);
         }
     });
-    var widgetTimer;
-    var _c = useState(false), withWidget = _c[0], setWithWidget = _c[1];
-    var handleMouseEnter = function () {
-        widgetTimer = setTimeout(function () {
-            setWithWidget(true);
-        }, 500);
-    };
-    var handleMouseLeave = function () {
-        if (widgetTimer) {
-            clearTimeout(widgetTimer);
-        }
-        setWithWidget(false);
-    };
     var changeCamelCaseToKebabCase = function (str) {
         return str
             .split('')
@@ -44,11 +31,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
             .join('');
     };
     var getProductName = function () {
-        var name = 'kontur';
-        if (productLogo && typeof productLogo.type === 'function') {
-            name = changeCamelCaseToKebabCase(productLogo.type.name);
-        }
-        return name;
+        // @ts-expect-error: accessing private property
+        return productLogo ? changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__) : 'kontur';
     };
     var productName = getProductName();
     var getStaticIconPath = function () {
@@ -57,8 +41,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     if (context.isMinimised || context.isTransitioned) {
         return React.createElement("img", { className: jsStyles.headerIcon(), src: iconUrl || getStaticIconPath(), alt: productName });
     }
-    return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref },
-        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: withWidget }, rest))));
+    return (React.createElement("div", { ref: ref },
+        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: context.showWidget }, rest))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });

package/src/SideMenuSubItem.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { SideMenuItemProps } from './SideMenuItem';
-declare const SideMenuSubItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLDivElement>> & {
+export interface SideMenuSubItemProps extends Omit<SideMenuItemProps, 'icon'>, Partial<Pick<SideMenuItemProps, 'icon'>> {
+}
+declare const SideMenuSubItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuSubItemProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { SideMenuSubItemWithStaticFields as SideMenuSubItem };

package/src/SideMenuSubItem.js

@@ -31,8 +31,13 @@ var SideMenuSubItem = forwardRef(function (props, ref) {
         }
     }, [isOpened, props.children]);
     return (React.createElement("div", { ref: ref },
-        React.createElement(SideMenuItem, __assign({ onClick: handleClick, icon: icon, isSubMenu: true, onKeyDown: handleKeyDown }, props)),
-        props.children && isOpened && React.createElement("div", { className: jsStyles.subItemMenu() }, props.children)));
+        React.createElement(SideMenuItem, __assign({ onClick: handleClick, icon: icon, _isSubMenu: true, onKeyDown: handleKeyDown }, props)),
+        props.children && isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, React.Children.map(props.children, function (child) {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, { _isNestedSubMenu: true });
+            }
+            return child;
+        })))));
 });
 SideMenuSubItem.displayName = 'SideMenuSubItem';
 var SideMenuSubItemWithStaticFields = Object.assign(SideMenuSubItem, { __KONTUR_REACT_UI__: 'SideMenuSubItem' });

package/src/SideMenuSubItemHeader.js

@@ -1,7 +1,8 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
+import { SideMenuContext } from './SideMenuContext';
 /**
  * Заголовок списка второго уровня
  *
@@ -10,7 +11,8 @@ import { jsStyles } from './SideMenu.styles';
 var SideMenuSubItemHeader = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.subItemHeader()] = true, _b), className), ref: ref }, rest), children));
+    var context = useContext(SideMenuContext);
+    return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.subItemHeader()] = true, _b[jsStyles.subItemHeaderInSeparatedSubMenu()] = context.isSeparatedMenu, _b), className), ref: ref }, rest), children));
 });
 SideMenuSubItemHeader.displayName = 'SideMenuSubItemHeader';
 var SideMenuSubItemHeaderWithStaticFields = Object.assign(SideMenuSubItemHeader, {