@skbkontur/side-menu 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.3...@skbkontur/side-menu@0.9.4) (2023-05-24)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [0.9.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.2...@skbkontur/side-menu@0.9.3) (2023-05-24)
+
+
+### Bug Fixes
+
+* **SideMenu:** change z-index for SidePage to 8000 ([1452080](https://git.skbkontur.ru/ui/ui-parking/commits/1452080fffc9079bccd3fbbabdd52461926c48c8))
+
+
+
+
+
 ## [0.9.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.1...@skbkontur/side-menu@0.9.2) (2023-05-19)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/package.json

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

package/src/SideMenu/SideMenu.js

@@ -1,5 +1,5 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
 import { jsStyles, sideMenuMinimizedWidth, sideMenuStandardWidth } from './SideMenu.styles';
@@ -29,8 +29,8 @@ export var burgerTransitionDuration = (transitionDuration * 2) / 3;
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
     var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, _j = _a.desktopMediaQuery, desktopMediaQuery = _j === void 0 ? '(min-width: 1200px)' : _j, _k = _a.narrowDesktopMediaQuery, narrowDesktopMediaQuery = _k === void 0 ? '(min-width: 992px)' : _k, _l = _a.tabletMediaQuery, tabletMediaQuery = _l === void 0 ? '(min-width: 768px)' : _l, _m = _a.mobileMediaQuery, mobileMediaQuery = _m === void 0 ? '(min-width: 0px)' : _m, _o = _a.separatedMenuWithOverlay, separatedMenuWithOverlay = _o === void 0 ? false : _o, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "separatedMenuWithOverlay"]);
