@skbkontur/side-menu 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.5.1...@skbkontur/side-menu@1.6.0) (2023-09-14)
+
+
+### Features
+
+* **SideMenuItem:** change caption type ([fa3d134](https://git.skbkontur.ru/ui/ui-parking/commits/fa3d13435783243268ebc631b98836a8da22229a))
+
+
+
+
+
+## [1.5.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.5.0...@skbkontur/side-menu@1.5.1) (2023-09-11)
+
+
+### Bug Fixes
+
+* **SideMenu:** separated sub menu fix ([f8c9af9](https://git.skbkontur.ru/ui/ui-parking/commits/f8c9af968945a7d36ad29cc4c8599a342e34f72e))
+
+
+
+
+
 # [1.5.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.4.2...@skbkontur/side-menu@1.5.0) (2023-09-05)
 
 

package/package.json

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

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -8,7 +8,7 @@ import { SideMenuContext } from '../SideMenuContext';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "_generatedId", "children", "caption", "marker", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
+    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, children = _a.children, caption = _a.caption, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "_generatedId", "children", "caption", "marker", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     return (React.createElement("li", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },

package/src/internal/BackButton.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-export interface BackButtonProps {
-    caption?: string;
-    id?: string;
+import { CommonClickableElementProps } from './ClickableElement';
+export interface BackButtonProps extends Pick<CommonClickableElementProps, 'caption' | 'id'> {
     href?: string;
     generatedId?: string;
 }

package/src/internal/ClickableElement.d.ts

@@ -4,7 +4,7 @@ export interface CommonClickableElementProps extends CommonProps {
     children?: React.ReactNode;
     icon: React.ReactElement;
     marker?: string | true;
-    caption?: string;
+    caption?: ReactNode;
     subCaption?: ReactNode;
     id?: string;
     isButton?: boolean;

package/src/internal/ClickableElement.js

@@ -65,17 +65,6 @@ var ClickableElement = forwardRef(function (_a, ref) {
             (_a = context.setIsMouseOutside) === null || _a === void 0 ? void 0 : _a.call(context, true);
         }
     };
-    var setSeparatedMenuIsShown = function () {
-        var _a, _b;
-        if (_isDropdown || _isSubMenu || !context.isSeparatedMenu)
-            return;
-        if (children) {
-            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, true);
-        }
-        else {
-            (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, false);
-        }
-    };
     var handleClick = function (e) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         var lastElementInTheHierarchy = !hasChildren(id || rest.href, _generatedId) && !_isDropdown && !_isBackButton;
@@ -83,7 +72,6 @@ var ClickableElement = forwardRef(function (_a, ref) {
         toggleIsShown(lastElementInTheHierarchy);
         setIsMinimized(lastElementInTheHierarchy);
         setMouseIsOutside(lastElementInTheHierarchy);
-        setSeparatedMenuIsShown();
     };
     var handleFocus = function (e) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);

package/src/internal/InnerBody.js

@@ -39,11 +39,32 @@ var InnerBody = function (_a) {
             setParents(getAllParents(context.activeMenuItem, flattedArrayOfAllElements.current));
         }
     };
+    var activeMenuItemHasParent = function () {
+        if (!context.activeMenuItem)
+            return;
+        var parentOfActiveMenuItem = getAllParents(context.activeMenuItem, flattedArrayOfAllElements.current);
+        return parentOfActiveMenuItem.length > 0;
+    };
+    var activeMenuItemHasChildren = function () {
+        if (!context.activeMenuItem)
+            return;
+        var childrenOfActiveMenuItem = getChildrenIdArray(flattedArrayOfAllElements.current, context.activeMenuItem);
+        var childrenOfActiveMenuItemGenerated = getChildrenIdArray(flattedArrayOfAllElements.current, context.activeMenuItem, true);
+        return childrenOfActiveMenuItem.length > 0 || childrenOfActiveMenuItemGenerated.length > 0;
+    };
+    var setSeparatedMenuIsShown = function () {
+        var _a;
+        if (!context.isSeparatedMenu)
+            return;
+        var isActive = activeMenuItemHasParent() || activeMenuItemHasChildren() || false;
+        (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, isActive);
+    };
     useEffect(function () {
         getFlattedArrayOfAllElements();
     }, []);
     useEffect(function () {
         getOpenedParents();
+        setSeparatedMenuIsShown();
     }, [context.activeMenuItem]);
     var levelIndex = 0;
     return (React.createElement(SideMenuContext.Provider, { value: __assign({ openedParents: parents, flattedArrayOfAllElements: flattedArrayOfAllElements.current }, context) }, React.Children.map(children, function (child) {

package/src/internal/ItemContent/Caption.js

@@ -27,8 +27,9 @@ export var Caption = forwardRef(function (_a, ref) {
     var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
     var captionRef = useRef(null);
     var _e = useState(''), tail = _e[0], setTail = _e[1];
+    var isCaptionPlainText = typeof caption === 'string';
     useEffect(function () {
-        if (!_isDropdown || !captionRef.current || !caption) {
+        if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
             return;
         }
         captionRef.current.innerText = caption;
@@ -45,14 +46,17 @@ export var Caption = forwardRef(function (_a, ref) {
         if (userName === void 0) { userName = ''; }
         return _isAvatar && userName.split(' ').length === 1;
     };
+    var Component = isCaptionPlainText ? 'p' : 'div';
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
             _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b)), ref: ref },
-        React.createElement("p", { className: cx((_c = {},
+        React.createElement(Component, { className: cx((_c = {},
                 _c[jsStyles.caption(theme)] = true,
                 _c[jsStyles.captionDropdown()] = _isDropdown,
-                _c[jsStyles.captionTruncated()] = _isDropdown && (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
+                _c[jsStyles.captionTruncated()] = isCaptionPlainText &&
+                    _isDropdown &&
+                    (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
                 _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
                 _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu && !hasIcon,
                 _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasIcon,

package/src/internal/ItemContent/ItemContent.js

@@ -7,6 +7,18 @@ import { Caption } from './Caption';
 import { Marker } from './Marker';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
+var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
+    if (isTouchScreen) {
+        if (_isSubMenu) {
+            return theme.sideMenuCaptionSubItemLineHeightForTouchScreens;
+        }
+        return theme.sideMenuCaptionLineHeightForTouchScreens;
+    }
+    if (size === 'large') {
+        return theme.sideMenuCaptionLargeLineHeight;
+    }
+    return theme.sideMenuCaptionLineHeight;
+};
 /**
  * Контент для SideMenuItem или SideMenuLink
  */
@@ -19,13 +31,17 @@ var ItemContent = forwardRef(function (_a, ref) {
     var _d = useState(false), isMultiline = _d[0], setIsMultiline = _d[1];
     var theme = getSideMenuTheme(useContext(ThemeContext));
     useEffect(function () {
-        if (!textRef.current || _isBackButton)
-            return;
-        var text = textRef.current.querySelector('p');
-        if ((text && parseInt(getComputedStyle(text).lineHeight) < text.clientHeight) || subCaption) {
+        if (subCaption) {
             setIsMultiline(true);
+            return;
         }
-    });
+        if (!textRef.current || _isBackButton || _isDropdown)
+            return;
+        var captionLineHeight = getCaptionLineHeight(theme, context.isTouchScreen, _isSubMenu, size);
+        var isMultiline = parseInt(captionLineHeight) < textRef.current.offsetHeight;
+        if (isMultiline)
+            setIsMultiline(true);
+    }, [caption, context.isBeingTransitioned]);
     var isSeparatedSubMenuInNarrowDesktop = _isSubMenu && context.isSeparatedMenu && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,

package/src/internal/SeparatedSubMenu.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-interface SeparatedSubMenuProps {
+import { CommonClickableElementProps } from './ClickableElement';
+interface SeparatedSubMenuProps extends Pick<CommonClickableElementProps, 'caption' | 'id'> {
     children?: React.ReactNode;
     generatedId?: string;
-    id?: string;
     href?: string;
-    caption?: string;
     htmlId: string;
 }
 declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {

package/src/internal/SubMenu.d.ts

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