@skbkontur/side-menu 0.9.5 → 0.10.1

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

@@ -1,9 +1,12 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
+export declare const customStyles: {
+    rootForMobiles(headerHeight?: number | undefined): string;
+};
 export declare const jsStylesForSeparatedSubMenu: {
-    root(): string;
-    rootForMobiles(): string;
-    rootWithoutOverlayForNarrowDesktop(): string;
-    rootWithoutOverlay(): string;
-    rootWithShadow(): string;
-    contentWrapper(): string;
+    root(t: SideMenuTheme): string;
+    rootWithoutOverlayForNarrowDesktop(t: SideMenuTheme): string;
+    rootWithoutOverlay(t: SideMenuTheme): string;
+    rootWithShadow(t: SideMenuTheme): string;
+    contentWrapper(t: SideMenuTheme): string;
     contentWrapperForMobiles(): string;
 };

package/src/internal/SeparatedSubMenu.styles.js

@@ -1,28 +1,29 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { sideMenuBoxShadow, sideMenuMinimizedWidth, sideMenuStandardWidth } from '../SideMenu/SideMenu.styles';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        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    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n    "], ["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor, t.sideMenuSeparatedSubMenuBorderRightColor);
     },
-    rootForMobiles: function () {
-        var headerHeight = '68px';
-        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 (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuMinimizedWidth);
     },
-    rootWithoutOverlayForNarrowDesktop: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), sideMenuMinimizedWidth);
+    rootWithoutOverlay: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuWidth);
     },
-    rootWithoutOverlay: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), sideMenuStandardWidth);
+    rootWithShadow: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-shadow: ", ";\n      clip-path: inset(0 -", " 0 0);\n      border-right: none;\n    "], ["\n      box-shadow: ", ";\n      clip-path: inset(0 -", " 0 0);\n      border-right: none;\n    "])), t.sideMenuBoxShadow, t.sideMenuBoxShadowBlurRadius);
     },
-    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    "])));
+    contentWrapper: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding: ", " ", ";\n    "], ["\n      padding: ", " ", ";\n    "])), t.sideMenuSeparatedSubMenuPaddingY, t.sideMenuSeparatedSubMenuPaddingX);
     },
     contentWrapperForMobiles: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
+    },
+};
+export var customStyles = {
+    rootForMobiles: function (headerHeight) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      height: calc(100vh - ", "px);\n      left: 0;\n      top: ", "px;\n    "], ["\n      height: calc(100vh - ", "px);\n      left: 0;\n      top: ", "px;\n    "])), headerHeight, headerHeight);
     },
 };
 export var jsStylesForSeparatedSubMenu = memoizeStyle(styles);

package/src/internal/SideMenuLogotype.js

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
-import { jsStyles } from './SideMenuLogotype.styles';
+import { jsStyles, sideMenuLogotypeIconSize } from './SideMenuLogotype.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { Burger } from './Burger';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Логотип
  *
@@ -14,14 +16,16 @@ 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 theme = getSideMenuTheme(useContext(ThemeContext));
     var refLogotype = useRef(null);
     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);
-        var logotypeWidth = (_c = (_b = refLogotype.current) === null || _b === void 0 ? void 0 : _b.logotypeRef) === null || _c === void 0 ? void 0 : _c.clientWidth;
-        if (logotypeWidth && logotypeWidth > 186) {
-            //TODO 186 заменить на headerWrapper width после возврата к кастомизации
+        var _a, _b;
+        var logotypeWidth = (_b = (_a = refLogotype.current) === null || _a === void 0 ? void 0 : _a.logotypeRef) === null || _b === void 0 ? void 0 : _b.clientWidth;
+        var maxWidth = parseInt(theme.sideMenuWidth) -
+            2 * parseInt(theme.sideMenuMarginX) -
+            parseInt(theme.sideMenuLogotypePaddingLeft);
+        if (logotypeWidth && logotypeWidth > maxWidth) {
             setSize(24);
         }
     }, []);
@@ -42,7 +46,7 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     };
     var productName = getProductName();
     var getStaticIconPath = function () {
-        return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-32.svg";
+        return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-" + parseInt(sideMenuLogotypeIconSize) + ".svg";
     };
     var getWidget = function (withWidget, isTouchScreen, showWidget) {
         if (withWidget !== undefined) {
@@ -55,12 +59,12 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     };
     return (React.createElement("div", { className: jsStyles.root(), ref: ref },
         !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_b = {},
-                _b[jsStyles.iconHidden()] = true,
+                _b[jsStyles.iconHidden(theme)] = 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.logoWrapper(theme)] = true,
+                _c[jsStyles.logoWrapperForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
                 _c[jsStyles.logoWrapperHidden()] = context.isMinimized,
                 _c)) },
             (context.isTablet || context.isMobile) && React.createElement(Burger, null),

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

@@ -1,8 +1,11 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
+export declare const sideMenuLogotypeIconSize = "32px";
+export declare const sideMenuLogotypeGapBetweenIconAndLogo = "50px";
 export declare const jsStyles: {
     root(): string;
     icon(): string;
-    iconHidden(): string;
-    logoWrapper(): string;
-    logoWrapperForTabletsOrMobiles(): string;
+    iconHidden(t: SideMenuTheme): string;
+    logoWrapper(t: SideMenuTheme): string;
+    logoWrapperForTabletsOrMobiles(t: SideMenuTheme): string;
     logoWrapperHidden(): string;
 };

package/src/internal/SideMenuLogotype.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { transitionDuration } from '../SideMenu/SideMenu';
-var iconSize = 32;
-var gapBetweenIconAndLogo = 50;
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+export var sideMenuLogotypeIconSize = '32px';
+export var sideMenuLogotypeGapBetweenIconAndLogo = '50px';
 var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
@@ -10,17 +11,17 @@ var styles = {
     icon: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: 0;\n      opacity: 1;\n    "], ["\n      left: 0;\n      opacity: 1;\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);
+    iconHidden: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      left: -", ";\n      display: block;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", ";\n      display: block;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), sideMenuLogotypeGapBetweenIconAndLogo, t.sideMenuLogotypeHiddenIconPaddingLeft, 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);
+    logoWrapper: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      left: -", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), sideMenuLogotypeIconSize, t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, 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    "])));
+    logoWrapperForTabletsOrMobiles: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      left: 0;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      left: 0;\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
     },
     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);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: ", "px;\n      opacity: 0;\n    "], ["\n      left: ", "px;\n      opacity: 0;\n    "])), parseInt(sideMenuLogotypeGapBetweenIconAndLogo) - parseInt(sideMenuLogotypeIconSize));
     },
 };
 export var jsStyles = memoizeStyle(styles);