@skbkontur/side-menu 3.1.8 → 3.2.0

package/src/internal/RightBorder.styles.js

@@ -1,13 +1,13 @@
-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 css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "], ["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sideMenuRightBorderWidth, t.sideMenuRightBorderIconColor, t.sideMenuRightBorderHoverIconColor);
-    },
-    rootWithButton: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+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 css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "], ["\n      opacity: 0;\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: 0;\n      background: transparent;\n      display: flex;\n      color: ", ";\n      transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sideMenuRightBorderWidth, t.sideMenuRightBorderIconColor, t.sideMenuRightBorderHoverIconColor);
+    },
+    rootWithButton: function () {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1, templateObject_2;

package/src/internal/SeparatedSubMenu.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { CommonClickableElementProps } from './ClickableElement';
-interface SeparatedSubMenuProps extends Pick<CommonClickableElementProps, 'caption'> {
-    children?: React.ReactNode;
-    htmlId: string;
-    isOpened?: boolean;
-}
-declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };
+import React from 'react';
+import { CommonClickableElementProps } from './ClickableElement';
+interface SeparatedSubMenuProps extends Pick<CommonClickableElementProps, 'caption'> {
+    children?: React.ReactNode;
+    htmlId: string;
+    isOpened?: boolean;
+}
+declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };

package/src/internal/SeparatedSubMenu.js