-    var transitionTimer = null;
-    var widgetTimer;
+    var transitionTimer = useRef(null);
+    var widgetTimer = useRef(null);
     var customMediaQueries = {
         isMobileQuery: mobileMediaQuery,
         isTabletQuery: tabletMediaQuery,
@@ -59,11 +59,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
     var _0 = useState(0), mousePositionX = _0[0], setMousePositionX = _0[1];
     useEffect(function () {
         return function () {
-            if (transitionTimer) {
-                clearTimeout(transitionTimer);
+            if (transitionTimer.current) {
+                clearTimeout(transitionTimer.current);
             }
-            if (widgetTimer) {
-                clearTimeout(widgetTimer);
+            if (widgetTimer.current) {
+                clearTimeout(widgetTimer.current);
             }
         };
     }, []);
@@ -92,10 +92,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         if ((!isBeingTransitioned || minimizeWithoutOverlay) && newIsMinimized !== isMinimized) {
             setIsBeingTransitioned(true);
             setIsMinimized(newIsMinimized);
-            if (transitionTimer) {
-                clearTimeout(transitionTimer);
+            if (transitionTimer.current) {
+                clearTimeout(transitionTimer.current);
             }
-            transitionTimer = setTimeout(function () {
+            transitionTimer.current = setTimeout(function () {
                 setIsBeingTransitioned(false);
             }, transitionDuration);
         }
@@ -106,13 +106,13 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         isMouseOutside && showMinimizedRoot(false);
         setIsMouseOutside(false);
-        widgetTimer = setTimeout(function () {
+        widgetTimer.current = setTimeout(function () {
             setShowWidget(true);
         }, 500);
     };
     var handleMouseLeave = function () {
-        if (widgetTimer) {
-            clearTimeout(widgetTimer);
+        if (widgetTimer.current) {
+            clearTimeout(widgetTimer.current);
         }
         setShowWidget(false);
         if (isNarrowDesktop) {
@@ -143,10 +143,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         if (!isBeingTransitioned && newIsShown !== isShown) {
             setIsBeingTransitioned(true);
             setIsShown(newIsShown);
-            if (transitionTimer) {
-                clearTimeout(transitionTimer);
+            if (transitionTimer.current) {
+                clearTimeout(transitionTimer.current);
             }
-            transitionTimer = setTimeout(function () {
+            transitionTimer.current = setTimeout(function () {
                 setIsBeingTransitioned(false);
             }, burgerTransitionDuration);
         }
@@ -184,7 +184,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             hasScrollBar: hasScrollBar,
             setHasScrollBar: setHasScrollBar,
         } },
-        React.createElement(ZIndex, { priority: isTabletOrMobile || isNarrowDesktop ? 'Sidepage' : 0, className: cx((_b = {},
+        React.createElement(ZIndex, { priority: isTabletOrMobile || isNarrowDesktop ? 8 : 0, className: cx((_b = {},
                 _b[jsStyles.root()] = true,
                 _b[jsStyles.rootForTabletsOrMobiles()] = isTabletOrMobile,
                 _b[jsStyles.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,

package/src/internal/InnerSubMenu.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 interface InnerSubMenuProps {
     children?: React.ReactNode;
     generatedId?: string;
 }
-declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<ZIndex>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { InnerSubMenuWithStaticFields as InnerSubMenu };

package/src/internal/InnerSubMenu.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { isClickableSubElement } from '../../utils/scripts';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 /**
  * Подменю, раскрывающееся внутри основного меню
  *
@@ -8,7 +9,7 @@ import { isClickableSubElement } from '../../utils/scripts';
 var InnerSubMenu = forwardRef(function (_a, ref) {
     var children = _a.children, generatedId = _a.generatedId;
     var levelIndex = 0;
-    return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
+    return (React.createElement(ZIndex, { priority: 0, ref: ref }, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
             if (
             // @ts-expect-error: accessing private property
@@ -19,7 +20,7 @@ var InnerSubMenu = forwardRef(function (_a, ref) {
                     _generatedId: generatedId + "-" + oldIndex,
                 });
             }
-            return React.cloneElement(child, { ref: ref });
+            return React.cloneElement(child);
         }
         return child;
     })));

package/src/internal/SeparatedSubMenu.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 interface SeparatedSubMenuProps {
     children?: React.ReactNode;
     generatedId?: string;
@@ -6,7 +7,7 @@ interface SeparatedSubMenuProps {
     href?: string;
     caption?: string;
 }
-declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<ZIndex>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };

package/src/internal/SeparatedSubMenu.js

@@ -9,6 +9,7 @@ import { BackButton } from './BackButton';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ScrollContainer } from '@skbkontur/react-ui';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 /**
  * Отдельностоящее подменю
  *
@@ -33,7 +34,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var levelIndex = 0;
     var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
     var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
-    return (React.createElement("div", { className: cx((_b = {},
+    return (React.createElement(ZIndex, { priority: context.separatedMenuWithoutOverlay ? 8 : 0, className: cx((_b = {},
             _b[jsStyles.container()] = true,
             _b[jsStyles.containerForTouchScreens()] = context.isTouchScreen,
             _b[jsStylesForSeparatedSubMenu.root()] = true,

package/src/internal/SeparatedSubMenu.styles.js

@@ -3,7 +3,7 @@ import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { sideMenuBoxShadow, sideMenuMinimizedWidth, sideMenuStandardWidth } from '../SideMenu/SideMenu.styles';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      border-right: 1px solid #e5e5e5;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      border-right: 1px solid #e5e5e5;\n    "])));
     },
     rootForMobiles: function () {
         var headerHeight = '68px';

package/src/internal/SideMenuLogotype.js

@@ -24,7 +24,7 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
             //TODO 186 заменить на headerWrapper width после возврата к кастомизации
             setSize(24);
         }
-    });
+    }, []);
     var changeCamelCaseToKebabCase = function (str) {
         return str
             .split('')

package/src/internal/SubMenu.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 interface SubMenuProps {
     children?: React.ReactNode;
     generatedId?: string;
@@ -10,7 +11,7 @@ interface SubMenuProps {
     href?: string;
     caption?: string;
 }
-declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<ZIndex>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { SubMenuWithStaticFields as SubMenu };