@skbkontur/side-menu 3.2.7 → 3.3.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 (79) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +25 -6
  3. package/SideMenuDataTids.d.ts +3 -0
  4. package/SideMenuDataTids.js +7 -1
  5. package/hooks/useAnimateOnMount.js +9 -6
  6. package/hooks/useMemoIcon.js +18 -12
  7. package/index.js +17 -14
  8. package/internal/themes/SideMenuTheme.d.ts +5 -0
  9. package/internal/themes/SideMenuTheme.js +22 -10
  10. package/lib/theming/ThemeHelpers.js +20 -14
  11. package/lib/theming/ThemeTypes.js +2 -1
  12. package/lib/utils/memo.js +5 -1
  13. package/lib/utils/scripts.js +11 -5
  14. package/package.json +8 -4
  15. package/src/Navigation.js +21 -18
  16. package/src/SideMenu/SideMenu.d.ts +2 -0
  17. package/src/SideMenu/SideMenu.js +147 -113
  18. package/src/SideMenu/SideMenu.styles.js +31 -28
  19. package/src/SideMenuAvatar/SideMenuAvatar.js +14 -11
  20. package/src/SideMenuBody/SideMenuBody.js +21 -18
  21. package/src/SideMenuBody/SideMenuBody.styles.js +9 -6
  22. package/src/SideMenuContext.d.ts +3 -0
  23. package/src/SideMenuContext.js +5 -2
  24. package/src/SideMenuDivider/SideMenuDivider.js +14 -11
  25. package/src/SideMenuDivider/SideMenuDivider.styles.js +8 -5
  26. package/src/SideMenuDropdown/SideMenuDropdown.js +34 -21
  27. package/src/SideMenuDropdown/SideMenuDropdown.styles.js +12 -9
  28. package/src/SideMenuFooter/SideMenuFooter.js +24 -21
  29. package/src/SideMenuFooter/SideMenuFooter.styles.js +10 -7
  30. package/src/SideMenuHeader/SideMenuHeader.js +29 -26
  31. package/src/SideMenuHeader/SideMenuHeader.styles.js +12 -9
  32. package/src/SideMenuItem/SideMenuItem.js +10 -7
  33. package/src/SideMenuLink/SideMenuLink.js +12 -9
  34. package/src/SideMenuLink/SideMenuLink.styles.js +7 -4
  35. package/src/SideMenuNotifications/BellWidget.d.ts +11 -0
  36. package/src/SideMenuNotifications/BellWidget.js +87 -0
  37. package/src/SideMenuNotifications/BellWidgetError.d.ts +9 -0
  38. package/src/SideMenuNotifications/BellWidgetError.js +26 -0
  39. package/src/SideMenuNotifications/BellWidgetView.styles.d.ts +10 -0
  40. package/src/SideMenuNotifications/BellWidgetView.styles.js +31 -0
  41. package/src/SideMenuNotifications/SideMenuNotifications.d.ts +41 -0
  42. package/src/SideMenuNotifications/SideMenuNotifications.js +49 -0
  43. package/src/SideMenuNotifications/SideMenuNotifications.md +75 -0
  44. package/src/SideMenuNotifications/utils/getMarker.d.ts +1 -0
  45. package/src/SideMenuNotifications/utils/getMarker.js +12 -0
  46. package/src/SideMenuNotifications/utils/getNotificationsErrorMessages.d.ts +6 -0
  47. package/src/SideMenuNotifications/utils/getNotificationsErrorMessages.js +19 -0
  48. package/src/SideMenuOrganisations/SideMenuOrganisations.js +10 -7
  49. package/src/SideMenuSubItem/SideMenuSubItem.js +11 -8
  50. package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.js +18 -15
  51. package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.styles.js +9 -6
  52. package/src/SideMenuSubLink/SideMenuSubLink.js +10 -7
  53. package/src/Tree.js +12 -9
  54. package/src/internal/BackButton.js +14 -11
  55. package/src/internal/Backdrop.js +15 -11
  56. package/src/internal/Backdrop.styles.js +8 -5
  57. package/src/internal/Burger.js +17 -12
  58. package/src/internal/Burger.styles.js +9 -6
  59. package/src/internal/ClickableElement.js +47 -44
  60. package/src/internal/ClickableElement.styles.js +15 -12
  61. package/src/internal/InnerSubMenu.js +14 -10
  62. package/src/internal/ItemContent/Caption.js +34 -31
  63. package/src/internal/ItemContent/Caption.styles.js +23 -20
  64. package/src/internal/ItemContent/Icon.js +25 -20
  65. package/src/internal/ItemContent/Icon.styles.js +14 -11
  66. package/src/internal/ItemContent/ItemContent.d.ts +1 -1
  67. package/src/internal/ItemContent/ItemContent.js +36 -33
  68. package/src/internal/ItemContent/ItemContent.styles.js +18 -15
  69. package/src/internal/ItemContent/Marker.js +21 -16
  70. package/src/internal/ItemContent/Marker.styles.js +15 -12
  71. package/src/internal/NestedMenu.js +19 -15
  72. package/src/internal/NestedMenu.styles.js +8 -5
  73. package/src/internal/RightBorder.js +22 -18
  74. package/src/internal/RightBorder.styles.js +9 -6
  75. package/src/internal/SeparatedSubMenu.js +40 -37
  76. package/src/internal/SeparatedSubMenu.styles.js +16 -13
  77. package/src/internal/SideMenuLogotype.js +34 -31
  78. package/src/internal/SideMenuLogotype.styles.js +17 -14
  79. package/src/internal/SubMenu.js +15 -11