@@ -1,64 +1,64 @@
-import { __assign } from "tslib";
-import React, { forwardRef, useContext, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
-import { customStyles, jsStyles } from './SeparatedSubMenu.styles';
-import { SideMenuContext } from '../SideMenuContext';
-import { BackButton } from './BackButton';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { ScrollContainer } from '@skbkontur/react-ui';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { isIE11 } from '@skbkontur/react-ui/lib/client';
-import { navigationAttributeForSeparatedMenu } from '../Navigation';
-/**
- * Отдельностоящее подменю
- *
- * @visibleName SeparatedSubMenu
- */
-var SeparatedSubMenu = forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var _e, _f, _g;
-    var children = _a.children, caption = _a.caption, htmlId = _a.htmlId, isOpened = _a.isOpened;
-    var context = useContext(SideMenuContext);
-    var scrollContainerRef = useRef(null);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    useEffect(function () {
-        if (!context.isMobile) {
-            return;
-        }
-        setTimeout(function () {
-            var _a, _b;
-            isOpened && ((_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, !!((_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'))));
-        }, 50);
-    }, [(_e = context.navigation) === null || _e === void 0 ? void 0 : _e.activeMenuItem]);
-    if (!((_f = context.sideMenuRef) === null || _f === void 0 ? void 0 : _f.current)) {
-        return null;
-    }
-    return ReactDOM.createPortal(React.createElement("div", __assign({ className: cx((_b = {},
-            _b[jsStylesForSideMenu.container(theme)] = true,
-            _b[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
-            _b[jsStyles.root(theme)] = true,
-            _b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
-            _b[jsStyles.rootForDesktop()] = context.isDesktop,
-            _b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isCollapsable,
-            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isCollapsable,
-            _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
-            _b[jsStylesForSideMenu.hidden()] = !isOpened || (!context.isOpened && (context.isTablet || context.isMobile)),
-            _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu }, (_c = {}, _c[navigationAttributeForSeparatedMenu] = htmlId, _c)),
-        React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
-                var _a;
-                (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
-            }, ref: scrollContainerRef, showScrollBar: context.isTouchScreen ? 'always' : context.showScrollBar },
-            React.createElement("ul", { className: cx((_d = {},
-                    _d[jsStylesForSideMenu.list()] = true,
-                    _d[jsStyles.contentWrapper(theme)] = true,
-                    _d[jsStyles.contentWrapperForMobiles()] = context.isMobile,
-                    _d)) },
-                context.isMobile && React.createElement(BackButton, { caption: caption, id: htmlId }),
-                children))), (_g = context.sideMenuRef) === null || _g === void 0 ? void 0 : _g.current);
-});
-SeparatedSubMenu.displayName = 'SeparatedSubMenu';
-var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
-export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };
+import { __assign } from "tslib";
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
+import { customStyles, jsStyles } from './SeparatedSubMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
+import { BackButton } from './BackButton';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { ScrollContainer } from '@skbkontur/react-ui';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { isIE11 } from '@skbkontur/react-ui/lib/client';
+import { navigationAttributeForSeparatedMenu } from '../Navigation';
+/**
+ * Отдельностоящее подменю
+ *
+ * @visibleName SeparatedSubMenu
+ */
+var SeparatedSubMenu = forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var _e, _f, _g;
+    var children = _a.children, caption = _a.caption, htmlId = _a.htmlId, isOpened = _a.isOpened;
+    var context = useContext(SideMenuContext);
+    var scrollContainerRef = useRef(null);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    useEffect(function () {
+        if (!context.isMobile) {
+            return;
+        }
+        setTimeout(function () {
+            var _a, _b;
+            isOpened && ((_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, !!((_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'))));
+        }, 50);
+    }, [(_e = context.navigation) === null || _e === void 0 ? void 0 : _e.activeMenuItem]);
+    if (!((_f = context.sideMenuRef) === null || _f === void 0 ? void 0 : _f.current)) {
+        return null;
+    }
+    return ReactDOM.createPortal(React.createElement("div", __assign({ className: cx((_b = {},
+            _b[jsStylesForSideMenu.container(theme)] = true,
+            _b[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
+            _b[jsStyles.root(theme)] = true,
+            _b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
+            _b[jsStyles.rootForDesktop()] = context.isDesktop,
+            _b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isCollapsable,
+            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isCollapsable,
+            _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
+            _b[jsStylesForSideMenu.hidden()] = !isOpened || (!context.isOpened && (context.isTablet || context.isMobile)),
+            _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu }, (_c = {}, _c[navigationAttributeForSeparatedMenu] = htmlId, _c)),
+        React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
+                var _a;
+                (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
+            }, ref: scrollContainerRef, showScrollBar: context.isTouchScreen ? 'always' : context.showScrollBar },
+            React.createElement("ul", { className: cx((_d = {},
+                    _d[jsStylesForSideMenu.list()] = true,
+                    _d[jsStyles.contentWrapper(theme)] = true,
+                    _d[jsStyles.contentWrapperForMobiles()] = context.isMobile,
+                    _d)) },
+                context.isMobile && React.createElement(BackButton, { caption: caption, id: htmlId }),
+                children))), (_g = context.sideMenuRef) === null || _g === void 0 ? void 0 : _g.current);
+});
+SeparatedSubMenu.displayName = 'SeparatedSubMenu';
+var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
+export { SeparatedSubMenuWithStaticFields as SeparatedSubMenu };

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

@@ -1,13 +1,13 @@
-import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
-export declare const customStyles: {
-    rootForMobiles(headerHeight?: number | undefined): string;
-};
-export declare const jsStyles: {
-    root(t: SideMenuTheme): string;
-    rootForTouchScreens(t: SideMenuTheme): string;
-    rootForNarrowDesktop(t: SideMenuTheme): string;
-    rootForDesktop(): string;
-    rootWithShadow(t: SideMenuTheme): string;
-    contentWrapper(t: SideMenuTheme): string;
-    contentWrapperForMobiles(): string;
-};
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
+export declare const customStyles: {
+    rootForMobiles(headerHeight?: number): string;
+};
+export declare const jsStyles: {
+    root(t: SideMenuTheme): string;
+    rootForTouchScreens(t: SideMenuTheme): string;
+    rootForNarrowDesktop(t: SideMenuTheme): string;
+    rootForDesktop(): string;
+    rootWithShadow(t: SideMenuTheme): string;
+    contentWrapper(t: SideMenuTheme): string;
+    contentWrapperForMobiles(): string;
+};

package/src/internal/SeparatedSubMenu.styles.js

@@ -1,33 +1,33 @@
-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 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 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 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 css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      z-index: -1;\n    "], ["\n      z-index: -1;\n    "])));
-    },
-    rootWithShadow: function (t) {
-        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 css(templateObject_6 || (templateObject_6 = __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    "])));
-    },
-};
-export var customStyles = {
-    rootForMobiles: function (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);
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+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 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 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 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 css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      z-index: -1;\n    "], ["\n      z-index: -1;\n    "])));
+    },
+    rootWithShadow: function (t) {
+        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 css(templateObject_6 || (templateObject_6 = __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    "])));
+    },
+};
+export var customStyles = {
+    rootForMobiles: function (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);
+    },
+};
+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.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { SideMenuHeaderProps } from '../SideMenuHeader/SideMenuHeader';
-declare const SideMenuLogotypeWithStaticFields: React.ForwardRefExoticComponent<SideMenuHeaderProps & React.RefAttributes<HTMLDivElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuLogotypeWithStaticFields as SideMenuLogotype };
+import React from 'react';
+import { SideMenuHeaderProps } from '../SideMenuHeader/SideMenuHeader';
+declare const SideMenuLogotypeWithStaticFields: React.ForwardRefExoticComponent<SideMenuHeaderProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuLogotypeWithStaticFields as SideMenuLogotype };

package/src/internal/SideMenuLogotype.js

@@ -1,79 +1,80 @@
-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 { 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';
-var changeCamelCaseToKebabCase = function (str) {
-    return str
-        .split('')
-        .map(function (letter, idx) {
-        return letter.toUpperCase() === letter ? "" + (idx !== 0 ? '-' : '') + letter.toLowerCase() : letter;
-    })
-        .join('');
-};
-var getProductName = function (productLogo) {
-    var _a;
-    // @ts-expect-error: accessing private property
-    return ((_a = productLogo === null || productLogo === void 0 ? void 0 : productLogo.type) === null || _a === void 0 ? void 0 : _a.__KONTUR_REACT_UI__) ? // @ts-expect-error: accessing private property
-        changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__.replace(/EN$/i, ''))
-        : 'kontur';
-};
-var getStaticIconPath = function (productName) {
-    return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-" + parseInt(sideMenuLogotypeIconSize) + ".svg";
-};
-/**
- * Логотип
- *
- * @visibleName SideMenu.Logotype
- */
-var SideMenuLogotype = forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    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 = 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) -
-            2 * parseInt(theme.sideMenuMarginX) -
-            parseInt(theme.sideMenuLogotypePaddingLeft);
-        if (logotypeWidth && logotypeWidth > maxWidth && !rest.size) {
-            setSize(24);
-        }
-    }, []);
-    var getWidget = function (withWidget, isMinimizedInNarrowDesktop) {
-        if (isMinimizedInNarrowDesktop) {
-            return false;
-        }
-        return withWidget;
-    };
-    var handleError = function () {
-        setProductIconUrl(getStaticIconPath('kontur'));
-    };
-    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.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.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.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' });
-export { SideMenuLogotypeWithStaticFields as SideMenuLogotype };
+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 { 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';
+var changeCamelCaseToKebabCase = function (str) {
+    return str
+        .split('')
+        .map(function (letter, idx) {
+        return letter.toUpperCase() === letter ? "".concat(idx !== 0 ? '-' : '').concat(letter.toLowerCase()) : letter;
+    })
+        .join('');
+};
+var getProductName = function (productLogo) {
+    var _a;
+    // @ts-expect-error: accessing private property
+    return ((_a = productLogo === null || productLogo === void 0 ? void 0 : productLogo.type) === null || _a === void 0 ? void 0 : _a.__KONTUR_REACT_UI__)
+        ? // @ts-expect-error: accessing private property
+            changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__.replace(/EN$/i, ''))
+        : 'kontur';
+};
+var getStaticIconPath = function (productName) {
+    return "https://s.kontur.ru/common-v2/icons-products/".concat(productName, "/").concat(productName, "-").concat(parseInt(sideMenuLogotypeIconSize), ".svg");
+};
+/**
+ * Логотип
+ *
+ * @visibleName SideMenu.Logotype
+ */
+var SideMenuLogotype = forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    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 = 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) -
+            2 * parseInt(theme.sideMenuMarginX) -
+            parseInt(theme.sideMenuLogotypePaddingLeft);
+        if (logotypeWidth && logotypeWidth > maxWidth && !rest.size) {
+            setSize(24);
+        }
+    }, []);
+    var getWidget = function (withWidget, isMinimizedInNarrowDesktop) {
+        if (isMinimizedInNarrowDesktop) {
+            return false;
+        }
+        return withWidget;
+    };
+    var handleError = function () {
+        setProductIconUrl(getStaticIconPath('kontur'));
+    };
+    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.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.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.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' });
+export { SideMenuLogotypeWithStaticFields as SideMenuLogotype };

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

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

