@skbkontur/side-menu 3.3.3 → 3.3.4

package/src/internal/SeparatedSubMenu.styles.js

@@ -1,36 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsStyles = exports.customStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+import { __makeTemplateObject } from "tslib";
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
     root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n      z-index: 8000;\n    "], ["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n      z-index: 8000;\n    "])), t.sideMenuSeparatedSubMenuBgColor, t.sideMenuSeparatedSubMenuBorderRightColor);
+        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      z-index: 8000;\n    "], ["\n      position: absolute;\n      top: 0;\n      background: ", ";\n      left: 100%;\n      justify-content: flex-start;\n      border-right: 1px solid ", ";\n      z-index: 8000;\n    "])), t.sideMenuSeparatedSubMenuBgColor, t.sideMenuSeparatedSubMenuBorderRightColor);
     },
     rootForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuWidthForTouchScreens);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuWidthForTouchScreens);
     },
     rootForNarrowDesktop: function (t) {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuMinimizedWidth);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuMinimizedWidth);
     },
     rootForDesktop: function () {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      z-index: -1;\n    "], ["\n      z-index: -1;\n    "])));
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      z-index: -1;\n    "], ["\n      z-index: -1;\n    "])));
     },
     rootWithShadow: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__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);
+        return css(templateObject_5 || (templateObject_5 = __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);
     },
     contentWrapper: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      padding: ", " ", ";\n    "], ["\n      padding: ", " ", ";\n    "])), t.sideMenuSeparatedSubMenuPaddingY, t.sideMenuSeparatedSubMenuPaddingX);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " ", ";\n    "], ["\n      padding: ", " ", ";\n    "])), t.sideMenuSeparatedSubMenuPaddingY, t.sideMenuSeparatedSubMenuPaddingX);
     },
     contentWrapperForMobiles: function () {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 0;\n    "], ["\n      padding-top: 0;\n    "])));
     },
 };
-exports.customStyles = {
+export var customStyles = {
     rootForMobiles: function (headerHeight) {
-        return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__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);
+        return css(templateObject_8 || (templateObject_8 = __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);
     },
 };
-exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
+export var jsStyles = memoizeStyle(styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/src/internal/SideMenuLogotype.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SideMenuLogotype = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var Logotype_1 = require("@skbkontur/react-ui-addons/components/Logotype");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var react_ui_1 = require("@skbkontur/react-ui");
-var SideMenuContext_1 = require("../SideMenuContext");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenuLogotype_styles_1 = require("./SideMenuLogotype.styles");
-var Burger_1 = require("./Burger");
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { SideMenuContext } from '../SideMenuContext';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { jsStyles, sideMenuLogotypeIconSize } from './SideMenuLogotype.styles';
+import { Burger } from './Burger';
 var changeCamelCaseToKebabCase = function (str) {
     return str
         .split('')
@@ -27,23 +24,23 @@ var getProductName = function (productLogo) {
         : 'kontur';
 };
 var getStaticIconPath = function (productName) {
-    return "https://s.kontur.ru/common-v2/icons-products/".concat(productName, "/").concat(productName, "-").concat(parseInt(SideMenuLogotype_styles_1.sideMenuLogotypeIconSize), ".svg");
+    return "https://s.kontur.ru/common-v2/icons-products/".concat(productName, "/").concat(productName, "-").concat(parseInt(sideMenuLogotypeIconSize), ".svg");
 };
 /**
  * Логотип
  *
  * @visibleName SideMenu.Logotype
  */
-var SideMenuLogotype = (0, react_1.forwardRef)(function (_a, ref) {
+var SideMenuLogotype = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var productLogo = _a.productLogo, withWidget = _a.withWidget, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = tslib_1.__rest(_a, ["productLogo", "withWidget", "konturLogo", "iconUrl"]);
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
+    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 productName = getProductName(productLogo);
-    var refLogotype = (0, react_1.useRef)(null);
-    var _e = tslib_1.__read((0, react_1.useState)(28), 2), size = _e[0], setSize = _e[1];
-    var _f = tslib_1.__read((0, react_1.useState)(getStaticIconPath(productName)), 2), productIconUrl = _f[0], setProductIconUrl = _f[1];
-    (0, react_1.useEffect)(function () {
+    var refLogotype = useRef(null);
+    var _e = __read(useState(28), 2), size = _e[0], setSize = _e[1];
+    var _f = __read(useState(getStaticIconPath(productName)), 2), productIconUrl = _f[0], setProductIconUrl = _f[1];
+    useEffect(function () {
         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) -
@@ -62,22 +59,22 @@ var SideMenuLogotype = (0, react_1.forwardRef)(function (_a, ref) {
     var handleError = function () {
         setProductIconUrl(getStaticIconPath('kontur'));
     };
-    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_b = {},
-            _b[SideMenuLogotype_styles_1.jsStyles.root()] = true,
-            _b[SideMenuLogotype_styles_1.jsStyles.rootForTabletsOrMobiles()] = context.isMobile || context.isTablet,
+    return (React.createElement("div", { className: cx((_b = {},
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.rootForTabletsOrMobiles()] = context.isMobile || context.isTablet,
             _b)), ref: ref },
-        !context.isMobile && !context.isTablet && (react_1.default.createElement("img", { className: (0, Emotion_1.cx)((_c = {},
-                _c[SideMenuLogotype_styles_1.jsStyles.iconHidden(theme)] = true,
-                _c[SideMenuLogotype_styles_1.jsStyles.icon()] = !context.isOpened && !(context.isMobile || context.isTablet),
+        !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_c = {},
+                _c[jsStyles.iconHidden(theme)] = true,
+                _c[jsStyles.icon()] = !context.isOpened && !(context.isMobile || context.isTablet),
                 _c)), src: iconUrl || productIconUrl, alt: productName, onError: handleError })),
-        react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_d = {},
-                _d[SideMenuLogotype_styles_1.jsStyles.logoWrapper(theme)] = true,
-                _d[SideMenuLogotype_styles_1.jsStyles.logoWrapperForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
-                _d[SideMenuLogotype_styles_1.jsStyles.logoWrapperHidden()] = !context.isOpened && !(context.isMobile || context.isTablet),
+        React.createElement("div", { className: cx((_d = {},
+                _d[jsStyles.logoWrapper(theme)] = true,
+                _d[jsStyles.logoWrapperForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
+                _d[jsStyles.logoWrapperHidden()] = !context.isOpened && !(context.isMobile || context.isTablet),
                 _d)) },
-            (context.isTablet || context.isMobile) && react_1.default.createElement(Burger_1.Burger, null),
-            react_1.default.createElement(Logotype_1.Logotype, tslib_1.__assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, !context.isOpened && context.isCollapsable) }, rest)))));
+            (context.isTablet || context.isMobile) && React.createElement(Burger, null),
+            React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, !context.isOpened && context.isCollapsable) }, rest)))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });
-exports.SideMenuLogotype = SideMenuLogotypeWithStaticFields;
+export { SideMenuLogotypeWithStaticFields as SideMenuLogotype };

package/src/internal/SideMenuLogotype.styles.js

@@ -1,34 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsStyles = exports.sideMenuLogotypeGapBetweenIconAndLogo = exports.sideMenuLogotypeIconSize = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var SideMenu_1 = require("../SideMenu/SideMenu");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-exports.sideMenuLogotypeIconSize = '32px';
-exports.sideMenuLogotypeGapBetweenIconAndLogo = '50px';
+import { __makeTemplateObject } from "tslib";
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { transitionDuration } from '../SideMenu/SideMenu';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+export var sideMenuLogotypeIconSize = '32px';
+export var sideMenuLogotypeGapBetweenIconAndLogo = '50px';
 var styles = {
     root: function () {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      display: flex;\n      padding-left: 4px;\n    "], ["\n      display: flex;\n      padding-left: 4px;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      padding-left: 4px;\n    "], ["\n      display: flex;\n      padding-left: 4px;\n    "])));
     },
     rootForTabletsOrMobiles: function () {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding-left: 0;\n    "], ["\n      padding-left: 0;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-left: 0;\n    "], ["\n      padding-left: 0;\n    "])));
     },
     icon: function () {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      opacity: 1;\n      width: auto;\n    "], ["\n      opacity: 1;\n      width: auto;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      opacity: 1;\n      width: auto;\n    "], ["\n      opacity: 1;\n      width: auto;\n    "])));
     },
     iconHidden: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypeHiddenIconPaddingLeft, SideMenu_1.transitionDuration);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
     },
     logoWrapper: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, SideMenu_1.transitionDuration);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
     },
     logoWrapperForTabletsOrMobiles: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
     },
     logoWrapperHidden: function () {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      opacity: 0;\n    "], ["\n      opacity: 0;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      opacity: 0;\n    "], ["\n      opacity: 0;\n    "])));
     },
 };
-exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
+export var jsStyles = memoizeStyle(styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/SubMenu.js

@@ -1,29 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubMenu = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var SideMenuContext_1 = require("../SideMenuContext");
-var SeparatedSubMenu_1 = require("./SeparatedSubMenu");
-var InnerSubMenu_1 = require("./InnerSubMenu");
-var NestedMenu_1 = require("./NestedMenu");
+import React, { forwardRef, useContext } from 'react';
+import { SideMenuContext } from '../SideMenuContext';
+import { SeparatedSubMenu } from './SeparatedSubMenu';
+import { InnerSubMenu } from './InnerSubMenu';
+import { NestedMenu } from './NestedMenu';
 /**
  * Подменю
  *
  * @visibleName InnerSubMenu
  */
-var SubMenu = (0, react_1.forwardRef)(function (_a, ref) {
+var SubMenu = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isSeparatedMenu = _a.isSeparatedMenu, caption = _a.caption, htmlId = _a.htmlId;
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    var context = useContext(SideMenuContext);
     if (isSubMenu) {
-        return (react_1.default.createElement(NestedMenu_1.NestedMenu, { ref: ref, htmlId: htmlId, isOpened: isOpened }, children));
+        return (React.createElement(NestedMenu, { ref: ref, htmlId: htmlId, isOpened: isOpened }, children));
     }
     if (isSeparatedMenu) {
-        return (react_1.default.createElement(SeparatedSubMenu_1.SeparatedSubMenu, { ref: ref, caption: caption, htmlId: htmlId, isOpened: isOpened && ((_b = context.navigation) === null || _b === void 0 ? void 0 : _b.isSeparatedMenuShown) }, children));
+        return (React.createElement(SeparatedSubMenu, { ref: ref, caption: caption, htmlId: htmlId, isOpened: isOpened && ((_b = context.navigation) === null || _b === void 0 ? void 0 : _b.isSeparatedMenuShown) }, children));
     }
-    return (react_1.default.createElement(InnerSubMenu_1.InnerSubMenu, { ref: ref, htmlId: htmlId, isOpened: isOpened }, children));
+    return (React.createElement(InnerSubMenu, { ref: ref, htmlId: htmlId, isOpened: isOpened }, children));
 });
 SubMenu.displayName = 'SubMenu';
 var SubMenuWithStaticFields = Object.assign(SubMenu, { __KONTUR_REACT_UI__: 'SubMenu' });
-exports.SubMenu = SubMenuWithStaticFields;
+export { SubMenuWithStaticFields as SubMenu };