@@ -1,13 +1,18 @@
1
- import React, { useContext } from 'react';
2
- import { UiMenuBars3HIcon24Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular';
3
- import { ThemeContext } from '@skbkontur/react-ui';
4
- import { SideMenuContext } from '../SideMenuContext';
5
- import { SideMenuDataTids } from '../../SideMenuDataTids';
6
- import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
7
- import { jsStyles } from './Burger.styles';
8
- export var Burger = function () {
9
- var context = useContext(SideMenuContext);
10
- var theme = getSideMenuTheme(useContext(ThemeContext));
11
- return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids.burger },
12
- React.createElement(UiMenuBars3HIcon24Regular, null)));
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Burger = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var react_1 = tslib_1.__importStar(require("react"));
6
+ var UiMenuBars3HIcon24Regular_1 = require("@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular");
7
+ var react_ui_1 = require("@skbkontur/react-ui");
8
+ var SideMenuContext_1 = require("../SideMenuContext");
9
+ var SideMenuDataTids_1 = require("../../SideMenuDataTids");
10
+ var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
11
+ var Burger_styles_1 = require("./Burger.styles");
12
+ var Burger = function () {
13
+ var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
14
+ var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
15
+ return (react_1.default.createElement("button", { className: Burger_styles_1.jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids_1.SideMenuDataTids.burger },
16
+ react_1.default.createElement(UiMenuBars3HIcon24Regular_1.UiMenuBars3HIcon24Regular, null)));
13
17
  };
18
+ exports.Burger = Burger;
@@ -1,11 +1,14 @@
1
- import { __makeTemplateObject } from "tslib";
2
- import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
4
- import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.jsStyles = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
6
+ var Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
7
+ var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
5
8
  var styles = {
6
9
  rootForTabletsOrMobiles: function (t) {
7
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "], ["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "])), resetButton(), t.sideMenuBurgerMarginRight);
10
+ return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "], ["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "])), (0, Mixins_1.resetButton)(), t.sideMenuBurgerMarginRight);
8
11
  },
9
12
  };
10
- export var jsStyles = memoizeStyle(styles);
13
+ exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
11
14
  var templateObject_1;
