@skbkontur/side-menu 0.14.2 → 0.14.4

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.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
+
+
+
+
+
+## [0.14.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.2...@skbkontur/side-menu@0.14.3) (2023-06-29)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
 ## [0.14.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.1...@skbkontur/side-menu@0.14.2) (2023-06-22)
 
 

package/README.md

@@ -202,129 +202,6 @@ const renderModal = () => {
 </div>
 ```
 
-Меню второго уровня в отдельной колонке можно расположить над контентом с помощью пропа `separatedMenuWithOverlay={true}`
-
-```jsx harmony
-import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
-import { Buhgalteria, Kontur } from '@skbkontur/logos';
-import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
-import { SideMenu } from './index';
-import {
-  DocTextIcon24Regular,
-  CommentRectTextIcon24Regular,
-  LightbulbIcon24Regular,
-  BookOpenTextIcon24Regular,
-  BookmarkIcon24Regular,
-  StackHDownIcon24Regular,
-  SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular
-} from '@skbkontur/icons';
-
-const [opened, setOpened] = React.useState(false);
-const [panel, setPanel] = React.useState(false);
-
-const open = () => {
-  setOpened(true);
-}
-
-const close = () => {
-  setOpened(false);
-}
-
-const linearLightGradient = `repeating-linear-gradient(
-                                60deg,
-                                #fafafa,
-                                #fafafa 20px,
-                                #dfdede 20px,
-                                #dfdede 40px
-                              )`
-
-const renderModal = () => {
-  return (
-    <Modal onClose={close}>
-      <Modal.Header>Выбор организации</Modal.Header>
-      <Modal.Body>
-        <Input/>
-        <div>Список организаций</div>
-      </Modal.Body>
-    </Modal>
-  );
-}
-
-<div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
-  <SideMenu isSeparatedMenu={true} separatedMenuWithOverlay={true}>
-    <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
-    <SideMenu.Body>
-      <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
-        <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
-          <SideMenu.SubItem caption={'Входящие 1'}>
-            <SideMenu.SubItem caption={'Входящие11'}>
-              <SideMenu.SubItem caption={'Входящие111'}/>
-              <SideMenu.SubItem caption={'Входящие112'}/>
-              <SideMenu.SubItem caption={'Входящие113'}/>
-            </SideMenu.SubItem>
-            <SideMenu.SubItem caption={'Входящие12'}/>
-            <SideMenu.SubItem caption={'Входящие13'}/>
-          </SideMenu.SubItem>
-          <SideMenu.SubItem caption={'Входящие2'}>
-            <SideMenu.SubItem caption={'Входящие21'}>
-              <SideMenu.SubItem caption={'Входящие211'}/>
-              <SideMenu.SubItem caption={'Входящие212'}/>
-              <SideMenu.SubItem caption={'Входящие213'}/>
-            </SideMenu.SubItem>
-            <SideMenu.SubItem caption={'Входящие22'}/>
-            <SideMenu.SubItem caption={'Входящие23'}/>
-          </SideMenu.SubItem>
-          <SideMenu.SubItem caption={'Входящие3'}/>
-        </SideMenu.SubItem>
-        <SideMenu.SubItem caption={'Исходящие'}/>
-        <SideMenu.SubItem caption={'Внутренние'}/>
-        <SideMenu.SubItem caption={'Черновики'}/>
-        <SideMenu.SubItem caption={'Удаленные'}/>
-        <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
-        <SideMenu.SubItem caption={'Требуют обработки'}/>
-        <SideMenu.SubItem caption={'Обработанные'}/>
-      </SideMenu.Item>
-      <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
-      <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
-        <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
-        <SideMenu.SubItem caption={'Исходящие'}/>
-        <SideMenu.SubItem caption={'Внутренние'}/>
-        <SideMenu.SubItem caption={'Черновики'}/>
-        <SideMenu.SubItem caption={'Удаленные'}/>
-      </SideMenu.Item>
-      <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
-      <SideMenu.Divider />
-      <SideMenu.Item icon={<BookOpenTextIcon24Regular/>}  caption={'Еще раздел'}/>
-      <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
-    </SideMenu.Body>
-    <SideMenu.Footer>
-      <div>
-        {opened && renderModal()}
-        <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
-      </div>
-      <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
-      <SideMenu.Avatar
-        userName={'Ишматова Елена'}
-        avatarUrl={getKonturAvatarUrl({
-          userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
-        })}
-      >
-        <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
-          Личный кабинет
-        </MenuItem>
-        <MenuItem >Безопасность</MenuItem>
-        <SideMenu.Divider />
-        <MenuItem >Выйти</MenuItem>
-      </SideMenu.Avatar>
-    </SideMenu.Footer>
-  </SideMenu>
-  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
-    {'Content '.repeat(100)}
-  </div>
-</div>
-```
-
 SideMenu с ручным управлением.
 Для `SideMenu.Link` при отсутствии `id` будет использован `href`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^0.17.2",
-    "@skbkontur/react-ui-addons": "^4.8.0",
+    "@skbkontur/react-ui-addons": "^4.8.1",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.d.ts

@@ -23,7 +23,6 @@ export interface SideMenuProps extends CommonProps {
     narrowDesktopMediaQuery?: string;
     tabletMediaQuery?: string;
     mobileMediaQuery?: string;
-    separatedMenuWithOverlay?: 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, _j = _a.separatedMenuWithOverlay, separatedMenuWithOverlay = _j === void 0 ? false : _j, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "separatedMenuWithOverlay"]);
+    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 transitionTimer = useRef(null);
     var widgetTimer = useRef(null);
     var theme = getSideMenuTheme(useContext(ThemeContext));
@@ -40,26 +40,25 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
         isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
     };
-    var _k = useResponsiveLayout({
+    var _j = useResponsiveLayout({
         customMediaQueries: customMediaQueries,
-    }), isMobileQuery = _k.isMobileQuery, isTabletQuery = _k.isTabletQuery, isNarrowDesktopQuery = _k.isNarrowDesktopQuery, isDesktopQuery = _k.isDesktopQuery;
+    }), isMobileQuery = _j.isMobileQuery, isTabletQuery = _j.isTabletQuery, isNarrowDesktopQuery = _j.isNarrowDesktopQuery, isDesktopQuery = _j.isDesktopQuery;
     var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
     var isTablet = isTabletQuery && !isNarrowDesktopQuery;
     var isMobile = isMobileQuery && !isTabletQuery;
     var isTabletOrMobile = isTablet || isMobile;
     var isTouchScreen = isTouchDevice() || isMobile || isTablet;
-    var separatedMenuWithoutOverlay = isSeparatedMenu && !separatedMenuWithOverlay;
-    var _l = useState(isNarrowDesktop), isMinimized = _l[0], setIsMinimized = _l[1];
-    var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
-    var _o = useState(false), showWidget = _o[0], setShowWidget = _o[1];
-    var _p = useState(value), activeMenuItem = _p[0], setActiveMenuItem = _p[1];
-    var _q = useState(isDesktopQuery || isNarrowDesktop), isShown = _q[0], setIsShown = _q[1];
-    var _r = useState(false), isSeparatedMenuShown = _r[0], setIsSeparatedMenuShown = _r[1];
-    var _s = useState(true), isMouseOutside = _s[0], setIsMouseOutside = _s[1];
-    var _t = useState('top'), scrollState = _t[0], setScrollState = _t[1];
-    var _u = useState(false), hasScrollBar = _u[0], setHasScrollBar = _u[1];
-    var _v = useState(0), mousePositionX = _v[0], setMousePositionX = _v[1];
-    var _w = useState(0), headerHeight = _w[0], setHeaderHeight = _w[1];
+    var _k = useState(isNarrowDesktop), isMinimized = _k[0], setIsMinimized = _k[1];
+    var _l = useState(false), isBeingTransitioned = _l[0], setIsBeingTransitioned = _l[1];
+    var _m = useState(false), showWidget = _m[0], setShowWidget = _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) {
@@ -91,8 +90,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         setActiveMenuItem(value);
     }, [value]);
     var showMinimizedRoot = function (newIsMinimized) {
-        var minimizeWithoutOverlay = separatedMenuWithoutOverlay && newIsMinimized;
-        if ((!isBeingTransitioned || minimizeWithoutOverlay) && newIsMinimized !== isMinimized) {
+        var minimizeSeparatedMenu = isSeparatedMenu && newIsMinimized;
+        if ((!isBeingTransitioned || minimizeSeparatedMenu) && newIsMinimized !== isMinimized) {
             setIsBeingTransitioned(true);
             setIsMinimized(newIsMinimized);
             if (transitionTimer.current) {
@@ -104,7 +103,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var handleMouseEnter = function () {
-        if (separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop) {
+        if (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop) {
             return;
         }
         isMouseOutside && showMinimizedRoot(false);
@@ -123,8 +122,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
         setIsMouseOutside(true);
     };
-    var showMinimizedRootForNarrowDesktopWithOverlay = function (e) {
-        if (!separatedMenuWithoutOverlay || !isNarrowDesktop)
+    var showMinimizedRootForNarrowDesktop = function (e) {
+        if (!isSeparatedMenu || !isNarrowDesktop)
             return;
         if (e.clientX < parseInt(theme.sideMenuMinimizedWidth) &&
             mousePositionX > parseInt(theme.sideMenuMinimizedWidth)) {
@@ -156,11 +155,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
         }
     };
     var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
-    var _x = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
+    var _w = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
         opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
     }, {
         opacity: 0,
-    }), shouldShowBackdrop = _x[0], backdropStyle = _x[1];
+    }), shouldShowBackdrop = _w[0], backdropStyle = _w[1];
     var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
     return (React.createElement(SideMenuContext.Provider, { value: {
             isMinimized: isMinimized,
@@ -180,7 +179,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             toggleIsShown: function () { return handleIsShown(!isShown); },
             isSeparatedMenuShown: isSeparatedMenuShown,
             setIsSeparatedMenuShown: setIsSeparatedMenuShown,
-            separatedMenuWithoutOverlay: separatedMenuWithoutOverlay,
             setIsMouseOutside: setIsMouseOutside,
             scrollState: scrollState,
             setScrollState: setScrollState,
@@ -194,8 +192,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                 _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
                 _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
                 _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
-                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
-                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
+                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isNarrowDesktop,
+                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery,
                 _b)) },
             React.createElement(React.Fragment, null,
                 shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
@@ -204,7 +202,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                             _c[jsStylesForSideMenu.wrapper()] = true,
                             _c[jsStylesForSideMenu.wrapperIE()] = isIE11,
                             _c[jsStylesForSideMenu.wrapperWithShadow(theme)] = isSideMenuOverContent,
-                            _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktopWithOverlay }),
+                            _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop }),
                         React.createElement("div", { className: cx((_d = {},
                                 _d[jsStylesForSideMenu.container(theme)] = true,
                                 _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,

package/src/SideMenuContext.d.ts

@@ -22,7 +22,6 @@ export interface SideMenuContextType {
     flattedArrayOfAllElements?: FlattedArrayElementType[];
     isSeparatedMenuShown?: boolean;
     setIsSeparatedMenuShown?: (separatedMenuIsShown: boolean) => void;
-    separatedMenuWithoutOverlay?: boolean;
     setIsMouseOutside?: (v: boolean) => void;
     scrollState?: ScrollContainerScrollStateY;
     setScrollState?: (state: ScrollContainerScrollStateY) => void;

package/src/internal/ClickableElement.js

@@ -49,8 +49,8 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var setIsMinimized = function (lastElementInTheHierarchy) {
         var _a, _b;
-        var topLevelItemInSideMenuWithOverlay = context.separatedMenuWithoutOverlay && !_isSubMenu && children;
-        if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSideMenuWithOverlay)) {
+        var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
+        if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
             (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
         }
         if (!_isSubMenu) {
@@ -65,7 +65,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var setSeparatedMenuIsShown = function () {
         var _a, _b;
-        if (!_isSubMenu && context.separatedMenuWithoutOverlay) {
+        if (!_isSubMenu && context.isSeparatedMenu) {
             (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
         }
         if (context.isSeparatedMenu && !_isSubMenu && children) {

package/src/internal/ItemContent/ItemContent.js

@@ -56,7 +56,7 @@ var ItemContent = forwardRef(function (_a, ref) {
             });
         }
     }, [textRef.current, context.isBeingTransitioned]);
-    var isSeparatedSubMenuInNarrowDesktopWithoutOverlay = _isSubMenu && context.separatedMenuWithoutOverlay && context.isNarrowDesktop;
+    var isSeparatedSubMenuInNarrowDesktop = _isSubMenu && context.isSeparatedMenu && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
@@ -73,7 +73,7 @@ var ItemContent = forwardRef(function (_a, ref) {
                 _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
                 _c)) },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
-            marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
+            marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

package/src/internal/SeparatedSubMenu.js

@@ -34,16 +34,14 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
         });
     };
     var levelIndex = 0;
-    var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
-    var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
     return (React.createElement("div", { 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.rootWithoutOverlay(theme)] = context.separatedMenuWithoutOverlay && context.isDesktop,
-            _b[jsStyles.rootWithoutOverlayForNarrowDesktop(theme)] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
-            _b[jsStyles.rootWithShadow(theme)] = isSeparatedSubMenuOverContent,
+            _b[jsStyles.rootForDesktop(theme)] = context.isDesktop,
+            _b[jsStyles.rootForNarrowDesktop(theme)] = context.isNarrowDesktop,
+            _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
             _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
                 var _a;

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

@@ -4,8 +4,8 @@ export declare const customStyles: {
 };
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
-    rootWithoutOverlayForNarrowDesktop(t: SideMenuTheme): string;
-    rootWithoutOverlay(t: SideMenuTheme): string;
+    rootForNarrowDesktop(t: SideMenuTheme): string;
+    rootForDesktop(t: SideMenuTheme): string;
     rootWithShadow(t: SideMenuTheme): string;
     contentWrapper(t: SideMenuTheme): string;
     contentWrapperForMobiles(): string;

package/src/internal/SeparatedSubMenu.styles.js

@@ -5,10 +5,10 @@ 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);
     },
-    rootWithoutOverlayForNarrowDesktop: function (t) {
+    rootForNarrowDesktop: function (t) {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuMinimizedWidth);
     },
-    rootWithoutOverlay: function (t) {
+    rootForDesktop: function (t) {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", ";\n      z-index: -1;\n    "], ["\n      left: ", ";\n      z-index: -1;\n    "])), t.sideMenuWidth);
     },
     rootWithShadow: function (t) {

package/src/internal/SubMenu.js

@@ -10,8 +10,8 @@ import { SideMenuContext } from '../SideMenuContext';
 var SubMenu = forwardRef(function (_a, ref) {
     var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimized = _a.isMinimized, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption, htmlId = _a.htmlId;
     var context = useContext(SideMenuContext);
-    var shouldHideOverlayMenu = isMinimized && !context.separatedMenuWithoutOverlay;
-    if (!children || !isOpened || isSubMenu || shouldHideOverlayMenu) {
+    var shouldHideMenu = isMinimized && !context.isSeparatedMenu;
+    if (!children || !isOpened || isSubMenu || shouldHideMenu) {
         return null;
     }
     if (isSeparatedMenu && (context.isShown || context.isBeingTransitioned)) {