@skbkontur/side-menu 1.9.0 → 1.10.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 (17) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/internal/themes/SideMenuTheme.d.ts +2 -0
  3. package/internal/themes/SideMenuTheme.js +10 -2
  4. package/package.json +1 -1
  5. package/src/SideMenuItem/SideMenuItem.md +55 -0
  6. package/src/SideMenuLink/SideMenuLink.styles.js +1 -1
  7. package/src/internal/ClickableElement.d.ts +1 -0
  8. package/src/internal/ClickableElement.js +6 -2
  9. package/src/internal/ClickableElement.styles.d.ts +1 -0
  10. package/src/internal/ClickableElement.styles.js +6 -3
  11. package/src/internal/ItemContent/Icon.d.ts +2 -2
  12. package/src/internal/ItemContent/Icon.js +3 -2
  13. package/src/internal/ItemContent/ItemContent.js +3 -3
  14. package/src/internal/ItemContent/Marker.d.ts +2 -2
  15. package/src/internal/ItemContent/Marker.js +2 -1
  16. package/src/internal/ItemContent/Marker.styles.d.ts +1 -0
  17. package/src/internal/ItemContent/Marker.styles.js +9 -6
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.10.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.9.0...@skbkontur/side-menu@1.10.0) (2024-02-14)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenu:** add prop `disabled` ([4033934](https://git.skbkontur.ru/ui/ui-parking/commits/4033934a5700018907c85cc4ee7c4571ed39462d))
12
+
13
+
14
+
15
+
16
+
6
17
  # [1.9.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.8.15...@skbkontur/side-menu@1.9.0) (2024-02-14)
7
18
 
8
19
 
package/internal/themes/SideMenuTheme.d.ts CHANGED
@@ -59,6 +59,7 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
59
59
  static sideMenuIconSubItemColor: string;
60
60
  static sideMenuIconLargeSubItemMinHeight: string;
61
61
  static sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft: string;
62
+ static get sideMenuItemDisabledColor(): string;
62
63
  static sideMenuItemContentPaddingY: string;
63
64
  static sideMenuItemContentLargePaddingY: string;
64
65
  static sideMenuSubItemContentPaddingY: string;
@@ -72,6 +73,7 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
72
73
  static sideMenuMarkerPaddingX: string;
73
74
  static sideMenuMarkerPaddingY: string;
74
75
  static get sideMenuMarkerBg(): string;
76
+ static sideMenuMarkerBgDisabled: string;
75
77
  static sideMenuMarkerColor: string;
76
78
  static sideMenuMarkerFontSize: string;
77
79
  static sideMenuSubItemEmptyMarkerBg: string;
package/internal/themes/SideMenuTheme.js CHANGED
@@ -63,6 +63,15 @@ var SideMenuTheme = /** @class */ (function (_super) {
63
63
  enumerable: false,
64
64
  configurable: true
65
65
  });
66
+ Object.defineProperty(SideMenuTheme, "sideMenuItemDisabledColor", {
67
+ //#endregion
68
+ // #region ItemContent
69
+ get: function () {
70
+ return this.textColorDisabled;
71
+ },
72
+ enumerable: false,
73
+ configurable: true
74
+ });
66
75
  Object.defineProperty(SideMenuTheme, "sideMenuMarkerBg", {
67
76
  get: function () {
68
77
  return this.sideMenuProductColor;
@@ -182,8 +191,6 @@ var SideMenuTheme = /** @class */ (function (_super) {
182
191
  SideMenuTheme.sideMenuIconSubItemColor = '#757575';
183
192
  SideMenuTheme.sideMenuIconLargeSubItemMinHeight = '22px';
184
193
  SideMenuTheme.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft = '4px';
185
- //#endregion
186
- // #region ItemContent
187
194
  SideMenuTheme.sideMenuItemContentPaddingY = '4px';
188
195
  SideMenuTheme.sideMenuItemContentLargePaddingY = '9px';
189
196
  SideMenuTheme.sideMenuSubItemContentPaddingY = '4px';
@@ -198,6 +205,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
198
205
  // #region Marker
199
206
  SideMenuTheme.sideMenuMarkerPaddingX = '4px';
200
207
  SideMenuTheme.sideMenuMarkerPaddingY = '0px';
208
+ SideMenuTheme.sideMenuMarkerBgDisabled = '#D6D6D6';
201
209
  SideMenuTheme.sideMenuMarkerColor = '#fff';
202
210
  SideMenuTheme.sideMenuMarkerFontSize = '12px';
203
211
  SideMenuTheme.sideMenuSubItemEmptyMarkerBg = '#adadad';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/side-menu",
3
- "version": "1.9.0",
3
+ "version": "1.10.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
package/src/SideMenuItem/SideMenuItem.md CHANGED
@@ -70,8 +70,61 @@ const renderModal = () => {
70
70
  </ThemeContext.Provider>
71
71
  {opened && renderModal()}
72
72
  </div>
73
+ ```
74
+
75
+
76
+ Проп `disabled` блокирует работу пункта меню и изменяет его цвет на заблокированный: `sideMenuItemDisabledColor`
73
77
 
78
+ ```jsx harmony
79
+ import { Kontur, Buhgalteria } from '@skbkontur/logos';
80
+ import { SideMenu } from '../../index';
81
+ import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
82
+ import { MinusCircleIcon24Regular } from '@skbkontur/icons/icons/MinusCircleIcon/MinusCircleIcon24Regular';
83
+ import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
84
+ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
74
85
 
86
+ <div style={{ height: '100%', display: 'flex' }}>
87
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
88
+ <SideMenu>
89
+ <SideMenu.Header konturLogo={<Kontur />} productLogo={<Buhgalteria />} withWidget={false} />
90
+ <SideMenu.Body>
91
+ <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы'} marker={'2'}>
92
+ <SideMenu.SubItem caption={'Входящие'} disabled={true} />
93
+ <SideMenu.SubItem caption={'Исходящие'}>
94
+ <SideMenu.SubItem caption={'Исходящие 1'} disabled={true} />
95
+ <SideMenu.SubItem caption={'Исходящие 2'} />
96
+ <SideMenu.SubItem caption={'Исходящие 3'} />
97
+ <SideMenu.SubItem caption={'Исходящие 4'} />
98
+ </SideMenu.SubItem>
99
+ <SideMenu.SubItem caption={'Спам'} disabled={true}>
100
+ <SideMenu.SubItem caption={'Спам 1'} />
101
+ <SideMenu.SubItem caption={'Спам 2'} />
102
+ <SideMenu.SubItem caption={'Спам 3'} />
103
+ </SideMenu.SubItem>
104
+ </SideMenu.Item>
105
+ <SideMenu.Item
106
+ icon={<MinusCircleIcon24Regular />}
107
+ caption={'Сообщения'}
108
+ marker={'5'}
109
+ data-tid={'Messages'}
110
+ disabled={true}
111
+ >
112
+ <SideMenu.SubItem caption={'Сообщениe 1'} />
113
+ <SideMenu.SubItem caption={'Сообщениe 2'} />
114
+ <SideMenu.SubItem caption={'Сообщениe 3'} />
115
+ <SideMenu.SubItem caption={'Сообщениe 4'} />
116
+ <SideMenu.SubItem caption={'Сообщениe 5'} />
117
+ </SideMenu.Item>
118
+ </SideMenu.Body>
119
+ <SideMenu.Footer>
120
+ <SideMenu.Item
121
+ icon={<StackHDownIcon24Regular />}
122
+ caption={'СКБ Контур'}
123
+ />
124
+ </SideMenu.Footer>
125
+ </SideMenu>
126
+ </ThemeContext.Provider>
127
+ </div>
75
128
  ```
76
129
  #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
77
130
 
@@ -80,6 +133,7 @@ const renderModal = () => {
80
133
  sideMenuItemBorderRadius: string;
81
134
  sideMenuItemHoverBg: string;
82
135
  sideMenuItemActiveBg: string;
136
+ sideMenuItemDisabledColor: string;
83
137
  sideMenuSubItemWithSeparatedSubMenuHoverBg: string;
84
138
  sideMenuSubItemWithSeparatedSubMenuActiveBg: string;
85
139
  sideMenuFocusedItemBoxShadowInset: string;
@@ -135,6 +189,7 @@ const renderModal = () => {
135
189
  sideMenuMarkerPaddingX: string;
136
190
  sideMenuMarkerPaddingY: string;
137
191
  sideMenuMarkerBg: string;
192
+ sideMenuMarkerBgDisabled: string;
138
193
  sideMenuSubItemEmptyMarkerBg: string;
139
194
  sideMenuMarkerColor: string;
140
195
  sideMenuMarkerFontSize: string;
package/src/SideMenuLink/SideMenuLink.styles.js CHANGED
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from "tslib";
2
2
  import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
3
3
  var styles = {
4
4
  link: function () {
5
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: inherit;\n text-decoration: none;\n display: inline-block;\n "], ["\n color: inherit;\n text-decoration: none;\n display: inline-block;\n "])));
5
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n text-decoration: none;\n display: inline-block;\n "], ["\n text-decoration: none;\n display: inline-block;\n "])));
6
6
  },
7
7
  };
8
8
  export var jsStyles = memoizeStyle(styles);
package/src/internal/ClickableElement.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface CommonClickableElementProps extends CommonProps {
8
8
  subCaption?: ReactNode;
9
9
  id?: string;
10
10
  isButton?: boolean;
11
+ disabled?: boolean;
11
12
  /** @ignore */
12
13
  _generatedId?: string;
13
14
  /** @ignore */
package/src/internal/ClickableElement.js CHANGED
@@ -17,7 +17,7 @@ import { ThemeContext } from '@skbkontur/react-ui';
17
17
  */
18
18
  var ClickableElement = forwardRef(function (_a, ref) {
19
19
  var _b;
20
- 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, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, 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, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href"]);
20
+ 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, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, 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", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
21
21
  var context = useContext(SideMenuContext);
22
22
  var theme = getSideMenuTheme(useContext(ThemeContext));
23
23
  var isActive = !isButton && useActiveState(id, href, _generatedId, context.activeMenuItem);
@@ -67,6 +67,9 @@ var ClickableElement = forwardRef(function (_a, ref) {
67
67
  }
68
68
  };
69
69
  var handleClick = function (e) {
70
+ if (disabled) {
71
+ return;
72
+ }
70
73
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
71
74
  var lastElementInTheHierarchy = !hasChildren(id || href, _generatedId) && !_isDropdown && !_isBackButton;
72
75
  switchItem(context, isButton, id, href, _generatedId);
@@ -94,11 +97,12 @@ var ClickableElement = forwardRef(function (_a, ref) {
94
97
  _b[jsStyles.rootButton(theme)] = isButton,
95
98
  _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
96
99
  _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
100
+ _b[jsStyles.disabledRoot(theme)] = disabled,
97
101
  _b[jsStyles.activeRoot(theme)] = isActive ||
98
102
  shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
99
103
  shouldHighlightTopLevelItemWhenMenuIsMinimized,
100
104
  _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
101
- _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar })), ref: ref, href: href }, rest);
105
+ _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
102
106
  return (React.createElement(Component, null,
103
107
  React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
104
108
  ? __assign(__assign({}, newProps), { 'aria-expanded': isOpened, 'aria-controls': "" + (id || _generatedId) }) : __assign({}, newProps)),
package/src/internal/ClickableElement.styles.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const jsStyles: {
4
4
  rootButton(t: SideMenuTheme): string;
5
5
  rootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
6
6
  focusedRoot(t: SideMenuTheme): string;
7
+ disabledRoot(t: SideMenuTheme): string;
7
8
  activeRoot(t: SideMenuTheme): string;
8
9
  activeRootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
9
10
  };
package/src/internal/ClickableElement.styles.js CHANGED
@@ -15,12 +15,15 @@ var styles = {
15
15
  focusedRoot: function (t) {
16
16
  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
17
17
  },
18
+ 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);
20
+ },
18
21
  activeRoot: function (t) {
19
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
22
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
20
23
  },
21
24
  activeRootSubItemInSeparatedSubMenu: function (t) {
22
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
25
+ return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
23
26
  },
24
27
  };
25
28
  export var jsStyles = memoizeStyle(styles);
26
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
29
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/src/internal/ItemContent/Icon.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
2
- interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton' | '_isAvatar'> {
2
+ interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton' | '_isAvatar' | 'disabled'> {
3
3
  isMultiline: boolean;
4
4
  }
5
- export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton, _isAvatar }: IconProps) => JSX.Element;
5
+ export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton, _isAvatar, disabled }: IconProps) => JSX.Element;
6
6
  export {};
package/src/internal/ItemContent/Icon.js CHANGED
@@ -15,15 +15,16 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
15
15
  };
16
16
  export var Icon = function (_a) {
17
17
  var _b;
18
- var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c, _isAvatar = _a._isAvatar;
18
+ var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c, _isAvatar = _a._isAvatar, disabled = _a.disabled;
19
19
  var context = useContext(SideMenuContext);
20
20
  var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
21
21
  var theme = getSideMenuTheme(useContext(ThemeContext));
22
22
  var renderIcon = function () {
23
+ var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
23
24
  if (isKonturIcon(icon)) {
24
25
  return React.cloneElement(icon, {
25
26
  size: getIconSize(theme, _isSubMenu, _isBackButton),
26
- color: _isSubMenu ? theme.sideMenuIconSubItemColor : undefined,
27
+ color: iconColor,
27
28
  align: _isBackButton ? 'baseline' : 'none',
28
29
  });
29
30
  }
package/src/internal/ItemContent/ItemContent.js CHANGED
@@ -24,7 +24,7 @@ var getCaptionLineHeight = function (theme, isTouchScreen, _isSubMenu, size) {
24
24
  */
25
25
  var ItemContent = forwardRef(function (_a, ref) {
26
26
  var _b, _c;
27
- var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
27
+ var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar, disabled = _a.disabled;
28
28
  var context = useContext(SideMenuContext);
29
29
  var size = context.size, isTouchScreen = context.isTouchScreen;
30
30
  var textRef = useRef(null);
@@ -52,14 +52,14 @@ var ItemContent = forwardRef(function (_a, ref) {
52
52
  _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
53
53
  _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
54
54
  _b)), ref: ref },
55
- icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar })),
55
+ icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar, disabled: disabled })),
56
56
  React.createElement("div", { className: cx((_c = {},
57
57
  _c[jsStyles.textAndMarkerWrapper()] = true,
58
58
  _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
59
59
  _c[jsStyles.textAndMarkerWrapperMinimized()] = !context.isOpened && !_isSubMenu,
60
60
  _c)) },
61
61
  React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef })),
62
- marker !== undefined && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu, isMinimized: !context.isOpened }))));
62
+ marker !== undefined && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu, isMinimized: !context.isOpened, disabled: disabled }))));
63
63
  });
64
64
  ItemContent.displayName = 'ItemContent';
65
65
  var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
package/src/internal/ItemContent/Marker.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
2
- interface MarkerProps extends Pick<SideMenuItemProps, 'marker' | '_isSubMenu'> {
2
+ interface MarkerProps extends Pick<SideMenuItemProps, 'marker' | '_isSubMenu' | 'disabled'> {
3
3
  isMultiline: boolean;
4
4
  isMinimized?: boolean;
5
5
  }
6
- export declare const Marker: ({ isMultiline, marker, _isSubMenu, isMinimized }: MarkerProps) => JSX.Element;
6
+ export declare const Marker: ({ isMultiline, marker, _isSubMenu, disabled, isMinimized }: MarkerProps) => JSX.Element;
7
7
  export {};
package/src/internal/ItemContent/Marker.js CHANGED
@@ -5,11 +5,12 @@ import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
5
5
  import { ThemeContext } from '@skbkontur/react-ui';
6
6
  export var Marker = function (_a) {
7
7
  var _b;
8
- var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu, isMinimized = _a.isMinimized;
8
+ var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu, disabled = _a.disabled, isMinimized = _a.isMinimized;
9
9
  var theme = getSideMenuTheme(useContext(ThemeContext));
10
10
  var emptyMarker = marker === true || marker === '';
11
11
  return (React.createElement("span", { className: cx((_b = {},
12
12
  _b[jsStyles.root(theme)] = true,
13
+ _b[jsStyles.rootDisabled(theme)] = disabled,
13
14
  _b[jsStyles.rootEmpty(theme)] = emptyMarker,
14
15
  _b[jsStyles.rootMultiline(theme)] = isMultiline,
15
16
  _b[jsStyles.rootSubMenu(theme)] = _isSubMenu,
package/src/internal/ItemContent/Marker.styles.d.ts CHANGED
@@ -2,6 +2,7 @@ import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
2
2
  export declare const jsStyles: {
3
3
  root(t: SideMenuTheme): string;
4
4
  rootEmpty(t: SideMenuTheme): string;
5
+ rootDisabled(t: SideMenuTheme): string;
5
6
  rootMultiline(t: SideMenuTheme): string;
6
7
  rootSubMenu(t: SideMenuTheme): string;
7
8
  rootSubMenuEmpty(t: SideMenuTheme): string;
package/src/internal/ItemContent/Marker.styles.js CHANGED
@@ -8,21 +8,24 @@ var styles = {
8
8
  rootEmpty: function (t) {
9
9
  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0;\n margin-right: calc(", " + ", ");\n "], ["\n padding: 0;\n margin-right: calc(", " + ", ");\n "])), t.sideMenuMarkerMarginRight, t.sideMenuMarkerPaddingX);
10
10
  },
11
+ rootDisabled: function (t) {
12
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), t.sideMenuMarkerBgDisabled);
13
+ },
11
14
  rootMultiline: function (t) {
12
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-self: flex-start;\n margin-top: ", ";\n "], ["\n align-self: flex-start;\n margin-top: ", ";\n "])), t.sideMenuMarkerMultilineMarginTop);
15
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-self: flex-start;\n margin-top: ", ";\n "], ["\n align-self: flex-start;\n margin-top: ", ";\n "])), t.sideMenuMarkerMultilineMarginTop);
13
16
  },
14
17
  rootSubMenu: function (t) {
15
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: transparent;\n color: ", ";\n font-weight: ", ";\n "], ["\n background: transparent;\n color: ", ";\n font-weight: ", ";\n "])), t.sideMenuMarkerSubItemColor, t.sideMenuSubItemMarkerFontWeight);
18
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: transparent;\n color: ", ";\n font-weight: ", ";\n "], ["\n background: transparent;\n color: ", ";\n font-weight: ", ";\n "])), t.sideMenuMarkerSubItemColor, t.sideMenuSubItemMarkerFontWeight);
16
19
  },
17
20
  rootSubMenuEmpty: function (t) {
18
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), t.sideMenuSubItemEmptyMarkerBg);
21
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), t.sideMenuSubItemEmptyMarkerBg);
19
22
  },
20
23
  rootMinimized: function () {
21
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n margin: 0;\n "], ["\n position: absolute;\n right: 0;\n top: 0;\n margin: 0;\n "])));
24
+ return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n margin: 0;\n "], ["\n position: absolute;\n right: 0;\n top: 0;\n margin: 0;\n "])));
22
25
  },
23
26
  rootEmptyMinimized: function () {
24
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n right: 4px;\n top: 4px;\n "], ["\n right: 4px;\n top: 4px;\n "])));
27
+ return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n right: 4px;\n top: 4px;\n "], ["\n right: 4px;\n top: 4px;\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, templateObject_7;
31
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;