@skbkontur/side-menu 0.9.3 → 0.9.5

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 (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +1 -1
  3. package/src/SideMenu/SideMenu.js +16 -16
  4. package/src/SideMenuDropdown/SideMenuDropdown.js +17 -27
  5. package/src/internal/SideMenuLogotype.js +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.9.5](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.4...@skbkontur/side-menu@0.9.5) (2023-05-26)
7
+
8
+ **Note:** Version bump only for package @skbkontur/side-menu
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.9.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.3...@skbkontur/side-menu@0.9.4) (2023-05-24)
15
+
16
+ **Note:** Version bump only for package @skbkontur/side-menu
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.9.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.2...@skbkontur/side-menu@0.9.3) (2023-05-24)
7
23
 
8
24
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenu/SideMenu.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __assign, __rest } from "tslib";
2
- import React, { forwardRef, useEffect, useState } from 'react';
2
+ import React, { forwardRef, useEffect, useRef, useState } from 'react';
3
3
  import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
4
4
  import { isIE11 } from '@skbkontur/react-ui/lib/client';
5
5
  import { jsStyles, sideMenuMinimizedWidth, sideMenuStandardWidth } from './SideMenu.styles';
@@ -29,8 +29,8 @@ export var burgerTransitionDuration = (transitionDuration * 2) / 3;
29
29
  var SideMenuInner = forwardRef(function (_a, ref) {
30
30
  var _b, _c, _d, _e;
31
31
  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, _j = _a.desktopMediaQuery, desktopMediaQuery = _j === void 0 ? '(min-width: 1200px)' : _j, _k = _a.narrowDesktopMediaQuery, narrowDesktopMediaQuery = _k === void 0 ? '(min-width: 992px)' : _k, _l = _a.tabletMediaQuery, tabletMediaQuery = _l === void 0 ? '(min-width: 768px)' : _l, _m = _a.mobileMediaQuery, mobileMediaQuery = _m === void 0 ? '(min-width: 0px)' : _m, _o = _a.separatedMenuWithOverlay, separatedMenuWithOverlay = _o === void 0 ? false : _o, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "separatedMenuWithOverlay"]);
