@skbkontur/side-menu 3.2.5 → 3.3.0-beta.0

package/src/SideMenu/SideMenu.js

@@ -1,72 +1,76 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { isIE11 } from '@skbkontur/react-ui/lib/client';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { LIGHT_THEME, ScrollContainer, useResponsiveLayout } from '@skbkontur/react-ui';
-import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
-import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
-import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
-import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
-import { SideMenuContext } from '../SideMenuContext';
-import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
-import { SideMenuFooter } from '../SideMenuFooter/SideMenuFooter';
-import { SideMenuHeader } from '../SideMenuHeader/SideMenuHeader';
-import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
-import { SideMenuAvatar } from '../SideMenuAvatar/SideMenuAvatar';
-import { SideMenuSubItem } from '../SideMenuSubItem/SideMenuSubItem';
-import { SideMenuDivider } from '../SideMenuDivider/SideMenuDivider';
-import { SideMenuSubItemHeader } from '../SideMenuSubItemHeader/SideMenuSubItemHeader';
-import { RightBorder } from '../internal/RightBorder';
-import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
-import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
-import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink';
-import { Backdrop } from '../internal/Backdrop';
-import { isTouchDevice } from '../../lib/utils/scripts';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { useAnimateOnMount } from '../../hooks/useAnimateOnMount';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { MenuNavigation } from '../Navigation';
-import { jsStylesForSideMenu, customStyles } from './SideMenu.styles';
-export var transitionDuration = 300; //ms
-export var burgerTransitionDuration = (transitionDuration * 2) / 3;
-var SideMenuInner = forwardRef(function (_a, ref) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenu = exports.burgerTransitionDuration = exports.transitionDuration = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+var client_1 = require("@skbkontur/react-ui/lib/client");
+var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+var react_ui_1 = require("@skbkontur/react-ui");
+var RenderLayer_1 = require("@skbkontur/react-ui/internal/RenderLayer");
+var ZIndex_1 = require("@skbkontur/react-ui/internal/ZIndex");
+var utils_1 = require("@skbkontur/react-ui/lib/utils");
+var SideMenuOrganisations_1 = require("../SideMenuOrganisations/SideMenuOrganisations");
+var SideMenuNotifications_1 = require("../SideMenuNotifications/SideMenuNotifications");
+var SideMenuContext_1 = require("../SideMenuContext");
+var SideMenuBody_1 = require("../SideMenuBody/SideMenuBody");
+var SideMenuFooter_1 = require("../SideMenuFooter/SideMenuFooter");
+var SideMenuHeader_1 = require("../SideMenuHeader/SideMenuHeader");
+var SideMenuItem_1 = require("../SideMenuItem/SideMenuItem");
+var SideMenuAvatar_1 = require("../SideMenuAvatar/SideMenuAvatar");
+var SideMenuSubItem_1 = require("../SideMenuSubItem/SideMenuSubItem");
+var SideMenuDivider_1 = require("../SideMenuDivider/SideMenuDivider");
+var SideMenuSubItemHeader_1 = require("../SideMenuSubItemHeader/SideMenuSubItemHeader");
+var RightBorder_1 = require("../internal/RightBorder");
+var SideMenuDropdown_1 = require("../SideMenuDropdown/SideMenuDropdown");
+var SideMenuLink_1 = require("../SideMenuLink/SideMenuLink");
+var SideMenuSubLink_1 = require("../SideMenuSubLink/SideMenuSubLink");
+var Backdrop_1 = require("../internal/Backdrop");
+var scripts_1 = require("../../lib/utils/scripts");
+var SideMenuDataTids_1 = require("../../SideMenuDataTids");
+var useAnimateOnMount_1 = require("../../hooks/useAnimateOnMount");
+var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var Navigation_1 = require("../Navigation");
+var SideMenu_styles_1 = require("./SideMenu.styles");
+exports.transitionDuration = 300; //ms
+exports.burgerTransitionDuration = (exports.transitionDuration * 2) / 3;
+var SideMenuInner = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c, _d, _e;
     var _f, _g;
-    var children = _a.children, value = _a.value, activeItem = _a.activeItem, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.isSeparatedMenu, isSeparatedMenu = _j === void 0 ? false : _j, className = _a.className, _k = _a.disableSwipe, disableSwipe = _k === void 0 ? false : _k, _l = _a.disableCollapsing, disableCollapsing = _l === void 0 ? false : _l, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _m = _a.showScrollBar, showScrollBar = _m === void 0 ? 'hover' : _m, isOpen = _a.isOpen, isPinned = _a.isPinned, onValueChange = _a.onValueChange, onActiveItemChange = _a.onActiveItemChange, onOpen = _a.onOpen, onClose = _a.onClose, onPinnedValueChange = _a.onPinnedValueChange, rest = __rest(_a, ["children", "value", "activeItem", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "showScrollBar", "isOpen", "isPinned", "onValueChange", "onActiveItemChange", "onOpen", "onClose", "onPinnedValueChange"]);
-    var transitionTimer = useRef(null);
-    var sideMenuRef = useRef(null);
-    var contentWrapperRef = useRef(null);
-    var scrollContainerRef = useRef(null);
-    var navigation = useRef(null);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
+    var children = _a.children, value = _a.value, activeItem = _a.activeItem, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.isSeparatedMenu, isSeparatedMenu = _j === void 0 ? false : _j, className = _a.className, _k = _a.disableSwipe, disableSwipe = _k === void 0 ? false : _k, _l = _a.disableCollapsing, disableCollapsing = _l === void 0 ? false : _l, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _m = _a.showScrollBar, showScrollBar = _m === void 0 ? 'hover' : _m, isOpen = _a.isOpen, isPinned = _a.isPinned, onValueChange = _a.onValueChange, onActiveItemChange = _a.onActiveItemChange, onOpen = _a.onOpen, onClose = _a.onClose, onPinnedValueChange = _a.onPinnedValueChange, rest = tslib_1.__rest(_a, ["children", "value", "activeItem", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "showScrollBar", "isOpen", "isPinned", "onValueChange", "onActiveItemChange", "onOpen", "onClose", "onPinnedValueChange"]);
+    var transitionTimer = (0, react_1.useRef)(null);
+    var sideMenuRef = (0, react_1.useRef)(null);
+    var contentWrapperRef = (0, react_1.useRef)(null);
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var navigation = (0, react_1.useRef)(null);
+    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
     var customMediaQueries = {
         isMobileQuery: mobileMediaQuery || theme.sideMenuMobileMediaQuery,
         isTabletQuery: tabletMediaQuery || theme.sideMenuTabletMediaQuery,
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _o = useResponsiveLayout({
+    var _o = (0, react_ui_1.useResponsiveLayout)({
         customMediaQueries: customMediaQueries,
     }), isMobileQuery = _o.isMobileQuery, isTabletQuery = _o.isTabletQuery, isNarrowDesktopQuery = _o.isNarrowDesktopQuery, isDesktopQuery = _o.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
-    var isTouchScreen = isTouchDevice() || isMobile || isTablet;
+    var isTouchScreen = (0, scripts_1.isTouchDevice)() || isMobile || isTablet;
     var manual = isOpen !== undefined;
-    var _p = __read(useState(isDesktopQuery && !isPinned), 2), isOpened = _p[0], setIsOpened = _p[1];
-    var _q = __read(useState(false), 2), isBeingTransitioned = _q[0], setIsBeingTransitioned = _q[1];
-    var _r = __read(useState(value !== null && value !== void 0 ? value : activeItem), 2), activeMenuItem = _r[0], setActiveMenuItem = _r[1];
-    var _s = __read(useState(false), 2), isSeparatedMenuShown = _s[0], setIsSeparatedMenuShown = _s[1];
-    var _t = __read(useState(true), 2), isMouseOutside = _t[0], setIsMouseOutside = _t[1];
-    var _u = __read(useState('top'), 2), scrollState = _u[0], setScrollState = _u[1];
-    var _v = __read(useState(false), 2), hasScrollBar = _v[0], setHasScrollBar = _v[1];
-    var _w = __read(useState(0), 2), mousePositionX = _w[0], setMousePositionX = _w[1];
-    var _x = __read(useState(0), 2), headerHeight = _x[0], setHeaderHeight = _x[1];
-    var _y = __read(useState(isNarrowDesktop || (isDesktopQuery && isPinned)), 2), isCollapsable = _y[0], setIsCollapsable = _y[1];
-    var _z = __read(useState(0), 2), leftPosition = _z[0], setLeftPosition = _z[1];
-    var _0 = __read(useState(false), 2), isHovered = _0[0], setIsHovered = _0[1];
+    var _p = tslib_1.__read((0, react_1.useState)(isDesktopQuery && !isPinned), 2), isOpened = _p[0], setIsOpened = _p[1];
+    var _q = tslib_1.__read((0, react_1.useState)(false), 2), isBeingTransitioned = _q[0], setIsBeingTransitioned = _q[1];
+    var _r = tslib_1.__read((0, react_1.useState)(value !== null && value !== void 0 ? value : activeItem), 2), activeMenuItem = _r[0], setActiveMenuItem = _r[1];
+    var _s = tslib_1.__read((0, react_1.useState)(false), 2), isSeparatedMenuShown = _s[0], setIsSeparatedMenuShown = _s[1];
+    var _t = tslib_1.__read((0, react_1.useState)(true), 2), isMouseOutside = _t[0], setIsMouseOutside = _t[1];
+    var _u = tslib_1.__read((0, react_1.useState)('top'), 2), scrollState = _u[0], setScrollState = _u[1];
+    var _v = tslib_1.__read((0, react_1.useState)(false), 2), hasScrollBar = _v[0], setHasScrollBar = _v[1];
+    var _w = tslib_1.__read((0, react_1.useState)(0), 2), mousePositionX = _w[0], setMousePositionX = _w[1];
+    var _x = tslib_1.__read((0, react_1.useState)(0), 2), headerHeight = _x[0], setHeaderHeight = _x[1];
+    var _y = tslib_1.__read((0, react_1.useState)(isNarrowDesktop || (isDesktopQuery && isPinned)), 2), isCollapsable = _y[0], setIsCollapsable = _y[1];
+    var _z = tslib_1.__read((0, react_1.useState)(0), 2), leftPosition = _z[0], setLeftPosition = _z[1];
+    var _0 = tslib_1.__read((0, react_1.useState)(false), 2), isHovered = _0[0], setIsHovered = _0[1];
     var switchActiveMenuItem = function (id) {
         if (id !== value && id !== activeItem) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
@@ -74,10 +78,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setActiveMenuItem(id);
         }
     };
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         setLeftPosition(((_a = sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0);
-        navigation.current = new MenuNavigation({
+        navigation.current = new Navigation_1.MenuNavigation({
             rootRef: sideMenuRef,
             activeMenuItem: activeMenuItem,
             setActiveMenuItem: switchActiveMenuItem,
@@ -95,7 +99,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
         };
     }, []);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (isMobile && isSeparatedMenuShown) {
             return;
         }
@@ -109,7 +113,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setHasScrollBar(scrollContainer.clientHeight < contentWrapper.scrollHeight);
         }, 50);
     }, [activeMenuItem, isOpened, isBeingTransitioned]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         isDesktopQuery && setIsOpened(!isPinned);
     }, [isPinned, isDesktopQuery]);
     var handleIsOpened = function (newIsOpened, shouldSetState) {
@@ -124,7 +128,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (isDesktopQuery && !isPinned) {
             setIsOpened(true);
             setIsCollapsable(false);
@@ -140,19 +144,19 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
         }
     }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile, isPinned]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         !activeItem && ((_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(value));
     }, [value, (_f = navigation.current) === null || _f === void 0 ? void 0 : _f.navigationTree]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         !value && ((_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(activeItem));
     }, [activeItem, (_g = navigation.current) === null || _g === void 0 ? void 0 : _g.navigationTree]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         (_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchIsSeparatedMenu(isSeparatedMenu);
     }, [isSeparatedMenu]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         handleIsOpened(isOpen, manual);
     }, [isOpen]);
     var showMinimizedRoot = function (newIsMinimized) {
@@ -164,10 +168,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
             transitionTimer.current = setTimeout(function () {
                 setIsBeingTransitioned(false);
-            }, transitionDuration + 200);
+            }, exports.transitionDuration + 200);
         }
     };
     var shouldNotOpenOnHover = (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen;
+    var forceUpdatePositionPopups = (0, react_1.useCallback)(function () {
+        // дикие костыли для перерисовки попапов, которые не обновляются автоматически при перерисовке меню
+        var fixPopupsPosition = function () { return window.dispatchEvent(new CustomEvent('scroll')); }; // чтобы вызвался LayoutEvent.emit() и перерисовались попапы
+        window.setTimeout(function () {
+            fixPopupsPosition(); // перерисовка попапов и следом еще раз, чтобы после анимации SideMenu попапы вновь встали на свои места
+            window.setTimeout(function () { return fixPopupsPosition(); }, exports.transitionDuration + 100);
+        }, 0);
+    }, []);
     var handleMouseEnter = function () {
         if (shouldNotOpenOnHover) {
             return;
@@ -177,6 +189,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             isMouseOutside && showMinimizedRoot(false);
             setIsMouseOutside(false);
         }
+        forceUpdatePositionPopups();
     };
     var handleMouseLeave = function () {
         if (shouldNotOpenOnHover) {
@@ -189,6 +202,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                 setIsMouseOutside(true);
             }
         }
+        forceUpdatePositionPopups();
     };
     var showMinimizedRootForNarrowDesktop = function (e) {
         if (!isSeparatedMenuShown || !isCollapsable || isTouchScreen) {
@@ -216,12 +230,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
             transitionTimer.current = setTimeout(function () {
                 setIsBeingTransitioned(false);
-            }, burgerTransitionDuration);
+            }, exports.burgerTransitionDuration);
         }
     };
     var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
