@skbkontur/side-menu 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.4.3...@skbkontur/side-menu@0.5.0) (2023-01-16)
+
+
+### Features
+
+* **SideMenu:** implement tablet adaptive version ([1952b8e](https://git.skbkontur.ru/ui/ui-parking/commits/1952b8ec426388d553d58899e695129bc89291fb))
+
+
+
+
+
+## [0.4.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.4.2...@skbkontur/side-menu@0.4.3) (2022-12-23)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [0.4.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.4.1...@skbkontur/side-menu@0.4.2) (2022-12-22)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -126,7 +126,7 @@ const renderModal = () => {
     <SideMenu.Body>
       <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
         <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
-          <SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
+          <SideMenu.SubItem caption={'Входящие 1'}>
             <SideMenu.SubItem caption={'Входящие11'}>
               <SideMenu.SubItem caption={'Входящие111'}/>
               <SideMenu.SubItem caption={'Входящие112'}/>
@@ -198,7 +198,7 @@ SideMenu с ручным управлением.
 import { useState } from 'react';
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Kontur, Ofd } from '@skbkontur/logos';
-import { MenuItem, Select } from '@skbkontur/react-ui';
+import { MenuItem, Select, Switcher } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
 import {
   DocTextIcon24Regular,
@@ -214,6 +214,7 @@ import {
 
 
 const [activeItem, setActiveItem] = useState('122');
+const [isSeparatedMenu, setIsSeparatedMenu] = useState(false)
 const items = [
   "100",
   "110",
@@ -238,8 +239,8 @@ const items = [
   "https://google.com"
 ];
 
-<div style={{height: '600px', display: 'flex'}}>
-    <SideMenu value={activeItem} onValueChange={setActiveItem} disableSwipe={false}>
+<div style={{height: '600px', display: 'flex', position: 'relative'}}>
+    <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
         <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
         <SideMenu.Body>
             <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'новое'} id={'100'}>
@@ -294,9 +295,25 @@ const items = [
             </SideMenu.Avatar>
         </SideMenu.Footer>
     </SideMenu>
-  <div>
+  <div style={isSeparatedMenu? {position: 'absolute',  left: '464px'}:{}}>
     <p>Active Item: {activeItem}</p>
     <Select items={items} value={activeItem} onValueChange={setActiveItem} />
+    <Switcher
+      caption="isSeparatedMenu: "
+      items={[
+        {
+          label: 'True',
+          value: true,
+        },
+        {
+          label: 'False',
+          value: false,
+        }
+      ]
+      }
+      value={isSeparatedMenu}
+      onValueChange={setIsSeparatedMenu}
+    />
   </div>
 </div>
 ```
@@ -314,7 +331,7 @@ const items = [
 import { useState } from 'react';
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Kontur, Ofd } from '@skbkontur/logos';
-import { MenuItem, Select } from '@skbkontur/react-ui';
+import { MenuItem, Select, Switcher } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
 import {
   DocTextIcon24Regular,
@@ -329,6 +346,8 @@ import {
 
 
 const [activeItem, setActiveItem] = useState(undefined);
+const [isSeparatedMenu, setIsSeparatedMenu] = useState(false)
+
 const items = [
   'body-0',
   'documents',
@@ -352,13 +371,14 @@ const items = [
   'body-3',
   'body-4',
   'body-5',
+  '600',
   'footer-0',
   'footer-1',
   'footer-2',
 ];
 
-<div style={{height: '600px', display: 'flex'}}>
-    <SideMenu value={activeItem} onValueChange={setActiveItem}>
+<div style={{height: '600px', display: 'flex', position: 'relative'}}>
+    <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
         <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
         <SideMenu.Body>
             <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'} id={'documents'}>
@@ -412,9 +432,25 @@ const items = [
             </SideMenu.Avatar>
         </SideMenu.Footer>
     </SideMenu>
-  <div>
+  <div style={isSeparatedMenu? {position: 'absolute', left: '464px'}:{}}>
     <p>Active Item: {activeItem}</p>
     <Select items={items} value={activeItem} onValueChange={setActiveItem} />
+    <Switcher
+      caption="isSeparatedMenu: "
+      items={[
+        {
+          label: 'True',
+          value: true,
+        },
+        {
+          label: 'False',
+          value: false,
+        }
+      ]
+      }
+      value={isSeparatedMenu}
+      onValueChange={setIsSeparatedMenu}
+    />
   </div>
 </div>
 ```

package/hooks/useNumberOfTextLinesInItem.js

@@ -3,7 +3,7 @@ export var useNumberOfTextLinesInItem = function (textRef, setIsMultilineText) {
         var el_1 = textRef.current;
         setTimeout(function () {
             var textHeight = +el_1.offsetHeight;
-            var lineHeight = parseInt(window.getComputedStyle(el_1).getPropertyValue('line-height'));
+            var lineHeight = typeof window !== undefined ? parseInt(window.getComputedStyle(el_1).getPropertyValue('line-height')) : 0;
             var lines = textHeight / lineHeight;
             if (lines >= 2) {
                 setIsMultilineText(true);

package/hooks/useOpenedState.js

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { isOpenedParents } from '../utils/scripts';
+import { isParentOpened } from '../utils/scripts';
 export var useOpenedState = function (id, generatedId, openedParents, isActive, children) {
     if (isActive === void 0) { isActive = false; }
     var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
     useEffect(function () {
-        var isOpenedParent = isOpenedParents(id, generatedId, openedParents);
+        var isOpenedParent = isParentOpened(id, generatedId, openedParents);
         setIsOpened(!!children && (isOpenedParent || isActive));
     }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), isActive]);
     return isOpened;

package/hooks/useOpenedSubElementState.js

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
-import { isIdActive, isOpenedParents } from '../utils/scripts';
+import { isIdActive, isParentOpened } from '../utils/scripts';
 export var useOpenedSubElementState = function (id, generatedId, openedParents, activeMenuItem) {
     var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
     useEffect(function () {
-        var isOpenedParent = isOpenedParents(id, generatedId, openedParents);
+        var isOpenedParent = isParentOpened(id, generatedId, openedParents);
         var idIsActive = isIdActive(id, activeMenuItem);
         var generatedIdIsActive = isIdActive(generatedId, activeMenuItem);
         setIsOpened(isOpenedParent || isOpened || idIsActive || generatedIdIsActive);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
     "react-dom": ">=16.9"
   },
   "devDependencies": {
-    "@skbkontur/react-ui": "4.0.0"
+    "@skbkontur/react-ui": "4.5.0"
   },
   "dependencies": {
     "@skbkontur/icons": "^0.12.1",

package/src/SideMenu/SideMenu.d.ts

@@ -19,6 +19,7 @@ export interface SideMenuProps extends CommonProps {
     disableSwipe?: boolean;
     value?: string;
     onValueChange?: (value: string) => void;
+    tabletMediaQuery?: string;
 }
 interface SubComponents {
     Body: typeof SideMenuBody;
@@ -37,6 +38,7 @@ interface SubComponents {
 }
 export declare const SideMenuDataTids: {
     root: string;
+    burger: string;
 };
 export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
 export {};

package/src/SideMenu/SideMenu.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { isIE11, isSafari } from '@skbkontur/react-ui/lib/client';
-import { jsStyles } from '../SideMenu.styles';
+import { jsStyles } from './SideMenu.styles';
 import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
 import { SideMenuContext } from '../SideMenuContext';
 import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
@@ -17,21 +17,40 @@ import { RightBorder } from '../internal/RightBorder';
 import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
 import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
 import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
+import { useResponsiveLayout } from '@skbkontur/react-ui';
+import { Backdrop } from '../internal/Backdrop';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
+import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
+import { isTouchScreen } from '../../utils/scripts';
 export var SideMenuDataTids = {
     root: 'SideMenu__root',
+    burger: 'SideMenu__Burger',
 };
 var SideMenuInner = forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _e = _a.size, size = _e === void 0 ? 'small' : _e, _f = _a.isSeparatedMenu, isSeparatedMenu = _f === void 0 ? false : _f, className = _a.className, _g = _a.disableSwipe, disableSwipe = _g === void 0 ? true : _g, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe"]);
+    var _b, _c, _d, _e;
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, _j = _a.tabletMediaQuery, tabletMediaQuery = _j === void 0 ? '768px' : _j, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "tabletMediaQuery"]);
     var scrollTimer = null;
     var transitionTimer = null;
     var widgetTimer;
-    var _h = useState(false), isMinimised = _h[0], setIsMinimised = _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 _m = useState(false), showWidget = _m[0], setShowWidget = _m[1];
-    var _o = useState(value), activeMenuItem = _o[0], setActiveMenuItem = _o[1];
+    var customMediaQueries = {
+        isMobile: '(min-width: 0px)',
+        isTablet: "(min-width: " + tabletMediaQuery + ")",
+        isNarrowDesktop: '(min-width: 992px)',
+        isDesktop: "(min-width: 1200px)",
+    };
+    var _k = useResponsiveLayout({
+        customMediaQueries: customMediaQueries,
+    }), isMobile = _k.isMobile, isTablet = _k.isTablet, isNarrowDesktop = _k.isNarrowDesktop, isDesktop = _k.isDesktop;
+    var isTabletSideMenu = isTablet && !isNarrowDesktop;
+    var isMobileSideMenu = isMobile && !isTablet;
+    var isTouchScreenSideMenu = isTouchScreen() || isMobileSideMenu || isTabletSideMenu;
+    var _l = useState(false), isMinimised = _l[0], setIsMinimised = _l[1];
+    var _m = useState(false), hasScrollBar = _m[0], setHasScrollBar = _m[1];
+    var _o = useState(false), isTransitioned = _o[0], setIsTransitioned = _o[1];
+    var _p = useState('#2291ff'), productColor = _p[0], setProductColor = _p[1];
+    var _q = useState(false), showWidget = _q[0], setShowWidget = _q[1];
+    var _r = useState(value), activeMenuItem = _r[0], setActiveMenuItem = _r[1];
+    var _s = useState(isDesktop || isNarrowDesktop), isShown = _s[0], setIsShown = _s[1];
     useEffect(function () {
         return function () {
             if (scrollTimer) {
@@ -86,6 +105,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setActiveMenuItem(id);
         }
     };
+    var toggleIsShown = function () {
+        isTabletSideMenu && setIsShown(!isShown);
+    };
+    var turnOffIsShown = function () {
+        isTabletSideMenu && setIsShown(false);
+    };
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimised: isMinimised,
             isTransitioned: isTransitioned,
@@ -96,19 +121,37 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             showWidget: showWidget,
             activeMenuItem: activeMenuItem,
             switchActiveMenuItem: handleSwitchActiveItem,
+            isDesktop: isDesktop,
+            isNarrowDesktop: isNarrowDesktop,
+            isTablet: isTabletSideMenu,
+            isMobile: isMobile,
+            isTouchScreen: isTouchScreenSideMenu,
+            isShown: isShown,
+            toggleIsShown: toggleIsShown,
         } },
-        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,
-                    _c[jsStyles.minimisedRoot()] = isMinimised,
-                    _c[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
-                    _c)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll },
-                React.createElement("div", { className: cx((_d = {},
-                        _d[jsStyles.rootInnerContainer()] = true,
-                        _d[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
-                        _d)) }, children)),
-            !disableSwipe && React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
+        isTabletSideMenu && isShown && React.createElement(Backdrop, null),
+        React.createElement(ZIndex, { priority: 8000, className: cx((_b = {},
+                _b[jsStyles.sideMenuZIndex()] = true,
+                _b[jsStyles.sideMenuZIndexForTablets()] = isShown && isTabletSideMenu,
+                _b)) },
+            React.createElement(RenderLayer, { onClickOutside: turnOffIsShown },
+                React.createElement("aside", __assign({ className: cx((_c = {},
+                        _c[jsStyles.rootWrapper()] = true,
+                        _c[jsStyles.rootWrapperIE()] = isIE11,
+                        _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
+                    React.createElement("div", { className: cx((_d = {},
+                            _d[jsStyles.root()] = true,
+                            _d[jsStyles.collapsedRootForTablets()] = !isShown,
+                            _d[jsStyles.rootSafari()] = isSafari,
+                            _d[jsStyles.minimisedRoot()] = isMinimised,
+                            _d[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
+                            _d[jsStyles.rootForTouchScreens()] = isTouchScreenSideMenu,
+                            _d)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll },
+                        React.createElement("div", { className: cx((_e = {},
+                                _e[jsStyles.rootInnerContainer()] = true,
+                                _e[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
+                                _e)) }, children)),
+                    !disableSwipe && isDesktop && React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))))));
 });
 SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {

package/src/SideMenu/SideMenu.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const jsStyles: {
+    sideMenuZIndex(): string;
+    sideMenuZIndexForTablets(): string;
+    root(): string;
+    rootSafari(): string;
+    rootWithoutScrollBar(): string;
+    minimisedRoot(): string;
+    rootWithInnerSubMenu(): string;
+    rootForTouchScreens(): string;
+    rootInnerContainer(): string;
+    rootWrapper(): string;
+    rootWrapperIE(): string;
+    collapsedRootForTablets(): string;
+};

package/src/SideMenu/SideMenu.styles.js

@@ -0,0 +1,43 @@
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var styles = {
+    sideMenuZIndex: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n    "], ["\n      position: relative;\n      height: 100%;\n    "])));
+    },
+    sideMenuZIndexForTablets: function () {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n    "], ["\n      position: absolute;\n      top: 0;\n    "])));
+    },
+    root: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
+    },
+    rootSafari: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
+    },
+    rootWithoutScrollBar: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "], ["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "])));
+    },
+    minimisedRoot: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: 72px !important;\n    "], ["\n      width: 72px !important;\n    "])));
+    },
+    rootWithInnerSubMenu: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+    },
+    rootForTouchScreens: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: 328px;\n    "], ["\n      width: 328px;\n    "])));
+    },
+    rootInnerContainer: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "], ["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "])));
+    },
+    rootWrapper: function () {
+        return css(templateObject_10 || (templateObject_10 = __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 () {
+        var ieRootWrapperCorrection = 15;
+        return css(templateObject_11 || (templateObject_11 = __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);
+    },
+    collapsedRootForTablets: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+    },
+};
+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;

package/src/SideMenuAvatar/SideMenuAvatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
 import { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
-export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon' | '_avatar' | 'caption'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
+export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon' | '_avatar' | 'caption' | 'style'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
 }
 /**
  * Аватар пользователя

package/src/SideMenuBody/SideMenuBody.js

@@ -1,13 +1,18 @@
 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 { jsStyles } from './SideMenuBody.styles';
 import { InnerBody } from '../internal/InnerBody';
+import { SideMenuContext } from '../SideMenuContext';
 var SideMenuBodyInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
-        React.createElement(InnerBody, null, children)));
+    var context = useContext(SideMenuContext);
+    if (context.isShown) {
+        return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
+            React.createElement(InnerBody, null, children)));
+    }
+    return null;
 });
 SideMenuBodyInner.displayName = 'SideMenuBody';
 /**

package/src/SideMenuBody/SideMenuBody.styles.d.ts

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

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var styles = {
+    body: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "])));
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1;

package/src/SideMenuContext.d.ts

@@ -1,3 +1,4 @@
+import { FlattedArrayElementType } from './internal/InnerBody';
 export interface SideMenuContextType {
     isMinimised?: boolean;
     isTransitioned?: boolean;
@@ -10,5 +11,13 @@ export interface SideMenuContextType {
     setProductColor?: (color: string) => void;
     showWidget?: boolean;
     openedParents?: string[];
+    isDesktop?: boolean;
+    isNarrowDesktop?: boolean;
+    isTablet?: boolean;
+    isMobile?: boolean;
+    isTouchScreen?: boolean;
+    isShown?: boolean;
+    toggleIsShown?: () => void;
+    flattedArrayOfAllElements?: FlattedArrayElementType[];
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDivider/SideMenuDivider.js

@@ -1,11 +1,11 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from '../SideMenu.styles';
+import { jsStyles } from './SideMenuDivider.styles';
 var SideMenuDividerInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
-    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.dividerInDropdown()] = true, _b), className), ref: ref }, rest));
+    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.sideMenuDivider()] = true, _b), className), ref: ref }, rest));
 });
 SideMenuDividerInner.displayName = 'SideMenuDivider';
 /**

package/src/SideMenuDivider/SideMenuDivider.styles.d.ts

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

package/src/SideMenuDivider/SideMenuDivider.styles.js

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var styles = {
+    sideMenuDivider: function () {
+        return css(templateObject_1 || (templateObject_1 = __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    "])));
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1;

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -8,6 +8,7 @@ export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuPro
     disableAnimations?: boolean;
     _avatar?: React.ReactElement;
     id?: string;
+    _generatedId?: string;
 }
 /**
  * Элемент списка с выпадающим меню

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -3,26 +3,38 @@ 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 { jsStyles } from './SideMenuDropdown.styles';
 import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
 import { SideMenuContext } from '../SideMenuContext';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, id = _a.id, _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", "id", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
+    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _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", "id", "_generatedId", "_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, id: id })));
+        React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar, id: id, _isDropdown: true })));
     return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
             menuItemHoverBg: '#f6f6f6',
             menuItemHoverColor: '#222',
             popupBorderRadius: '8px',
             menuItemPaddingX: '32px',
         }, DEFAULT_THEME) },
-        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))));
+        React.createElement("div", { className: cx((_c = {}, _c[jsStyles.dropdownWrapper()] = true, _c), className), ref: ref },
+            React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
+                // @ts-expect-error: accessing private property
+                if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
+                    return React.cloneElement(child, {
+                        onClick: function () {
+                            var _a;
+                            (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
+                            child.props.onClick();
+                        },
+                    });
+                }
+                return child;
+            })))));
 });
 SideMenuDropdownInner.displayName = 'SideMenuDropdown';
 /**

package/src/SideMenuDropdown/SideMenuDropdown.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const jsStyles: {
+    dropdownLabel(): string;
+    dropdownLabelMinimized(): string;
+    dropdownWrapper(): string;
+};

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -0,0 +1,15 @@
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var styles = {
+    dropdownLabel: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 200px;\n      transition: width 1s;\n    "], ["\n      width: 200px;\n      transition: width 1s;\n    "])));
+    },
+    dropdownLabelMinimized: function () {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+    },
+    dropdownWrapper: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1, templateObject_2, templateObject_3;

package/src/SideMenuFooter/SideMenuFooter.js

@@ -1,19 +1,24 @@
 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 { jsStyles } from './SideMenuFooter.styles';
 import { getItemId } from '../../utils/scripts';
+import { SideMenuContext } from '../SideMenuContext';
 var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, {
-                _generatedId: getItemId('footer', index++),
-            });
-        }
-        return child;
-    })));
+    var context = useContext(SideMenuContext);
+    if (context.isShown) {
+        return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    _generatedId: getItemId('footer', index++),
+                });
+            }
+            return child;
+        })));
+    }
+    return null;
 });
 SideMenuFooterInner.displayName = 'SideMenuFooter';
 /**

package/src/SideMenuFooter/SideMenuFooter.styles.d.ts

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