@synerise/ds-menu 0.13.0 → 0.14.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 (6) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/Elements/Item/MenuItem.types.d.ts +14 -4
  3. package/dist/Elements/Item/Text/Text.d.ts +5 -0
  4. package/dist/Elements/Item/Text/Text.js +140 -80
  5. package/dist/Elements/Item/Text/Text.types.d.ts +6 -2
  6. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
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.14.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.13.2...@synerise/ds-menu@0.14.0) (2022-06-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **menu:** change proxy to ItemGroup, affects also ds-item-roll tests ([0d2f195](https://github.com/Synerise/synerise-design/commit/0d2f195cec34be25a4eeda1cb33eea247b9a7007))
12
+ * **menu:** hover-tooltip props type ([ed12ff6](https://github.com/Synerise/synerise-design/commit/ed12ff6b460f445b28a3801766bb2440121f6f6f))
13
+ * **menu:** VisiblityTrigger typing fix ([e16f279](https://github.com/Synerise/synerise-design/commit/e16f279d9440b1fddfa97f2c6ca04c8a3825a6e3))
14
+
15
+
16
+ ### Features
17
+
18
+ * **menu:** add hover tooltip to menu item + test + story ([b931e0b](https://github.com/Synerise/synerise-design/commit/b931e0b277a0a563f7c85310a51593bdd5b99e1e))
19
+ * **menu:** change prop names from popover to rc-trigger ([7ea0eed](https://github.com/Synerise/synerise-design/commit/7ea0eedddc8212c44c61c63e3f2ce4a188935d07))
20
+
21
+
22
+
23
+
24
+
25
+ ## [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)
26
+
27
+ **Note:** Version bump only for package @synerise/ds-menu
28
+
29
+
30
+
31
+
32
+
33
+ ## [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)
34
+
35
+ **Note:** Version bump only for package @synerise/ds-menu
36
+
37
+
38
+
39
+
40
+
6
41
  # [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.12.5...@synerise/ds-menu@0.13.0) (2022-03-24)
7
42
 
8
43
 
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,9 @@
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
+ }>;
3
8
  declare const Text: React.FC<BasicItemProps>;
4
9
  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,76 @@ 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,
31
- 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);
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,
37
+ children = _ref.children;
38
+ var dsTheme = useTheme();
39
+ var zIndex = parseInt(dsTheme.variables['zindex-tooltip'], 10);
40
+ var cancelBubblingEvent = React.useCallback(function () {
41
+ return function (ev) {
42
+ ev.stopPropagation();
43
+ };
44
+ }, []); // onKeyDown is used to disallow propagating key events to tooltip's container element
45
+
46
+ return (
47
+ /*#__PURE__*/
48
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
49
+ React.createElement("div", {
50
+ onKeyDown: cancelBubblingEvent,
51
+ onClick: cancelBubblingEvent
52
+ }, /*#__PURE__*/React.createElement(Trigger, _extends({
53
+ defaultPopupVisible: (_hoverTooltipProps$de = hoverTooltipProps == null ? void 0 : hoverTooltipProps.defaultPopupVisible) != null ? _hoverTooltipProps$de : false,
54
+ action: ['click', 'hover'],
55
+ popupAlign: {
56
+ points: placement.right,
57
+ offset: [4, 0]
58
+ },
59
+ popup: renderHoverTooltip && renderHoverTooltip(),
60
+ popupClassName: "ignore-click-outside ds-hide-arrow",
61
+ mouseEnterDelay: 0.2,
62
+ popupStyle: {
63
+ zIndex: zIndex
64
+ },
65
+ zIndex: zIndex
66
+ }, hoverTooltipProps), children))
67
+ );
68
+ }
69
+
70
+ var Text = function Text(_ref2) {
71
+ var parent = _ref2.parent,
72
+ disabled = _ref2.disabled,
73
+ prefixel = _ref2.prefixel,
74
+ suffixel = _ref2.suffixel,
75
+ danger = _ref2.danger,
76
+ children = _ref2.children,
77
+ description = _ref2.description,
78
+ copyable = _ref2.copyable,
79
+ copyHint = _ref2.copyHint,
80
+ copyValue = _ref2.copyValue,
81
+ copyTooltip = _ref2.copyTooltip,
82
+ timeToHideTooltip = _ref2.timeToHideTooltip,
83
+ highlight = _ref2.highlight,
84
+ style = _ref2.style,
85
+ prefixVisibilityTrigger = _ref2.prefixVisibilityTrigger,
86
+ suffixVisibilityTrigger = _ref2.suffixVisibilityTrigger,
87
+ indentLevel = _ref2.indentLevel,
88
+ ordered = _ref2.ordered,
89
+ onClick = _ref2.onClick,
90
+ checked = _ref2.checked,
91
+ tooltipProps = _ref2.tooltipProps,
92
+ hoverTooltipProps = _ref2.hoverTooltipProps,
93
+ renderHoverTooltip = _ref2.renderHoverTooltip,
94
+ _ref2$size = _ref2.size,
95
+ size = _ref2$size === void 0 ? 'default' : _ref2$size,
96
+ onItemHover = _ref2.onItemHover,
97
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
48
98
 
49
99
  var _React$useState = React.useState(false),
50
100
  hovered = _React$useState[0],
@@ -107,58 +157,68 @@ var Text = function Text(_ref) {
107
157
  var className = React.useMemo(function () {
108
158
  return classNames('ds-menu-item', rest.className, size);
109
159
  }, [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
- );
160
+ var element =
161
+ /*#__PURE__*/
162
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
163
+ // @ts-ignore
164
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
165
+ React.createElement(S.Wrapper, _extends({
166
+ onMouseOver: function onMouseOver() {
167
+ setHovered(true);
168
+ },
169
+ onMouseLeave: function onMouseLeave() {
170
+ setHovered(false);
171
+ },
172
+ onMouseDown: function onMouseDown() {
173
+ setClicked(!clicked);
174
+ canCopyToClipboard && copyValue && copy(copyValue);
175
+ },
176
+ disabled: disabled,
177
+ tabIndex: disabled ? -1 : 0,
178
+ description: description,
179
+ style: style,
180
+ indentLevel: Number(indentLevel),
181
+ ordered: ordered,
182
+ size: size,
183
+ onClick: onClick,
184
+ onItemHover: onItemHover
185
+ }, rest, {
186
+ className: className
187
+ }), /*#__PURE__*/React.createElement(Tooltip, _extends({
188
+ type: "default",
189
+ trigger: "click",
190
+ title: copyTooltip,
191
+ timeToHideAfterClick: timeToHideTooltip
192
+ }, tooltipProps), /*#__PURE__*/React.createElement(S.Inner, null, /*#__PURE__*/React.createElement(S.ContentWrapper, {
193
+ className: "ds-menu-content-wrapper"
194
+ }, shouldRenderPrefix && /*#__PURE__*/React.createElement(S.PrefixelWrapper, {
195
+ className: "ds-menu-prefix",
196
+ visible: shouldRenderPrefix,
197
+ disabled: disabled
198
+ }, renderPrefixElement(hovered)), /*#__PURE__*/React.createElement(S.Content, {
199
+ className: "ds-menu-content",
200
+ highlight: !!highlight
201
+ }, canCopyToClipboard && hovered ? copyHint : renderChildren(), !!description && /*#__PURE__*/React.createElement(S.Description, null, description)), parent && /*#__PURE__*/React.createElement(S.ArrowRight, {
202
+ disabled: disabled
203
+ }, /*#__PURE__*/React.createElement(Icon, {
204
+ component: /*#__PURE__*/React.createElement(AngleRightS, null),
205
+ color: theme.palette['grey-600']
206
+ })), /*#__PURE__*/React.createElement(S.ContentDivider, null), (!!suffixElement || !!checked) && /*#__PURE__*/React.createElement(S.SuffixWraper, {
207
+ visible: shouldRenderSuffix,
208
+ disabled: disabled
209
+ }, !!checked && /*#__PURE__*/React.createElement(Icon, {
210
+ component: /*#__PURE__*/React.createElement(CheckS, null),
211
+ color: theme.palette["green-600"]
212
+ }), suffixElement)))));
213
+
214
+ if (renderHoverTooltip) {
215
+ return /*#__PURE__*/React.createElement(WithHoverTooltip, {
216
+ hoverTooltipProps: hoverTooltipProps,
217
+ renderHoverTooltip: renderHoverTooltip
218
+ }, element);
219
+ }
220
+
221
+ return element;
162
222
  };
163
223
 
164
224
  export default Text;
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.0",
3
+ "version": "0.14.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": "7f696cdfd31f36bbeeb750df44b0f6d2010d0c9d"
44
+ "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
45
45
  }