package/src/internal/SideMenuLogotype.styles.js

@@ -1,31 +1,31 @@
-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 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 css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-left: 0;\n    "], ["\n      padding-left: 0;\n    "])));
-    },
-    icon: function () {
-        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 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 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 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 css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      opacity: 0;\n    "], ["\n      opacity: 0;\n    "])));
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+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 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 css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-left: 0;\n    "], ["\n      padding-left: 0;\n    "])));
+    },
+    icon: function () {
+        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 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 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 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 css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      opacity: 0;\n    "], ["\n      opacity: 0;\n    "])));
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/SubMenu.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import { CommonClickableElementProps } from './ClickableElement';
-interface SubMenuProps extends Pick<CommonClickableElementProps, 'caption'> {
-    children?: React.ReactNode;
-    isOpened?: boolean;
-    isSubMenu?: boolean;
-    isSeparatedMenu?: boolean;
-    htmlId: string;
-}
-declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement | HTMLUListElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SubMenuWithStaticFields as SubMenu };
+import React from 'react';
+import { CommonClickableElementProps } from './ClickableElement';
+interface SubMenuProps extends Pick<CommonClickableElementProps, 'caption'> {
+    children?: React.ReactNode;
+    isOpened?: boolean;
+    isSubMenu?: boolean;
+    isSeparatedMenu?: boolean;
+    htmlId: string;
+}
+declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement | HTMLUListElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SubMenuWithStaticFields as SubMenu };