@skbkontur/side-menu 0.7.3 → 0.8.0

package/src/internal/SeparatedSubMenu.styles.js

@@ -3,11 +3,11 @@ 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      padding: 24px 16px;\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      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "])));
+        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    "])));
     },
     rootForMobiles: function () {
         var headerHeight = '68px';
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n      padding-top: 0;\n    "], ["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n      padding-top: 0;\n    "])), headerHeight, headerHeight);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n    "], ["\n      height: calc(100vh - ", ");\n      left: 0;\n      top: ", ";\n    "])), headerHeight, headerHeight);
     },
     rootWithoutOverlayForNarrowDesktop: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), sideMenuMinimizedWidth);
@@ -18,6 +18,12 @@ var styles = {
     rootWithShadow: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: ", ";\n      clip-path: inset(0 -24px 0 0);\n      border-right: none;\n    "], ["\n      box-shadow: ", ";\n      clip-path: inset(0 -24px 0 0);\n      border-right: none;\n    "])), sideMenuBoxShadow);
     },
+    contentWrapper: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: 24px 16px;\n    "], ["\n      padding: 24px 16px;\n    "])));
+    },
+    contentWrapperForMobiles: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
+    },
 };
 export var jsStylesForSeparatedSubMenu = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/SideMenuLogotype.js

@@ -4,16 +4,18 @@ import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
 import { jsStyles } from './SideMenuLogotype.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { Burger } from './Burger';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 /**
  * Логотип
  *
  * @visibleName SideMenu.Logotype
  */
 var SideMenuLogotype = forwardRef(function (_a, ref) {
+    var _b, _c;
     var productLogo = _a.productLogo, withWidget = _a.withWidget, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = __rest(_a, ["productLogo", "withWidget", "konturLogo", "iconUrl"]);
     var context = useContext(SideMenuContext);
     var refLogotype = useRef(null);
-    var _b = useState(28), size = _b[0], setSize = _b[1];
+    var _d = useState(28), size = _d[0], setSize = _d[1];
     useEffect(function () {
         var _a, _b, _c;
         (_a = context.setProductColor) === null || _a === void 0 ? void 0 : _a.call(context, productLogo === null || productLogo === void 0 ? void 0 : productLogo.props.color);
@@ -42,9 +44,6 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     var getStaticIconPath = function () {
         return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-32.svg";
     };
-    if (context.isMinimized || context.isBeingTransitioned) {
-        return React.createElement("img", { className: jsStyles.icon(), src: iconUrl || getStaticIconPath(), alt: productName });
-    }
     var getWidget = function (withWidget, isTouchScreen, showWidget) {
         if (withWidget !== undefined) {
             return withWidget;
@@ -55,8 +54,17 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
         return showWidget;
     };
     return (React.createElement("div", { className: jsStyles.root(), ref: ref },
-        (context.isTablet || context.isMobile) && React.createElement(Burger, null),
-        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.showWidget) }, rest))));
+        !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_b = {},
+                _b[jsStyles.iconHidden()] = true,
+                _b[jsStyles.icon()] = context.isMinimized,
+                _b)), src: iconUrl || getStaticIconPath(), alt: productName })),
+        React.createElement("div", { className: cx((_c = {},
+                _c[jsStyles.logoWrapper()] = true,
+                _c[jsStyles.logoWrapperForTabletsOrMobiles()] = context.isMobile || context.isTablet,
+                _c[jsStyles.logoWrapperHidden()] = context.isMinimized,
+                _c)) },
+            (context.isTablet || context.isMobile) && React.createElement(Burger, null),
+            React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.showWidget) }, rest)))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });

package/src/internal/SideMenuLogotype.styles.d.ts

@@ -1,4 +1,8 @@
 export declare const jsStyles: {
-    icon(): string;
     root(): string;
+    icon(): string;
+    iconHidden(): string;
+    logoWrapper(): string;
+    logoWrapperForTabletsOrMobiles(): string;
+    logoWrapperHidden(): string;
 };

package/src/internal/SideMenuLogotype.styles.js

@@ -1,12 +1,27 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { transitionDuration } from '../SideMenu/SideMenu';
+var iconSize = 32;
+var gapBetweenIconAndLogo = 50;
 var styles = {
+    root: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+    },
     icon: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: 0;\n      opacity: 1;\n    "], ["\n      left: 0;\n      opacity: 1;\n    "])));
     },
-    root: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+    iconHidden: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      left: -", "px;\n      display: block;\n      padding-left: 4px;\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", "px;\n      display: block;\n      padding-left: 4px;\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), gapBetweenIconAndLogo, transitionDuration);
+    },
+    logoWrapper: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      left: -", "px;\n      padding-top: 2px;\n      padding-bottom: 6px;\n      padding-left: 8px;\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", "px;\n      padding-top: 2px;\n      padding-bottom: 6px;\n      padding-left: 8px;\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), iconSize, transitionDuration);
+    },
+    logoWrapperForTabletsOrMobiles: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      left: 0;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      left: 0;\n    "])));
+    },
+    logoWrapperHidden: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: ", "px;\n      opacity: 0;\n    "], ["\n      left: ", "px;\n      opacity: 0;\n    "])), gapBetweenIconAndLogo - iconSize);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/src/internal/SubMenu.js

@@ -14,7 +14,7 @@ var SubMenu = forwardRef(function (_a, ref) {
     if (!children || !isOpened || isSubMenu || shouldHideOverlayMenu) {
         return null;
     }
-    if (isSeparatedMenu) {
+    if (isSeparatedMenu && (context.isShown || context.isBeingTransitioned)) {
         return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption }, children));
     }
     return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref }, children));

package/hooks/useMobileSeparatedMenuScroll.d.ts

@@ -1 +0,0 @@
-export declare const useMobileSeparatedMenuScroll: () => import("react").RefObject<HTMLDivElement>;

package/hooks/useMobileSeparatedMenuScroll.js

@@ -1,21 +0,0 @@
-import { useContext, useEffect, useRef } from 'react';
-import { SideMenuContext } from '../src/SideMenuContext';
-export var useMobileSeparatedMenuScroll = function () {
-    var separatedMenuRef = useRef(null);
-    var context = useContext(SideMenuContext);
-    var checkScroll = function () {
-        var _a, _b;
-        var isScrolledToTop = ((_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0;
-        (_b = context.setIsMobileSeparatedMenuScrolling) === null || _b === void 0 ? void 0 : _b.call(context, !isScrolledToTop);
-    };
-    useEffect(function () {
-        var _a;
-        context.isMobile && ((_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', checkScroll, true));
-        return function () {
-            var _a, _b;
-            (_a = separatedMenuRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', checkScroll, true);
-            (_b = context.setIsMobileSeparatedMenuScrolling) === null || _b === void 0 ? void 0 : _b.call(context, false);
-        };
-    }, []);
-    return separatedMenuRef;
-};