-    var _1 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
-        opacity: LIGHT_THEME.sidePageBackingBgOpacity,
+    var _1 = tslib_1.__read((0, useAnimateOnMount_1.useAnimateOnMount)(!!isTabletOrMobile && !!isOpened, exports.burgerTransitionDuration, {
+        opacity: react_ui_1.LIGHT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
     }), 2), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
@@ -240,7 +254,24 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         onPinnedValueChange === null || onPinnedValueChange === void 0 ? void 0 : onPinnedValueChange(!isCollapsable);
         setIsCollapsable(!isCollapsable);
     };
-    return (React.createElement(SideMenuContext.Provider, { value: {
+    var handleDropDownClose = function () {
+        if (!isNarrowDesktop) {
+            return;
+        }
+        var shouldCloseSideMenu = !manual && document.hasFocus();
+        setIsMouseOutside(true);
+        shouldCloseSideMenu && handleIsOpened(false, !manual);
+        setIsCollapsable(true);
+    };
+    var handleDropDownOpen = function () {
+        if (!isNarrowDesktop) {
+            return;
+        }
+        setIsCollapsable(false);
+        handleIsOpened(true, !manual);
+        forceUpdatePositionPopups();
+    };
+    return (react_1.default.createElement(SideMenuContext_1.SideMenuContext.Provider, { value: {
             isOpened: isOpened,
             isCollapsable: isCollapsable,
             toggleIsOpened: function () { return showMenu(!isOpened); },
@@ -263,58 +294,61 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             showScrollBar: showScrollBar,
             sideMenuRef: sideMenuRef,
             navigation: navigation.current,
+            handleDropDownOpen: handleDropDownOpen,
+            handleDropDownClose: handleDropDownClose,
         } },
-        (isOpened || isBeingTransitioned) && isTabletOrMobile && React.createElement("div", { style: { height: headerHeight } }),
-        React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},
-                _b[jsStylesForSideMenu.root()] = true,
-                _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
-                _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isOpened && isTabletOrMobile,
-                _b[jsStylesForSideMenu.transitionedRootForTabletsOrMobiles()] = isBeingTransitioned && isTabletOrMobile,
-                _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isCollapsable,
-                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isCollapsable,
-                _b[jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && isCollapsable,
-                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery && !isCollapsable,
-                _b[jsStylesForSideMenu.separatedRootForTouchScreensForDesktops(theme)] = isDesktopQuery && isSeparatedMenuShown && isTouchScreen,
+        (isOpened || isBeingTransitioned) && isTabletOrMobile && react_1.default.createElement("div", { style: { height: headerHeight } }),
+        react_1.default.createElement(ZIndex_1.ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: (0, Emotion_1.cx)((_b = {},
+                _b[SideMenu_styles_1.jsStylesForSideMenu.root()] = true,
+                _b[SideMenu_styles_1.customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isOpened && isTabletOrMobile,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.transitionedRootForTabletsOrMobiles()] = isBeingTransitioned && isTabletOrMobile,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isCollapsable,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isCollapsable,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && isCollapsable,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery && !isCollapsable,
+                _b[SideMenu_styles_1.jsStylesForSideMenu.separatedRootForTouchScreensForDesktops(theme)] = isDesktopQuery && isSeparatedMenuShown && isTouchScreen,
                 _b)) },
-            React.createElement(React.Fragment, null,
-                shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
-                React.createElement(RenderLayer, { onClickOutside: function () { return showMenu(false); } },
-                    React.createElement("aside", __assign({ className: cx((_c = {},
-                            _c[jsStylesForSideMenu.wrapper()] = true,
-                            _c[jsStylesForSideMenu.wrapperIE()] = isIE11,
-                            _c[jsStylesForSideMenu.wrapperWithShadow(theme)] = isSideMenuOverContent,
-                            _c), className), "data-tid": SideMenuDataTids.root, ref: mergeRefs([sideMenuRef, ref]) }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop }),
-                        React.createElement("div", { className: cx((_d = {},
-                                _d[jsStylesForSideMenu.container(theme)] = true,
-                                _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isOpened && isTabletOrMobile && !isBeingTransitioned,
-                                _d[jsStylesForSideMenu.minimizedContainer(theme)] = !isOpened && !isTabletOrMobile,
-                                _d[jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
-                                _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isOpened || isBeingTransitioned),
+            react_1.default.createElement(react_1.default.Fragment, null,
+                shouldShowBackdrop && react_1.default.createElement(Backdrop_1.Backdrop, { style: backdropStyle }),
+                react_1.default.createElement(RenderLayer_1.RenderLayer, { onClickOutside: function () { return showMenu(false); } },
+                    react_1.default.createElement("aside", tslib_1.__assign({ className: (0, Emotion_1.cx)((_c = {},
+                            _c[SideMenu_styles_1.jsStylesForSideMenu.wrapper()] = true,
+                            _c[SideMenu_styles_1.jsStylesForSideMenu.wrapperIE()] = client_1.isIE11,
+                            _c[SideMenu_styles_1.jsStylesForSideMenu.wrapperWithShadow(theme)] = isSideMenuOverContent,
+                            _c), className), "data-tid": SideMenuDataTids_1.SideMenuDataTids.root, ref: (0, utils_1.mergeRefs)([sideMenuRef, ref !== null && ref !== void 0 ? ref : null]) }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop }),
+                        react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_d = {},
+                                _d[SideMenu_styles_1.jsStylesForSideMenu.container(theme)] = true,
+                                _d[SideMenu_styles_1.jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isOpened && isTabletOrMobile && !isBeingTransitioned,
+                                _d[SideMenu_styles_1.jsStylesForSideMenu.minimizedContainer(theme)] = !isOpened && !isTabletOrMobile,
+                                _d[SideMenu_styles_1.jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
+                                _d[SideMenu_styles_1.jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isOpened || isBeingTransitioned),
                                 _d)) },
-                            React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
+                            react_1.default.createElement(react_ui_1.ScrollContainer, { onScrollStateChangeY: function (state) {
                                     setScrollState === null || setScrollState === void 0 ? void 0 : setScrollState(state);
                                 }, showScrollBar: setScrollBar(), ref: scrollContainerRef },
-                                React.createElement("div", { className: cx((_e = {},
-                                        _e[jsStylesForSideMenu.contentWrapper(theme)] = true,
-                                        _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
-                                        _e[jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
+                                react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_e = {},
+                                        _e[SideMenu_styles_1.jsStylesForSideMenu.contentWrapper(theme)] = true,
+                                        _e[SideMenu_styles_1.jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
+                                        _e[SideMenu_styles_1.jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
                                         _e)), ref: contentWrapperRef }, children))),
-                        !disableSwipe && !disableCollapsing && isDesktopQuery && isOpened && (React.createElement(RightBorder, { onClick: handleRightBorderClick, showButton: isHovered }))))))));
+                        !disableSwipe && !disableCollapsing && isDesktopQuery && isOpened && (react_1.default.createElement(RightBorder_1.RightBorder, { onClick: handleRightBorderClick, showButton: isHovered }))))))));
 });
 SideMenuInner.displayName = 'SideMenu';
 var STATIC_PROPS = {
-    Body: SideMenuBody,
-    Footer: SideMenuFooter,
-    Header: SideMenuHeader,
-    Item: SideMenuItem,
-    SubItem: SideMenuSubItem,
-    SubItemHeader: SideMenuSubItemHeader,
-    Avatar: SideMenuAvatar,
-    Organisations: SideMenuOrganisations,
-    Divider: SideMenuDivider,
-    Link: SideMenuLink,
-    SubLink: SideMenuSubLink,
-    Dropdown: SideMenuDropdown,
+    Body: SideMenuBody_1.SideMenuBody,
+    Footer: SideMenuFooter_1.SideMenuFooter,
+    Header: SideMenuHeader_1.SideMenuHeader,
+    Item: SideMenuItem_1.SideMenuItem,
+    SubItem: SideMenuSubItem_1.SideMenuSubItem,
+    SubItemHeader: SideMenuSubItemHeader_1.SideMenuSubItemHeader,
+    Avatar: SideMenuAvatar_1.SideMenuAvatar,
+    Organisations: SideMenuOrganisations_1.SideMenuOrganisations,
+    Notifications: SideMenuNotifications_1.SideMenuNotifications,
+    Divider: SideMenuDivider_1.SideMenuDivider,
+    Link: SideMenuLink_1.SideMenuLink,
+    SubLink: SideMenuSubLink_1.SideMenuSubLink,
+    Dropdown: SideMenuDropdown_1.SideMenuDropdown,
     __KONTUR_REACT_UI__: 'SideMenu',
 };
-export var SideMenu = Object.assign(SideMenuInner, STATIC_PROPS);
+exports.SideMenu = Object.assign(SideMenuInner, STATIC_PROPS);

package/src/SideMenu/SideMenu.styles.js

@@ -1,77 +1,80 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-import { burgerTransitionDuration, transitionDuration } from './SideMenu';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsStylesForSideMenu = exports.customStyles = void 0;
+var tslib_1 = require("tslib");
+var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var SideMenu_1 = require("./SideMenu");
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "], ["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "])));
+        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "], ["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "])));
     },
     shownRootForTabletsOrMobiles: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      position: absolute;\n      height: 100%;\n    "], ["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      position: absolute;\n      height: 100%;\n    "])));
