@skbkontur/side-menu 1.7.0 → 1.8.1

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 (19) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +29 -0
  3. package/package.json +2 -2
  4. package/src/SideMenu/SideMenu.d.ts +14 -0
  5. package/src/SideMenu/SideMenu.js +51 -48
  6. package/src/SideMenuBody/SideMenuBody.js +2 -2
  7. package/src/SideMenuContext.d.ts +3 -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/SideMenuLogotype.js +3 -3
  19. package/src/internal/SubMenu.js +4 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.8.0...@skbkontur/side-menu@1.8.1) (2023-10-09)
7
+
8
+ **Note:** Version bump only for package @skbkontur/side-menu
9
+
10
+
11
+
12
+
13
+
14
+ # [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)
15
+
16
+
17
+ ### Features
18
+
19
+ * **SideMenu:** add isOpen, onOpen, onClose props ([c7650bf](https://git.skbkontur.ru/ui/ui-parking/commits/c7650bf7fff7b93846d4b01dc30ef97165c16468))
20
+
21
+
22
+
23
+
24
+
6
25
  # [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)
7
26
 
8
27
 
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.7.0",
3
+ "version": "1.8.1",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
22
22
  "@skbkontur/react-ui": "4.13.0"
23
23
  },
24
24
  "dependencies": {
25
- "@skbkontur/icons": "^1.5.0",
25
+ "@skbkontur/icons": "^1.5.1",
26
26
  "@skbkontur/react-ui-addons": "^4.9.1",
27
27
  "tslib": "^1"
28
28
  }
package/src/SideMenu/SideMenu.d.ts CHANGED
@@ -24,6 +24,20 @@ export interface SideMenuProps extends CommonProps {
24
24
  tabletMediaQuery?: string;
25
25
  mobileMediaQuery?: string;
26
26
  hideScrollBar?: boolean;
27
+ /**
28
+ * Открывает и закрывает меню
29
+ *
30
+ * Примечание: при заданном пропе `isOpen` автоматическое открытие/зарытие меню не работает
31
+ */
32
+ isOpen?: boolean;
33
+ /**
34
+ * Действие при открытии меню
35
+ */
36
+ onOpen?: () => void;
37
+ /**
38
+ * Действие при закрытии меню
39
+ */
40
+ onClose?: () => void;
27
41
  }
28
42
  interface SubComponents {
29
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, _j = _a.hideScrollBar, hideScrollBar = _j === void 0 ? true : _j, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar"]);
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 = {
@@ -47,16 +47,16 @@ var SideMenuInner = forwardRef(function (_a, ref) {
47
47
  var isMobile = isMobileQuery && !isTabletQuery;
48
48
  var isTabletOrMobile = isTablet || isMobile;
49
49
  var isTouchScreen = isTouchDevice() || isMobile || isTablet;
50
- var _l = useState(isNarrowDesktop), isMinimized = _l[0], setIsMinimized = _l[1];
50
+ var manual = isOpen !== undefined;
51
+ var _l = useState(isDesktopQuery || isNarrowDesktop), isOpened = _l[0], setIsOpened = _l[1];
51
52
  var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
52
53
  var _o = useState(value), activeMenuItem = _o[0], setActiveMenuItem = _o[1];
53
- var _p = useState(isDesktopQuery || isNarrowDesktop), isShown = _p[0], setIsShown = _p[1];
54
- var _q = useState(false), isSeparatedMenuShown = _q[0], setIsSeparatedMenuShown = _q[1];
55
- var _r = useState(true), isMouseOutside = _r[0], setIsMouseOutside = _r[1];
56
- var _s = useState('top'), scrollState = _s[0], setScrollState = _s[1];
57
- var _t = useState(false), hasScrollBar = _t[0], setHasScrollBar = _t[1];
58
- var _u = useState(0), mousePositionX = _u[0], setMousePositionX = _u[1];
59
- var _v = useState(0), headerHeight = _v[0], setHeaderHeight = _v[1];
54
+ var _p = useState(false), isSeparatedMenuShown = _p[0], setIsSeparatedMenuShown = _p[1];
55
+ var _q = useState(true), isMouseOutside = _q[0], setIsMouseOutside = _q[1];
56
+ var _r = useState('top'), scrollState = _r[0], setScrollState = _r[1];
57
+ var _s = useState(false), hasScrollBar = _s[0], setHasScrollBar = _s[1];
58
+ var _t = useState(0), mousePositionX = _t[0], setMousePositionX = _t[1];
59
+ var _u = useState(0), headerHeight = _u[0], setHeaderHeight = _u[1];
60
60
  useEffect(function () {
61
61
  return function () {
62
62
  if (transitionTimer.current) {
@@ -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);
82
81
  }
83
- }, [isTablet, isMobile]);
82
+ if (isNarrowDesktop || isTablet || isMobile) {
83
+ setIsOpened(false);
84
+ }
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,27 +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
- if (isNarrowDesktop || (isDesktopQuery && isMinimized)) {
108
+ if (isNarrowDesktop || (isDesktopQuery && !isOpened)) {
105
109
  isMouseOutside && showMinimizedRoot(false);
106
110
  setIsMouseOutside(false);
107
111
  }
108
112
  };
109
113
  var handleMouseLeave = function () {
110
114
  if (isNarrowDesktop) {
111
- setIsMinimized(true);
115
+ handleIsOpened(false, !manual);
112
116
  }
113
- if (isNarrowDesktop || (isDesktopQuery && isMinimized)) {
117
+ if ((isNarrowDesktop || (isDesktopQuery && !isOpened)) && !manual) {
114
118
  setIsMouseOutside(true);
115
119
  }
116
120
  };
117
121
  var showMinimizedRootForNarrowDesktop = function (e) {
118
122
  if (!isSeparatedMenu || !isNarrowDesktop)
119
123
  return;
120
- if (e.clientX < parseInt(theme.sideMenuMinimizedWidth) &&
121
- mousePositionX > parseInt(theme.sideMenuMinimizedWidth)) {
124
+ if (e.clientX <= parseInt(theme.sideMenuMinimizedWidth) &&
125
+ mousePositionX >= parseInt(theme.sideMenuMinimizedWidth)) {
122
126
  showMinimizedRoot(false);
123
127
  }
124
128
  if (e.clientX > parseInt(theme.sideMenuWidth)) {
@@ -132,12 +136,12 @@ var SideMenuInner = forwardRef(function (_a, ref) {
132
136
  setActiveMenuItem(id);
133
137
  }
134
138
  };
135
- var handleIsShown = function (newIsShown) {
139
+ var showMenu = function (newIsShown) {
136
140
  if (!isTabletOrMobile)
137
141
  return;
138
- if (!isBeingTransitioned && newIsShown !== isShown) {
142
+ if (!isBeingTransitioned && newIsShown !== isOpened) {
139
143
  setIsBeingTransitioned(true);
140
- setIsShown(newIsShown);
144
+ handleIsOpened(newIsShown, !manual);
141
145
  if (transitionTimer.current) {
142
146
  clearTimeout(transitionTimer.current);
143
147
  }
@@ -146,15 +150,16 @@ var SideMenuInner = forwardRef(function (_a, ref) {
146
150
  }, burgerTransitionDuration);
147
151
  }
148
152
  };
149
- var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
150
- var _w = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
153
+ var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown)) && isOpened;
154
+ var _v = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
151
155
  opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
152
156
  }, {
153
157
  opacity: 0,
154
- }), shouldShowBackdrop = _w[0], backdropStyle = _w[1];
155
- var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
158
+ }), shouldShowBackdrop = _v[0], backdropStyle = _v[1];
159
+ var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop) && isOpened;
156
160
  return (React.createElement(SideMenuContext.Provider, { value: {
157
- isMinimized: isMinimized,
161
+ isOpened: isOpened,
162
+ toggleIsOpened: function () { return showMenu(!isOpened); },
158
163
  setIsMinimized: showMinimizedRoot,
159
164
  isBeingTransitioned: isBeingTransitioned,
160
165
  isSeparatedMenu: isSeparatedMenu,
@@ -166,8 +171,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
166
171
  isTablet: isTablet,
167
172
  isMobile: isMobile,
168
173
  isTouchScreen: isTouchScreen,
169
- isShown: isShown,
170
- toggleIsShown: function () { return handleIsShown(!isShown); },
171
174
  isSeparatedMenuShown: isSeparatedMenuShown,
172
175
  setIsSeparatedMenuShown: setIsSeparatedMenuShown,
173
176
  setIsMouseOutside: setIsMouseOutside,
@@ -182,14 +185,14 @@ var SideMenuInner = forwardRef(function (_a, ref) {
182
185
  React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},
183
186
  _b[jsStylesForSideMenu.root()] = true,
184
187
  _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
185
- _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
188
+ _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isOpened && isTabletOrMobile,
186
189
  _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
187
190
  _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isNarrowDesktop,
188
191
  _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery,
189
192
  _b)) },
190
193
  React.createElement(React.Fragment, null,
191
194
  shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
192
- React.createElement(RenderLayer, { onClickOutside: function () { return handleIsShown(false); } },
195
+ React.createElement(RenderLayer, { onClickOutside: function () { return showMenu(false); } },
193
196
  React.createElement("aside", __assign({ className: cx((_c = {},
194
197
  _c[jsStylesForSideMenu.wrapper()] = true,
195
198
  _c[jsStylesForSideMenu.wrapperIE()] = isIE11,
@@ -197,18 +200,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
197
200
  _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktop }),
198
201
  React.createElement("div", { className: cx((_d = {},
199
202
  _d[jsStylesForSideMenu.container(theme)] = true,
200
- _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
201
- _d[jsStylesForSideMenu.minimizedContainer(theme)] = isMinimized,
203
+ _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isOpened && isTabletOrMobile && !isBeingTransitioned,
204
+ _d[jsStylesForSideMenu.minimizedContainer(theme)] = !isOpened && !isTabletOrMobile,
202
205
  _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenuShown,
203
206
  _d[jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
204
- _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
207
+ _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isOpened || isBeingTransitioned),
205
208
  _d)) },
206
209
  React.createElement("div", { className: cx((_e = {},
207
210
  _e[jsStylesForSideMenu.contentWrapper(theme)] = true,
208
211
  _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
209
- _e[jsStylesForSideMenu.minimizedContentWrapper()] = isMinimized,
212
+ _e[jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
210
213
  _e)) }, children)),
211
- !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
214
+ !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsOpened: handleIsOpened, manual: manual }))))))));
212
215
  });
213
216
  SideMenuInner.displayName = 'SideMenu';
214
217
  var STATIC_PROPS = {
package/src/SideMenuBody/SideMenuBody.js CHANGED
@@ -32,9 +32,9 @@ 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;
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;
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/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));