@skbkontur/side-menu 3.3.4 → 3.3.5-19a67.0

package/src/SideMenu/SideMenu.js

@@ -1,138 +1,136 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { useCallback, 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 { ScrollContainer } from '@skbkontur/react-ui/components/ScrollContainer';
-import { LIGHT_THEME } from '@skbkontur/react-ui/lib/theming/themes/LightTheme';
-import { useResponsiveLayout } from '@skbkontur/react-ui/components/ResponsiveLayout/useResponsiveLayout';
-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 { SideMenuNotifications } from '../SideMenuNotifications/SideMenuNotifications';
-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) {
-    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 timerScrollbar = useRef(null);
-    var sideMenuRef = useRef(null);
-    var contentWrapperRef = useRef(null);
-    var scrollContainerRef = useRef(null);
-    var navigation = useRef(null);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var customMediaQueries = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenu = exports.burgerTransitionDuration = exports.transitionDuration = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const client_1 = require("@skbkontur/react-ui/lib/client");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const ScrollContainer_1 = require("@skbkontur/react-ui/components/ScrollContainer");
+const LightTheme_1 = require("@skbkontur/react-ui/lib/theming/themes/LightTheme");
+const useResponsiveLayout_1 = require("@skbkontur/react-ui/components/ResponsiveLayout/useResponsiveLayout");
+const RenderLayer_1 = require("@skbkontur/react-ui/internal/RenderLayer");
+const ZIndex_1 = require("@skbkontur/react-ui/internal/ZIndex");
+const utils_1 = require("@skbkontur/react-ui/lib/utils");
+const SideMenuOrganisations_1 = require("../SideMenuOrganisations/SideMenuOrganisations");
+const SideMenuNotifications_1 = require("../SideMenuNotifications/SideMenuNotifications");
+const SideMenuContext_1 = require("../SideMenuContext");
+const SideMenuBody_1 = require("../SideMenuBody/SideMenuBody");
+const SideMenuFooter_1 = require("../SideMenuFooter/SideMenuFooter");
+const SideMenuHeader_1 = require("../SideMenuHeader/SideMenuHeader");
+const SideMenuItem_1 = require("../SideMenuItem/SideMenuItem");
+const SideMenuAvatar_1 = require("../SideMenuAvatar/SideMenuAvatar");
+const SideMenuSubItem_1 = require("../SideMenuSubItem/SideMenuSubItem");
+const SideMenuDivider_1 = require("../SideMenuDivider/SideMenuDivider");
+const SideMenuSubItemHeader_1 = require("../SideMenuSubItemHeader/SideMenuSubItemHeader");
+const RightBorder_1 = require("../internal/RightBorder");
+const SideMenuDropdown_1 = require("../SideMenuDropdown/SideMenuDropdown");
+const SideMenuLink_1 = require("../SideMenuLink/SideMenuLink");
+const SideMenuSubLink_1 = require("../SideMenuSubLink/SideMenuSubLink");
+const Backdrop_1 = require("../internal/Backdrop");
+const scripts_1 = require("../../lib/utils/scripts");
+const SideMenuDataTids_1 = require("../../SideMenuDataTids");
+const useAnimateOnMount_1 = require("../../hooks/useAnimateOnMount");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const Navigation_1 = require("../Navigation");
+const SideMenu_styles_1 = require("./SideMenu.styles");
+exports.transitionDuration = 300; //ms
+exports.burgerTransitionDuration = (exports.transitionDuration * 2) / 3;
+const SideMenuInner = (0, react_1.forwardRef)(({ children, value, activeItem, size = 'small', isSeparatedMenu = false, className, disableSwipe = false, disableCollapsing = false, desktopMediaQuery, narrowDesktopMediaQuery, tabletMediaQuery, mobileMediaQuery, showScrollBar = 'hover', isOpen, isPinned, onValueChange, onActiveItemChange, onOpen, onClose, onPinnedValueChange, ...rest }, ref) => {
+    const transitionTimer = (0, react_1.useRef)(null);
+    const timerScrollbar = (0, react_1.useRef)(null);
+    const sideMenuRef = (0, react_1.useRef)(null);
+    const contentWrapperRef = (0, react_1.useRef)(null);
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const navigation = (0, react_1.useRef)(null);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const customMediaQueries = {
         isMobileQuery: mobileMediaQuery || theme.sideMenuMobileMediaQuery,
         isTabletQuery: tabletMediaQuery || theme.sideMenuTabletMediaQuery,
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _o = 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 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 switchActiveMenuItem = function (id) {
+    const { isMobileQuery, isTabletQuery, isNarrowDesktopQuery, isDesktopQuery } = (0, useResponsiveLayout_1.useResponsiveLayout)({
+        customMediaQueries,
+    });
+    const isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
+    const isTablet = isTabletQuery && !isNarrowDesktopQuery;
+    const isMobile = isMobileQuery && !isTabletQuery;
+    const isTabletOrMobile = isTablet || isMobile;
+    const isTouchScreen = (0, scripts_1.isTouchDevice)() || isMobile || isTablet;
+    const manual = isOpen !== undefined;
+    const [isOpened, setIsOpened] = (0, react_1.useState)(isDesktopQuery && !isPinned);
+    const [isBeingTransitioned, setIsBeingTransitioned] = (0, react_1.useState)(false);
+    const [activeMenuItem, setActiveMenuItem] = (0, react_1.useState)(value ?? activeItem);
+    const [isSeparatedMenuShown, setIsSeparatedMenuShown] = (0, react_1.useState)(false);
+    const [isMouseOutside, setIsMouseOutside] = (0, react_1.useState)(true);
+    const [scrollState, setScrollState] = (0, react_1.useState)('top');
+    const [hasScrollBar, setHasScrollBar] = (0, react_1.useState)(false);
+    const [mousePositionX, setMousePositionX] = (0, react_1.useState)(0);
+    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const [isCollapsable, setIsCollapsable] = (0, react_1.useState)(isNarrowDesktop || (isDesktopQuery && isPinned));
+    const [leftPosition, setLeftPosition] = (0, react_1.useState)(0);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const switchActiveMenuItem = (id) => {
         if (id !== value && id !== activeItem) {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
-            onActiveItemChange === null || onActiveItemChange === void 0 ? void 0 : onActiveItemChange(id);
+            onValueChange?.(id);
+            onActiveItemChange?.(id);
             setActiveMenuItem(id);
         }
     };
-    useEffect(function () {
-        var _a;
-        setLeftPosition(((_a = sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0);
-        navigation.current = new MenuNavigation({
+    (0, react_1.useEffect)(() => {
+        setLeftPosition(sideMenuRef.current?.getBoundingClientRect().left || 0);
+        navigation.current = new Navigation_1.MenuNavigation({
             rootRef: sideMenuRef,
-            activeMenuItem: activeMenuItem,
+            activeMenuItem,
             setActiveMenuItem: switchActiveMenuItem,
-            isSeparatedMenu: isSeparatedMenu,
-            isSeparatedMenuShown: isSeparatedMenuShown,
-            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
-            isOpened: isOpened,
-            isDesktopQuery: isDesktopQuery,
-            isMobile: isMobile,
-            isCollapsable: isCollapsable,
+            isSeparatedMenu,
+            isSeparatedMenuShown,
+            setIsSeparatedMenuShown,
+            isOpened,
+            isDesktopQuery,
+            isMobile,
+            isCollapsable,
         });
-        return function () {
+        return () => {
             if (transitionTimer.current) {
                 clearTimeout(transitionTimer.current);
             }
         };
     }, []);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (isMobile && isSeparatedMenuShown) {
             return;
         }
         clearTimeout(timerScrollbar.current);
-        timerScrollbar.current = setTimeout(function () {
-            var _a;
-            var contentWrapper = contentWrapperRef.current;
-            var scrollContainer = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.inner;
+        timerScrollbar.current = setTimeout(() => {
+            const contentWrapper = contentWrapperRef.current;
+            const scrollContainer = scrollContainerRef.current?.inner;
             if (!contentWrapper || !scrollContainer) {
                 return;
             }
             setHasScrollBar(scrollContainer.clientHeight < contentWrapper.scrollHeight);
         }, 50);
-        return function () {
+        return () => {
             clearTimeout(timerScrollbar.current);
         };
     });
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         isDesktopQuery && setIsOpened(!isPinned);
     }, [isPinned, isDesktopQuery]);
-    var handleIsOpened = function (newIsOpened, shouldSetState) {
+    const handleIsOpened = (newIsOpened, shouldSetState) => {
         if (newIsOpened === isOpened || !shouldSetState) {
             return;
         }
         setIsOpened(newIsOpened);
         if (newIsOpened) {
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            onOpen?.();
         }
         else {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onClose?.();
         }
     };
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (isDesktopQuery && !isPinned) {
             setIsOpened(true);
             setIsCollapsable(false);
@@ -148,43 +146,40 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             }
         }
     }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile, isPinned]);
-    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 () {
-        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 () {
-        var _a;
-        (_a = navigation.current) === null || _a === void 0 ? void 0 : _a.switchIsSeparatedMenu(isSeparatedMenu);
+    (0, react_1.useEffect)(() => {
+        !activeItem && navigation.current?.switchActiveMenuItem(value);
+    }, [value, navigation.current?.navigationTree]);
+    (0, react_1.useEffect)(() => {
+        !value && navigation.current?.switchActiveMenuItem(activeItem);
+    }, [activeItem, navigation.current?.navigationTree]);
+    (0, react_1.useEffect)(() => {
+        navigation.current?.switchIsSeparatedMenu(isSeparatedMenu);
     }, [isSeparatedMenu]);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         handleIsOpened(isOpen, manual);
     }, [isOpen]);
-    var showMinimizedRoot = function (newIsMinimized) {
+    const showMinimizedRoot = (newIsMinimized) => {
         if ((!isBeingTransitioned || isSeparatedMenu) && newIsMinimized === isOpened) {
             setIsBeingTransitioned(true);
             handleIsOpened(!newIsMinimized, !manual);
             if (transitionTimer.current) {
                 clearTimeout(transitionTimer.current);
             }
-            transitionTimer.current = setTimeout(function () {
+            transitionTimer.current = setTimeout(() => {
                 setIsBeingTransitioned(false);
-            }, transitionDuration + 200);
+            }, exports.transitionDuration + 200);
         }
     };
-    var shouldNotOpenOnHover = (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen;
-    var forceUpdatePositionPopups = useCallback(function () {
+    const shouldNotOpenOnHover = (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen;
+    const forceUpdatePositionPopups = (0, react_1.useCallback)(() => {
         // дикие костыли для перерисовки попапов, которые не обновляются автоматически при перерисовке меню
-        var fixPopupsPosition = function () { return window.dispatchEvent(new CustomEvent('scroll')); }; // чтобы вызвался LayoutEvent.emit() и перерисовались попапы
-        window.setTimeout(function () {
+        const fixPopupsPosition = () => window.dispatchEvent(new CustomEvent('scroll')); // чтобы вызвался LayoutEvent.emit() и перерисовались попапы
+        window.setTimeout(() => {
             fixPopupsPosition(); // перерисовка попапов и следом еще раз, чтобы после анимации SideMenu попапы вновь встали на свои места
-            window.setTimeout(function () { return fixPopupsPosition(); }, transitionDuration + 100);
+            window.setTimeout(() => fixPopupsPosition(), exports.transitionDuration + 100);
         }, 0);
     }, []);
-    var handleMouseEnter = function () {
+    const handleMouseEnter = () => {
         if (shouldNotOpenOnHover) {
             return;
         }
@@ -195,7 +190,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         forceUpdatePositionPopups();
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         if (shouldNotOpenOnHover) {
             return;
         }
@@ -208,12 +203,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         forceUpdatePositionPopups();
     };
-    var showMinimizedRootForNarrowDesktop = function (e) {
+    const showMinimizedRootForNarrowDesktop = (e) => {
         if (!isSeparatedMenuShown || !isCollapsable || isTouchScreen) {
             return;
         }
-        var relativeXCoordinate = e.clientX - leftPosition;
-        var sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
+        const relativeXCoordinate = e.clientX - leftPosition;
+        const sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
         if (relativeXCoordinate <= sideMenuMinimizedWidth && mousePositionX >= sideMenuMinimizedWidth) {
             showMinimizedRoot(false);
         }
@@ -222,7 +217,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         setMousePositionX(relativeXCoordinate);
     };
-    var showMenu = function (newIsShown) {
+    const showMenu = (newIsShown) => {
         if (!isTabletOrMobile) {
             return;
         }
@@ -232,42 +227,42 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             if (transitionTimer.current) {
                 clearTimeout(transitionTimer.current);
             }
-            transitionTimer.current = setTimeout(function () {
+            transitionTimer.current = setTimeout(() => {
                 setIsBeingTransitioned(false);
-            }, burgerTransitionDuration);
+            }, exports.burgerTransitionDuration);
         }
     };
-    var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
-    var _1 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
-        opacity: LIGHT_THEME.sidePageBackingBgOpacity,
+    const isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
+    const [shouldShowBackdrop, backdropStyle] = (0, useAnimateOnMount_1.useAnimateOnMount)(!!isTabletOrMobile && !!isOpened, exports.burgerTransitionDuration, {
+        opacity: LightTheme_1.LIGHT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), 2), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
-    var isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
-    var setScrollBar = function () {
-        var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
+    });
+    const isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
+    const setScrollBar = () => {
+        const isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
         if (isOpened && !isBeingTransitioned && !isSeparatedMenuShownInMobile) {
             return isTouchScreen ? 'always' : showScrollBar;
         }
         return 'never';
     };
-    var handleRightBorderClick = function () {
+    const handleRightBorderClick = () => {
         if (!isCollapsable) {
             setIsOpened(false);
         }
-        onPinnedValueChange === null || onPinnedValueChange === void 0 ? void 0 : onPinnedValueChange(!isCollapsable);
+        onPinnedValueChange?.(!isCollapsable);
         setIsCollapsable(!isCollapsable);
     };
-    var handleDropDownClose = function () {
+    const handleDropDownClose = () => {
         if (!isNarrowDesktop) {
             return;
         }
-        var shouldCloseSideMenu = !manual && document.hasFocus();
+        const shouldCloseSideMenu = !manual && document.hasFocus();
         setIsMouseOutside(true);
         shouldCloseSideMenu && handleIsOpened(false, !manual);
         setIsCollapsable(true);
     };
-    var handleDropDownOpen = function () {
+    const handleDropDownOpen = () => {
         if (!isNarrowDesktop) {
             return;
         }
@@ -275,84 +270,84 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         handleIsOpened(true, !manual);
         forceUpdatePositionPopups();
     };
-    return (React.createElement(SideMenuContext.Provider, { value: {
-            isOpened: isOpened,
-            isCollapsable: isCollapsable,
-            toggleIsOpened: function () { return showMenu(!isOpened); },
+    return (react_1.default.createElement(SideMenuContext_1.SideMenuContext.Provider, { value: {
+            isOpened,
+            isCollapsable,
+            toggleIsOpened: () => showMenu(!isOpened),
             setIsMinimized: showMinimizedRoot,
-            isBeingTransitioned: isBeingTransitioned,
-            isSeparatedMenu: isSeparatedMenu,
-            size: size,
+            isBeingTransitioned,
+            isSeparatedMenu,
+            size,
             isDesktop: isDesktopQuery,
-            isNarrowDesktop: isNarrowDesktop,
-            isTablet: isTablet,
-            isMobile: isMobile,
-            isTouchScreen: isTouchScreen,
-            setIsMouseOutside: setIsMouseOutside,
-            scrollState: scrollState,
-            setScrollState: setScrollState,
-            hasScrollBar: hasScrollBar,
-            setHasScrollBar: setHasScrollBar,
-            headerHeight: headerHeight,
-            setHeaderHeight: setHeaderHeight,
-            showScrollBar: showScrollBar,
-            sideMenuRef: sideMenuRef,
+            isNarrowDesktop,
+            isTablet,
+            isMobile,
+            isTouchScreen,
+            setIsMouseOutside,
+            scrollState,
+            setScrollState,
+            hasScrollBar,
+            setHasScrollBar,
+            headerHeight,
+            setHeaderHeight,
+            showScrollBar,
+            sideMenuRef,
             navigation: navigation.current,
-            handleDropDownOpen: handleDropDownOpen,
-            handleDropDownClose: handleDropDownClose,
+            handleDropDownOpen,
+            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,
-                _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 !== null && ref !== void 0 ? ref : null]) }, 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),
-                                _d)) },
-                            React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
-                                    setScrollState === null || setScrollState === void 0 ? void 0 : setScrollState(state);
+        (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)({
+                [SideMenu_styles_1.jsStylesForSideMenu.root()]: true,
+                [SideMenu_styles_1.customStyles.rootForTabletsOrMobiles(headerHeight)]: isTabletOrMobile,
+                [SideMenu_styles_1.jsStylesForSideMenu.shownRootForTabletsOrMobiles()]: isOpened && isTabletOrMobile,
+                [SideMenu_styles_1.jsStylesForSideMenu.transitionedRootForTabletsOrMobiles()]: isBeingTransitioned && isTabletOrMobile,
+                [SideMenu_styles_1.jsStylesForSideMenu.rootForNarrowDesktops(theme)]: isCollapsable,
+                [SideMenu_styles_1.jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)]: isSeparatedMenuShown && isCollapsable,
+                [SideMenu_styles_1.jsStylesForSideMenu.separatedRootForTouchScreens(theme)]: isSeparatedMenuShown && isTouchScreen && isCollapsable,
+                [SideMenu_styles_1.jsStylesForSideMenu.separatedRootForDesktops(theme)]: isSeparatedMenuShown && isDesktopQuery && !isCollapsable,
+                [SideMenu_styles_1.jsStylesForSideMenu.separatedRootForTouchScreensForDesktops(theme)]: isDesktopQuery && isSeparatedMenuShown && isTouchScreen,
+            }) },
+            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: () => showMenu(false) },
+                    react_1.default.createElement("aside", { className: (0, Emotion_1.cx)({
+                            [SideMenu_styles_1.jsStylesForSideMenu.wrapper()]: true,
+                            [SideMenu_styles_1.jsStylesForSideMenu.wrapperIE()]: client_1.isIE11,
+                            [SideMenu_styles_1.jsStylesForSideMenu.wrapperWithShadow(theme)]: isSideMenuOverContent,
+                        }, className), "data-tid": SideMenuDataTids_1.SideMenuDataTids.root, ref: (0, utils_1.mergeRefs)([sideMenuRef, ref ?? null]), ...rest, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop },
+                        react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+                                [SideMenu_styles_1.jsStylesForSideMenu.container(theme)]: true,
+                                [SideMenu_styles_1.jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()]: !isOpened && isTabletOrMobile && !isBeingTransitioned,
+                                [SideMenu_styles_1.jsStylesForSideMenu.minimizedContainer(theme)]: !isOpened && !isTabletOrMobile,
+                                [SideMenu_styles_1.jsStylesForSideMenu.containerForTouchScreens(theme)]: isTouchScreen,
+                                [SideMenu_styles_1.jsStylesForSideMenu.separatedContainerForMobiles(theme)]: isMobile && isSeparatedMenuShown && (isOpened || isBeingTransitioned),
+                            }) },
+                            react_1.default.createElement(ScrollContainer_1.ScrollContainer, { onScrollStateChangeY: (state) => {
+                                    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,
-                                        _e)), ref: contentWrapperRef }, children))),
-                        !disableSwipe && !disableCollapsing && isDesktopQuery && isOpened && (React.createElement(RightBorder, { onClick: handleRightBorderClick, showButton: isHovered }))))))));
+                                react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+                                        [SideMenu_styles_1.jsStylesForSideMenu.contentWrapper(theme)]: true,
+                                        [SideMenu_styles_1.jsStylesForSideMenu.contentWrapperForTouchScreens(theme)]: isTouchScreen,
+                                        [SideMenu_styles_1.jsStylesForSideMenu.minimizedContentWrapper()]: !isOpened && !isTabletOrMobile,
+                                    }), ref: contentWrapperRef }, children))),
+                        !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,
-    Notifications: SideMenuNotifications,
-    Divider: SideMenuDivider,
-    Link: SideMenuLink,
-    SubLink: SideMenuSubLink,
-    Dropdown: SideMenuDropdown,
+const STATIC_PROPS = {
+    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);