@skbkontur/side-menu 1.5.1 → 1.7.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.7.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.6.0...@skbkontur/side-menu@1.7.0) (2023-09-27)
+
+
+### Features
+
+* **SideMenu:** add hideScrollBar prop ([729bea4](https://git.skbkontur.ru/ui/ui-parking/commits/729bea40a9650e4aa4abcb0f0c6b913cd615dd50))
+
+
+
+
+
+# [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)
 
 

package/package.json

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

package/src/SideMenu/SideMenu.d.ts

@@ -23,6 +23,7 @@ export interface SideMenuProps extends CommonProps {
     narrowDesktopMediaQuery?: string;
     tabletMediaQuery?: string;
     mobileMediaQuery?: string;
+    hideScrollBar?: boolean;
 }
 interface SubComponents {
     Body: typeof SideMenuBody;

package/src/SideMenu/SideMenu.js

@@ -30,7 +30,7 @@ export var transitionDuration = 300; //ms
 export var burgerTransitionDuration = (transitionDuration * 2) / 3;
 var SideMenuInner = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
-    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery"]);
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _j = _a.hideScrollBar, hideScrollBar = _j === void 0 ? true : _j, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar"]);
     var transitionTimer = useRef(null);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var customMediaQueries = {
@@ -39,24 +39,24 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _j = useResponsiveLayout({
+    var _k = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _j.isMobileQuery, isTabletQuery = _j.isTabletQuery, isNarrowDesktopQuery = _j.isNarrowDesktopQuery, isDesktopQuery = _j.isDesktopQuery;
+    }), isMobileQuery = _k.isMobileQuery, isTabletQuery = _k.isTabletQuery, isNarrowDesktopQuery = _k.isNarrowDesktopQuery, isDesktopQuery = _k.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
-    var _k = useState(isNarrowDesktop), isMinimized = _k[0], setIsMinimized = _k[1];
-    var _l = useState(false), isBeingTransitioned = _l[0], setIsBeingTransitioned = _l[1];
-    var _m = useState(value), activeMenuItem = _m[0], setActiveMenuItem = _m[1];
-    var _o = useState(isDesktopQuery || isNarrowDesktop), isShown = _o[0], setIsShown = _o[1];
-    var _p = useState(false), isSeparatedMenuShown = _p[0], setIsSeparatedMenuShown = _p[1];
-    var _q = useState(true), isMouseOutside = _q[0], setIsMouseOutside = _q[1];
-    var _r = useState('top'), scrollState = _r[0], setScrollState = _r[1];
-    var _s = useState(false), hasScrollBar = _s[0], setHasScrollBar = _s[1];
-    var _t = useState(0), mousePositionX = _t[0], setMousePositionX = _t[1];
-    var _u = useState(0), headerHeight = _u[0], setHeaderHeight = _u[1];
+    var _l = useState(isNarrowDesktop), isMinimized = _l[0], setIsMinimized = _l[1];
+    var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
+    var _o = useState(value), activeMenuItem = _o[0], setActiveMenuItem = _o[1];
+    var _p = useState(isDesktopQuery || isNarrowDesktop), isShown = _p[0], setIsShown = _p[1];
+    var _q = useState(false), isSeparatedMenuShown = _q[0], setIsSeparatedMenuShown = _q[1];
+    var _r = useState(true), isMouseOutside = _r[0], setIsMouseOutside = _r[1];
+    var _s = useState('top'), scrollState = _s[0], setScrollState = _s[1];
+    var _t = useState(false), hasScrollBar = _t[0], setHasScrollBar = _t[1];
+    var _u = useState(0), mousePositionX = _u[0], setMousePositionX = _u[1];
+    var _v = useState(0), headerHeight = _v[0], setHeaderHeight = _v[1];
     useEffect(function () {
         return function () {
             if (transitionTimer.current) {
@@ -101,14 +101,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         if (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop) {
             return;
         }
-        isMouseOutside && showMinimizedRoot(false);
-        setIsMouseOutside(false);
+        if (isNarrowDesktop || (isDesktopQuery && isMinimized)) {
+            isMouseOutside && showMinimizedRoot(false);
+            setIsMouseOutside(false);
+        }
     };
     var handleMouseLeave = function () {
         if (isNarrowDesktop) {
             setIsMinimized(true);
         }
-        setIsMouseOutside(true);
+        if (isNarrowDesktop || (isDesktopQuery && isMinimized)) {
+            setIsMouseOutside(true);
+        }
     };
     var showMinimizedRootForNarrowDesktop = function (e) {
         if (!isSeparatedMenu || !isNarrowDesktop)
@@ -143,11 +147,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
-    var _v = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
+    var _w = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
         opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), shouldShowBackdrop = _v[0], backdropStyle = _v[1];
+    }), shouldShowBackdrop = _w[0], backdropStyle = _w[1];
     var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimized: isMinimized,
@@ -173,6 +177,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setHasScrollBar: setHasScrollBar,
             headerHeight: headerHeight,
             setHeaderHeight: setHeaderHeight,
+            hideScrollBar: hideScrollBar,
         } },
         React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},
                 _b[jsStylesForSideMenu.root()] = true,

package/src/SideMenuBody/SideMenuBody.js

@@ -39,7 +39,7 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
             React.createElement(ScrollContainer, { style: { position: 'static' }, onScrollStateChangeY: function (state) {
                     var _a;
                     (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
-                }, hideScrollBar: true, ref: scrollContainerRef },
+                }, hideScrollBar: context.hideScrollBar, ref: scrollContainerRef },
                 React.createElement("nav", null,
                     React.createElement("ul", __assign({ className: cx((_c = {}, _c[jsStylesForSideMenu.list()] = true, _c[jsStyles.wrapper(theme)] = true, _c)) }, rest),
                         React.createElement(InnerBody, null, children))))));

package/src/SideMenuContext.d.ts

@@ -28,5 +28,6 @@ export interface SideMenuContextType {
     setHasScrollBar?: (hasScrollBar: boolean) => void;
     headerHeight?: number;
     setHeaderHeight?: (mobileHeaderHeight: number) => void;
+    hideScrollBar?: boolean;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

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/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/SeparatedSubMenu.js

@@ -46,7 +46,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
                 var _a;
                 (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
-            }, hideScrollBar: true },
+            }, hideScrollBar: context.hideScrollBar },
             React.createElement("ul", { className: cx((_c = {},
                     _c[jsStylesForSideMenu.list()] = true,
                     _c[jsStyles.contentWrapper(theme)] = true,

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>> & {