@synerise/ds-menu 0.13.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/Elements/Item/MenuItem.types.d.ts +14 -4
  3. package/dist/Elements/Item/Text/Text.d.ts +6 -0
  4. package/dist/Elements/Item/Text/Text.js +144 -79
  5. package/dist/Elements/Item/Text/Text.styles.js +1 -1
  6. package/dist/Elements/Item/Text/Text.types.d.ts +6 -2
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,45 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.14.0...@synerise/ds-menu@0.15.0) (2022-06-29)
7
+
8
+
9
+ ### Features
10
+
11
+ * **menu:** adds data-name attribute for the UI tests ([7722c84](https://github.com/Synerise/synerise-design/commit/7722c8461f4852ad44602f92269f3c54704c59bf))
12
+ * **menu:** enables hover tooltip on disabled menu-item ([1d36a08](https://github.com/Synerise/synerise-design/commit/1d36a08950b5f08ad9cfd1ea54bb7823a2e47ad2))
13
+
14
+
15
+
16
+
17
+
18
+ # [0.14.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.13.2...@synerise/ds-menu@0.14.0) (2022-06-15)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * **menu:** change proxy to ItemGroup, affects also ds-item-roll tests ([0d2f195](https://github.com/Synerise/synerise-design/commit/0d2f195cec34be25a4eeda1cb33eea247b9a7007))
24
+ * **menu:** hover-tooltip props type ([ed12ff6](https://github.com/Synerise/synerise-design/commit/ed12ff6b460f445b28a3801766bb2440121f6f6f))
25
+ * **menu:** VisiblityTrigger typing fix ([e16f279](https://github.com/Synerise/synerise-design/commit/e16f279d9440b1fddfa97f2c6ca04c8a3825a6e3))
26
+
27
+
28
+ ### Features
29
+
30
+ * **menu:** add hover tooltip to menu item + test + story ([b931e0b](https://github.com/Synerise/synerise-design/commit/b931e0b277a0a563f7c85310a51593bdd5b99e1e))
31
+ * **menu:** change prop names from popover to rc-trigger ([7ea0eed](https://github.com/Synerise/synerise-design/commit/7ea0eedddc8212c44c61c63e3f2ce4a188935d07))
32
+
33
+
34
+
35
+
36
+
37
+ ## [0.13.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.13.1...@synerise/ds-menu@0.13.2) (2022-03-30)
38
+
39
+ **Note:** Version bump only for package @synerise/ds-menu
40
+
41
+
42
+
43
+
44
+
6
45
  ## [0.13.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.13.0...@synerise/ds-menu@0.13.1) (2022-03-24)
7
46
 
8
47
  **Note:** Version bump only for package @synerise/ds-menu
package/dist/Elements/Item/MenuItem.types.d.ts CHANGED
@@ -1,6 +1,8 @@
1
- import { MenuProps } from 'antd/lib/menu';
2
1
  import * as React from 'react';
3
- import { VisibilityTrigger } from 'Menu.types';
2
+ import { MenuProps } from 'antd/lib/menu';
3
+ import type { TriggerProps } from 'rc-trigger';
4
+ import { TooltipProps } from '@synerise/ds-tooltip/dist/Tooltip.types';
5
+ import { VisibilityTrigger } from '../../Menu.types';
4
6
  import { SubMenuProps } from '../SubMenu/SubMenu.types';
5
7
  export declare enum ItemType {
6
8
  DEFAULT = "default",
@@ -12,6 +14,9 @@ export declare enum ItemSize {
12
14
  DEFAULT = "default",
13
15
  LARGE = "large"
14
16
  }
17
+ export declare type TriggerHandle = React.Component<TriggerProps> & {
18
+ getPopupDomNode: () => HTMLElement;
19
+ };
15
20
  export interface MenuItemProps extends Omit<MenuProps, 'dataSource' | 'footer'> {
16
21
  key?: React.ReactText;
17
22
  text?: string | React.ReactNode;
@@ -28,8 +33,8 @@ export interface MenuItemProps extends Omit<MenuProps, 'dataSource' | 'footer'>
28
33
  copyTooltip?: string | React.ReactNode;
29
34
  timeToHideTooltip?: number;
30
35
  highlight?: string;
31
- suffixVisibilityTrigger?: VisibilityTrigger;
32
- prefixVisibilityTrigger?: VisibilityTrigger;
36
+ suffixVisibilityTrigger?: VisibilityTrigger | string;
37
+ prefixVisibilityTrigger?: VisibilityTrigger | string;
33
38
  onItemHover?: (e: MouseEvent) => void;
34
39
  children?: React.ReactNode;
35
40
  type?: ItemType | string;
@@ -37,4 +42,9 @@ export interface MenuItemProps extends Omit<MenuProps, 'dataSource' | 'footer'>
37
42
  menuItemKey?: React.ReactText;
38
43
  checked?: boolean;
39
44
  size?: 'default' | 'large';
45
+ tooltipProps?: TooltipProps;
46
+ hoverTooltipProps?: TriggerProps & {
47
+ ref?: React.LegacyRef<TriggerHandle>;
48
+ };
49
+ renderHoverTooltip?: () => JSX.Element;
40
50
  }
package/dist/Elements/Item/Text/Text.d.ts CHANGED
@@ -1,4 +1,10 @@
1
1
  import * as React from 'react';
2
+ import 'rc-trigger/assets/index.less';
2
3
  import { BasicItemProps } from './Text.types';
4
+ export declare type HoverTooltipProps = React.PropsWithChildren<{
5
+ hoverTooltipProps?: BasicItemProps['hoverTooltipProps'];
6
+ renderHoverTooltip?: () => JSX.Element;
7
+ style?: React.CSSProperties;
8
+ }>;
3
9
  declare const Text: React.FC<BasicItemProps>;
4
10
  export default Text;
package/dist/Elements/Item/Text/Text.js CHANGED
@@ -1,16 +1,19 @@
1
- var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "copyHint", "copyValue", "copyTooltip", "timeToHideTooltip", "highlight", "style", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "indentLevel", "ordered", "checked", "size"];
2
-
3
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "copyHint", "copyValue", "copyTooltip", "timeToHideTooltip", "highlight", "style", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "indentLevel", "ordered", "onClick", "checked", "tooltipProps", "hoverTooltipProps", "renderHoverTooltip", "size", "onItemHover"];
4
2
 
5
3
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
4
 
5
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
6
+
7
7
  import * as React from 'react';
8
8
  import classNames from 'classnames';
9
+ import { useTheme } from 'styled-components';
9
10
  import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
10
11
  import * as copy from 'copy-to-clipboard';
11
- import { escapeRegEx } from '@synerise/ds-utils';
12
- import Icon, { CheckS, AngleRightS } from '@synerise/ds-icon';
12
+ import Trigger from 'rc-trigger';
13
13
  import Tooltip from '@synerise/ds-tooltip';
14
+ import Icon, { CheckS, AngleRightS } from '@synerise/ds-icon';
15
+ import { escapeRegEx } from '@synerise/ds-utils';
16
+ import "rc-trigger/assets/index.css";
14
17
  import * as S from './Text.styles';
15
18
  import { VisibilityTrigger } from '../../../Menu.types';
16
19
 
@@ -22,29 +25,79 @@ var renderAddon = function renderAddon(addon) {
22
25
  return addon instanceof Function ? addon.apply(void 0, params) : addon;
23
26
  };
24
27
 
25
- var Text = function Text(_ref) {
26
- var parent = _ref.parent,
27
- disabled = _ref.disabled,
28
- prefixel = _ref.prefixel,
29
- suffixel = _ref.suffixel,
30
- danger = _ref.danger,
28
+ var placement = {
29
+ right: ['cl', 'cr']
30
+ };
31
+
32
+ function WithHoverTooltip(_ref) {
33
+ var _hoverTooltipProps$de;
34
+
35
+ var hoverTooltipProps = _ref.hoverTooltipProps,
36
+ renderHoverTooltip = _ref.renderHoverTooltip,
31
37
  children = _ref.children,
32
- description = _ref.description,
33
- copyable = _ref.copyable,
34
- copyHint = _ref.copyHint,
35
- copyValue = _ref.copyValue,
36
- copyTooltip = _ref.copyTooltip,
37
- timeToHideTooltip = _ref.timeToHideTooltip,
38
- highlight = _ref.highlight,
39
- style = _ref.style,
40
- prefixVisibilityTrigger = _ref.prefixVisibilityTrigger,
41
- suffixVisibilityTrigger = _ref.suffixVisibilityTrigger,
42
- indentLevel = _ref.indentLevel,
43
- ordered = _ref.ordered,
44
- checked = _ref.checked,
45
- _ref$size = _ref.size,
46
- size = _ref$size === void 0 ? 'default' : _ref$size,
47
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
38
+ style = _ref.style;
39
+ var dsTheme = useTheme();
40
+ var zIndex = parseInt(dsTheme.variables['zindex-tooltip'], 10);
41
+ var cancelBubblingEvent = React.useCallback(function () {
42
+ return function (ev) {
43
+ ev.stopPropagation();
44
+ };
45
+ }, []); // onKeyDown is used to disallow propagating key events to tooltip's container element
46
+
47
+ return (
48
+ /*#__PURE__*/
49
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
50
+ React.createElement("div", {
51
+ onKeyDown: cancelBubblingEvent,
52
+ onClick: cancelBubblingEvent
53
+ }, /*#__PURE__*/React.createElement(Trigger, _extends({
54
+ defaultPopupVisible: (_hoverTooltipProps$de = hoverTooltipProps == null ? void 0 : hoverTooltipProps.defaultPopupVisible) != null ? _hoverTooltipProps$de : false,
55
+ action: ['click', 'hover'],
56
+ popupAlign: {
57
+ points: placement.right,
58
+ offset: [4, 0]
59
+ },
60
+ popup: renderHoverTooltip && renderHoverTooltip(),
61
+ popupClassName: "ignore-click-outside ds-hide-arrow",
62
+ mouseEnterDelay: 0.2,
63
+ popupStyle: {
64
+ zIndex: zIndex
65
+ },
66
+ zIndex: zIndex
67
+ }, hoverTooltipProps), /*#__PURE__*/React.createElement("div", {
68
+ style: style
69
+ }, children)))
70
+ );
71
+ }
72
+
73
+ var Text = function Text(_ref2) {
74
+ var parent = _ref2.parent,
75
+ disabled = _ref2.disabled,
76
+ prefixel = _ref2.prefixel,
77
+ suffixel = _ref2.suffixel,
78
+ danger = _ref2.danger,
79
+ children = _ref2.children,
80
+ description = _ref2.description,
81
+ copyable = _ref2.copyable,
82
+ copyHint = _ref2.copyHint,
83
+ copyValue = _ref2.copyValue,
84
+ copyTooltip = _ref2.copyTooltip,
85
+ timeToHideTooltip = _ref2.timeToHideTooltip,
86
+ highlight = _ref2.highlight,
87
+ style = _ref2.style,
88
+ prefixVisibilityTrigger = _ref2.prefixVisibilityTrigger,
89
+ suffixVisibilityTrigger = _ref2.suffixVisibilityTrigger,
90
+ indentLevel = _ref2.indentLevel,
91
+ ordered = _ref2.ordered,
92
+ onClick = _ref2.onClick,
93
+ checked = _ref2.checked,
94
+ tooltipProps = _ref2.tooltipProps,
95
+ hoverTooltipProps = _ref2.hoverTooltipProps,
96
+ renderHoverTooltip = _ref2.renderHoverTooltip,
97
+ _ref2$size = _ref2.size,
98
+ size = _ref2$size === void 0 ? 'default' : _ref2$size,
99
+ onItemHover = _ref2.onItemHover,
100
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
48
101
 
49
102
  var _React$useState = React.useState(false),
50
103
  hovered = _React$useState[0],
@@ -107,58 +160,70 @@ var Text = function Text(_ref) {
107
160
  var className = React.useMemo(function () {
108
161
  return classNames('ds-menu-item', rest.className, size);
109
162
  }, [rest.className, size]);
110
- return (
111
- /*#__PURE__*/
112
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
113
- // @ts-ignore
114
- // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
115
- React.createElement(S.Wrapper, _extends({
116
- onMouseOver: function onMouseOver() {
117
- setHovered(true);
118
- },
119
- onMouseLeave: function onMouseLeave() {
120
- setHovered(false);
121
- },
122
- onMouseDown: function onMouseDown() {
123
- setClicked(!clicked);
124
- canCopyToClipboard && copyValue && copy(copyValue);
125
- },
126
- disabled: disabled,
127
- tabIndex: disabled ? -1 : 0,
128
- description: description,
129
- style: style,
130
- indentLevel: Number(indentLevel),
131
- ordered: ordered,
132
- size: size
133
- }, rest, {
134
- className: className
135
- }), /*#__PURE__*/React.createElement(Tooltip, {
136
- type: "default",
137
- trigger: "click",
138
- title: copyTooltip,
139
- timeToHideAfterClick: timeToHideTooltip
140
- }, /*#__PURE__*/React.createElement(S.Inner, null, /*#__PURE__*/React.createElement(S.ContentWrapper, {
141
- className: "ds-menu-content-wrapper"
142
- }, shouldRenderPrefix && /*#__PURE__*/React.createElement(S.PrefixelWrapper, {
143
- className: "ds-menu-prefix",
144
- visible: shouldRenderPrefix,
145
- disabled: disabled
146
- }, renderPrefixElement(hovered)), /*#__PURE__*/React.createElement(S.Content, {
147
- className: "ds-menu-content",
148
- highlight: !!highlight
149
- }, canCopyToClipboard && hovered ? copyHint : renderChildren(), !!description && /*#__PURE__*/React.createElement(S.Description, null, description)), parent && /*#__PURE__*/React.createElement(S.ArrowRight, {
150
- disabled: disabled
151
- }, /*#__PURE__*/React.createElement(Icon, {
152
- component: /*#__PURE__*/React.createElement(AngleRightS, null),
153
- color: theme.palette['grey-600']
154
- })), /*#__PURE__*/React.createElement(S.ContentDivider, null), (!!suffixElement || !!checked) && /*#__PURE__*/React.createElement(S.SuffixWraper, {
155
- visible: shouldRenderSuffix,
156
- disabled: disabled
157
- }, !!checked && /*#__PURE__*/React.createElement(Icon, {
158
- component: /*#__PURE__*/React.createElement(CheckS, null),
159
- color: theme.palette["green-600"]
160
- }), suffixElement)))))
161
- );
163
+ var element =
164
+ /*#__PURE__*/
165
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
166
+ // @ts-ignore
167
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
168
+ React.createElement(S.Wrapper, _extends({
169
+ onMouseOver: function onMouseOver() {
170
+ setHovered(true);
171
+ },
172
+ onMouseLeave: function onMouseLeave() {
173
+ setHovered(false);
174
+ },
175
+ onMouseDown: function onMouseDown() {
176
+ setClicked(!clicked);
177
+ canCopyToClipboard && copyValue && copy(copyValue);
178
+ },
179
+ disabled: disabled,
180
+ tabIndex: disabled ? -1 : 0,
181
+ description: description,
182
+ style: renderHoverTooltip ? undefined : style,
183
+ indentLevel: Number(indentLevel),
184
+ ordered: ordered,
185
+ size: size,
186
+ onClick: onClick,
187
+ onItemHover: onItemHover
188
+ }, rest, {
189
+ "data-name": typeof children === 'string' ? children : undefined,
190
+ className: className
191
+ }), /*#__PURE__*/React.createElement(Tooltip, _extends({
192
+ type: "default",
193
+ trigger: "click",
194
+ title: copyTooltip,
195
+ timeToHideAfterClick: timeToHideTooltip
196
+ }, tooltipProps), /*#__PURE__*/React.createElement(S.Inner, null, /*#__PURE__*/React.createElement(S.ContentWrapper, {
197
+ className: "ds-menu-content-wrapper"
198
+ }, shouldRenderPrefix && /*#__PURE__*/React.createElement(S.PrefixelWrapper, {
199
+ className: "ds-menu-prefix",
200
+ visible: shouldRenderPrefix,
201
+ disabled: disabled
202
+ }, renderPrefixElement(hovered)), /*#__PURE__*/React.createElement(S.Content, {
203
+ className: "ds-menu-content",
204
+ highlight: !!highlight
205
+ }, canCopyToClipboard && hovered ? copyHint : renderChildren(), !!description && /*#__PURE__*/React.createElement(S.Description, null, description)), parent && /*#__PURE__*/React.createElement(S.ArrowRight, {
206
+ disabled: disabled
207
+ }, /*#__PURE__*/React.createElement(Icon, {
208
+ component: /*#__PURE__*/React.createElement(AngleRightS, null),
209
+ color: theme.palette['grey-600']
210
+ })), /*#__PURE__*/React.createElement(S.ContentDivider, null), (!!suffixElement || !!checked) && /*#__PURE__*/React.createElement(S.SuffixWraper, {
211
+ visible: shouldRenderSuffix,
212
+ disabled: disabled
213
+ }, !!checked && /*#__PURE__*/React.createElement(Icon, {
214
+ component: /*#__PURE__*/React.createElement(CheckS, null),
215
+ color: theme.palette["green-600"]
216
+ }), suffixElement)))));
217
+
218
+ if (renderHoverTooltip) {
219
+ return /*#__PURE__*/React.createElement(WithHoverTooltip, {
220
+ hoverTooltipProps: hoverTooltipProps,
221
+ renderHoverTooltip: renderHoverTooltip,
222
+ style: style
223
+ }, element);
224
+ }
225
+
226
+ return element;
162
227
  };
163
228
 
164
229
  export default Text;
package/dist/Elements/Item/Text/Text.styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styled, { css } from 'styled-components';
2
2
  import MenuItem from 'antd/lib/menu/MenuItem';
3
3
  import { IconContainer } from '@synerise/ds-icon';
4
- import { ItemSize } from "../MenuItem.types";
4
+ import { ItemSize } from '../MenuItem.types';
5
5
  var INDENT_LEVEL_STEP = 16;
6
6
  var TRANSITION_FN = '0.2s ease-out';
7
7
 
package/dist/Elements/Item/Text/Text.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { MenuProps } from 'antd/lib/menu';
3
+ import { MenuItemProps } from '../MenuItem.types';
3
4
  export declare type AddonRenderer = (hovered: boolean) => React.ReactNode;
4
5
  export interface BasicItemProps {
5
6
  className?: string;
@@ -18,12 +19,15 @@ export interface BasicItemProps {
18
19
  highlight?: string;
19
20
  style?: React.CSSProperties;
20
21
  onItemHover?: (e: MouseEvent) => void;
21
- suffixVisibilityTrigger?: 'default' | 'hover';
22
- prefixVisibilityTrigger?: 'default' | 'hover';
22
+ suffixVisibilityTrigger?: MenuItemProps['suffixVisibilityTrigger'];
23
+ prefixVisibilityTrigger?: MenuItemProps['prefixVisibilityTrigger'];
23
24
  indentLevel?: number;
24
25
  ordered?: boolean;
25
26
  key?: React.ReactText;
26
27
  checked?: boolean;
27
28
  size?: 'default' | 'large';
28
29
  timeToHideTooltip?: number;
30
+ tooltipProps?: MenuItemProps['tooltipProps'];
31
+ hoverTooltipProps?: MenuItemProps['hoverTooltipProps'];
32
+ renderHoverTooltip?: MenuItemProps['renderHoverTooltip'];
29
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-menu",
3
- "version": "0.13.1",
3
+ "version": "0.15.0",
4
4
  "description": "Menu UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,8 +32,8 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-icon": "^0.48.0",
36
- "@synerise/ds-tooltip": "^0.11.8",
35
+ "@synerise/ds-icon": "^0.49.0",
36
+ "@synerise/ds-tooltip": "^0.11.9",
37
37
  "@synerise/ds-typography": "^0.12.2",
38
38
  "classnames": "^2.2.6"
39
39
  },
@@ -41,5 +41,5 @@
41
41
  "@synerise/ds-core": "*",
42
42
  "react": ">=16.9.0 < 17.0.0"
43
43
  },
44
- "gitHead": "8d3f48dbf8e3eddd679dee9f6d667d03b5f25ed0"
44
+ "gitHead": "3df224bc0e56a55beaa9df7e0dcfbda4c04631ad"
45
45
  }