@@ -1,38 +1,41 @@
1
- import { __assign, __read, __rest } from "tslib";
2
- import React, { forwardRef, useContext, useEffect, useState } from 'react';
3
- import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
4
- import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
5
- import { ThemeContext } from '@skbkontur/react-ui';
6
- import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
7
- import { SideMenuContext } from '../SideMenuContext';
8
- import { useMemoIcon } from '../../hooks/useMemoIcon';
9
- import { SideMenuDataTids } from '../../SideMenuDataTids';
10
- import { navigationAttribute } from '../Navigation';
11
- import { generateId } from '../../lib/utils/scripts';
12
- import { jsStyles } from './ClickableElement.styles';
13
- import { SubMenu } from './SubMenu';
14
- import { ItemContent } from './ItemContent/ItemContent';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ClickableElement = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var react_1 = tslib_1.__importStar(require("react"));
6
+ var keyListener_1 = require("@skbkontur/react-ui/lib/events/keyListener");
7
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
8
+ var react_ui_1 = require("@skbkontur/react-ui");
9
+ var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
10
+ var SideMenuContext_1 = require("../SideMenuContext");
11
+ var useMemoIcon_1 = require("../../hooks/useMemoIcon");
12
+ var SideMenuDataTids_1 = require("../../SideMenuDataTids");
13
+ var Navigation_1 = require("../Navigation");
14
+ var scripts_1 = require("../../lib/utils/scripts");
15
+ var ClickableElement_styles_1 = require("./ClickableElement.styles");
16
+ var SubMenu_1 = require("./SubMenu");
17
+ var ItemContent_1 = require("./ItemContent/ItemContent");
15
18
  /**
16
19
  * Элемент списка (пункт меню либо ссылка)
17
20
  *
18
21
  * @visibleName ClickableElement
19
22
  */
