@skbkontur/side-menu 1.6.0 → 1.8.0

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 (20) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +29 -0
  3. package/package.json +1 -1
  4. package/src/SideMenu/SideMenu.d.ts +15 -0
  5. package/src/SideMenu/SideMenu.js +54 -46
  6. package/src/SideMenuBody/SideMenuBody.js +3 -3
  7. package/src/SideMenuContext.d.ts +4 -4
  8. package/src/SideMenuDropdown/SideMenuDropdown.js +2 -2
  9. package/src/SideMenuFooter/SideMenuFooter.js +1 -1
  10. package/src/SideMenuHeader/SideMenuHeader.js +3 -3
  11. package/src/internal/Burger.js +1 -1
  12. package/src/internal/ClickableElement.js +5 -3
  13. package/src/internal/InnerBody.js +3 -2
  14. package/src/internal/ItemContent/Icon.js +1 -1
  15. package/src/internal/ItemContent/ItemContent.js +3 -3
  16. package/src/internal/RightBorder.d.ts +2 -1
  17. package/src/internal/RightBorder.js +5 -4
  18. package/src/internal/SeparatedSubMenu.js +1 -1
  19. package/src/internal/SideMenuLogotype.js +3 -3
  20. package/src/internal/SubMenu.js +4 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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
+ # [1.8.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.7.0...@skbkontur/side-menu@1.8.0) (2023-10-05)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenu:** add isOpen, onOpen, onClose props ([c7650bf](https://git.skbkontur.ru/ui/ui-parking/commits/c7650bf7fff7b93846d4b01dc30ef97165c16468))
12
+
13
+
14
+
15
+
16
+
17
+ # [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)
18
+
19
+
20
+ ### Features
21
+
22
+ * **SideMenu:** add hideScrollBar prop ([729bea4](https://git.skbkontur.ru/ui/ui-parking/commits/729bea40a9650e4aa4abcb0f0c6b913cd615dd50))
23
+
24
+
25
+
26
+
27
+
6
28
  # [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)
7
29
 
8
30
 
package/README.md CHANGED
@@ -625,7 +625,36 @@ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
625
625
  </SideMenu>
626
626
  </ThemeContext.Provider>
627
627
  </div>
628
+ ```
629
+
630
+ #### Пример с использованием пропа `isOpen`
631
+
632
+ ```jsx harmony
633
+ import { Kontur, Ofd } from '@skbkontur/logos';
634
+ import { SideMenu } from './index';
635
+ import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
636
+ import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
637
+ import { ThemeContext, ThemeFactory, Button } from '@skbkontur/react-ui';
638
+
639
+ const [isOpen, setIsOpen] = React.useState(true);
628
640
 
641
+ <div style={{ height: '200px', position: 'relative', display: 'flex' }}>
642
+ <ThemeContext.Provider
643
+ value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuProductColor: '#64b419' })}>
644
+ <SideMenu isOpen={isOpen} onOpen={() => console.log('onOpen')} onClose={() => console.log('onClose')}>
645
+ <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
646
+ <SideMenu.Body>
647
+ <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} />
648
+ </SideMenu.Body>
649
+ <SideMenu.Footer>
650
+ <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
651
+ </SideMenu.Footer>
652
+ </SideMenu>
653
+ </ThemeContext.Provider>
654
+ <Button onClick={() => {
655
+ setIsOpen(!isOpen)
656
+ }}>{isOpen ? 'Закрыть меню' : 'Открыть меню'}</Button>
657
+ </div>
629
658
  ```
630
659
 
631
660
  #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "1.6.0",
3
+ "version": "1.8.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenu/SideMenu.d.ts CHANGED
@@ -23,6 +23,21 @@ export interface SideMenuProps extends CommonProps {
23
23
  narrowDesktopMediaQuery?: string;
24
24
  tabletMediaQuery?: string;
25
25
  mobileMediaQuery?: string;
26
+ hideScrollBar?: boolean;
27
+ /**
28
+ * Открывает и закрывает меню
29
+ *
30
+ * Примечание: при заданном пропе `isOpen` автоматическое открытие/зарытие меню не работает
31
+ */
32
+ isOpen?: boolean;
33
+ /**
34
+ * Действие при открытии меню
35
+ */
36
+ onOpen?: () => void;
37
+ /**
38
+ * Действие при закрытии меню
39
+ */
40
+ onClose?: () => void;
26
41
  }
27
42
  interface SubComponents {
28
43
  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, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery"]);
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.hideScrollBar, hideScrollBar = _j === void 0 ? true : _j, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "isOpen", "onOpen", "onClose"]);
34
34
  var transitionTimer = useRef(null);
35
35
  var theme = getSideMenuTheme(useContext(ThemeContext));
36
36
  var customMediaQueries = {
@@ -39,18 +39,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
39
39
  isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
40
40
  isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
41
41
  };
42
- var _j = useResponsiveLayout({
42
+ var _k = useResponsiveLayout({
43
43
  customMediaQueries: customMediaQueries,
44
- }), isMobileQuery = _j.isMobileQuery, isTabletQuery = _j.isTabletQuery, isNarrowDesktopQuery = _j.isNarrowDesktopQuery, isDesktopQuery = _j.isDesktopQuery;
44
+ }), isMobileQuery = _k.isMobileQuery, isTabletQuery = _k.isTabletQuery, isNarrowDesktopQuery = _k.isNarrowDesktopQuery, isDesktopQuery = _k.isDesktopQuery;
45
45
  var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
46
46
  var isTablet = isTabletQuery && !isNarrowDesktopQuery;
47
47
  var isMobile = isMobileQuery && !isTabletQuery;
48
48
  var isTabletOrMobile = isTablet || isMobile;
49
49
  var isTouchScreen = isTouchDevice() || isMobile || isTablet;
50
- var _k = useState(isNarrowDesktop), isMinimized = _k[0], setIsMinimized = _k[1];
51
- var _l = useState(false), isBeingTransitioned = _l[0], setIsBeingTransitioned = _l[1];
52
- var _m = useState(value), activeMenuItem = _m[0], setActiveMenuItem = _m[1];
53
- var _o = useState(isDesktopQuery || isNarrowDesktop), isShown = _o[0], setIsShown = _o[1];
50
+ var manual = isOpen !== undefined;
51
+ var _l = useState(isDesktopQuery || isNarrowDesktop), isOpened = _l[0], setIsOpened = _l[1];
52
+ var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
53
+ var _o = useState(value), activeMenuItem = _o[0], setActiveMenuItem = _o[1];
54
54
  var _p = useState(false), isSeparatedMenuShown = _p[0], setIsSeparatedMenuShown = _p[1];
55
55
  var _q = useState(true), isMouseOutside = _q[0], setIsMouseOutside = _q[1];
56
56
  var _r = useState('top'), scrollState = _r[0], setScrollState = _r[1];
@@ -64,31 +64,35 @@ var SideMenuInner = forwardRef(function (_a, ref) {
64
64
  }
65
65
  };
66
66
  }, []);
67
- useEffect(function () {
68
- if (isNarrowDesktop || isDesktopQuery) {
69
- setIsShown(true);
70
- }
71
- if (isDesktopQuery) {
72
- setIsMinimized(false);
67
+ var handleIsOpened = function (newIsOpened, shouldSetState) {
68
+ if (newIsOpened === isOpened || !shouldSetState)
69
+ return;
70
+ setIsOpened(newIsOpened);
71
+ if (newIsOpened) {
72
+ onOpen === null || onOpen === void 0 ? void 0 : onOpen();
73
73
  }
74
- if (isNarrowDesktop) {
75
- setIsMinimized(true);
74
+ else {
75
+ onClose === null || onClose === void 0 ? void 0 : onClose();
76
76
  }
77
- }, [isNarrowDesktop, isDesktopQuery]);
77
+ };
78
78
  useEffect(function () {
79
- if (isTablet || isMobile) {
80
- setIsMinimized(false);
81
- setIsShown(false);
79
+ if (isDesktopQuery) {
80
+ setIsOpened(true);
81
+ }
82
+ if (isNarrowDesktop || isTablet || isMobile) {
83
+ setIsOpened(false);
82
84
  }
83
- }, [isTablet, isMobile]);
85
+ }, [isNarrowDesktop, isDesktopQuery, isTablet, isMobile]);
84
86
  useEffect(function () {
85
87
  setActiveMenuItem(value);
86
88
  }, [value]);
89
+ useEffect(function () {
90
+ handleIsOpened(isOpen, manual);
91
+ }, [isOpen]);
87
92
  var showMinimizedRoot = function (newIsMinimized) {
88
- var minimizeSeparatedMenu = isSeparatedMenu && newIsMinimized;
89
- if ((!isBeingTransitioned || minimizeSeparatedMenu) && newIsMinimized !== isMinimized) {
93
+ if ((!isBeingTransitioned || isSeparatedMenu) && newIsMinimized === isOpened) {
90
94
  setIsBeingTransitioned(true);
91
- setIsMinimized(newIsMinimized);
95
+ handleIsOpened(!newIsMinimized, !manual);
92
96
  if (transitionTimer.current) {
93
97
  clearTimeout(transitionTimer.current);
94
98
  }
@@ -98,23 +102,27 @@ var SideMenuInner = forwardRef(function (_a, ref) {
98
102
  }
99
103
  };
100
104
  var handleMouseEnter = function () {
101
- if (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop) {
105
+ if (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) {
102
106
  return;
103
107
  }
104
- isMouseOutside && showMinimizedRoot(false);
105
- setIsMouseOutside(false);
108
+ if (isNarrowDesktop || (isDesktopQuery && !isOpened)) {
109
+ isMouseOutside && showMinimizedRoot(false);
110
+ setIsMouseOutside(false);
111
+ }
106
112
  };
107
113
  var handleMouseLeave = function () {
108
114
  if (isNarrowDesktop) {
109
- setIsMinimized(true);
115
+ handleIsOpened(false, !manual);
116
+ }
117
+ if ((isNarrowDesktop || (isDesktopQuery && !isOpened)) && !manual) {
118
+ setIsMouseOutside(true);
110
119
  }
111
- setIsMouseOutside(true);
112
120
  };
113
121
  var showMinimizedRootForNarrowDesktop = function (e) {
114
122
  if (!isSeparatedMenu || !isNarrowDesktop)
115
123
  return;
116
- if (e.clientX < parseInt(theme.sideMenuMinimizedWidth) &&
117
- mousePositionX > parseInt(theme.sideMenuMinimizedWidth)) {
124
+ if (e.clientX <= parseInt(theme.sideMenuMinimizedWidth) &&
125
+ mousePositionX >= parseInt(theme.sideMenuMinimizedWidth)) {
118
126
  showMinimizedRoot(false);
119
127
  }
120
128
  if (e.clientX > parseInt(theme.sideMenuWidth)) {
@@ -128,12 +136,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
128
136
  setActiveMenuItem(id);
129
137
  }
130
138
  };
131
- var handleIsShown = function (newIsShown) {
139
+ var showMenu = function (newIsShown) {
132
140
  if (!isTabletOrMobile)
133
141
  return;
134
- if (!isBeingTransitioned && newIsShown !== isShown) {
142
+ if (!isBeingTransitioned && newIsShown !== isOpened) {
135
143
  setIsBeingTransitioned(true);
136
- setIsShown(newIsShown);
144
+ handleIsOpened(newIsShown, !manual);
137
145
  if (transitionTimer.current) {
138
146
  clearTimeout(transitionTimer.current);
139
147
  }
@@ -142,15 +150,16 @@ var SideMenuInner = forwardRef(function (_a, ref) {
142
150
  }, burgerTransitionDuration);
143
151
  }
144
152
  };
145
- var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
146
- var _v = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
153
+ var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
154
+ var _v = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
147
155
  opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
148
156
  }, {
149
157
  opacity: 0,
150
158
  }), shouldShowBackdrop = _v[0], backdropStyle = _v[1];
151
- var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
159
+ var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop) && isOpened;
152
160
  return (React.createElement(SideMenuContext.Provider, { value: {
153
- isMinimized: isMinimized,
161
+ isOpened: isOpened,
162
+ toggleIsOpened: function () { return showMenu(!isOpened); },
154
163
  setIsMinimized: showMinimizedRoot,
155
164
  isBeingTransitioned: isBeingTransitioned,
156
165
  isSeparatedMenu: isSeparatedMenu,
@@ -162,8 +171,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
162
171
  isTablet: isTablet,
163
172
  isMobile: isMobile,
164
173
  isTouchScreen: isTouchScreen,
165
- isShown: isShown,
166
- toggleIsShown: function () { return handleIsShown(!isShown); },
167
174
  isSeparatedMenuShown: isSeparatedMenuShown,
168
175
  setIsSeparatedMenuShown: setIsSeparatedMenuShown,
169
176
  setIsMouseOutside: setIsMouseOutside,
@@ -173,18 +180,19 @@ var SideMenuInner = forwardRef(function (_a, ref) {
173
180
  setHasScrollBar: setHasScrollBar,
174
181
  headerHeight: headerHeight,
175
182
  setHeaderHeight: setHeaderHeight,
183
+ hideScrollBar: hideScrollBar,
176
184
  } },
177
185
  React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},
178
186
  _b[jsStylesForSideMenu.root()] = true,
179
187
  _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
180
- _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
188
+ _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isOpened && isTabletOrMobile,
181
189
  _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
182
190
  _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isNarrowDesktop,
183
191
  _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery,
184
192
  _b)) },
185
193
  React.createElement(React.Fragment, null,
186
194
  shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
187
- React.createElement(RenderLayer, { onClickOutside: function () { return handleIsShown(false); } },
195
+ React.createElement(RenderLayer, { onClickOutside: function () { return showMenu(false); } },
188
196
  React.createElement("aside", __assign({ className: cx((_c = {},
189
197
  _c[jsStylesForSideMenu.wrapper()] = true,
190
198
  _c[jsStylesForSideMenu.wrapperIE()] = isIE11,
@@ -192,18 +200,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
192
200
  _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop }),
193
201
  React.createElement("div", { className: cx((_d = {},
194
202
  _d[jsStylesForSideMenu.container(theme)] = true,
195
- _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
196
- _d[jsStylesForSideMenu.minimizedContainer(theme)] = isMinimized,
203
+ _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isOpened && isTabletOrMobile && !isBeingTransitioned,
204
+ _d[jsStylesForSideMenu.minimizedContainer(theme)] = !isOpened && !isTabletOrMobile,
197
205
  _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenuShown,
198
206
  _d[jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
199
- _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
207
+ _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isOpened || isBeingTransitioned),
200
208
  _d)) },
201
209
  React.createElement("div", { className: cx((_e = {},
202
210
  _e[jsStylesForSideMenu.contentWrapper(theme)] = true,
203
211
  _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
204
- _e[jsStylesForSideMenu.minimizedContentWrapper()] = isMinimized,
212
+ _e[jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
205
213
  _e)) }, children)),
206
- !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
214
+ !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsOpened: handleIsOpened, manual: manual }))))))));
207
215
  });
208
216
  SideMenuInner.displayName = 'SideMenu';
209
217
  var STATIC_PROPS = {
package/src/SideMenuBody/SideMenuBody.js CHANGED
@@ -32,14 +32,14 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
32
32
  (_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'));
33
33
  }, delay);
34
34
  setScrollContainerInnerPosition();
35
- }, [context.activeMenuItem, context.isShown, context.isBeingTransitioned && context.isMobile]);
35
+ }, [context.activeMenuItem, context.isOpened, context.isBeingTransitioned && context.isMobile]);
36
36
  var theme = getSideMenuTheme(useContext(ThemeContext));
37
- if (context.isShown) {
37
+ if (!(context.isMobile || context.isTablet) || (context.isOpened && (context.isMobile || context.isTablet))) {
38
38
  return (React.createElement("div", { ref: mergeRefs([ref, sideMenuBodyRef]), className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className) },
39
39
  React.createElement(ScrollContainer, { style: { position: 'static' }, onScrollStateChangeY: function (state) {
40
40
  var _a;
41
41
  (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
42
- }, hideScrollBar: true, ref: scrollContainerRef },
42
+ }, hideScrollBar: context.hideScrollBar, ref: scrollContainerRef },
43
43
  React.createElement("nav", null,
44
44
  React.createElement("ul", __assign({ className: cx((_c = {}, _c[jsStylesForSideMenu.list()] = true, _c[jsStyles.wrapper(theme)] = true, _c)) }, rest),
45
45
  React.createElement(InnerBody, null, children))))));
package/src/SideMenuContext.d.ts CHANGED
@@ -2,8 +2,6 @@
2
2
  import { FlattedArrayElementType } from './internal/InnerBody';
3
3
  import { ScrollContainerScrollStateY } from '@skbkontur/react-ui';
4
4
  export interface SideMenuContextType {
5
- isMinimized?: boolean;
6
- setIsMinimized?: (isMinimized: boolean) => void;
7
5
  isBeingTransitioned?: boolean;
8
6
  isSeparatedMenu?: boolean;
9
7
  size?: 'small' | 'large';
@@ -16,8 +14,9 @@ export interface SideMenuContextType {
16
14
  isTablet?: boolean;
17
15
  isMobile?: boolean;
18
16
  isTouchScreen?: boolean;
19
- isShown?: boolean;
20
- toggleIsShown?: () => void;
17
+ isOpened?: boolean;
18
+ toggleIsOpened?: () => void;
19
+ setIsMinimized?: (isMinimized: boolean) => void;
21
20
  flattedArrayOfAllElements?: FlattedArrayElementType[];
22
21
  isSeparatedMenuShown?: boolean;
23
22
  setIsSeparatedMenuShown?: (separatedMenuIsShown: boolean) => void;
@@ -28,5 +27,6 @@ export interface SideMenuContextType {
28
27
  setHasScrollBar?: (hasScrollBar: boolean) => void;
29
28
  headerHeight?: number;
30
29
  setHeaderHeight?: (mobileHeaderHeight: number) => void;
30
+ hideScrollBar?: boolean;
31
31
  }
32
32
  export declare const SideMenuContext: import("react").Context<SideMenuContextType>;
package/src/SideMenuDropdown/SideMenuDropdown.js CHANGED
@@ -15,7 +15,7 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
15
15
  React.createElement(DropdownMenu, __assign({ caption: React.createElement("div", { className: cx((_c = {},
16
16
  _c[jsStyles.label(theme)] = true,
17
17
  _c[jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
18
- _c[jsStyles.minimizedLabel()] = context.isMinimized,
18
+ _c[jsStyles.minimizedLabel()] = !context.isOpened,
19
19
  _c)) },
20
20
  React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
21
21
  // @ts-expect-error: accessing private property
@@ -23,7 +23,7 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
23
23
  return React.cloneElement(child, {
24
24
  onClick: function () {
25
25
  var _a, _b, _c;
26
- (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
26
+ (_a = context.toggleIsOpened) === null || _a === void 0 ? void 0 : _a.call(context);
27
27
  (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
28
28
  },
29
29
  });
package/src/SideMenuFooter/SideMenuFooter.js CHANGED
@@ -16,7 +16,7 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
16
16
  useEffect(function () {
17
17
  setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
18
18
  }, [context.hasScrollBar, context.scrollState]);
19
- if (context.isShown) {
19
+ if (!(context.isMobile || context.isTablet) || (context.isOpened && (context.isMobile || context.isTablet))) {
20
20
  return (React.createElement("footer", __assign({ className: cx((_b = {},
21
21
  _b[jsStyles.root(theme)] = true,
22
22
  _b[jsStyles.rootFixed(theme)] = isFixed,
package/src/SideMenuHeader/SideMenuHeader.js CHANGED
@@ -23,9 +23,9 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
23
23
  return (React.createElement("header", { className: cx((_b = {},
24
24
  _b[jsStyles.root(theme)] = true,
25
25
  _b[jsStyles.rootForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
26
- _b[jsStyles.fixedRoot(theme)] = context.isShown && !(context.scrollState === 'top'),
27
- _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown || context.isBeingTransitioned,
28
- _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isShown && context.isMobile && context.isSeparatedMenuShown,
26
+ _b[jsStyles.fixedRoot(theme)] = context.isOpened && !(context.scrollState === 'top'),
27
+ _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isOpened || (context.isBeingTransitioned && (context.isMobile || context.isTablet)),
28
+ _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isOpened && context.isMobile && context.isSeparatedMenuShown,
29
29
  _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style, "data-tid": dataTid },
30
30
  React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
31
31
  });
package/src/internal/Burger.js CHANGED
@@ -8,6 +8,6 @@ import { ThemeContext } from '@skbkontur/react-ui';
8
8
  export var Burger = function () {
9
9
  var context = useContext(SideMenuContext);
10
10
  var theme = getSideMenuTheme(useContext(ThemeContext));
11
- return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
11
+ return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids.burger },
12
12
  React.createElement(UiMenuBars3HIcon24Regular, null)));
13
13
  };
package/src/internal/ClickableElement.js CHANGED
@@ -46,11 +46,13 @@ var ClickableElement = forwardRef(function (_a, ref) {
46
46
  var toggleIsShown = function (lastElementInTheHierarchy) {
47
47
  var _a;
48
48
  if ((context.isMobile || context.isTablet) && lastElementInTheHierarchy) {
49
- (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
49
+ (_a = context.toggleIsOpened) === null || _a === void 0 ? void 0 : _a.call(context);
50
50
  }
51
51
  };
52
52
  var setIsMinimized = function (lastElementInTheHierarchy) {
53
53
  var _a, _b;
54
+ if (context.isMobile || context.isTablet || context.isDesktop)
55
+ return;
54
56
  var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
55
57
  if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
56
58
  (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
@@ -86,7 +88,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
86
88
  setIsFocusedByTab(false);
87
89
  };
88
90
  var shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
89
- var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isNarrowDesktop && context.isMinimized;
91
+ var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isNarrowDesktop && !context.isOpened;
90
92
  var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
91
93
  var newProps = __assign({ className: cx((_b = {},
92
94
  _b[jsStyles.root(theme)] = true,
@@ -101,7 +103,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
101
103
  return (React.createElement(Component, null,
102
104
  React.cloneElement(React.createElement(Tag, null), children
103
105
  ? __assign(__assign({}, newProps), { 'aria-expanded': isOpened, 'aria-controls': "" + (id || _generatedId) }) : __assign({}, newProps)),
104
- React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: context.isMinimized, htmlId: "" + (id || _generatedId) }, children)));
106
+ React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: !context.isOpened && !(context.isMobile || context.isTablet), htmlId: "" + (id || _generatedId) }, children)));
105
107
  });
106
108
  ClickableElement.displayName = 'ClickableElement';
107
109
  var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
package/src/internal/InnerBody.js CHANGED
@@ -57,7 +57,8 @@ var InnerBody = function (_a) {
57
57
  if (!context.isSeparatedMenu)
58
58
  return;
59
59
  var isActive = activeMenuItemHasParent() || activeMenuItemHasChildren() || false;
60
- (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, isActive);
60
+ var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop;
61
+ (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, isActive && !isMinimizedInWideDesktop);
61
62
  };
62
63
  useEffect(function () {
63
64
  getFlattedArrayOfAllElements();
@@ -65,7 +66,7 @@ var InnerBody = function (_a) {
65
66
  useEffect(function () {
66
67
  getOpenedParents();
67
68
  setSeparatedMenuIsShown();
68
- }, [context.activeMenuItem]);
69
+ }, [context.activeMenuItem, context.isOpened]);
69
70
  var levelIndex = 0;
70
71
  return (React.createElement(SideMenuContext.Provider, { value: __assign({ openedParents: parents, flattedArrayOfAllElements: flattedArrayOfAllElements.current }, context) }, React.Children.map(children, function (child) {
71
72
  if (React.isValidElement(child)) {
package/src/internal/ItemContent/Icon.js CHANGED
@@ -31,7 +31,7 @@ export var Icon = function (_a) {
31
31
  };
32
32
  return (React.createElement("span", { className: cx((_b = {},
33
33
  _b[jsStyles.root(theme)] = true,
34
- _b[jsStyles.rootMultiline()] = isMultiline && (!context.isMinimized || _isSubMenu),
34
+ _b[jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
35
35
  _b[jsStyles.rootLarge(theme)] = size === 'large',
36
36
  _b[jsStyles.rootSubItem(theme)] = _isSubMenu,
37
37
  _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
package/src/internal/ItemContent/ItemContent.js CHANGED
@@ -48,7 +48,7 @@ var ItemContent = forwardRef(function (_a, ref) {
48
48
  _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
49
49
  _b[jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
50
50
  _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
51
- _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu && !context.isMinimized,
51
+ _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu && context.isOpened,
52
52
  _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
53
53
  _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
54
54
  _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
@@ -57,10 +57,10 @@ var ItemContent = forwardRef(function (_a, ref) {
57
57
  React.createElement("div", { className: cx((_c = {},
58
58
  _c[jsStyles.textAndMarkerWrapper()] = true,
59
59
  _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
60
- _c[jsStyles.textAndMarkerWrapperMinimized()] = context.isMinimized && !_isSubMenu,
60
+ _c[jsStyles.textAndMarkerWrapperMinimized()] = !context.isOpened && !_isSubMenu,
61
61
  _c)) },
62
62
  React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
63
- marker !== undefined && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu })))));
63
+ marker !== undefined && (context.isOpened || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu })))));
64
64
  });
65
65
  ItemContent.displayName = 'ItemContent';
66
66
  var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
package/src/internal/RightBorder.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  interface RightBorderProps {
3
- setIsMinimized: (value: boolean) => void;
3
+ setIsOpened: (newValue: boolean | undefined, shouldSetState: boolean) => void;
4
+ manual: boolean;
4
5
  }
5
6
  declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
6
7
  __KONTUR_REACT_UI__: string;
package/src/internal/RightBorder.js CHANGED
@@ -10,7 +10,7 @@ import { ThemeContext } from '@skbkontur/react-ui';
10
10
  */
11
11
  var RightBorder = forwardRef(function (_a, ref) {
12
12
  var _b;
13
- var setIsMinimized = _a.setIsMinimized;
13
+ var setIsOpened = _a.setIsOpened, manual = _a.manual;
14
14
  var theme = getSideMenuTheme(useContext(ThemeContext));
15
15
  var resizeTimer = useRef(null);
16
16
  var _c = useState(false), isAbleToResize = _c[0], setIsAbleToResize = _c[1];
@@ -35,8 +35,9 @@ var RightBorder = forwardRef(function (_a, ref) {
35
35
  if (!isMouseDown) {
36
36
  return;
37
37
  }
38
- if (event.pageX < startX && isAbleToResize) {
39
- setIsMinimized(true);
38
+ if (event.pageX < startX) {
39
+ setIsOpened(false, !manual);
40
+ isMouseDown = false;
40
41
  }
41
42
  return;
42
43
  };
@@ -61,7 +62,7 @@ var RightBorder = forwardRef(function (_a, ref) {
61
62
  }
62
63
  document.removeEventListener('mouseup', checkEnd, true);
63
64
  };
64
- });
65
+ }, []);
65
66
  return (React.createElement("div", { className: cx((_b = {},
66
67
  _b[jsStyles.root(theme)] = true,
67
68
  _b[jsStyles.resizableRoot()] = isAbleToResize,
package/src/internal/SeparatedSubMenu.js CHANGED
@@ -46,7 +46,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
46
46
  React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
47
47
  var _a;
48
48
  (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
49
- }, hideScrollBar: true },
49
+ }, hideScrollBar: context.hideScrollBar },
50
50
  React.createElement("ul", { className: cx((_c = {},
51
51
  _c[jsStylesForSideMenu.list()] = true,
52
52
  _c[jsStyles.contentWrapper(theme)] = true,
package/src/internal/SideMenuLogotype.js CHANGED
@@ -64,15 +64,15 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
64
64
  _b)), ref: ref },
65
65
  !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_c = {},
66
66
  _c[jsStyles.iconHidden(theme)] = true,
67
- _c[jsStyles.icon()] = context.isMinimized,
67
+ _c[jsStyles.icon()] = !context.isOpened && !(context.isMobile || context.isTablet),
68
68
  _c)), src: iconUrl || productIconUrl, alt: productName, onError: handleError })),
69
69
  React.createElement("div", { className: cx((_d = {},
70
70
  _d[jsStyles.logoWrapper(theme)] = true,
71
71
  _d[jsStyles.logoWrapperForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
72
- _d[jsStyles.logoWrapperHidden()] = context.isMinimized,
72
+ _d[jsStyles.logoWrapperHidden()] = !context.isOpened && !(context.isMobile || context.isTablet),
73
73
  _d)) },
74
74
  (context.isTablet || context.isMobile) && React.createElement(Burger, null),
75
- React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isMinimized && context.isNarrowDesktop) }, rest)))));
75
+ React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, !context.isOpened && context.isNarrowDesktop) }, rest)))));
76
76
  });
77
77
  SideMenuLogotype.displayName = 'SideMenuLogotype';
78
78
  var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });
package/src/internal/SubMenu.js CHANGED
@@ -14,7 +14,10 @@ var SubMenu = forwardRef(function (_a, ref) {
14
14
  if (!children || !isOpened || isSubMenu || shouldHideMenu) {
15
15
  return null;
16
16
  }
17
- if (isSeparatedMenu && (context.isShown || context.isBeingTransitioned)) {
17
+ if (isSeparatedMenu &&
18
+ (!(context.isMobile || context.isTablet) ||
19
+ (context.isOpened && (context.isMobile || context.isTablet)) ||
20
+ context.isBeingTransitioned)) {
18
21
  return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption, htmlId: htmlId }, children));
19
22
  }
20
23
  return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref, htmlId: htmlId }, children));