+        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      position: absolute;\n      height: 100%;\n    "], ["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      position: absolute;\n      height: 100%;\n    "])));
     },
     transitionedRootForTabletsOrMobiles: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
+        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
     },
     rootForNarrowDesktops: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuMinimizedWidth);
+        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuMinimizedWidth);
     },
     separatedRootForNarrowDesktops: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
     },
     separatedRootForTouchScreens: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
     },
     separatedRootForTouchScreensForDesktops: function (t) {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidthForTouchScreens, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidthForTouchScreens, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
     },
     separatedRootForDesktops: function (t) {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
     },
     container: function (t) {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuBgColor, transitionDuration);
+        return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuBgColor, SideMenu_1.transitionDuration);
     },
     minimizedContainer: function (t) {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), t.sideMenuMinimizedWidth);
+        return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), t.sideMenuMinimizedWidth);
     },
     containerForTouchScreens: function (t) {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
+        return (0, Emotion_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
     },
     separatedContainerForMobiles: function (t) {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
     contentWrapper: function (t) {
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: ", ";\n    "], ["\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: ", ";\n    "])), t.sideMenuWidth);
+        return (0, Emotion_1.css)(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: ", ";\n    "], ["\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: ", ";\n    "])), t.sideMenuWidth);
     },
     contentWrapperForTouchScreens: function (t) {
-        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
+        return (0, Emotion_1.css)(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
     },
     minimizedContentWrapper: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+        return (0, Emotion_1.css)(templateObject_15 || (templateObject_15 = tslib_1.__makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
     wrapper: function () {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
+        return (0, Emotion_1.css)(templateObject_16 || (templateObject_16 = tslib_1.__makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     wrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+        return (0, Emotion_1.css)(templateObject_17 || (templateObject_17 = tslib_1.__makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
     wrapperWithShadow: function (t) {
-        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
+        return (0, Emotion_1.css)(templateObject_18 || (templateObject_18 = tslib_1.__makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
     },
     collapsedContainerForTabletsOrMobiles: function () {
-        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+        return (0, Emotion_1.css)(templateObject_19 || (templateObject_19 = tslib_1.__makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
     },
     list: function () {
-        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
+        return (0, Emotion_1.css)(templateObject_20 || (templateObject_20 = tslib_1.__makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
     },
     hidden: function () {
-        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+        return (0, Emotion_1.css)(templateObject_21 || (templateObject_21 = tslib_1.__makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
     },
 };
-export var customStyles = {
+exports.customStyles = {
     rootForTabletsOrMobiles: function (headerHeight) {
-        return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
+        return (0, Emotion_1.css)(templateObject_22 || (templateObject_22 = tslib_1.__makeTemplateObject(["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, SideMenu_1.burgerTransitionDuration);
     },
 };
-export var jsStylesForSideMenu = memoizeStyle(styles);
+exports.jsStylesForSideMenu = (0, ThemeHelpers_1.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;

package/src/SideMenuAvatar/SideMenuAvatar.js

@@ -1,13 +1,16 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
-import { UserAvatar } from '@skbkontur/react-ui-addons/';
-import { ThemeContext } from '@skbkontur/react-ui';
-import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-var SideMenuAvatarInner = forwardRef(function (_a, ref) {
-    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, caption = _a.caption, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon", "caption"]);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    return (React.createElement(SideMenuDropdown, __assign({ icon: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl, style: { width: theme.sideMenuAvatarSize, height: theme.sideMenuAvatarSize } }), caption: userName || caption, menuWidth: 200, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuAvatar = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_ui_addons_1 = require("@skbkontur/react-ui-addons/");
+var react_ui_1 = require("@skbkontur/react-ui");
+var SideMenuDropdown_1 = require("../SideMenuDropdown/SideMenuDropdown");
+var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var SideMenuAvatarInner = (0, react_1.forwardRef)(function (_a, ref) {
+    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, caption = _a.caption, rest = tslib_1.__rest(_a, ["userName", "avatarUrl", "children", "icon", "caption"]);
+    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
+    return (react_1.default.createElement(SideMenuDropdown_1.SideMenuDropdown, tslib_1.__assign({ icon: react_1.default.createElement(react_ui_addons_1.UserAvatar, { userName: userName, avatarUrl: avatarUrl, style: { width: theme.sideMenuAvatarSize, height: theme.sideMenuAvatarSize } }), caption: userName || caption, menuWidth: 200, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
 });
 SideMenuAvatarInner.displayName = 'SideMenuAvatar';
 /**
@@ -15,4 +18,4 @@ SideMenuAvatarInner.displayName = 'SideMenuAvatar';
  *
  * @visibleName SideMenu.Avatar
  */
-export var SideMenuAvatar = Object.assign(SideMenuAvatarInner, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });
+exports.SideMenuAvatar = Object.assign(SideMenuAvatarInner, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });

package/src/SideMenuBody/SideMenuBody.js

@@ -1,22 +1,25 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { SideMenuContext } from '../SideMenuContext';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
-import { jsStyles } from './SideMenuBody.styles';
-var SideMenuBodyInner = forwardRef(function (_a, ref) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuBody = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+var SideMenuContext_1 = require("../SideMenuContext");
+var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
+var SideMenuBody_styles_1 = require("./SideMenuBody.styles");
+var SideMenuBodyInner = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c;
-    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    var context = useContext(SideMenuContext);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    return (React.createElement("div", { ref: ref, className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
-            _b[jsStylesForSideMenu.hidden()] = !context.isOpened && (context.isMobile || context.isTablet),
+    var className = _a.className, children = _a.children, rest = tslib_1.__rest(_a, ["className", "children"]);
+    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    return (react_1.default.createElement("div", { ref: ref, className: (0, Emotion_1.cx)((_b = {},
+            _b[SideMenuBody_styles_1.jsStyles.root(theme)] = true,
+            _b[SideMenu_styles_1.jsStylesForSideMenu.hidden()] = !context.isOpened && (context.isMobile || context.isTablet),
             _b)) },
-        React.createElement("nav", null,
-            React.createElement("ul", __assign({ className: cx((_c = {}, _c[jsStylesForSideMenu.list()] = true, _c[jsStyles.wrapper(theme)] = true, _c)) }, rest), children))));
+        react_1.default.createElement("nav", null,
+            react_1.default.createElement("ul", tslib_1.__assign({ className: (0, Emotion_1.cx)((_c = {}, _c[SideMenu_styles_1.jsStylesForSideMenu.list()] = true, _c[SideMenuBody_styles_1.jsStyles.wrapper(theme)] = true, _c)) }, rest), children))));
 });
 SideMenuBodyInner.displayName = 'SideMenuBody';
 /**
@@ -24,4 +27,4 @@ SideMenuBodyInner.displayName = 'SideMenuBody';
  *
  * @visibleName SideMenu.Body
  */
-export var SideMenuBody = Object.assign(SideMenuBodyInner, { __KONTUR_REACT_UI__: 'SideMenuBody' });
+exports.SideMenuBody = Object.assign(SideMenuBodyInner, { __KONTUR_REACT_UI__: 'SideMenuBody' });