20
- var ClickableElement = forwardRef(function (_a, ref) {
23
+ var ClickableElement = (0, react_1.forwardRef)(function (_a, ref) {
21
24
  var _b, _c;
22
- var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
23
- var context = useContext(SideMenuContext);
24
- var theme = getSideMenuTheme(useContext(ThemeContext));
25
- var _d = __read(useState(false), 2), isActive = _d[0], setIsActive = _d[1];
26
- var _e = __read(useState(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
27
- var _f = __read(useState(false), 2), isOpened = _f[0], setIsOpened = _f[1];
28
- var _g = __read(useState(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
29
- var _h = __read(useState(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
30
- var _j = __read(useState(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
31
- var _k = __read(useState(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
32
- useEffect(function () {
25
+ var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = tslib_1.__rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
26
+ var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
27
+ var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
28
+ var _d = tslib_1.__read((0, react_1.useState)(false), 2), isActive = _d[0], setIsActive = _d[1];
29
+ var _e = tslib_1.__read((0, react_1.useState)(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
30
+ var _f = tslib_1.__read((0, react_1.useState)(false), 2), isOpened = _f[0], setIsOpened = _f[1];
31
+ var _g = tslib_1.__read((0, react_1.useState)(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
32
+ var _h = tslib_1.__read((0, react_1.useState)(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
33
+ var _j = tslib_1.__read((0, react_1.useState)(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
34
+ var _k = tslib_1.__read((0, react_1.useState)(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
35
+ (0, react_1.useEffect)(function () {
33
36
  var _a;
34
37
  if (!currentId) {
35
- var generatedId = generateId();
38
+ var generatedId = (0, scripts_1.generateId)();
36
39
  setCurrentId(generatedId);
37
40
  }
38
41
  (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
@@ -97,7 +100,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
97
100
  var handleFocus = function (e) {
98
101
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
99
102
  requestAnimationFrame(function () {
100
- if (keyListener.isTabPressed) {
103
+ if (keyListener_1.keyListener.isTabPressed) {
101
104
  setIsFocusedByTab(true);
102
105
  }
103
106
  });
@@ -118,25 +121,25 @@ var ClickableElement = forwardRef(function (_a, ref) {
118
121
  e.stopPropagation();
119
122
  (_d = (_c = (_b = (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.navigationTree) === null || _b === void 0 ? void 0 : _b.find(currentId)) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
120
123
  };
121
- var newProps = __assign({ className: cx((_b = {},
122
- _b[jsStyles.root(theme)] = true,
123
- _b[jsStyles.rootButton(theme)] = isButton,
124
- _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
125
- _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
126
- _b[jsStyles.disabledRoot(theme)] = disabled,
127
- _b[jsStyles.activeRoot(theme)] = isHighlighted,
128
- _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
129
- _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu,
124
+ var newProps = tslib_1.__assign({ className: (0, Emotion_1.cx)((_b = {},
125
+ _b[ClickableElement_styles_1.jsStyles.root(theme)] = true,
126
+ _b[ClickableElement_styles_1.jsStyles.rootButton(theme)] = isButton,
127
+ _b[ClickableElement_styles_1.jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
128
+ _b[ClickableElement_styles_1.jsStyles.focusedRoot(theme)] = isFocusedByTab,
129
+ _b[ClickableElement_styles_1.jsStyles.disabledRoot(theme)] = disabled,
130
+ _b[ClickableElement_styles_1.jsStyles.activeRoot(theme)] = isHighlighted,
131
+ _b[ClickableElement_styles_1.jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
132
+ _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (react_1.default.createElement(ItemContent_1.ItemContent, { _isSubMenu: _isSubMenu,
130
133
  // @ts-expect-error: SideMenuItem should have icon
131
- icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
132
- return (React.createElement(Component, __assign({ "data-tid": SideMenuDataTids.clickableElement }, (_c = {}, _c[navigationAttribute] = currentId, _c)),
133
- React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
134
- ? __assign(__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : __assign({}, newProps)),
135
- React.createElement(SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
136
- React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubIcons }, context) }, children))));
134
+ icon: _isSubMenu && !_isBackButton ? (0, useMemoIcon_1.useMemoIcon)(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
135
+ return (react_1.default.createElement(Component, (_c = { "data-tid": SideMenuDataTids_1.SideMenuDataTids.clickableElement }, _c[Navigation_1.navigationAttribute] = currentId, _c),
136
+ react_1.default.cloneElement(react_1.default.createElement(Tag, { state: isActive ? 'active' : undefined }), children
137
+ ? tslib_1.__assign(tslib_1.__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : tslib_1.__assign({}, newProps)),
138
+ react_1.default.createElement(SubMenu_1.SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
139
+ react_1.default.createElement(SideMenuContext_1.SideMenuContext.Provider, { value: tslib_1.__assign({ hasSubIcons: hasSubIcons }, context) }, children))));
137
140
  });
138
141
  ClickableElement.displayName = 'ClickableElement';
139
142
  var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
140
143
  __KONTUR_REACT_UI__: 'ClickableElement',
141
144
  });
142
- export { ClickableElementWithStaticFields as ClickableElement };
145
+ exports.ClickableElement = ClickableElementWithStaticFields;
@@ -1,29 +1,32 @@
1
- import { __makeTemplateObject } from "tslib";
2
- import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
4
- import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.jsStyles = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
6
+ var Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
7
+ var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
5
8
  var styles = {
6
9
  root: function (t) {
7
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "], ["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
10
+ return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "], ["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "])), (0, Mixins_1.resetButton)(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
8
11
  },
9
12
  rootButton: function (t) {
10
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:active {\n background: ", ";\n }\n "], ["\n &:active {\n background: ", ";\n }\n "])), t.sideMenuItemActiveBg);
13
+ return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n &:active {\n background: ", ";\n }\n "], ["\n &:active {\n background: ", ";\n }\n "])), t.sideMenuItemActiveBg);
11
14
  },
12
15
  rootSubItemInSeparatedSubMenu: function (t) {
13
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &:hover {\n background: ", ";\n }\n "], ["\n &:hover {\n background: ", ";\n }\n "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
16
+ return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n &:hover {\n background: ", ";\n }\n "], ["\n &:hover {\n background: ", ";\n }\n "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
14
17
  },
15
18
  focusedRoot: function (t) {
16
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
19
+ return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
17
20
  },
18
21
  disabledRoot: function (t) {
19
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), t.sideMenuItemDisabledColor);
22
+ return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), t.sideMenuItemDisabledColor);
20
23
  },
21
24
  activeRoot: function (t) {
22
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
25
+ return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
23
26
  },
24
27
  activeRootSubItemInSeparatedSubMenu: function (t) {
25
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
28
+ return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
26
29
  },
27
30
  };
28
- export var jsStyles = memoizeStyle(styles);
31
+ exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
29
32
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
@@ -1,21 +1,25 @@
1
- import React, { forwardRef, useContext } from 'react';
2
- import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
4
- import { SideMenuContext } from '../SideMenuContext';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.InnerSubMenu = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var react_1 = tslib_1.__importStar(require("react"));
6
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
7
+ var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
8
+ var SideMenuContext_1 = require("../SideMenuContext");
5
9
  /**
6
10
  * Подменю, раскрывающееся внутри основного меню
7
11
  *
8
12
  * @visibleName InnerSubMenu
9
13
  */
10
- var InnerSubMenu = forwardRef(function (_a, ref) {
14
+ var InnerSubMenu = (0, react_1.forwardRef)(function (_a, ref) {
11
15
  var _b;
12
16
  var children = _a.children, htmlId = _a.htmlId, isOpened = _a.isOpened;
13
- var context = useContext(SideMenuContext);
14
- return (React.createElement("ul", { ref: ref, id: htmlId, className: cx((_b = {},
15
- _b[jsStylesForSideMenu.list()] = true,
16
- _b[jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
17
+ var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
18
+ return (react_1.default.createElement("ul", { ref: ref, id: htmlId, className: (0, Emotion_1.cx)((_b = {},
19
+ _b[SideMenu_styles_1.jsStylesForSideMenu.list()] = true,
20
+ _b[SideMenu_styles_1.jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
17
21
  _b)) }, children));
18
22
  });
19
23
  InnerSubMenu.displayName = 'InnerSubMenu';
20
24
  var InnerSubMenuWithStaticFields = Object.assign(InnerSubMenu, { __KONTUR_REACT_UI__: 'InnerSubMenu' });
21
- export { InnerSubMenuWithStaticFields as InnerSubMenu };
25
+ exports.InnerSubMenu = InnerSubMenuWithStaticFields;
@@ -1,12 +1,15 @@
1
- import { __read } from "tslib";
2
- import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
4
- import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
5
- import { SideMenuContext } from '../../SideMenuContext';
6
- import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
7
- import { jsStyles } from './Caption.styles';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Caption = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
6
+ var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
7
+ var react_1 = tslib_1.__importStar(require("react"));
8
+ var SideMenuContext_1 = require("../../SideMenuContext");
9
+ var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
10
+ var Caption_styles_1 = require("./Caption.styles");
8
11
  var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
9
- var _a = __read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
12
+ var _a = tslib_1.__read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
10
13
  if (visibleWidth < fullWidth && lastName) {
11
14
  return "".concat(firstName, " ").concat(lastName[0], ".");
12
15
  }
@@ -21,15 +24,15 @@ var getCaptionTail = function (caption, visibleWidth, fullWidth) {
21
24
  }
22
25
  return '';
23
26
  };
24
- export var Caption = forwardRef(function (_a, ref) {
27
+ exports.Caption = (0, react_1.forwardRef)(function (_a, ref) {
25
28
  var _b, _c;
26
29
  var _isSubMenu = _a._isSubMenu, isNestedSubMenu = _a.isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
27
- var theme = getSideMenuTheme(useContext(ThemeContext));
28
- var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
29
- var captionRef = useRef(null);
30
- var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
30
+ var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
31
+ var _d = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
32
+ var captionRef = (0, react_1.useRef)(null);
33
+ var _e = tslib_1.__read((0, react_1.useState)(''), 2), tail = _e[0], setTail = _e[1];
31
34
  var isCaptionPlainText = typeof caption === 'string';
32
- useEffect(function () {
35
+ (0, react_1.useEffect)(function () {
33
36
  if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
34
37
  return;
35
38
  }
@@ -49,26 +52,26 @@ export var Caption = forwardRef(function (_a, ref) {
49
52
  return _isAvatar && userName.split(' ').length === 1;
50
53
  };
51
54
  var Component = isCaptionPlainText ? 'p' : 'div';
52
- return (React.createElement("div", { className: cx((_b = {},
53
- _b[jsStyles.root()] = true,
54
- _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
55
+ return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_b = {},
56
+ _b[Caption_styles_1.jsStyles.root()] = true,
57
+ _b[Caption_styles_1.jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
55
58
  _b)), ref: ref },
56
- React.createElement(Component, { className: cx((_c = {},
57
- _c[jsStyles.caption(theme)] = true,
58
- _c[jsStyles.captionDropdown()] = _isDropdown,
59
- _c[jsStyles.captionTruncated()] = isCaptionPlainText &&
59
+ react_1.default.createElement(Component, { className: (0, Emotion_1.cx)((_c = {},
60
+ _c[Caption_styles_1.jsStyles.caption(theme)] = true,
61
+ _c[Caption_styles_1.jsStyles.captionDropdown()] = _isDropdown,
62
+ _c[Caption_styles_1.jsStyles.captionTruncated()] = isCaptionPlainText &&
60
63
  _isDropdown &&
61
64
  (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
62
- _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
63
- _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
64
- _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
65
- _c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
66
- _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
67
- _c[jsStyles.captionLarge(theme)] = size === 'large',
68
- _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
69
- _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
70
- _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
65
+ _c[Caption_styles_1.jsStyles.captionSubItem(theme)] = _isSubMenu,
66
+ _c[Caption_styles_1.jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
67
+ _c[Caption_styles_1.jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
68
+ _c[Caption_styles_1.jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
69
+ _c[Caption_styles_1.jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
70
+ _c[Caption_styles_1.jsStyles.captionLarge(theme)] = size === 'large',
71
+ _c[Caption_styles_1.jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
72
+ _c[Caption_styles_1.jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
73
+ _c[Caption_styles_1.jsStyles.captionInBackButton(theme)] = _isBackButton,
71
74
  _c)), ref: captionRef, "data-tail": tail }, caption),
72
75
  subCaption));
73
76
  });
74
- Caption.displayName = 'Caption';
77
+ exports.Caption.displayName = 'Caption';
@@ -1,51 +1,54 @@
1
- import { __makeTemplateObject } from "tslib";
2
- import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
4
- export var sideMenuMultilineCaptionPaddingTop = '4px';
5
- export var sideMenuCaptionMarginRight = '8px';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.jsStyles = exports.sideMenuCaptionMarginRight = exports.sideMenuMultilineCaptionPaddingTop = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
6
+ var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
7
+ exports.sideMenuMultilineCaptionPaddingTop = '4px';
8
+ exports.sideMenuCaptionMarginRight = '8px';
6
9
  var styles = {
7
10
  root: function () {
8
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "])));
11
+ return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "])));
9
12
  },
10
13
  rootMultiline: function () {
11
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n align-self: flex-start;\n "], ["\n padding-top: ", ";\n align-self: flex-start;\n "])), sideMenuMultilineCaptionPaddingTop);
14
+ return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n padding-top: ", ";\n align-self: flex-start;\n "], ["\n padding-top: ", ";\n align-self: flex-start;\n "])), exports.sideMenuMultilineCaptionPaddingTop);
12
15
  },
13
16
  caption: function (t) {
14
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "], ["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
17
+ return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "], ["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, exports.sideMenuCaptionMarginRight);
15
18
  },
16
19
  captionForTouchScreens: function (t) {
17
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
20
+ return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
18
21
  },
19
22
  captionSubItem: function (t) {
20
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.sideMenuCaptionSubItemMarginLeft);
23
+ return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.sideMenuCaptionSubItemMarginLeft);
21
24
  },
22
25
  captionSubItemForTouchScreens: function (t) {
23
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
26
+ return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
24
27
  },
25
28
  captionSubItemSeparatedMenuTopLevel: function () {
26
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0 8px;\n "], ["\n margin: 0 8px;\n "])));
29
+ return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n margin: 0 8px;\n "], ["\n margin: 0 8px;\n "])));
27
30
  },
28
31
  captionNestedItemSeparatedMenu: function () {
29
- return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-left: 25px;\n "], ["\n margin-left: 25px;\n "])));
32
+ return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n margin-left: 25px;\n "], ["\n margin-left: 25px;\n "])));
30
33
  },
31
34
  captionWithoutItemIcon: function () {
32
- return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
35
+ return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
33
36
  },
34
37
  captionSubItemWithoutColumnIcons: function () {
35
- return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
38
+ return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
36
39
  },
37
40
  captionLarge: function (t) {
38
- return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: ", " !important;\n line-height: ", " !important;\n "], ["\n font-size: ", " !important;\n line-height: ", " !important;\n "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
41
+ return (0, Emotion_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n font-size: ", " !important;\n line-height: ", " !important;\n "], ["\n font-size: ", " !important;\n line-height: ", " !important;\n "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
39
42
  },
40
43
  captionInBackButton: function (t) {
41
- return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
44
+ return (0, Emotion_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
42
45
  },
43
46
  captionDropdown: function () {
44
- return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n white-space: nowrap;\n overflow: hidden;\n "], ["\n white-space: nowrap;\n overflow: hidden;\n "])));
47
+ return (0, Emotion_1.css)(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n white-space: nowrap;\n overflow: hidden;\n "], ["\n white-space: nowrap;\n overflow: hidden;\n "])));
45
48
  },
46
49
  captionTruncated: function () {
47
- return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "], ["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "])));
50
+ return (0, Emotion_1.css)(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "], ["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "])));
48
51
  },
49
52
  };
50
- export var jsStyles = memoizeStyle(styles);
53
+ exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
51
54
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
@@ -1,10 +1,14 @@
1
- import React, { useContext } from 'react';
2
- import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
4
- import { SideMenuContext } from '../../SideMenuContext';
5
- import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
6
- import { isKonturIcon } from '../../../lib/utils/scripts';
7
- import { jsStyles } from './Icon.styles';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Icon = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var react_1 = tslib_1.__importStar(require("react"));
6
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
7
+ var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
8
+ var SideMenuContext_1 = require("../../SideMenuContext");
9
+ var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
10
+ var scripts_1 = require("../../../lib/utils/scripts");
11
+ var Icon_styles_1 = require("./Icon.styles");
8
12
  var getIconSize = function (theme, _isSubMenu, _isBackButton) {
9
13
  if (!_isSubMenu) {
10
14
  return parseInt(theme.sideMenuIconSize);
@@ -13,16 +17,16 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
13
17
  return parseInt(theme.sideMenuIconSubItemSize);
14
18
  }
15
19
  };
16
- export var Icon = function (_a) {
20
+ var Icon = function (_a) {
17
21
  var _b;
18
22
  var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c, disabled = _a.disabled;
19
- var context = useContext(SideMenuContext);
23
+ var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
20
24
  var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
21
- var theme = getSideMenuTheme(useContext(ThemeContext));
25
+ var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
22
26
  var renderIcon = function () {
23
27
  var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
24
- if (isKonturIcon(icon)) {
25
- return React.cloneElement(icon, {
28
+ if ((0, scripts_1.isKonturIcon)(icon)) {
29
+ return react_1.default.cloneElement(icon, {
26
30
  size: getIconSize(theme, _isSubMenu, _isBackButton),
27
31
  color: iconColor,
28
32
  align: _isBackButton ? 'baseline' : 'none',
@@ -30,13 +34,14 @@ export var Icon = function (_a) {
30
34
  }
31
35
  return icon;
32
36
  };
33
- return (React.createElement("span", { className: cx((_b = {},
34
- _b[jsStyles.root(theme)] = true,
35
- _b[jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
36
- _b[jsStyles.rootLarge(theme)] = size === 'large',
37
- _b[jsStyles.rootSubItem(theme)] = _isSubMenu,
38
- _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
39
- _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
40
- _b[jsStyles.rootBackButton(theme)] = _isBackButton,
37
+ return (react_1.default.createElement("span", { className: (0, Emotion_1.cx)((_b = {},
38
+ _b[Icon_styles_1.jsStyles.root(theme)] = true,
39
+ _b[Icon_styles_1.jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
40
+ _b[Icon_styles_1.jsStyles.rootLarge(theme)] = size === 'large',
41
+ _b[Icon_styles_1.jsStyles.rootSubItem(theme)] = _isSubMenu,
42
+ _b[Icon_styles_1.jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
43
+ _b[Icon_styles_1.jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
44
+ _b[Icon_styles_1.jsStyles.rootBackButton(theme)] = _isBackButton,
41
45
  _b)) }, renderIcon()));
42
46
  };
47
+ exports.Icon = Icon;
@@ -1,28 +1,31 @@
1
- import { __makeTemplateObject } from "tslib";
2
- import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
3
- import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.jsStyles = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
6
+ var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
4
7
  var styles = {
5
8
  root: function (t) {
6
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconMarginY, t.sideMenuIconMarginRight, t.sideMenuIconMarginY, t.sideMenuIconMarginLeft, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
9
+ return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconMarginY, t.sideMenuIconMarginRight, t.sideMenuIconMarginY, t.sideMenuIconMarginLeft, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
7
10
  },
8
11
  rootMultiline: function () {
9
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-self: flex-start;\n margin-top: -2px;\n "], ["\n align-self: flex-start;\n margin-top: -2px;\n "])));
12
+ return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n align-self: flex-start;\n margin-top: -2px;\n "], ["\n align-self: flex-start;\n margin-top: -2px;\n "])));
10
13
  },
11
14
  rootLarge: function (t) {
12
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "], ["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
15
+ return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "], ["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
13
16
  },
14
17
  rootSubItemLarge: function (t) {
15
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: ", ";\n "], ["\n min-height: ", ";\n "])), t.sideMenuIconLargeSubItemMinHeight);
18
+ return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n min-height: ", ";\n "], ["\n min-height: ", ";\n "])), t.sideMenuIconLargeSubItemMinHeight);
16
19
  },
17
20
  rootSubItem: function (t) {
18
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "], ["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
21
+ return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "], ["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
19
22
  },
20
23
  rootSubItemSeparatedMenu: function (t) {
21
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);
24
+ return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);
22
25
  },
23
26
  rootBackButton: function (t) {
24
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
27
+ return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
25
28
  },
26
29
  };
27
- export var jsStyles = memoizeStyle(styles);
30
+ exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
28
31
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
3
3
  declare const ItemContentWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & {
4
- isNestedSubMenu?: boolean | undefined;
4
+ isNestedSubMenu?: boolean;
5
5
  } & React.RefAttributes<HTMLDivElement>> & {
6
6
  __KONTUR_REACT_UI__: string;
7
7
  };