@skbkontur/side-menu 1.4.1 → 1.5.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 (9) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/internal/themes/SideMenuTheme.js +1 -1
  3. package/package.json +1 -1
  4. package/src/SideMenu/SideMenu.js +10 -23
  5. package/src/SideMenuContext.d.ts +0 -1
  6. package/src/SideMenuHeader/SideMenuHeader.js +1 -1
  7. package/src/internal/SideMenuLogotype.js +21 -24
  8. package/src/internal/SideMenuLogotype.styles.d.ts +1 -0
  9. package/src/internal/SideMenuLogotype.styles.js +10 -7
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.5.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.4.2...@skbkontur/side-menu@1.5.0) (2023-09-05)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenu:** always show widget ([f26dabb](https://git.skbkontur.ru/ui/ui-parking/commits/f26dabb14620eb12cb42ffa29b04e98708f4a200))
12
+
13
+
14
+
15
+
16
+
17
+ ## [1.4.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.4.1...@skbkontur/side-menu@1.4.2) (2023-08-25)
18
+
19
+ **Note:** Version bump only for package @skbkontur/side-menu
20
+
21
+
22
+
23
+
24
+
6
25
  ## [1.4.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.4.0...@skbkontur/side-menu@1.4.1) (2023-08-25)
7
26
 
8
27
  **Note:** Version bump only for package @skbkontur/side-menu
package/internal/themes/SideMenuTheme.js CHANGED
@@ -223,7 +223,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
223
223
  SideMenuTheme.sideMenuLogotypePaddingTop = '2px';
224
224
  SideMenuTheme.sideMenuLogotypePaddingBottom = '6px';
225
225
  SideMenuTheme.sideMenuLogotypePaddingYForTouchScreens = '8px';
226
- SideMenuTheme.sideMenuLogotypeHiddenIconPaddingLeft = '4px';
226
+ SideMenuTheme.sideMenuLogotypeHiddenIconPaddingLeft = '0';
227
227
  //#endregion
228
228
  //#region Footer
229
229
  SideMenuTheme.sideMenuFooterPaddingBottom = '24px';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "1.4.1",
3
+ "version": "1.5.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenu/SideMenu.js CHANGED
@@ -32,7 +32,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
32
32
  var _b, _c, _d, _e;
33
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
- var widgetTimer = useRef(null);
36
35
  var theme = getSideMenuTheme(useContext(ThemeContext));
37
36
  var customMediaQueries = {
38
37
  isMobileQuery: mobileMediaQuery || theme.sideMenuMobileMediaQuery,
@@ -50,23 +49,19 @@ var SideMenuInner = forwardRef(function (_a, ref) {
50
49
  var isTouchScreen = isTouchDevice() || isMobile || isTablet;
51
50
  var _k = useState(isNarrowDesktop), isMinimized = _k[0], setIsMinimized = _k[1];
52
51
  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];
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];
62
60
  useEffect(function () {
63
61
  return function () {
64
62
  if (transitionTimer.current) {
65
63
  clearTimeout(transitionTimer.current);
66
64
  }
67
- if (widgetTimer.current) {
68
- clearTimeout(widgetTimer.current);
69
- }
70
65
  };
71
66
  }, []);
72
67
  useEffect(function () {
@@ -108,15 +103,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
108
103
  }
109
104
  isMouseOutside && showMinimizedRoot(false);
110
105
  setIsMouseOutside(false);
111
- widgetTimer.current = setTimeout(function () {
112
- setShowWidget(true);
113
- }, 500);
114
106
  };
115
107
  var handleMouseLeave = function () {
116
- if (widgetTimer.current) {
117
- clearTimeout(widgetTimer.current);
118
- }
119
- setShowWidget(false);
120
108
  if (isNarrowDesktop) {
121
109
  setIsMinimized(true);
122
110
  }
@@ -155,11 +143,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
155
143
  }
156
144
  };
157
145
  var isSideMenuOverContent = (isNarrowDesktop && !isMinimized) || (isMobile && isShown) || (isTablet && isShown && !isSeparatedMenuShown);
158
- var _w = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
146
+ var _v = useAnimateOnMount(!!isTabletOrMobile && !!isShown, burgerTransitionDuration, {
159
147
  opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
160
148
  }, {
161
149
  opacity: 0,
162
- }), shouldShowBackdrop = _w[0], backdropStyle = _w[1];
150
+ }), shouldShowBackdrop = _v[0], backdropStyle = _v[1];
163
151
  var isSideMenuOverflowing = (isTabletOrMobile && isShown) || (isNarrowDesktop && !isMinimized);
