@synerise/ds-menu 1.1.1 → 1.2.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.
- package/CHANGELOG.md +19 -0
- package/dist/Elements/Divider/Divider.styles.js +1 -1
- package/dist/Elements/Item/Text/DynamicLabel.d.ts +6 -0
- package/dist/Elements/Item/Text/DynamicLabel.js +10 -0
- package/dist/Elements/Item/Text/Text.js +51 -21
- package/dist/Elements/Item/Text/Text.styles.d.ts +5 -0
- package/dist/Elements/Item/Text/Text.styles.js +15 -1
- package/dist/Elements/Item/Text/Text.types.d.ts +1 -7
- package/dist/Menu.styles.js +1 -1
- package/dist/Menu.types.d.ts +42 -5
- package/dist/Menu.types.js +5 -0
- package/dist/hooks/useTemporaryLabel.d.ts +4 -0
- package/dist/hooks/useTemporaryLabel.js +18 -0
- package/dist/utils/getCopyConfig.d.ts +8 -0
- package/dist/utils/getCopyConfig.js +19 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.1.2...@synerise/ds-menu@1.2.0) (2025-11-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.1.1...@synerise/ds-menu@1.1.2) (2025-10-22)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @synerise/ds-menu
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.1.0...@synerise/ds-menu@1.1.1) (2025-10-16)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @synerise/ds-menu
|
|
@@ -3,7 +3,7 @@ import DSDivider from '@synerise/ds-divider';
|
|
|
3
3
|
export var MenuDivider = styled(DSDivider).withConfig({
|
|
4
4
|
displayName: "Dividerstyles__MenuDivider",
|
|
5
5
|
componentId: "sc-1gajr0l-0"
|
|
6
|
-
})(["height:1px;width:auto;display:
|
|
6
|
+
})(["height:1px;width:auto;display:flex;margin:", " ", ";"], function (props) {
|
|
7
7
|
return props.higher ? '16px' : '8px';
|
|
8
8
|
}, function (props) {
|
|
9
9
|
return props != null && props.level && (props == null ? void 0 : props.level) > 1 ? '35px' : '12px';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
|
+
export declare const DynamicLabel: ({ content, alternativeContent, showAlternative, }: {
|
|
3
|
+
content: ReactNode;
|
|
4
|
+
alternativeContent: ReactNode;
|
|
5
|
+
showAlternative?: boolean;
|
|
6
|
+
}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import * as S from './Text.styles';
|
|
3
|
+
export var DynamicLabel = function DynamicLabel(_ref) {
|
|
4
|
+
var content = _ref.content,
|
|
5
|
+
alternativeContent = _ref.alternativeContent,
|
|
6
|
+
showAlternative = _ref.showAlternative;
|
|
7
|
+
return alternativeContent ? /*#__PURE__*/React.createElement(S.DynamicLabelWrapper, {
|
|
8
|
+
showAlternative: !!showAlternative
|
|
9
|
+
}, /*#__PURE__*/React.createElement(S.DynamicLabelMain, null, content), /*#__PURE__*/React.createElement(S.DynamicLabelAlternate, null, alternativeContent)) : content;
|
|
10
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "
|
|
1
|
+
var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "copyValue", "copyHint", "copyTooltip", "timeToHideTooltip", "tooltipProps", "highlight", "style", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "indentLevel", "ordered", "onClick", "checked", "hoverTooltipProps", "renderHoverTooltip", "size"];
|
|
2
2
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
3
3
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
4
4
|
import classNames from 'classnames';
|
|
@@ -6,13 +6,14 @@ import copy from 'copy-to-clipboard';
|
|
|
6
6
|
import Trigger from 'rc-trigger';
|
|
7
7
|
import "rc-trigger/assets/index.css";
|
|
8
8
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
9
|
-
import { useTheme } from '
|
|
10
|
-
import { theme } from '@synerise/ds-core';
|
|
9
|
+
import { useDropdown, useTheme } from '@synerise/ds-core';
|
|
11
10
|
import Icon, { AngleRightS, CheckS } from '@synerise/ds-icon';
|
|
12
|
-
import Tooltip from '@synerise/ds-tooltip';
|
|
13
11
|
import { escapeRegEx } from '@synerise/ds-utils';
|
|
14
12
|
import { VisibilityTrigger } from '../../../Menu.types';
|
|
13
|
+
import { useTemporaryLabel } from '../../../hooks/useTemporaryLabel';
|
|
15
14
|
import { triggerPlacements } from '../../../utils';
|
|
15
|
+
import { getCopyConfig } from '../../../utils/getCopyConfig';
|
|
16
|
+
import { DynamicLabel } from './DynamicLabel';
|
|
16
17
|
import * as S from './Text.styles';
|
|
17
18
|
var renderAddon = function renderAddon(addon) {
|
|
18
19
|
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -26,8 +27,8 @@ function WithHoverTooltip(_ref) {
|
|
|
26
27
|
renderHoverTooltip = _ref.renderHoverTooltip,
|
|
27
28
|
children = _ref.children,
|
|
28
29
|
style = _ref.style;
|
|
29
|
-
var
|
|
30
|
-
var zIndex = parseInt(
|
|
30
|
+
var theme = useTheme();
|
|
31
|
+
var zIndex = parseInt(theme.variables['zindex-tooltip'], 10);
|
|
31
32
|
var cancelBubblingEvent = useCallback(function () {
|
|
32
33
|
return function (ev) {
|
|
33
34
|
ev.stopPropagation();
|
|
@@ -62,10 +63,11 @@ var Text = function Text(_ref2) {
|
|
|
62
63
|
children = _ref2.children,
|
|
63
64
|
description = _ref2.description,
|
|
64
65
|
copyable = _ref2.copyable,
|
|
65
|
-
copyHint = _ref2.copyHint,
|
|
66
66
|
copyValue = _ref2.copyValue,
|
|
67
|
+
copyHint = _ref2.copyHint,
|
|
67
68
|
copyTooltip = _ref2.copyTooltip,
|
|
68
69
|
timeToHideTooltip = _ref2.timeToHideTooltip,
|
|
70
|
+
tooltipProps = _ref2.tooltipProps,
|
|
69
71
|
highlight = _ref2.highlight,
|
|
70
72
|
style = _ref2.style,
|
|
71
73
|
prefixVisibilityTrigger = _ref2.prefixVisibilityTrigger,
|
|
@@ -74,28 +76,41 @@ var Text = function Text(_ref2) {
|
|
|
74
76
|
ordered = _ref2.ordered,
|
|
75
77
|
onClick = _ref2.onClick,
|
|
76
78
|
checked = _ref2.checked,
|
|
77
|
-
tooltipProps = _ref2.tooltipProps,
|
|
78
79
|
hoverTooltipProps = _ref2.hoverTooltipProps,
|
|
79
80
|
renderHoverTooltip = _ref2.renderHoverTooltip,
|
|
80
81
|
_ref2$size = _ref2.size,
|
|
81
82
|
size = _ref2$size === void 0 ? 'default' : _ref2$size,
|
|
82
83
|
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
84
|
+
var theme = useTheme();
|
|
85
|
+
var dropdownContext = useDropdown();
|
|
83
86
|
var _useState = useState(false),
|
|
84
87
|
hovered = _useState[0],
|
|
85
88
|
setHovered = _useState[1];
|
|
86
89
|
var _useState2 = useState(false),
|
|
87
90
|
clicked = _useState2[0],
|
|
88
91
|
setClicked = _useState2[1];
|
|
89
|
-
var canCopyToClipboard = copyable && copyHint && copyValue && !disabled;
|
|
90
92
|
var showSuffixOnHover = suffixVisibilityTrigger === VisibilityTrigger.HOVER;
|
|
91
93
|
var showPrefixOnHover = prefixVisibilityTrigger === VisibilityTrigger.HOVER;
|
|
94
|
+
var _getCopyConfig = getCopyConfig({
|
|
95
|
+
copyable: copyable,
|
|
96
|
+
copyValue: copyValue,
|
|
97
|
+
disabled: disabled
|
|
98
|
+
}),
|
|
99
|
+
canCopyToClipboard = _getCopyConfig.enabled,
|
|
100
|
+
valueToCopy = _getCopyConfig.valueToCopy,
|
|
101
|
+
copiedLabel = _getCopyConfig.copiedLabel,
|
|
102
|
+
labelTimerReset = _getCopyConfig.labelTimerReset,
|
|
103
|
+
delayClickEvent = _getCopyConfig.delayClickEvent;
|
|
104
|
+
var _useTemporaryLabel = useTemporaryLabel(labelTimerReset),
|
|
105
|
+
temporaryLabel = _useTemporaryLabel.temporaryLabel,
|
|
106
|
+
setTemporaryLabel = _useTemporaryLabel.setTemporaryLabel;
|
|
92
107
|
var suffixElement = useMemo(function () {
|
|
93
108
|
return renderAddon(suffixel, hovered);
|
|
94
109
|
}, [suffixel, hovered]);
|
|
95
110
|
var prefixElement = useMemo(function () {
|
|
96
111
|
return renderAddon(prefixel, hovered);
|
|
97
112
|
}, [prefixel, hovered]);
|
|
98
|
-
var
|
|
113
|
+
var childrenWithHighlight = useMemo(function () {
|
|
99
114
|
if (highlight && typeof children === 'string') {
|
|
100
115
|
var index = children.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
|
|
101
116
|
if (index === -1) {
|
|
@@ -111,7 +126,7 @@ var Text = function Text(_ref2) {
|
|
|
111
126
|
return resultArray;
|
|
112
127
|
}
|
|
113
128
|
return children;
|
|
114
|
-
};
|
|
129
|
+
}, [children, highlight]);
|
|
115
130
|
var shouldRenderSuffix = useMemo(function () {
|
|
116
131
|
if (showSuffixOnHover) {
|
|
117
132
|
return (!!suffixElement || !!checked) && hovered;
|
|
@@ -133,6 +148,19 @@ var Text = function Text(_ref2) {
|
|
|
133
148
|
var mergedStyle = _extends({}, style, {
|
|
134
149
|
paddingLeft: 'revert-layer'
|
|
135
150
|
});
|
|
151
|
+
var handleClick = function handleClick(itemData) {
|
|
152
|
+
var handler = function handler() {
|
|
153
|
+
onClick == null || onClick(itemData);
|
|
154
|
+
if ((dropdownContext == null ? void 0 : dropdownContext.hideOnItemClick) === true) {
|
|
155
|
+
dropdownContext == null || dropdownContext.setIsOpen(false);
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
if (delayClickEvent) {
|
|
159
|
+
setTimeout(handler, delayClickEvent);
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
handler();
|
|
163
|
+
};
|
|
136
164
|
var element = /*#__PURE__*/React.createElement(S.Wrapper, _extends({
|
|
137
165
|
onMouseOver: function onMouseOver() {
|
|
138
166
|
setHovered(true);
|
|
@@ -142,7 +170,10 @@ var Text = function Text(_ref2) {
|
|
|
142
170
|
},
|
|
143
171
|
onMouseDown: function onMouseDown() {
|
|
144
172
|
setClicked(!clicked);
|
|
145
|
-
canCopyToClipboard &&
|
|
173
|
+
if (canCopyToClipboard && valueToCopy) {
|
|
174
|
+
copy(valueToCopy);
|
|
175
|
+
setTemporaryLabel(true);
|
|
176
|
+
}
|
|
146
177
|
},
|
|
147
178
|
disabled: disabled,
|
|
148
179
|
tabIndex: disabled ? -1 : 0,
|
|
@@ -150,16 +181,11 @@ var Text = function Text(_ref2) {
|
|
|
150
181
|
style: renderHoverTooltip ? undefined : mergedStyle,
|
|
151
182
|
ordered: ordered,
|
|
152
183
|
size: size,
|
|
153
|
-
onClick:
|
|
184
|
+
onClick: handleClick
|
|
154
185
|
}, rest, {
|
|
155
186
|
"data-name": typeof children === 'string' ? children : undefined,
|
|
156
187
|
className: className
|
|
157
|
-
}), /*#__PURE__*/React.createElement(
|
|
158
|
-
type: "default",
|
|
159
|
-
trigger: "click",
|
|
160
|
-
title: copyTooltip,
|
|
161
|
-
timeToHideAfterClick: timeToHideTooltip
|
|
162
|
-
}, tooltipProps), /*#__PURE__*/React.createElement(S.Inner, {
|
|
188
|
+
}), /*#__PURE__*/React.createElement(S.Inner, {
|
|
163
189
|
indentLevel: Number(indentLevel)
|
|
164
190
|
}, /*#__PURE__*/React.createElement(S.ContentWrapper, {
|
|
165
191
|
className: "ds-menu-content-wrapper"
|
|
@@ -170,7 +196,11 @@ var Text = function Text(_ref2) {
|
|
|
170
196
|
}, renderPrefixElement(hovered)), /*#__PURE__*/React.createElement(S.Content, {
|
|
171
197
|
className: "ds-menu-content",
|
|
172
198
|
highlight: !!highlight
|
|
173
|
-
},
|
|
199
|
+
}, /*#__PURE__*/React.createElement(DynamicLabel, {
|
|
200
|
+
content: childrenWithHighlight,
|
|
201
|
+
alternativeContent: canCopyToClipboard ? copiedLabel : undefined,
|
|
202
|
+
showAlternative: temporaryLabel
|
|
203
|
+
}), !!description && /*#__PURE__*/React.createElement(S.Description, null, description)), parent && /*#__PURE__*/React.createElement(S.ArrowRight, {
|
|
174
204
|
disabled: disabled
|
|
175
205
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
176
206
|
component: /*#__PURE__*/React.createElement(AngleRightS, null),
|
|
@@ -181,7 +211,7 @@ var Text = function Text(_ref2) {
|
|
|
181
211
|
}, !!checked && /*#__PURE__*/React.createElement(Icon, {
|
|
182
212
|
component: /*#__PURE__*/React.createElement(CheckS, null),
|
|
183
213
|
color: theme.palette["green-600"]
|
|
184
|
-
}), suffixElement))))
|
|
214
|
+
}), suffixElement))));
|
|
185
215
|
if (renderHoverTooltip) {
|
|
186
216
|
return /*#__PURE__*/React.createElement(WithHoverTooltip, {
|
|
187
217
|
hoverTooltipProps: hoverTooltipProps,
|
|
@@ -31,4 +31,9 @@ export declare const SuffixWraper: import("styled-components").StyledComponent<"
|
|
|
31
31
|
}, never>;
|
|
32
32
|
export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
33
33
|
export declare const ContentDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
34
|
+
export declare const DynamicLabelMain: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
35
|
+
export declare const DynamicLabelAlternate: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
36
|
+
export declare const DynamicLabelWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
37
|
+
showAlternative?: boolean;
|
|
38
|
+
}, never>;
|
|
34
39
|
export {};
|
|
@@ -131,4 +131,18 @@ export var ContentWrapper = styled.div.withConfig({
|
|
|
131
131
|
export var ContentDivider = styled.div.withConfig({
|
|
132
132
|
displayName: "Textstyles__ContentDivider",
|
|
133
133
|
componentId: "sc-dgb761-8"
|
|
134
|
-
})(["flex:1;"]);
|
|
134
|
+
})(["flex:1;"]);
|
|
135
|
+
export var DynamicLabelMain = styled.div.withConfig({
|
|
136
|
+
displayName: "Textstyles__DynamicLabelMain",
|
|
137
|
+
componentId: "sc-dgb761-9"
|
|
138
|
+
})([""]);
|
|
139
|
+
export var DynamicLabelAlternate = styled.div.withConfig({
|
|
140
|
+
displayName: "Textstyles__DynamicLabelAlternate",
|
|
141
|
+
componentId: "sc-dgb761-10"
|
|
142
|
+
})([""]);
|
|
143
|
+
export var DynamicLabelWrapper = styled.div.withConfig({
|
|
144
|
+
displayName: "Textstyles__DynamicLabelWrapper",
|
|
145
|
+
componentId: "sc-dgb761-11"
|
|
146
|
+
})(["", ""], function (props) {
|
|
147
|
+
return props.showAlternative ? css(["", "{height:0;visibility:hidden;}", "{height:auto;visibility:visible;}"], DynamicLabelMain, DynamicLabelAlternate) : css(["", "{height:auto;visibility:visible;}", "{height:0;visibility:hidden;}"], DynamicLabelMain, DynamicLabelAlternate);
|
|
148
|
+
});
|
|
@@ -13,10 +13,6 @@ export type BasicItemProps = {
|
|
|
13
13
|
children?: ReactNode;
|
|
14
14
|
onClick?: MenuProps['onClick'];
|
|
15
15
|
description?: ReactNode;
|
|
16
|
-
copyable?: boolean;
|
|
17
|
-
copyHint?: ReactNode;
|
|
18
|
-
copyValue?: string;
|
|
19
|
-
copyTooltip?: ReactNode;
|
|
20
16
|
highlight?: string;
|
|
21
17
|
style?: CSSProperties;
|
|
22
18
|
suffixVisibilityTrigger?: MenuItemProps['suffixVisibilityTrigger'];
|
|
@@ -26,8 +22,6 @@ export type BasicItemProps = {
|
|
|
26
22
|
key?: string | number;
|
|
27
23
|
checked?: boolean;
|
|
28
24
|
size?: 'default' | 'large';
|
|
29
|
-
timeToHideTooltip?: number;
|
|
30
|
-
tooltipProps?: MenuItemProps['tooltipProps'];
|
|
31
25
|
hoverTooltipProps?: MenuItemProps['hoverTooltipProps'];
|
|
32
26
|
renderHoverTooltip?: MenuItemProps['renderHoverTooltip'];
|
|
33
|
-
}
|
|
27
|
+
} & Pick<MenuItemProps, 'copyHint' | 'copyValue' | 'copyTooltip' | 'copyable' | 'timeToHideTooltip' | 'tooltipProps'>;
|
package/dist/Menu.styles.js
CHANGED
|
@@ -10,7 +10,7 @@ export var AntdMenu = styled(Menu).withConfig({
|
|
|
10
10
|
displayName: "Menustyles__AntdMenu",
|
|
11
11
|
componentId: "sc-10eu0qe-0"
|
|
12
12
|
})(["", " ", " > li{> .ant-menu-submenu-title,> .-submenu-title{padding-left:12px !important;}&:not(.ant-menu-submenu){padding-left:12px !important;}}.ant-menu-submenu-title,.-submenu-title{display:flex;", " .ds-submenu-title-wrapper{", " .ds-submenu-title{padding-top:5px;padding-bottom:5px;", "}}}&&& .ant-menu-item-selected,&&& .-item-selected{&:focus:not(:active){color:", ";background:", ";box-shadow:inset 0 0 0 2px ", ";&::before{color:", ";}}}&&{.ant-menu-submenu-open,.-submenu-open{.ant-menu-inline,.-inline,.ant-menu-vertical,.-vertical,.ant-menu-vertical-left,.-vertical-left{border-right-width:0px;margin:8px 0 8px 0;padding-left:24px;}}}", ""], function (props) {
|
|
13
|
-
return Boolean(props.asDropdownMenu) && !props.asInfoCardContainer && css(["&&{padding:8px;width:
|
|
13
|
+
return Boolean(props.asDropdownMenu) && !props.asInfoCardContainer && css(["&&{padding:8px;width:100%;"]);
|
|
14
14
|
}, function (props) {
|
|
15
15
|
return !!props.ordered && css(["&,ul{counter-reset:custom-counter;li:not(.ds-submenu-title){counter-increment:custom-counter;&::before{content:'0' counter(custom-counter) '. \\a0';line-height:1.39;font-weight:normal;color:", ";}}li.ant-menu-submenu,li.-submenu{&::before{content:'';}}}"], props.theme.palette['grey-500']);
|
|
16
16
|
}, overflowStyles, overflowStyles, overflowStyles, function (props) {
|
package/dist/Menu.types.d.ts
CHANGED
|
@@ -23,6 +23,17 @@ export declare enum VisibilityTrigger {
|
|
|
23
23
|
DEFAULT = "default",
|
|
24
24
|
HOVER = "hover"
|
|
25
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated
|
|
28
|
+
* provide Copyable type instead
|
|
29
|
+
*/
|
|
30
|
+
type CopyableBoolean = boolean;
|
|
31
|
+
export type Copyable = {
|
|
32
|
+
timeToReset?: number;
|
|
33
|
+
copyValue: string;
|
|
34
|
+
copiedLabel?: ReactNode;
|
|
35
|
+
delayClickEvent?: number | false;
|
|
36
|
+
};
|
|
26
37
|
export type SubMenuProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
|
|
27
38
|
key?: string | number;
|
|
28
39
|
danger?: boolean;
|
|
@@ -34,9 +45,19 @@ export type SubMenuProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
|
|
|
34
45
|
description?: ReactNode;
|
|
35
46
|
ordered?: boolean | undefined;
|
|
36
47
|
subMenu?: SubMenuProps[];
|
|
37
|
-
copyable?:
|
|
38
|
-
|
|
48
|
+
copyable?: CopyableBoolean | Copyable;
|
|
49
|
+
/**
|
|
50
|
+
* @deprecated. Provide copyable: Copyable instead
|
|
51
|
+
*/
|
|
39
52
|
copyValue?: string;
|
|
53
|
+
/**
|
|
54
|
+
* @deprecated - there's no hint on hover anymore
|
|
55
|
+
*/
|
|
56
|
+
copyHint?: ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* @deprecated - there's no tooltip after copying anymore
|
|
59
|
+
*/
|
|
60
|
+
copyTooltip?: ReactNode;
|
|
40
61
|
childrenCollapsed?: boolean;
|
|
41
62
|
onTitleClick?: () => void;
|
|
42
63
|
checked?: boolean;
|
|
@@ -72,11 +93,27 @@ export type MenuItemProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
|
|
|
72
93
|
ordered?: boolean | undefined;
|
|
73
94
|
description?: ReactNode;
|
|
74
95
|
subMenu?: SubMenuProps[];
|
|
75
|
-
copyable?:
|
|
76
|
-
|
|
96
|
+
copyable?: CopyableBoolean | Copyable;
|
|
97
|
+
/**
|
|
98
|
+
* @deprecated. Provide copyable: Copyable instead
|
|
99
|
+
*/
|
|
77
100
|
copyValue?: string;
|
|
101
|
+
/**
|
|
102
|
+
* @deprecated - there's no hint on hover anymore
|
|
103
|
+
*/
|
|
104
|
+
copyHint?: ReactNode;
|
|
105
|
+
/**
|
|
106
|
+
* @deprecated - there's no tooltip after copying anymore
|
|
107
|
+
*/
|
|
78
108
|
copyTooltip?: ReactNode;
|
|
109
|
+
/**
|
|
110
|
+
* @deprecated - there's no tooltip after copying anymore
|
|
111
|
+
*/
|
|
79
112
|
timeToHideTooltip?: number;
|
|
113
|
+
/**
|
|
114
|
+
* @deprecated - there's no tooltip after copying anymore
|
|
115
|
+
*/
|
|
116
|
+
tooltipProps?: TooltipProps;
|
|
80
117
|
highlight?: string;
|
|
81
118
|
suffixVisibilityTrigger?: VisibilityTrigger | string;
|
|
82
119
|
prefixVisibilityTrigger?: VisibilityTrigger | string;
|
|
@@ -86,9 +123,9 @@ export type MenuItemProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
|
|
|
86
123
|
menuItemKey?: string | number;
|
|
87
124
|
checked?: boolean;
|
|
88
125
|
size?: 'default' | 'large';
|
|
89
|
-
tooltipProps?: TooltipProps;
|
|
90
126
|
hoverTooltipProps?: TriggerProps & {
|
|
91
127
|
ref?: LegacyRef<TriggerHandle>;
|
|
92
128
|
};
|
|
93
129
|
renderHoverTooltip?: () => JSX.Element;
|
|
94
130
|
};
|
|
131
|
+
export {};
|
package/dist/Menu.types.js
CHANGED
|
@@ -3,6 +3,11 @@ export var VisibilityTrigger = /*#__PURE__*/function (VisibilityTrigger) {
|
|
|
3
3
|
VisibilityTrigger["HOVER"] = "hover";
|
|
4
4
|
return VisibilityTrigger;
|
|
5
5
|
}({});
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated
|
|
8
|
+
* provide Copyable type instead
|
|
9
|
+
*/
|
|
10
|
+
|
|
6
11
|
export var ItemType = /*#__PURE__*/function (ItemType) {
|
|
7
12
|
ItemType["DEFAULT"] = "default";
|
|
8
13
|
ItemType["SELECT"] = "select";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
export var useTemporaryLabel = function useTemporaryLabel(duration) {
|
|
3
|
+
var _useState = useState(false),
|
|
4
|
+
temporaryLabel = _useState[0],
|
|
5
|
+
setTemporaryLabel = _useState[1];
|
|
6
|
+
useEffect(function () {
|
|
7
|
+
var timer = setTimeout(function () {
|
|
8
|
+
return setTemporaryLabel(false);
|
|
9
|
+
}, duration);
|
|
10
|
+
return function () {
|
|
11
|
+
clearTimeout(timer);
|
|
12
|
+
};
|
|
13
|
+
});
|
|
14
|
+
return {
|
|
15
|
+
temporaryLabel: temporaryLabel,
|
|
16
|
+
setTemporaryLabel: setTemporaryLabel
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type MenuItemProps } from '../Menu.types';
|
|
2
|
+
export declare const getCopyConfig: ({ copyable, copyValue, disabled, }: Pick<MenuItemProps, "copyValue" | "copyable" | "disabled">) => {
|
|
3
|
+
delayClickEvent: number | false;
|
|
4
|
+
enabled: boolean | "" | undefined;
|
|
5
|
+
valueToCopy: string | undefined;
|
|
6
|
+
copiedLabel: import("react").ReactNode;
|
|
7
|
+
labelTimerReset: number;
|
|
8
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export var getCopyConfig = function getCopyConfig(_ref) {
|
|
2
|
+
var copyable = _ref.copyable,
|
|
3
|
+
copyValue = _ref.copyValue,
|
|
4
|
+
disabled = _ref.disabled;
|
|
5
|
+
var DEFAULT_RESET_TIMER = 1000;
|
|
6
|
+
var DELAY_CLICK_AFTER_COPY_DURATION = 700;
|
|
7
|
+
var enabled = copyable && (copyValue || typeof copyable === 'object' && copyable.copyValue) && !disabled;
|
|
8
|
+
var valueToCopy = typeof copyable === 'object' ? copyable.copyValue : copyValue;
|
|
9
|
+
var copiedLabel = typeof copyable === 'object' ? copyable.copiedLabel : null;
|
|
10
|
+
var labelTimerReset = typeof copyable === 'object' && copyable.timeToReset || DEFAULT_RESET_TIMER;
|
|
11
|
+
var delayClickEvent = typeof copyable === 'object' && copyable.delayClickEvent !== undefined ? copyable.delayClickEvent : copyable ? DELAY_CLICK_AFTER_COPY_DURATION : false;
|
|
12
|
+
return {
|
|
13
|
+
delayClickEvent: delayClickEvent,
|
|
14
|
+
enabled: enabled,
|
|
15
|
+
valueToCopy: valueToCopy,
|
|
16
|
+
copiedLabel: copiedLabel,
|
|
17
|
+
labelTimerReset: labelTimerReset
|
|
18
|
+
};
|
|
19
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-menu",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Menu UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.
|
|
39
|
-
"@synerise/ds-divider": "^1.2.
|
|
40
|
-
"@synerise/ds-icon": "^1.
|
|
41
|
-
"@synerise/ds-tooltip": "^1.
|
|
38
|
+
"@synerise/ds-button": "^1.5.0",
|
|
39
|
+
"@synerise/ds-divider": "^1.2.1",
|
|
40
|
+
"@synerise/ds-icon": "^1.8.0",
|
|
41
|
+
"@synerise/ds-tooltip": "^1.3.0",
|
|
42
42
|
"@synerise/ds-utils": "^1.5.0",
|
|
43
43
|
"classnames": "^2.5.1",
|
|
44
44
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"react": ">=16.9.0 <= 18.3.1",
|
|
53
53
|
"styled-components": "^5.3.3"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
|
|
56
56
|
}
|