@skbkontur/side-menu 3.1.7 → 3.2.0

package/src/SideMenu/SideMenu.js

@@ -1,315 +1,315 @@
-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 { jsStylesForSideMenu, customStyles } from './SideMenu.styles';
-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 { LIGHT_THEME, ScrollContainer, useResponsiveLayout } from '@skbkontur/react-ui';
-import { Backdrop } from '../internal/Backdrop';
-import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
-import { isTouchDevice } from '../../lib/utils/scripts';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
-import { useAnimateOnMount } from '../../hooks/useAnimateOnMount';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
-import { MenuNavigation } from '../Navigation';
-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 sideMenuRef = useRef(null);
-    var contentWrapperRef = useRef(null);
-    var scrollContainerRef = useRef(null);
-    var navigation = useRef(null);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var 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) {
-        if (id !== value && id !== activeItem) {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
-            onActiveItemChange === null || onActiveItemChange === void 0 ? void 0 : 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({
-            rootRef: sideMenuRef,
-            activeMenuItem: activeMenuItem,
-            setActiveMenuItem: switchActiveMenuItem,
-            isSeparatedMenu: isSeparatedMenu,
-            isSeparatedMenuShown: isSeparatedMenuShown,
-            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
-            isOpened: isOpened,
-            isDesktopQuery: isDesktopQuery,
-            isMobile: isMobile,
-            isCollapsable: isCollapsable,
-        });
-        return function () {
-            if (transitionTimer.current) {
-                clearTimeout(transitionTimer.current);
-            }
-        };
-    }, []);
-    useEffect(function () {
-        if (isMobile && isSeparatedMenuShown)
-            return;
-        setTimeout(function () {
-            var _a;
-            var contentWrapper = contentWrapperRef.current;
-            var scrollContainer = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.inner;
-            if (!contentWrapper || !scrollContainer)
-                return;
-            setHasScrollBar(scrollContainer.clientHeight < contentWrapper.scrollHeight);
-        }, 50);
-    }, [activeMenuItem, isOpened, isBeingTransitioned]);
-    useEffect(function () {
-        isDesktopQuery && setIsOpened(!isPinned);
-    }, [isPinned, isDesktopQuery]);
-    var handleIsOpened = function (newIsOpened, shouldSetState) {
-        if (newIsOpened === isOpened || !shouldSetState)
-            return;
-        setIsOpened(newIsOpened);
-        if (newIsOpened) {
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        }
-        else {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
-    };
-    useEffect(function () {
-        if (isDesktopQuery && !isPinned) {
-            setIsOpened(true);
-            setIsCollapsable(false);
-        }
-        if (isNarrowDesktop || isTablet || isMobile) {
-            setIsOpened(false);
-        }
-        isNarrowDesktop && setIsCollapsable(true);
-        if (isDesktopQuery && isPinned) {
-            setIsCollapsable(true);
-            if (navigation.current) {
-                navigation.current.isCollapsable = true;
-            }
-        }
-    }, [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);
-    }, [isSeparatedMenu]);
-    useEffect(function () {
-        handleIsOpened(isOpen, manual);
-    }, [isOpen]);
-    var showMinimizedRoot = function (newIsMinimized) {
-        if ((!isBeingTransitioned || isSeparatedMenu) && newIsMinimized === isOpened) {
-            setIsBeingTransitioned(true);
-            handleIsOpened(!newIsMinimized, !manual);
-            if (transitionTimer.current) {
-                clearTimeout(transitionTimer.current);
-            }
-            transitionTimer.current = setTimeout(function () {
-                setIsBeingTransitioned(false);
-            }, transitionDuration + 200);
-        }
-    };
-    var shouldNotOpenOnHover = (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen;
-    var handleMouseEnter = function () {
-        if (shouldNotOpenOnHover) {
-            return;
-        }
-        setIsHovered(true);
-        if (isCollapsable && !isOpened && !isSeparatedMenuShown) {
-            isMouseOutside && showMinimizedRoot(false);
-            setIsMouseOutside(false);
-        }
-    };
-    var handleMouseLeave = function () {
-        if (shouldNotOpenOnHover) {
-            return;
-        }
-        setIsHovered(false);
-        if (isCollapsable) {
-            handleIsOpened(false, !manual);
-            if (!manual) {
-                setIsMouseOutside(true);
-            }
-        }
-    };
-    var showMinimizedRootForNarrowDesktop = function (e) {
-        if (!isSeparatedMenuShown || !isCollapsable || isTouchScreen)
-            return;
-        var relativeXCoordinate = e.clientX - leftPosition;
-        var sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
-        if (relativeXCoordinate <= sideMenuMinimizedWidth && mousePositionX >= sideMenuMinimizedWidth) {
-            showMinimizedRoot(false);
-        }
-        else if (relativeXCoordinate > parseInt(theme.sideMenuWidth)) {
-            showMinimizedRoot(true);
-        }
-        setMousePositionX(relativeXCoordinate);
-    };
-    var showMenu = function (newIsShown) {
-        if (!isTabletOrMobile)
-            return;
-        if (!isBeingTransitioned && newIsShown !== isOpened) {
-            setIsBeingTransitioned(true);
-            handleIsOpened(newIsShown, !manual);
-            if (transitionTimer.current) {
-                clearTimeout(transitionTimer.current);
-            }
-            transitionTimer.current = setTimeout(function () {
-                setIsBeingTransitioned(false);
-            }, burgerTransitionDuration);
-        }
-    };
-    var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
-    var _1 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
-        opacity: LIGHT_THEME.sidePageBackingBgOpacity,
-    }, {
-        opacity: 0,
-    }), 2), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
-    var isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
-    var setScrollBar = function () {
-        var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
-        if (isOpened && !isBeingTransitioned && !isSeparatedMenuShownInMobile) {
-            return isTouchScreen ? 'always' : showScrollBar;
-        }
-        return 'never';
-    };
-    var handleRightBorderClick = function () {
-        if (!isCollapsable) {
-            setIsOpened(false);
-        }
-        onPinnedValueChange === null || onPinnedValueChange === void 0 ? void 0 : onPinnedValueChange(!isCollapsable);
-        setIsCollapsable(!isCollapsable);
-    };
-    return (React.createElement(SideMenuContext.Provider, { value: {
-            isOpened: isOpened,
-            isCollapsable: isCollapsable,
-            toggleIsOpened: function () { return showMenu(!isOpened); },
-            setIsMinimized: showMinimizedRoot,
-            isBeingTransitioned: isBeingTransitioned,
-            isSeparatedMenu: isSeparatedMenu,
-            size: 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,
-            navigation: navigation.current,
-        } },
-        (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]) }, 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);
-                                }, 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 }))))))));
-});
-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,
-    __KONTUR_REACT_UI__: 'SideMenu',
-};
-export var SideMenu = Object.assign(SideMenuInner, STATIC_PROPS);
+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 { jsStylesForSideMenu, customStyles } from './SideMenu.styles';
+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 { LIGHT_THEME, ScrollContainer, useResponsiveLayout } from '@skbkontur/react-ui';
+import { Backdrop } from '../internal/Backdrop';
+import { RenderLayer } from '@skbkontur/react-ui/internal/RenderLayer';
+import { isTouchDevice } from '../../lib/utils/scripts';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
+import { useAnimateOnMount } from '../../hooks/useAnimateOnMount';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
+import { MenuNavigation } from '../Navigation';
+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 sideMenuRef = useRef(null);
+    var contentWrapperRef = useRef(null);
+    var scrollContainerRef = useRef(null);
+    var navigation = useRef(null);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    var 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) {
+        if (id !== value && id !== activeItem) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
+            onActiveItemChange === null || onActiveItemChange === void 0 ? void 0 : 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({
+            rootRef: sideMenuRef,
+            activeMenuItem: activeMenuItem,
+            setActiveMenuItem: switchActiveMenuItem,
+            isSeparatedMenu: isSeparatedMenu,
+            isSeparatedMenuShown: isSeparatedMenuShown,
+            setIsSeparatedMenuShown: setIsSeparatedMenuShown,
+            isOpened: isOpened,
+            isDesktopQuery: isDesktopQuery,
+            isMobile: isMobile,
+            isCollapsable: isCollapsable,
+        });
+        return function () {
+            if (transitionTimer.current) {
+                clearTimeout(transitionTimer.current);
+            }
+        };
+    }, []);
+    useEffect(function () {
+        if (isMobile && isSeparatedMenuShown)
+            return;
+        setTimeout(function () {
+            var _a;
+            var contentWrapper = contentWrapperRef.current;
+            var scrollContainer = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.inner;
+            if (!contentWrapper || !scrollContainer)
+                return;
+            setHasScrollBar(scrollContainer.clientHeight < contentWrapper.scrollHeight);
+        }, 50);
+    }, [activeMenuItem, isOpened, isBeingTransitioned]);
+    useEffect(function () {
+        isDesktopQuery && setIsOpened(!isPinned);
+    }, [isPinned, isDesktopQuery]);
+    var handleIsOpened = function (newIsOpened, shouldSetState) {
+        if (newIsOpened === isOpened || !shouldSetState)
+            return;
+        setIsOpened(newIsOpened);
+        if (newIsOpened) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    useEffect(function () {
+        if (isDesktopQuery && !isPinned) {
+            setIsOpened(true);
+            setIsCollapsable(false);
+        }
+        if (isNarrowDesktop || isTablet || isMobile) {
+            setIsOpened(false);
+        }
+        isNarrowDesktop && setIsCollapsable(true);
+        if (isDesktopQuery && isPinned) {
+            setIsCollapsable(true);
+            if (navigation.current) {
+                navigation.current.isCollapsable = true;
+            }
+        }
+    }, [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);
+    }, [isSeparatedMenu]);
+    useEffect(function () {
+        handleIsOpened(isOpen, manual);
+    }, [isOpen]);
+    var showMinimizedRoot = function (newIsMinimized) {
+        if ((!isBeingTransitioned || isSeparatedMenu) && newIsMinimized === isOpened) {
+            setIsBeingTransitioned(true);
+            handleIsOpened(!newIsMinimized, !manual);
+            if (transitionTimer.current) {
+                clearTimeout(transitionTimer.current);
+            }
+            transitionTimer.current = setTimeout(function () {
+                setIsBeingTransitioned(false);
+            }, transitionDuration + 200);
+        }
+    };
+    var shouldNotOpenOnHover = (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen;
+    var handleMouseEnter = function () {
+        if (shouldNotOpenOnHover) {
+            return;
+        }
+        setIsHovered(true);
+        if (isCollapsable && !isOpened && !isSeparatedMenuShown) {
+            isMouseOutside && showMinimizedRoot(false);
+            setIsMouseOutside(false);
+        }
+    };
+    var handleMouseLeave = function () {
+        if (shouldNotOpenOnHover) {
+            return;
+        }
+        setIsHovered(false);
+        if (isCollapsable) {
+            handleIsOpened(false, !manual);
+            if (!manual) {
+                setIsMouseOutside(true);
+            }
+        }
+    };
+    var showMinimizedRootForNarrowDesktop = function (e) {
+        if (!isSeparatedMenuShown || !isCollapsable || isTouchScreen)
+            return;
+        var relativeXCoordinate = e.clientX - leftPosition;
+        var sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
+        if (relativeXCoordinate <= sideMenuMinimizedWidth && mousePositionX >= sideMenuMinimizedWidth) {
+            showMinimizedRoot(false);
+        }
+        else if (relativeXCoordinate > parseInt(theme.sideMenuWidth)) {
+            showMinimizedRoot(true);
+        }
+        setMousePositionX(relativeXCoordinate);
+    };
+    var showMenu = function (newIsShown) {
+        if (!isTabletOrMobile)
+            return;
+        if (!isBeingTransitioned && newIsShown !== isOpened) {
+            setIsBeingTransitioned(true);
+            handleIsOpened(newIsShown, !manual);
+            if (transitionTimer.current) {
+                clearTimeout(transitionTimer.current);
+            }
+            transitionTimer.current = setTimeout(function () {
+                setIsBeingTransitioned(false);
+            }, burgerTransitionDuration);
+        }
+    };
+    var isSideMenuOverContent = (isCollapsable || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
+    var _1 = __read(useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
+        opacity: LIGHT_THEME.sidePageBackingBgOpacity,
+    }, {
+        opacity: 0,
+    }), 2), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
+    var isSideMenuOverflowing = (isTabletOrMobile || isCollapsable) && isOpened;
+    var setScrollBar = function () {
+        var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
+        if (isOpened && !isBeingTransitioned && !isSeparatedMenuShownInMobile) {
+            return isTouchScreen ? 'always' : showScrollBar;
+        }
+        return 'never';
+    };
+    var handleRightBorderClick = function () {
+        if (!isCollapsable) {
+            setIsOpened(false);
+        }
+        onPinnedValueChange === null || onPinnedValueChange === void 0 ? void 0 : onPinnedValueChange(!isCollapsable);
+        setIsCollapsable(!isCollapsable);
+    };
+    return (React.createElement(SideMenuContext.Provider, { value: {
+            isOpened: isOpened,
+            isCollapsable: isCollapsable,
+            toggleIsOpened: function () { return showMenu(!isOpened); },
+            setIsMinimized: showMinimizedRoot,
+            isBeingTransitioned: isBeingTransitioned,
+            isSeparatedMenu: isSeparatedMenu,
+            size: 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,
+            navigation: navigation.current,
+        } },
+        (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]) }, 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);
+                                }, 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 }))))))));
+});
+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,
+    __KONTUR_REACT_UI__: 'SideMenu',
+};
+export var SideMenu = Object.assign(SideMenuInner, STATIC_PROPS);