164
152
  return (React.createElement(SideMenuContext.Provider, { value: {
165
153
  isMinimized: isMinimized,
@@ -167,7 +155,6 @@ var SideMenuInner = forwardRef(function (_a, ref) {
167
155
  isBeingTransitioned: isBeingTransitioned,
168
156
  isSeparatedMenu: isSeparatedMenu,
169
157
  size: size,
170
- showWidget: showWidget,
171
158
  activeMenuItem: activeMenuItem,
172
159
  switchActiveMenuItem: switchActiveMenuItem,
173
160
  isDesktop: isDesktopQuery,
package/src/SideMenuContext.d.ts CHANGED
@@ -10,7 +10,6 @@ export interface SideMenuContextType {
10
10
  activeMenuItem?: string | null;
11
11
  switchActiveMenuItem?: (id: string) => void;
12
12
  hasSubIcons?: boolean;
13
- showWidget?: boolean;
14
13
  openedParents?: string[];
15
14
  isDesktop?: boolean;
16
15
  isNarrowDesktop?: boolean;
package/src/SideMenuHeader/SideMenuHeader.js CHANGED
@@ -10,7 +10,7 @@ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
10
10
  import { getDOMRect } from '@skbkontur/react-ui/lib/dom/getDOMRect';
11
11
  var SideMenuHeaderInner = forwardRef(function (_a, ref) {
12
12
  var _b;
13
- var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, withWidget = _a.withWidget, dataTid = _a["data-tid"], rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
13
+ var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, _c = _a.withWidget, withWidget = _c === void 0 ? true : _c, dataTid = _a["data-tid"], rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
14
14
  var context = useContext(SideMenuContext);
15
15
  var theme = getSideMenuTheme(useContext(ThemeContext));
16
16
  var headerWrapperRef = useRef(null);
package/src/internal/SideMenuLogotype.js CHANGED
@@ -31,51 +31,48 @@ var getStaticIconPath = function (productName) {
31
31
  * @visibleName SideMenu.Logotype
32
32
  */
33
33
  var SideMenuLogotype = forwardRef(function (_a, ref) {
34
- var _b, _c;
34
+ var _b, _c, _d;
35
35
  var productLogo = _a.productLogo, withWidget = _a.withWidget, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = __rest(_a, ["productLogo", "withWidget", "konturLogo", "iconUrl"]);
36
36
  var context = useContext(SideMenuContext);
37
37
  var theme = getSideMenuTheme(useContext(ThemeContext));
38
38
  var productName = getProductName(productLogo);
39
39
  var refLogotype = useRef(null);
40
- var _d = useState(28), size = _d[0], setSize = _d[1];
41
- var _e = useState(getStaticIconPath(productName)), productIconUrl = _e[0], setProductIconUrl = _e[1];
40
+ var _e = useState(28), size = _e[0], setSize = _e[1];
41
+ var _f = useState(getStaticIconPath(productName)), productIconUrl = _f[0], setProductIconUrl = _f[1];
42
42
  useEffect(function () {
43
43
  var _a, _b;
44
44
  var logotypeWidth = (_b = (_a = refLogotype.current) === null || _a === void 0 ? void 0 : _a.logotypeRef) === null || _b === void 0 ? void 0 : _b.clientWidth;
45
45
  var maxWidth = parseInt(theme.sideMenuWidth) -
46
46
  2 * parseInt(theme.sideMenuMarginX) -
47
47
  parseInt(theme.sideMenuLogotypePaddingLeft);
48
- if (logotypeWidth && logotypeWidth > maxWidth) {
48
+ if (logotypeWidth && logotypeWidth > maxWidth && !rest.size) {
49
49
  setSize(24);
50
50
  }
51
51
  }, []);
52
- var getWidget = function (withWidget, isTouchScreen, isMinimizedInNarrowDesktop, showWidget) {
53
- if (withWidget !== undefined) {
54
- return withWidget;
55
- }
56
- if (isTouchScreen) {
57
- return true;
58
- }
59
- else if (isMinimizedInNarrowDesktop) {
52
+ var getWidget = function (withWidget, isMinimizedInNarrowDesktop) {
53
+ if (isMinimizedInNarrowDesktop) {
60
54
  return false;
61
55
  }
62
- return showWidget;
56
+ return withWidget;
63
57
  };
64
58
  var handleError = function () {
65
59
  setProductIconUrl(getStaticIconPath('kontur'));
66
60
  };
67
- return (React.createElement("div", { className: jsStyles.root(), ref: ref },
68
- !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_b = {},
69
- _b[jsStyles.iconHidden(theme)] = true,
70
- _b[jsStyles.icon()] = context.isMinimized,
71
- _b)), src: iconUrl || productIconUrl, alt: productName, onError: handleError })),
72
- React.createElement("div", { className: cx((_c = {},
73
- _c[jsStyles.logoWrapper(theme)] = true,
74
- _c[jsStyles.logoWrapperForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
75
- _c[jsStyles.logoWrapperHidden()] = context.isMinimized,
76
- _c)) },
61
+ return (React.createElement("div", { className: cx((_b = {},
62
+ _b[jsStyles.root()] = true,
63
+ _b[jsStyles.rootForTabletsOrMobiles()] = context.isMobile || context.isTablet,
64
+ _b)), ref: ref },
65
+ !context.isMobile && !context.isTablet && (React.createElement("img", { className: cx((_c = {},
66
+ _c[jsStyles.iconHidden(theme)] = true,
67
+ _c[jsStyles.icon()] = context.isMinimized,
68
+ _c)), src: iconUrl || productIconUrl, alt: productName, onError: handleError })),
69
+ React.createElement("div", { className: cx((_d = {},
70
+ _d[jsStyles.logoWrapper(theme)] = true,
71
+ _d[jsStyles.logoWrapperForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
72
+ _d[jsStyles.logoWrapperHidden()] = context.isMinimized,
73
+ _d)) },
77
74
  (context.isTablet || context.isMobile) && React.createElement(Burger, null),
78
- React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isTouchScreen, context.isMinimized && context.isNarrowDesktop, context.showWidget) }, rest)))));
75
+ React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: getWidget(withWidget, context.isMinimized && context.isNarrowDesktop) }, rest)))));
79
76
  });
80
77
  SideMenuLogotype.displayName = 'SideMenuLogotype';
81
78
  var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });
package/src/internal/SideMenuLogotype.styles.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare const sideMenuLogotypeIconSize = "32px";
3
3
  export declare const sideMenuLogotypeGapBetweenIconAndLogo = "50px";
4
4
  export declare const jsStyles: {
5
5
  root(): string;
6
+ rootForTabletsOrMobiles(): string;
6
7
  icon(): string;
7
8
  iconHidden(t: SideMenuTheme): string;
8
9
  logoWrapper(t: SideMenuTheme): string;
package/src/internal/SideMenuLogotype.styles.js CHANGED
@@ -6,23 +6,26 @@ export var sideMenuLogotypeIconSize = '32px';
6
6
  export var sideMenuLogotypeGapBetweenIconAndLogo = '50px';
7
7
  var styles = {
8
8
  root: function () {
9
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n "], ["\n display: flex;\n "])));
9
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n padding-left: 4px;\n "], ["\n display: flex;\n padding-left: 4px;\n "])));
10
+ },
11
+ rootForTabletsOrMobiles: function () {
12
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: 0;\n "], ["\n padding-left: 0;\n "])));
10
13
  },
11
14
  icon: function () {
12
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 1;\n width: auto;\n "], ["\n opacity: 1;\n width: auto;\n "])));
15
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: 1;\n width: auto;\n "], ["\n opacity: 1;\n width: auto;\n "])));
13
16
  },
14
17
  iconHidden: function (t) {
15
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n width: 0;\n padding-left: ", ";\n opacity: 0;\n transition: all ", "ms ease-out;\n "], ["\n display: block;\n width: 0;\n padding-left: ", ";\n opacity: 0;\n transition: all ", "ms ease-out;\n "])), t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
18
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n width: 0;\n padding-left: ", ";\n opacity: 0;\n transition: all ", "ms ease-out;\n "], ["\n display: block;\n width: 0;\n padding-left: ", ";\n opacity: 0;\n transition: all ", "ms ease-out;\n "])), t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
16
19
  },
17
20
  logoWrapper: function (t) {
18
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n display: flex;\n opacity: 1;\n transition: all ", "ms ease-out;\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n display: flex;\n opacity: 1;\n transition: all ", "ms ease-out;\n "])), t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
21
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n display: flex;\n opacity: 1;\n transition: all ", "ms ease-out;\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n display: flex;\n opacity: 1;\n transition: all ", "ms ease-out;\n "])), t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
19
22
  },
20
23
  logoWrapperForTabletsOrMobiles: function (t) {
21
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
24
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
22
25
  },
23
26
  logoWrapperHidden: function () {
24
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n opacity: 0;\n "], ["\n opacity: 0;\n "])));
27
+ return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n opacity: 0;\n "], ["\n opacity: 0;\n "])));
25
28
  },
26
29
  };
27
30
  export var jsStyles = memoizeStyle(styles);
28
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
31
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;