@skbkontur/side-menu 0.14.3 → 0.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +0 -123
  3. package/package.json +1 -1
  4. package/src/SideMenu/SideMenu.d.ts +0 -1
  5. package/src/SideMenu/SideMenu.js +24 -26
  6. package/src/SideMenuContext.d.ts +0 -1
  7. package/src/internal/ClickableElement.js +3 -3
  8. package/src/internal/ItemContent/ItemContent.js +2 -2
  9. package/src/internal/SeparatedSubMenu.js +3 -5
  10. package/src/internal/SeparatedSubMenu.styles.d.ts +2 -2
  11. package/src/internal/SeparatedSubMenu.styles.js +2 -2
  12. package/src/internal/SubMenu.js +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+ **Note:** Version bump only for package @skbkontur/side-menu
9
+
10
+
11
+
12
+
13
+
6
14
  ## [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)
7
15
 
8
16
  **Note:** Version bump only for package @skbkontur/side-menu
package/README.md CHANGED
@@ -202,129 +202,6 @@ const renderModal = () => {
202
202
  </div>
203
203
  ```
204
204
 
205
- Меню второго уровня в отдельной колонке можно расположить над контентом с помощью пропа `separatedMenuWithOverlay={true}`
206
-
207
- ```jsx harmony
208
- import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
209
- import { Buhgalteria, Kontur } from '@skbkontur/logos';
210
- import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
211
- import { SideMenu } from './index';
212
- import {
213
- DocTextIcon24Regular,
214
- CommentRectTextIcon24Regular,
215
- LightbulbIcon24Regular,
216
- BookOpenTextIcon24Regular,
217
- BookmarkIcon24Regular,
218
- StackHDownIcon24Regular,
219
- SettingsGearIcon24Regular,
220
- FaceAHappyIcon24Regular
221
- } from '@skbkontur/icons';
222
-
223
- const [opened, setOpened] = React.useState(false);
224
- const [panel, setPanel] = React.useState(false);
225
-
226
- const open = () => {
227
- setOpened(true);
228
- }
229
-
230
- const close = () => {
231
- setOpened(false);
232
- }
233
-
234
- const linearLightGradient = `repeating-linear-gradient(
235
- 60deg,
236
- #fafafa,
237
- #fafafa 20px,
238
- #dfdede 20px,
239
- #dfdede 40px
240
- )`
241
-
242
- const renderModal = () => {
243
- return (
244
- <Modal onClose={close}>
245
- <Modal.Header>Выбор организации</Modal.Header>
246
- <Modal.Body>
247
- <Input/>
248
- <div>Список организаций</div>
249
- </Modal.Body>
250
- </Modal>
251
- );
252
- }
253
-
254
- <div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
255
- <SideMenu isSeparatedMenu={true} separatedMenuWithOverlay={true}>
256
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
257
- <SideMenu.Body>
258
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
259
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
260
- <SideMenu.SubItem caption={'Входящие 1'}>
261
- <SideMenu.SubItem caption={'Входящие11'}>
262
- <SideMenu.SubItem caption={'Входящие111'}/>
263
- <SideMenu.SubItem caption={'Входящие112'}/>
264
- <SideMenu.SubItem caption={'Входящие113'}/>
265
- </SideMenu.SubItem>
266
- <SideMenu.SubItem caption={'Входящие12'}/>
267
- <SideMenu.SubItem caption={'Входящие13'}/>
268
- </SideMenu.SubItem>
269
- <SideMenu.SubItem caption={'Входящие2'}>
270
- <SideMenu.SubItem caption={'Входящие21'}>
271
- <SideMenu.SubItem caption={'Входящие211'}/>
272
- <SideMenu.SubItem caption={'Входящие212'}/>
273
- <SideMenu.SubItem caption={'Входящие213'}/>
274
- </SideMenu.SubItem>
275
- <SideMenu.SubItem caption={'Входящие22'}/>
276
- <SideMenu.SubItem caption={'Входящие23'}/>
277
- </SideMenu.SubItem>
278
- <SideMenu.SubItem caption={'Входящие3'}/>
279
- </SideMenu.SubItem>
280
- <SideMenu.SubItem caption={'Исходящие'}/>
281
- <SideMenu.SubItem caption={'Внутренние'}/>
282
- <SideMenu.SubItem caption={'Черновики'}/>
283
- <SideMenu.SubItem caption={'Удаленные'}/>
284
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
285
- <SideMenu.SubItem caption={'Требуют обработки'}/>
286
- <SideMenu.SubItem caption={'Обработанные'}/>
287
- </SideMenu.Item>
288
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
289
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
290
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
291
- <SideMenu.SubItem caption={'Исходящие'}/>
292
- <SideMenu.SubItem caption={'Внутренние'}/>
293
- <SideMenu.SubItem caption={'Черновики'}/>
294
- <SideMenu.SubItem caption={'Удаленные'}/>
295
- </SideMenu.Item>
296
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
297
- <SideMenu.Divider />
298
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
299
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
300
- </SideMenu.Body>
301
- <SideMenu.Footer>
302
- <div>
303
- {opened && renderModal()}
304
- <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
305
- </div>
306
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
307
- <SideMenu.Avatar
308
- userName={'Ишматова Елена'}
309
- avatarUrl={getKonturAvatarUrl({
310
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
311
- })}
312
- >
313
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
314
- Личный кабинет
315
- </MenuItem>
316
- <MenuItem >Безопасность</MenuItem>
317
- <SideMenu.Divider />
318
- <MenuItem >Выйти</MenuItem>
319
- </SideMenu.Avatar>
320
- </SideMenu.Footer>
321
- </SideMenu>
322
- <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
323
- {'Content '.repeat(100)}
324
- </div>
325
- </div>
326
- ```
327
-
328
205
  SideMenu с ручным управлением.
329
206
  Для `SideMenu.Link` при отсутствии `id` будет использован `href`
330
207
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "0.14.3",
3
+ "version": "0.14.4",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenu/SideMenu.d.ts CHANGED
@@ -23,7 +23,6 @@ export interface SideMenuProps extends CommonProps {
23
23
  narrowDesktopMediaQuery?: string;
24
24
  tabletMediaQuery?: string;
25
25
  mobileMediaQuery?: string;
26
- separatedMenuWithOverlay?: boolean;
27
26
  }
28
27
  interface SubComponents {
29
28
  Body: typeof SideMenuBody;
package/src/SideMenu/SideMenu.js CHANGED
@@ -30,7 +30,7 @@ export var transitionDuration = 300; //ms
30
30
  export var burgerTransitionDuration = (transitionDuration * 2) / 3;
31
31
  var SideMenuInner = forwardRef(function (_a, ref) {
32
32
  var _b, _c, _d, _e;
33
- 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"]);
33
+ 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"]);
34
34
  var transitionTimer = useRef(null);
35
35
  var widgetTimer = useRef(null);
36
36
  var theme = getSideMenuTheme(useContext(ThemeContext));
@@ -40,26 +40,25 @@ var SideMenuInner = forwardRef(function (_a, ref) {
40
40
  isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
41
41
  isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
42
42
  };
43
- var _k = useResponsiveLayout({
43
+ var _j = useResponsiveLayout({
44
44
  customMediaQueries: customMediaQueries,
45
- }), isMobileQuery = _k.isMobileQuery, isTabletQuery = _k.isTabletQuery, isNarrowDesktopQuery = _k.isNarrowDesktopQuery, isDesktopQuery = _k.isDesktopQuery;
45
+ }), isMobileQuery = _j.isMobileQuery, isTabletQuery = _j.isTabletQuery, isNarrowDesktopQuery = _j.isNarrowDesktopQuery, isDesktopQuery = _j.isDesktopQuery;
46
46
  var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
47
47
  var isTablet = isTabletQuery && !isNarrowDesktopQuery;
48
48
  var isMobile = isMobileQuery && !isTabletQuery;
49
49
  var isTabletOrMobile = isTablet || isMobile;
50
50
  var isTouchScreen = isTouchDevice() || isMobile || isTablet;
51
- var separatedMenuWithoutOverlay = isSeparatedMenu && !separatedMenuWithOverlay;
52
- var _l = useState(isNarrowDesktop), isMinimized = _l[0], setIsMinimized = _l[1];
53
- var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
54
- var _o = useState(false), showWidget = _o[0], setShowWidget = _o[1];
55
- var _p = useState(value), activeMenuItem = _p[0], setActiveMenuItem = _p[1];
56
- var _q = useState(isDesktopQuery || isNarrowDesktop), isShown = _q[0], setIsShown = _q[1];
57
- var _r = useState(false), isSeparatedMenuShown = _r[0], setIsSeparatedMenuShown = _r[1];
58
- var _s = useState(true), isMouseOutside = _s[0], setIsMouseOutside = _s[1];
59
- var _t = useState('top'), scrollState = _t[0], setScrollState = _t[1];
60
- var _u = useState(false), hasScrollBar = _u[0], setHasScrollBar = _u[1];
61
- var _v = useState(0), mousePositionX = _v[0], setMousePositionX = _v[1];
62
- var _w = useState(0), headerHeight = _w[0], setHeaderHeight = _w[1];
51
+ var _k = useState(isNarrowDesktop), isMinimized = _k[0], setIsMinimized = _k[1];
52
+ var _l = useState(false), isBeingTransitioned = _l[0], setIsBeingTransitioned = _l[1];
53
+ var _m = useState(false), showWidget = _m[0], setShowWidget = _m[1];
54
+ var _o = useState(value), activeMenuItem = _o[0], setActiveMenuItem = _o[1];
55
+ var _p = useState(isDesktopQuery || isNarrowDesktop), isShown = _p[0], setIsShown = _p[1];
56
+ var _q = useState(false), isSeparatedMenuShown = _q[0], setIsSeparatedMenuShown = _q[1];
57
+ var _r = useState(true), isMouseOutside = _r[0], setIsMouseOutside = _r[1];
58
+ var _s = useState('top'), scrollState = _s[0], setScrollState = _s[1];
59
+ var _t = useState(false), hasScrollBar = _t[0], setHasScrollBar = _t[1];
60
+ var _u = useState(0), mousePositionX = _u[0], setMousePositionX = _u[1];
61
+ var _v = useState(0), headerHeight = _v[0], setHeaderHeight = _v[1];
63
62
  useEffect(function () {
64
63
  return function () {
65
64
  if (transitionTimer.current) {
@@ -91,8 +90,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
91
90
  setActiveMenuItem(value);
92
91
  }, [value]);
93
92
  var showMinimizedRoot = function (newIsMinimized) {
94
- var minimizeWithoutOverlay = separatedMenuWithoutOverlay && newIsMinimized;
95
- if ((!isBeingTransitioned || minimizeWithoutOverlay) && newIsMinimized !== isMinimized) {
93
+ var minimizeSeparatedMenu = isSeparatedMenu && newIsMinimized;
94
+ if ((!isBeingTransitioned || minimizeSeparatedMenu) && newIsMinimized !== isMinimized) {
96
95
  setIsBeingTransitioned(true);
97
96
  setIsMinimized(newIsMinimized);
98
97
  if (transitionTimer.current) {
@@ -104,7 +103,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
104
103
  }
105
104
  };
106
105
  var handleMouseEnter = function () {
107
- if (separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop) {
106
+ if (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop) {
108
107
  return;
109
108
  }
110
109
  isMouseOutside && showMinimizedRoot(false);
@@ -123,8 +122,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
123
122
  }
124
123
  setIsMouseOutside(true);
125
124
  };
126
- var showMinimizedRootForNarrowDesktopWithOverlay = function (e) {
127
- if (!separatedMenuWithoutOverlay || !isNarrowDesktop)
125
+ var showMinimizedRootForNarrowDesktop = function (e) {
126
+ if (!isSeparatedMenu || !isNarrowDesktop)
128
127
  return;
129
128
  if (e.clientX < parseInt(theme.sideMenuMinimizedWidth) &&
130
129
  mousePositionX > parseInt(theme.sideMenuMinimizedWidth)) {
@@ -156,11 +155,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
156
155
  }
157
156
  };
158
157
  var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
159
- var _x = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
158
+ var _w = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
160
159
  opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
161
160
  }, {
162
161
  opacity: 0,
163
- }), shouldShowBackdrop = _x[0], backdropStyle = _x[1];
162
+ }), shouldShowBackdrop = _w[0], backdropStyle = _w[1];
164
163
  var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
165
164
  return (React.createElement(SideMenuContext.Provider, { value: {
166
165
  isMinimized: isMinimized,
@@ -180,7 +179,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
180
179
  toggleIsShown: function () { return handleIsShown(!isShown); },
181
180
  isSeparatedMenuShown: isSeparatedMenuShown,
182
181
  setIsSeparatedMenuShown: setIsSeparatedMenuShown,
183
- separatedMenuWithoutOverlay: separatedMenuWithoutOverlay,
184
182
  setIsMouseOutside: setIsMouseOutside,
185
183
  scrollState: scrollState,
186
184
  setScrollState: setScrollState,
@@ -194,8 +192,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
194
192
  _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
195
193
  _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
196
194
  _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
197
- _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
198
- _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
195
+ _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isNarrowDesktop,
196
+ _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery,
199
197
  _b)) },
200
198
  React.createElement(React.Fragment, null,
201
199
  shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
@@ -204,7 +202,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
204
202
  _c[jsStylesForSideMenu.wrapper()] = true,
205
203
  _c[jsStylesForSideMenu.wrapperIE()] = isIE11,
206
204
  _c[jsStylesForSideMenu.wrapperWithShadow(theme)] = isSideMenuOverContent,
207
- _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktopWithOverlay }),
205
+ _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop }),
208
206
  React.createElement("div", { className: cx((_d = {},
209
207
  _d[jsStylesForSideMenu.container(theme)] = true,
210
208
  _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
package/src/SideMenuContext.d.ts CHANGED
@@ -22,7 +22,6 @@ export interface SideMenuContextType {
22
22
  flattedArrayOfAllElements?: FlattedArrayElementType[];
23
23
  isSeparatedMenuShown?: boolean;
24
24
  setIsSeparatedMenuShown?: (separatedMenuIsShown: boolean) => void;
25
- separatedMenuWithoutOverlay?: boolean;
26
25
  setIsMouseOutside?: (v: boolean) => void;
27
26
  scrollState?: ScrollContainerScrollStateY;
28
27
  setScrollState?: (state: ScrollContainerScrollStateY) => void;
package/src/internal/ClickableElement.js CHANGED
@@ -49,8 +49,8 @@ var ClickableElement = forwardRef(function (_a, ref) {
49
49
  };
50
50
  var setIsMinimized = function (lastElementInTheHierarchy) {
51
51
  var _a, _b;
52
- var topLevelItemInSideMenuWithOverlay = context.separatedMenuWithoutOverlay && !_isSubMenu && children;
53
- if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSideMenuWithOverlay)) {
52
+ var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
53
+ if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
54
54
  (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
55
55
  }
56
56
  if (!_isSubMenu) {
@@ -65,7 +65,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
65
65
  };
66
66
  var setSeparatedMenuIsShown = function () {
67
67
  var _a, _b;
68
- if (!_isSubMenu && context.separatedMenuWithoutOverlay) {
68
+ if (!_isSubMenu && context.isSeparatedMenu) {
69
69
  (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
70
70
  }
71
71
  if (context.isSeparatedMenu && !_isSubMenu && children) {
package/src/internal/ItemContent/ItemContent.js CHANGED
@@ -56,7 +56,7 @@ var ItemContent = forwardRef(function (_a, ref) {
56
56
  });
57
57
  }
58
58
  }, [textRef.current, context.isBeingTransitioned]);
59
- var isSeparatedSubMenuInNarrowDesktopWithoutOverlay = _isSubMenu && context.separatedMenuWithoutOverlay && context.isNarrowDesktop;
59
+ var isSeparatedSubMenuInNarrowDesktop = _isSubMenu && context.isSeparatedMenu && context.isNarrowDesktop;
60
60
  return (React.createElement("div", { className: cx((_b = {},
61
61
  _b[jsStyles.root(theme)] = true,
62
62
  _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
@@ -73,7 +73,7 @@ var ItemContent = forwardRef(function (_a, ref) {
73
73
  _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
74
74
  _c)) },
75
75
  React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
76
- marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
76
+ marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
77
77
  });
78
78
  ItemContent.displayName = 'ItemContent';
79
79
  var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
package/src/internal/SeparatedSubMenu.js CHANGED
@@ -34,16 +34,14 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
34
34
  });
35
35
  };
36
36
  var levelIndex = 0;
37
- var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
38
- var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
39
37
  return (React.createElement("div", { className: cx((_b = {},
40
38
  _b[jsStylesForSideMenu.container(theme)] = true,
41
39
  _b[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
42
40
  _b[jsStyles.root(theme)] = true,
43
41
  _b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
44
- _b[jsStyles.rootWithoutOverlay(theme)] = context.separatedMenuWithoutOverlay && context.isDesktop,
45
- _b[jsStyles.rootWithoutOverlayForNarrowDesktop(theme)] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
46
- _b[jsStyles.rootWithShadow(theme)] = isSeparatedSubMenuOverContent,
42
+ _b[jsStyles.rootForDesktop(theme)] = context.isDesktop,
43
+ _b[jsStyles.rootForNarrowDesktop(theme)] = context.isNarrowDesktop,
44
+ _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
47
45
  _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
48
46
  React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
49
47
  var _a;
package/src/internal/SeparatedSubMenu.styles.d.ts CHANGED
@@ -4,8 +4,8 @@ export declare const customStyles: {
4
4
  };
5
5
  export declare const jsStyles: {
6
6
  root(t: SideMenuTheme): string;
7
- rootWithoutOverlayForNarrowDesktop(t: SideMenuTheme): string;
8
- rootWithoutOverlay(t: SideMenuTheme): string;
7
+ rootForNarrowDesktop(t: SideMenuTheme): string;
8
+ rootForDesktop(t: SideMenuTheme): string;
9
9
  rootWithShadow(t: SideMenuTheme): string;
10
10
  contentWrapper(t: SideMenuTheme): string;
11
11
  contentWrapperForMobiles(): string;
package/src/internal/SeparatedSubMenu.styles.js CHANGED
@@ -5,10 +5,10 @@ var styles = {
5
5
  root: function (t) {
6
6
  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);
7
7
  },
8
- rootWithoutOverlayForNarrowDesktop: function (t) {
8
+ rootForNarrowDesktop: function (t) {
9
9
  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: ", ";\n z-index: -1;\n "], ["\n left: ", ";\n z-index: -1;\n "])), t.sideMenuMinimizedWidth);
10
10
  },
11
- rootWithoutOverlay: function (t) {
11
+ rootForDesktop: function (t) {
12
12
  return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: ", ";\n z-index: -1;\n "], ["\n left: ", ";\n z-index: -1;\n "])), t.sideMenuWidth);
13
13
  },
14
14
  rootWithShadow: function (t) {
package/src/internal/SubMenu.js CHANGED
@@ -10,8 +10,8 @@ import { SideMenuContext } from '../SideMenuContext';
10
10
  var SubMenu = forwardRef(function (_a, ref) {
11
11
  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;
12
12
  var context = useContext(SideMenuContext);
13
- var shouldHideOverlayMenu = isMinimized && !context.separatedMenuWithoutOverlay;
14
- if (!children || !isOpened || isSubMenu || shouldHideOverlayMenu) {
13
+ var shouldHideMenu = isMinimized && !context.isSeparatedMenu;
14
+ if (!children || !isOpened || isSubMenu || shouldHideMenu) {
15
15
  return null;
16
16
  }
17
17
  if (isSeparatedMenu && (context.isShown || context.isBeingTransitioned)) {