@skbkontur/side-menu 0.14.4 → 0.14.6

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.6](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.5...@skbkontur/side-menu@0.14.6) (2023-07-20)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [0.14.5](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.4...@skbkontur/side-menu@0.14.5) (2023-07-13)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [0.14.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.3...@skbkontur/side-menu@0.14.4) (2023-07-04)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/lib/utils/scripts.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { FlattedArrayElementType } from '../../src/internal/InnerBody';
 export declare const getItemId: (prefix: 'body' | 'footer', id: string | number) => string;
 export declare const isClickableSubElement: (element: string) => boolean;
@@ -10,3 +10,4 @@ export declare const isParentOpened: (id: string | undefined, generatedId: strin
 export declare const isElementActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;
 export declare const isBrowser: boolean;
 export declare const isTouchDevice: () => boolean;
+export declare const isKonturIcon: (icon: React.ReactElement) => boolean;

package/lib/utils/scripts.js

@@ -77,3 +77,6 @@ export var isBrowser = typeof window !== 'undefined';
 export var isTouchDevice = function () {
     return isBrowser && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
 };
+export var isKonturIcon = function (icon) {
+    return Object.prototype.hasOwnProperty.call(icon === null || icon === void 0 ? void 0 : icon.type, '__KONTUR_ICON__');
+};

package/package.json

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

package/src/internal/ItemContent/Icon.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
 interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton' | '_isAvatar'> {
     isMultiline: boolean;
 }
-export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton, _isAvatar }: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton, _isAvatar }: IconProps) => JSX.Element;
 export {};

package/src/internal/ItemContent/Icon.js

@@ -4,6 +4,7 @@ import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Icon.styles';
 import { SideMenuContext } from '../../SideMenuContext';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+import { isKonturIcon } from '../../../lib/utils/scripts';
 var getIconSize = function (theme, _isSubMenu, _isBackButton) {
     if (!_isSubMenu) {
         return parseInt(theme.sideMenuIconSize);
@@ -18,11 +19,17 @@ export var Icon = function (_a) {
     var context = useContext(SideMenuContext);
     var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    return React.cloneElement(icon, {
-        size: getIconSize(theme, _isSubMenu, _isBackButton),
-        color: _isSubMenu ? theme.sideMenuIconSubItemColor : undefined,
-        align: _isBackButton ? 'baseline' : 'none',
-        className: cx((_b = {},
+    var renderIcon = function () {
+        if (isKonturIcon(icon)) {
+            return React.cloneElement(icon, {
+                size: getIconSize(theme, _isSubMenu, _isBackButton),
+                color: _isSubMenu ? theme.sideMenuIconSubItemColor : undefined,
+                align: _isBackButton ? 'baseline' : 'none',
+            });
+        }
+        return icon;
+    };
+    return (React.createElement("span", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.rootMultiline()] = isMultiline && (!context.isMinimized || _isSubMenu),
             _b[jsStyles.rootLarge(theme)] = size === 'large',
@@ -31,6 +38,5 @@ export var Icon = function (_a) {
             _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
             _b[jsStyles.rootBackButton(theme)] = _isBackButton,
             _b[jsStyles.rootAvatar()] = _isAvatar,
-            _b)),
-    });
+            _b)) }, renderIcon()));
 };

package/src/internal/ItemContent/Icon.styles.js

@@ -6,7 +6,7 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      margin: ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "], ["\n      display: flex;\n      align-items: center;\n      margin: ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "])), t.sideMenuIconMarginY, t.sideMenuIconMarginX, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
     },
     rootMultiline: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
     rootLarge: function (t) {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: ", ";\n      line-height: ", ";\n    "], ["\n      min-height: ", ";\n      line-height: ", ";\n    "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);

package/src/internal/SideMenuLogotype.js

@@ -48,13 +48,16 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     var getStaticIconPath = function () {
         return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-" + parseInt(sideMenuLogotypeIconSize) + ".svg";
     };
-    var getWidget = function (withWidget, isTouchScreen, showWidget) {
+    var getWidget = function (withWidget, isTouchScreen, isMinimizedInNarrowDesktop, showWidget) {
         if (withWidget !== undefined) {
             return withWidget;
         }
         if (isTouchScreen) {
             return true;
         }
+        else if (isMinimizedInNarrowDesktop) {
+            return false;
+        }
         return showWidget;
     };
     return (React.createElement("div", { className: jsStyles.root(), ref: ref },
@@ -68,7 +71,7 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
                 _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)))));
+            React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.isMinimized && context.isNarrowDesktop, context.showWidget) }, rest)))));
 });
 SideMenuLogotype.displayName = 'SideMenuLogotype';
 var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });