@skbkontur/side-menu 1.6.0 → 1.7.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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +1 -1
  3. package/src/SideMenu/SideMenu.d.ts +1 -0
  4. package/src/SideMenu/SideMenu.js +23 -18
  5. package/src/SideMenuBody/SideMenuBody.js +1 -1
  6. package/src/SideMenuContext.d.ts +1 -0
  7. package/src/internal/SeparatedSubMenu.js +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.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
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenu:** add hideScrollBar prop ([729bea4](https://git.skbkontur.ru/ui/ui-parking/commits/729bea40a9650e4aa4abcb0f0c6b913cd615dd50))
12
+
13
+
14
+
15
+
16
+
6
17
  # [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
18
 
8
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "1.6.0",
3
+ "version": "1.7.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,7 @@ export interface SideMenuProps extends CommonProps {
23
23
  narrowDesktopMediaQuery?: string;
24
24
  tabletMediaQuery?: string;
25
25
  mobileMediaQuery?: string;
26
+ hideScrollBar?: boolean;
26
27
  }
27
28
  interface SubComponents {
28
29
  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, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar"]);
34
34
  var transitionTimer = useRef(null);
35
35
  var theme = getSideMenuTheme(useContext(ThemeContext));
36
36
  var customMediaQueries = {
@@ -39,24 +39,24 @@ 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];
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];
50
+ var _l = useState(isNarrowDesktop), isMinimized = _l[0], setIsMinimized = _l[1];
51
+ var _m = useState(false), isBeingTransitioned = _m[0], setIsBeingTransitioned = _m[1];
52
+ 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];
60
60
  useEffect(function () {
61
61
  return function () {
62
62
  if (transitionTimer.current) {
@@ -101,14 +101,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
101
101
  if (isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop) {
102
102
  return;
103
103
  }
104
- isMouseOutside && showMinimizedRoot(false);
105
- setIsMouseOutside(false);
104
+ if (isNarrowDesktop || (isDesktopQuery && isMinimized)) {
105
+ isMouseOutside && showMinimizedRoot(false);
106
+ setIsMouseOutside(false);
107
+ }
106
108
  };
107
109
  var handleMouseLeave = function () {
108
110
  if (isNarrowDesktop) {
109
111
  setIsMinimized(true);
110
112
  }
111
- setIsMouseOutside(true);
113
+ if (isNarrowDesktop || (isDesktopQuery && isMinimized)) {
114
+ setIsMouseOutside(true);
115
+ }
112
116
  };
113
117
  var showMinimizedRootForNarrowDesktop = function (e) {
114
118
  if (!isSeparatedMenu || !isNarrowDesktop)
@@ -143,11 +147,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
143
147
  }
144
148
  };
145
149
  var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
146
- var _v = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
150
+ var _w = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
147
151
  opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
148
152
  }, {
149
153
  opacity: 0,
150
- }), shouldShowBackdrop = _v[0], backdropStyle = _v[1];
154
+ }), shouldShowBackdrop = _w[0], backdropStyle = _w[1];
151
155
  var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
152
156
  return (React.createElement(SideMenuContext.Provider, { value: {
153
157
  isMinimized: isMinimized,
@@ -173,6 +177,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
173
177
  setHasScrollBar: setHasScrollBar,
174
178
  headerHeight: headerHeight,
175
179
  setHeaderHeight: setHeaderHeight,
180
+ hideScrollBar: hideScrollBar,
176
181
  } },
177
182
  React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},
178
183
  _b[jsStylesForSideMenu.root()] = true,
package/src/SideMenuBody/SideMenuBody.js CHANGED
@@ -39,7 +39,7 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
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
@@ -28,5 +28,6 @@ export interface SideMenuContextType {
28
28
  setHasScrollBar?: (hasScrollBar: boolean) => void;
29
29
  headerHeight?: number;
30
30
  setHeaderHeight?: (mobileHeaderHeight: number) => void;
31
+ hideScrollBar?: boolean;
31
32
  }
32
33
  export declare const SideMenuContext: import("react").Context<SideMenuContextType>;
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,