32
- var transitionTimer = null;
33
- var widgetTimer;
32
+ var transitionTimer = useRef(null);
33
+ var widgetTimer = useRef(null);
34
34
  var customMediaQueries = {
35
35
  isMobileQuery: mobileMediaQuery,
36
36
  isTabletQuery: tabletMediaQuery,
@@ -59,11 +59,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
59
59
  var _0 = useState(0), mousePositionX = _0[0], setMousePositionX = _0[1];
60
60
  useEffect(function () {
61
61
  return function () {
62
- if (transitionTimer) {
63
- clearTimeout(transitionTimer);
62
+ if (transitionTimer.current) {
63
+ clearTimeout(transitionTimer.current);
64
64
  }
65
- if (widgetTimer) {
66
- clearTimeout(widgetTimer);
65
+ if (widgetTimer.current) {
66
+ clearTimeout(widgetTimer.current);
67
67
  }
68
68
  };
69
69
  }, []);
@@ -92,10 +92,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
92
92
  if ((!isBeingTransitioned || minimizeWithoutOverlay) && newIsMinimized !== isMinimized) {
93
93
  setIsBeingTransitioned(true);
94
94
  setIsMinimized(newIsMinimized);
95
- if (transitionTimer) {
96
- clearTimeout(transitionTimer);
95
+ if (transitionTimer.current) {
96
+ clearTimeout(transitionTimer.current);
97
97
  }
98
- transitionTimer = setTimeout(function () {
98
+ transitionTimer.current = setTimeout(function () {
99
99
  setIsBeingTransitioned(false);
100
100
  }, transitionDuration);
101
101
  }
@@ -106,13 +106,13 @@ var SideMenuInner = forwardRef(function (_a, ref) {
106
106
  }
107
107
  isMouseOutside && showMinimizedRoot(false);
108
108
  setIsMouseOutside(false);
109
- widgetTimer = setTimeout(function () {
109
+ widgetTimer.current = setTimeout(function () {
110
110
  setShowWidget(true);
111
111
  }, 500);
112
112
  };
113
113
  var handleMouseLeave = function () {
114
- if (widgetTimer) {
115
- clearTimeout(widgetTimer);
114
+ if (widgetTimer.current) {
115
+ clearTimeout(widgetTimer.current);
116
116
  }
117
117
  setShowWidget(false);
118
118
  if (isNarrowDesktop) {
@@ -143,10 +143,10 @@ var SideMenuInner = forwardRef(function (_a, ref) {
143
143
  if (!isBeingTransitioned && newIsShown !== isShown) {
144
144
  setIsBeingTransitioned(true);
145
145
  setIsShown(newIsShown);
146
- if (transitionTimer) {
147
- clearTimeout(transitionTimer);
146
+ if (transitionTimer.current) {
147
+ clearTimeout(transitionTimer.current);
148
148
  }
149
- transitionTimer = setTimeout(function () {
149
+ transitionTimer.current = setTimeout(function () {
150
150
  setIsBeingTransitioned(false);
151
151
  }, burgerTransitionDuration);
152
152
  }
package/src/SideMenuDropdown/SideMenuDropdown.js CHANGED
@@ -1,43 +1,33 @@
1
1
  import { __assign, __rest } from "tslib";
2
2
  import React, { forwardRef, useContext } from 'react';
3
- import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
4
- import { DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
3
+ import { DropdownMenu } from '@skbkontur/react-ui';
5
4
  import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
6
5
  import { jsStyles } from './SideMenuDropdown.styles';
7
6
  import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
8
7
  import { SideMenuContext } from '../SideMenuContext';
9
8
  var SideMenuDropdownInner = forwardRef(function (_a, ref) {
10
- var _b;
11
- var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _c = _a.caption, caption = _c === void 0 ? 'СКБ Контур' : _c, subCaption = _a.subCaption, className = _a.className, _d = _a.disableAnimations, disableAnimations = _d === void 0 ? false : _d, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "subCaption", "className", "disableAnimations", "menuWidth"]);
9
+ var _b, _c;
10
+ var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "subCaption", "className", "disableAnimations", "menuWidth"]);
12
11
  var context = useContext(SideMenuContext);
13
12
  var label = (React.createElement("div", { className: cx((_b = {},
14
13
  _b[jsStyles.label()] = true,
15
14
  _b[jsStyles.minimizedLabel()] = context.isMinimized,
16
15
  _b)) },
17
16
  React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, _avatar: _avatar, id: id, _isDropdown: true })));
18
- return (React.createElement(ThemeContext.Consumer, null, function (theme) {
19
- var _a;
20
- return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
21
- menuItemHoverBg: '#f6f6f6',
22
- menuItemHoverColor: '#222',
23
- popupBorderRadius: '8px',
24
- menuItemPaddingX: '32px',
25
- }, theme) },
26
- React.createElement("div", { className: cx((_a = {}, _a[jsStyles.wrapper()] = true, _a), className), ref: ref },
27
- React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
28
- // @ts-expect-error: accessing private property
29
- if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
30
- return React.cloneElement(child, {
31
- onClick: function () {
32
- var _a, _b, _c;
33
- (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
34
- (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
35
- },
36
- });
37
- }
38
- return child;
39
- })))));
40
- }));
17
+ return (React.createElement("div", { className: cx((_c = {}, _c[jsStyles.wrapper()] = true, _c), className), ref: ref },
18
+ React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
19
+ // @ts-expect-error: accessing private property
20
+ if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
21
+ return React.cloneElement(child, {
22
+ onClick: function () {
23
+ var _a, _b, _c;
24
+ (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
25
+ (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
26
+ },
27
+ });
28
+ }
29
+ return child;
30
+ }))));
41
31
  });
42
32
  SideMenuDropdownInner.displayName = 'SideMenuDropdown';
43
33
  /**
package/src/internal/SideMenuLogotype.js CHANGED
@@ -24,7 +24,7 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
24
24
  //TODO 186 заменить на headerWrapper width после возврата к кастомизации
25
25
  setSize(24);
26
26
  }
27
- });
27
+ }, []);
28
28
  var changeCamelCaseToKebabCase = function (str) {
29
29
  return str
30
30
  .split('')