@carbon/ibm-products 2.31.0 → 2.32.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. package/css/index-full-carbon.css +802 -517
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +48 -75
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +802 -517
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +731 -458
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +6 -3
  18. package/es/components/Decorator/Decorator.d.ts +1 -1
  19. package/es/components/Decorator/Decorator.js +16 -253
  20. package/es/components/DecoratorBase/DecoratorBase.d.ts +7 -0
  21. package/es/components/DecoratorBase/DecoratorBase.js +233 -0
  22. package/es/components/DecoratorBase/index.d.ts +1 -0
  23. package/{lib/components/Decorator → es/components/DecoratorBase}/utils.d.ts +1 -1
  24. package/es/components/{Decorator → DecoratorBase}/utils.js +19 -19
  25. package/es/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
  26. package/es/components/DecoratorDualButton/DecoratorDualButton.js +135 -0
  27. package/es/components/DecoratorDualButton/index.d.ts +1 -0
  28. package/es/components/DecoratorLink/DecoratorLink.d.ts +5 -0
  29. package/es/components/DecoratorLink/DecoratorLink.js +125 -0
  30. package/es/components/DecoratorLink/index.d.ts +1 -0
  31. package/es/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
  32. package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +125 -0
  33. package/es/components/DecoratorSingleButton/index.d.ts +1 -0
  34. package/es/components/index.d.ts +3 -0
  35. package/es/global/js/hooks/useFocus.js +2 -1
  36. package/es/global/js/package-settings.d.ts +3 -0
  37. package/es/global/js/package-settings.js +3 -0
  38. package/es/index.js +3 -0
  39. package/es/settings.d.ts +3 -0
  40. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +6 -3
  41. package/lib/components/Decorator/Decorator.d.ts +1 -1
  42. package/lib/components/Decorator/Decorator.js +15 -253
  43. package/lib/components/DecoratorBase/DecoratorBase.d.ts +7 -0
  44. package/lib/components/DecoratorBase/DecoratorBase.js +242 -0
  45. package/lib/components/DecoratorBase/index.d.ts +1 -0
  46. package/{es/components/Decorator → lib/components/DecoratorBase}/utils.d.ts +1 -1
  47. package/lib/components/{Decorator → DecoratorBase}/utils.js +19 -19
  48. package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
  49. package/lib/components/DecoratorDualButton/DecoratorDualButton.js +141 -0
  50. package/lib/components/DecoratorDualButton/index.d.ts +1 -0
  51. package/lib/components/DecoratorLink/DecoratorLink.d.ts +5 -0
  52. package/lib/components/DecoratorLink/DecoratorLink.js +131 -0
  53. package/lib/components/DecoratorLink/index.d.ts +1 -0
  54. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
  55. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +131 -0
  56. package/lib/components/DecoratorSingleButton/index.d.ts +1 -0
  57. package/lib/components/index.d.ts +3 -0
  58. package/lib/global/js/hooks/useFocus.js +2 -1
  59. package/lib/global/js/package-settings.d.ts +3 -0
  60. package/lib/global/js/package-settings.js +3 -0
  61. package/lib/index.js +15 -0
  62. package/lib/settings.d.ts +3 -0
  63. package/package.json +9 -9
  64. package/scss/components/Card/_card.scss +2 -2
  65. package/scss/components/Decorator/_decorator.scss +3 -380
  66. package/scss/components/DecoratorBase/_carbon-imports.scss +9 -0
  67. package/scss/components/DecoratorBase/_decorator-base-mixins.scss +41 -0
  68. package/scss/components/DecoratorBase/_decorator-base.scss +146 -0
  69. package/scss/components/DecoratorBase/_index-with-carbon.scss +9 -0
  70. package/scss/components/DecoratorBase/_index.scss +8 -0
  71. package/scss/components/DecoratorDualButton/_carbon-imports.scss +9 -0
  72. package/scss/components/DecoratorDualButton/_decorator-dual-button.scss +112 -0
  73. package/scss/components/DecoratorDualButton/_index-with-carbon.scss +9 -0
  74. package/scss/components/DecoratorDualButton/_index.scss +8 -0
  75. package/scss/components/DecoratorLink/_carbon-imports.scss +9 -0
  76. package/scss/components/DecoratorLink/_decorator-link.scss +53 -0
  77. package/scss/components/DecoratorLink/_index-with-carbon.scss +9 -0
  78. package/scss/components/DecoratorLink/_index.scss +8 -0
  79. package/scss/components/DecoratorSingleButton/_carbon-imports.scss +9 -0
  80. package/scss/components/DecoratorSingleButton/_decorator-single-button.scss +117 -0
  81. package/scss/components/DecoratorSingleButton/_index-with-carbon.scss +9 -0
  82. package/scss/components/DecoratorSingleButton/_index.scss +8 -0
  83. package/scss/components/SidePanel/_side-panel.scss +1 -1
  84. package/scss/components/Tearsheet/_tearsheet.scss +1 -1
  85. package/scss/components/_index-with-carbon.scss +3 -0
  86. package/scss/components/_index.scss +3 -0
  87. /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
  88. /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
  89. /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
  90. /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
@@ -96,9 +96,12 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
96
96
  }, [columnObjects]);
97
97
  var string = searchText.trim().toLowerCase();
98
98
  useEffect(function () {
99
- setVisibleColumnsCount(getVisibleColumnsCount());
100
- setTotalColumns(columnObjects.length);
101
- }, [getVisibleColumnsCount, columnObjects.length]);
99
+ var notFilterableCount = columnObjects.filter(function (col) {
100
+ return !col.canFilter;
101
+ });
102
+ setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount.length);
103
+ setTotalColumns(columnObjects.length - notFilterableCount.length);
104
+ }, [getVisibleColumnsCount, columnObjects]);
102
105
  return /*#__PURE__*/React__default.createElement(TearsheetNarrow, {
103
106
  className: "".concat(blockClass, "__customize-columns-tearsheet"),
104
107
  open: isOpen,
@@ -1,5 +1,5 @@
1
1
  /**
2
- * The Decorator groups a key/value pair to look and behave like a single UI element.
2
+ * The Decorator groups a key/value pair as a single element. This component is not interactive.
3
3
  */
4
4
  export let Decorator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
5
  import React from 'react';
@@ -5,200 +5,26 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
8
+ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import React__default from 'react';
10
10
  import PropTypes from '../../node_modules/prop-types/index.js';
11
- import cx from 'classnames';
12
11
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
12
+ import { prepareProps } from '../../global/js/utils/props-helper.js';
13
13
  import { pkg } from '../../settings.js';
14
- import { getMagnitude, truncate } from './utils.js';
15
- import { DecoratorIcon } from './DecoratorIcon.js';
14
+ import { DecoratorBase } from '../DecoratorBase/DecoratorBase.js';
16
15
 
17
- var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
18
- var blockClass = "".concat(pkg.prefix, "--decorator");
19
16
  var componentName = 'Decorator';
20
- var defaults = {
21
- kind: 'default',
22
- onClick: function onClick() {},
23
- onClickLabel: function onClickLabel() {},
24
- onClickValue: function onClickValue() {},
25
- onContextMenu: function onContextMenu() {},
26
- onContextMenuLabel: function onContextMenuLabel() {},
27
- onContextMenuValue: function onContextMenuValue() {},
28
- scoreThresholds: [0, 4, 7, 10],
29
- theme: 'light'
30
- };
31
17
 
32
18
  /**
33
- * The Decorator groups a key/value pair to look and behave like a single UI element.
19
+ * The Decorator groups a key/value pair as a single element. This component is not interactive.
34
20
  */
35
- var Decorator = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
36
- var className = _ref.className,
37
- disabled = _ref.disabled,
38
- hideIcon = _ref.hideIcon,
39
- href = _ref.href,
40
- _ref$kind = _ref.kind,
41
- kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
42
- label = _ref.label,
43
- setLabelTitle = _ref.setLabelTitle,
44
- _ref$onClick = _ref.onClick,
45
- onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
46
- _ref$onClickLabel = _ref.onClickLabel,
47
- onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
48
- _ref$onClickValue = _ref.onClickValue,
49
- onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
50
- _ref$onContextMenu = _ref.onContextMenu,
51
- onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
52
- _ref$onContextMenuLab = _ref.onContextMenuLabel,
53
- onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
54
- _ref$onContextMenuVal = _ref.onContextMenuValue,
55
- onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
56
- score = _ref.score,
57
- _ref$scoreThresholds = _ref.scoreThresholds,
58
- scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
59
- small = _ref.small,
60
- _ref$theme = _ref.theme,
61
- theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
62
- truncateValue = _ref.truncateValue,
63
- value = _ref.value,
64
- valueTitle = _ref.valueTitle,
65
- rest = _objectWithoutProperties(_ref, _excluded);
66
- var magnitude = getMagnitude(score, scoreThresholds);
67
- var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
68
- var _value = truncate(value, truncateValue);
69
-
70
- // These class names apply to all types of Decorator.
71
- var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
72
-
73
- // These properties apply to all <DecoratorIcons>.
74
- var decoratorIconsProps = {
75
- className: "".concat(blockClass, "__icon"),
76
- magnitude: magnitude.toLowerCase(),
77
- // e.g. "Medium" -> "medium"
78
- small: small
79
- };
80
-
81
- // Optional callback functions if `kind` is "link" or "single-button".
82
- var handleOnClick = function handleOnClick(event) {
83
- onClick(event, {
84
- score: score,
85
- label: label,
86
- value: value,
87
- magnitude: magnitude
88
- });
89
- };
90
- var handleOnContextMenu = function handleOnContextMenu(event) {
91
- onContextMenu(event, {
92
- score: score,
93
- label: label,
94
- value: value,
95
- magnitude: magnitude
96
- });
97
- };
98
-
99
- // RETURN DUAL BUTTONS
100
- if (kind === 'dual-button') {
101
- // Optional callback functions if `kind` is "dual-button" only.
102
- var handleOnClickLabel = function handleOnClickLabel(event) {
103
- onClickLabel(event, {
104
- score: score,
105
- label: label,
106
- value: value,
107
- magnitude: magnitude
108
- });
109
- };
110
- var handleOnClickValue = function handleOnClickValue(event) {
111
- onClickValue(event, {
112
- score: score,
113
- label: label,
114
- value: value,
115
- magnitude: magnitude
116
- });
117
- };
118
- var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
119
- onContextMenuLabel(event, {
120
- score: score,
121
- label: label,
122
- value: value,
123
- magnitude: magnitude
124
- });
125
- };
126
- var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
127
- onContextMenuValue(event, {
128
- score: score,
129
- label: label,
130
- value: value,
131
- magnitude: magnitude
132
- });
133
- };
134
- return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, getDevtoolsProps(componentName), {
135
- className: cx(classNames, "".concat(blockClass, "--buttons"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
136
- ref: ref
137
- }), /*#__PURE__*/React__default.createElement("button", {
138
- className: "".concat(blockClass, "__label"),
139
- disabled: disabled,
140
- onClick: !disabled && handleOnClickLabel,
141
- onContextMenu: !disabled && handleOnContextMenuLabel,
142
- title: _labelTitle || label,
143
- type: "button"
144
- }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("button", {
145
- className: "".concat(blockClass, "__value"),
146
- disabled: disabled,
147
- onClick: !disabled && handleOnClickValue,
148
- onContextMenu: !disabled && handleOnContextMenuValue,
149
- title: valueTitle || value,
150
- type: "button"
151
- }, _value));
152
- }
153
-
154
- // RETURN SINGLE BUTTON
155
- if (kind === 'single-button') {
156
- return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, getDevtoolsProps(componentName), {
157
- className: cx(classNames, "".concat(blockClass, "--button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
158
- disabled: disabled,
159
- onClick: !disabled && handleOnClick,
160
- onContextMenu: !disabled && handleOnContextMenu,
161
- ref: ref,
162
- type: "button"
163
- }), /*#__PURE__*/React__default.createElement("span", {
164
- className: "".concat(blockClass, "__label"),
165
- title: _labelTitle || label
166
- }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
167
- className: "".concat(blockClass, "__value"),
168
- title: valueTitle || value
169
- }, _value));
170
- }
171
-
172
- // RETURN LINK
173
- if (kind === 'link') {
174
- return /*#__PURE__*/React__default.createElement("a", _extends({}, rest, getDevtoolsProps(componentName), {
175
- href: href,
176
- className: cx(classNames, "".concat(blockClass, "--link")),
177
- onClick: handleOnClick,
178
- onContextMenu: handleOnContextMenu,
179
- ref: ref
180
- }), /*#__PURE__*/React__default.createElement("span", {
181
- className: "".concat(blockClass, "__label"),
182
- title: _labelTitle || label
183
- }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
184
- className: "".concat(blockClass, "__value"),
185
- title: valueTitle || value
186
- }, _value));
187
- }
188
-
189
- // RETURN DEFAULT (NON-INTERACTIVE)
190
- if (kind === 'default') {
191
- return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, getDevtoolsProps(componentName), {
192
- className: cx(classNames, "".concat(blockClass, "--default")),
193
- ref: ref
194
- }), /*#__PURE__*/React__default.createElement("span", {
195
- className: "".concat(blockClass, "__label"),
196
- title: _labelTitle || label
197
- }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
198
- className: "".concat(blockClass, "__value"),
199
- title: valueTitle || value
200
- }, _value));
201
- }
21
+ var Decorator = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
22
+ var validProps = prepareProps(props, ['disabled', 'kind', 'onClick', 'onClickLabel', 'onClickValue', 'onContextMenu', 'onContextMenuLabel', 'onContextMenuValue']);
23
+ return /*#__PURE__*/React__default.createElement(DecoratorBase, _extends({
24
+ ref: ref
25
+ }, validProps, {
26
+ kind: "default"
27
+ }, getDevtoolsProps(componentName)));
202
28
  });
203
29
 
204
30
  // Return a placeholder if not released and not enabled by feature flag
@@ -216,70 +42,14 @@ Decorator.propTypes = {
216
42
  * Provide an optional class to be applied to the containing node.
217
43
  */
218
44
  className: PropTypes.string,
219
- /**
220
- * `disabled` only applies if `kind` is "single-button" or "dual-button".
221
- */
222
- disabled: PropTypes.bool,
223
45
  /**
224
46
  * Do not show the icon, regardless of score.
225
47
  */
226
48
  hideIcon: PropTypes.bool,
227
- /**
228
- * `href` is req'd if `kind` is "link".
229
- *
230
- * These two properties together will render the `label` and `value` as a single anchor tag.
231
- */
232
- href: PropTypes.string,
233
- /**
234
- * If `kind` is "dual-button" then refer to the `onClickLabel`, `onClickValue`, `onContextMenuLabel`, and `onContextMenuValue` callback functions.
235
- *
236
- * If `kind` is "single-button" then refer to the `onClick` and `onContextMenu` callback functions.
237
- *
238
- * If `kind` is "link" then also populate `href`.
239
- *
240
- * `kind's` default value is "default" and has no other requirements.
241
- */
242
- kind: PropTypes.oneOf(['default', 'link', 'single-button', 'dual-button']),
243
49
  /**
244
50
  * The label for the data.
245
51
  */
246
52
  label: PropTypes.string,
247
- /**
248
- * Optional callback function if `kind` is "link" or "single-button".
249
- *
250
- * Returns two objects: `event` and `{ score, label, value, magnitude }`
251
- */
252
- onClick: PropTypes.func,
253
- /**
254
- * Optional callback functions if `kind` is "dual-button" only.
255
- *
256
- * Returns two objects: `event` and `{ score, label, value, magnitude }`
257
- */
258
- onClickLabel: PropTypes.func,
259
- /**
260
- * Optional callback functions if `kind` is "dual-button" only.
261
- *
262
- * Returns two objects: `event` and `{ score, label, value, magnitude }`
263
- */
264
- onClickValue: PropTypes.func,
265
- /**
266
- * Optional callback function if `kind` is "link" or "single-button".
267
- *
268
- * Returns two objects: `event` and `{ score, label, value, magnitude }`
269
- */
270
- onContextMenu: PropTypes.func,
271
- /**
272
- * Optional callback functions if `kind` is "dual-button" only.
273
- *
274
- * Returns two objects: `event` and `{ score, label, value, magnitude }`
275
- */
276
- onContextMenuLabel: PropTypes.func,
277
- /**
278
- * Optional callback functions if `kind` is "dual-button" only.
279
- *
280
- * Returns two objects: `event` and `{ score, label, value, magnitude }`
281
- */
282
- onContextMenuValue: PropTypes.func,
283
53
  /**
284
54
  * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
285
55
  *
@@ -301,13 +71,13 @@ Decorator.propTypes = {
301
71
  */
302
72
  scoreThresholds: PropTypes.arrayOf(PropTypes.number),
303
73
  /**
304
- * Callback function for building the label's descriptive text for screen readers.
74
+ * Optional callback function for building a more detailed descriptive text.
75
+ * Returns `score`, `scoreThresholds`, `magnitude`.
305
76
  *
306
- * The default description is in the form of `"(magnitude)" magnitude: score X out of Y"`.
307
- * E.g. `"Medium" magnitude: score 5 out of 10`.
77
+ * Typical description is in the form of
78
+ * '"(magnitude)" magnitude: score (score) out of (last element of scoreThresholds array)'.
308
79
  *
309
- * Where `magnitude` is the label associated with the specific score,
310
- * X is the `score`, and Y is the last element of the `setLabelTitle` array.
80
+ * E.g. `"Medium" magnitude: score 5 out of 10`.
311
81
  *
312
82
  * If not defined, the title will default to the `label` prop.
313
83
  */
@@ -322,13 +92,6 @@ Decorator.propTypes = {
322
92
  theme: PropTypes.oneOf(['light', 'dark']),
323
93
  /**
324
94
  * If not defined, it will behave as `display:inline-block`.
325
- *
326
- * If `end` it will append "..." to the `value` if there is not enough space.
327
- *
328
- * If `start` it will prepend "..." to the `value` if there is not enough space.
329
- *
330
- * If `{maxLength, front, back}` it will inject "..." in the middle
331
- * of the `value` regardless of available space.
332
95
  */
333
96
  truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
334
97
  maxLength: PropTypes.number,
@@ -0,0 +1,7 @@
1
+ /**
2
+ * The DecoratorBase groups a key/value pair to look and behave like a single UI element.
3
+ *
4
+ * DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
5
+ */
6
+ export let DecoratorBase: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
+ import React from 'react';
@@ -0,0 +1,233 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import React__default from 'react';
10
+ import PropTypes from '../../node_modules/prop-types/index.js';
11
+ import cx from 'classnames';
12
+ import { pkg } from '../../settings.js';
13
+ import { getMagnitude, truncate } from './utils.js';
14
+ import { DecoratorIcon } from './DecoratorIcon.js';
15
+
16
+ var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
17
+ var blockClass = "".concat(pkg.prefix, "--decorator");
18
+ var componentName = 'DecoratorBase';
19
+ var defaults = {
20
+ onClick: function onClick() {},
21
+ onClickLabel: function onClickLabel() {},
22
+ onClickValue: function onClickValue() {},
23
+ onContextMenu: function onContextMenu() {},
24
+ onContextMenuLabel: function onContextMenuLabel() {},
25
+ onContextMenuValue: function onContextMenuValue() {},
26
+ scoreThresholds: [0, 4, 7, 10],
27
+ theme: 'light'
28
+ };
29
+
30
+ /**
31
+ * The DecoratorBase groups a key/value pair to look and behave like a single UI element.
32
+ *
33
+ * DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
34
+ */
35
+ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
36
+ var className = _ref.className,
37
+ disabled = _ref.disabled,
38
+ hideIcon = _ref.hideIcon,
39
+ href = _ref.href,
40
+ kind = _ref.kind,
41
+ label = _ref.label,
42
+ setLabelTitle = _ref.setLabelTitle,
43
+ _ref$onClick = _ref.onClick,
44
+ onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
45
+ _ref$onClickLabel = _ref.onClickLabel,
46
+ onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
47
+ _ref$onClickValue = _ref.onClickValue,
48
+ onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
49
+ _ref$onContextMenu = _ref.onContextMenu,
50
+ onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
51
+ _ref$onContextMenuLab = _ref.onContextMenuLabel,
52
+ onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
53
+ _ref$onContextMenuVal = _ref.onContextMenuValue,
54
+ onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
55
+ score = _ref.score,
56
+ _ref$scoreThresholds = _ref.scoreThresholds,
57
+ scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
58
+ small = _ref.small,
59
+ _ref$theme = _ref.theme,
60
+ theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
61
+ truncateValue = _ref.truncateValue,
62
+ value = _ref.value,
63
+ valueTitle = _ref.valueTitle,
64
+ rest = _objectWithoutProperties(_ref, _excluded);
65
+ var magnitude = getMagnitude(score, scoreThresholds);
66
+ var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
67
+ var _value = truncate(value, truncateValue);
68
+
69
+ // These class names apply to all types of DecoratorBase.
70
+ var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
71
+
72
+ // These properties apply to all <DecoratorIcons>.
73
+ var decoratorIconsProps = {
74
+ className: "".concat(blockClass, "__icon"),
75
+ magnitude: magnitude.toLowerCase(),
76
+ // e.g. "Medium" -> "medium"
77
+ small: small
78
+ };
79
+
80
+ // Optional callback functions specific to "link" or "single-button".
81
+ var handleOnClick = function handleOnClick(event) {
82
+ onClick(event, {
83
+ score: score,
84
+ label: label,
85
+ value: value,
86
+ magnitude: magnitude
87
+ });
88
+ };
89
+ var handleOnContextMenu = function handleOnContextMenu(event) {
90
+ onContextMenu(event, {
91
+ score: score,
92
+ label: label,
93
+ value: value,
94
+ magnitude: magnitude
95
+ });
96
+ };
97
+
98
+ // RETURN DUAL BUTTONS
99
+ if (kind === 'dual-button') {
100
+ // Optional callback functions specific to "dual-button".
101
+ var handleOnClickLabel = function handleOnClickLabel(event) {
102
+ onClickLabel(event, {
103
+ score: score,
104
+ label: label,
105
+ value: value,
106
+ magnitude: magnitude
107
+ });
108
+ };
109
+ var handleOnClickValue = function handleOnClickValue(event) {
110
+ onClickValue(event, {
111
+ score: score,
112
+ label: label,
113
+ value: value,
114
+ magnitude: magnitude
115
+ });
116
+ };
117
+ var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
118
+ onContextMenuLabel(event, {
119
+ score: score,
120
+ label: label,
121
+ value: value,
122
+ magnitude: magnitude
123
+ });
124
+ };
125
+ var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
126
+ onContextMenuValue(event, {
127
+ score: score,
128
+ label: label,
129
+ value: value,
130
+ magnitude: magnitude
131
+ });
132
+ };
133
+ return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
134
+ className: cx(classNames, "".concat(blockClass, "--dual-button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
135
+ ref: ref
136
+ }), /*#__PURE__*/React__default.createElement("button", {
137
+ className: "".concat(blockClass, "__label"),
138
+ disabled: disabled,
139
+ onClick: !disabled && handleOnClickLabel,
140
+ onContextMenu: !disabled && handleOnContextMenuLabel,
141
+ title: _labelTitle || label,
142
+ type: "button"
143
+ }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("button", {
144
+ className: "".concat(blockClass, "__value"),
145
+ disabled: disabled,
146
+ onClick: !disabled && handleOnClickValue,
147
+ onContextMenu: !disabled && handleOnContextMenuValue,
148
+ title: valueTitle || value,
149
+ type: "button"
150
+ }, _value));
151
+ }
152
+
153
+ // RETURN SINGLE BUTTON
154
+ if (kind === 'single-button') {
155
+ return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
156
+ className: cx(classNames, "".concat(blockClass, "--single-button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
157
+ disabled: disabled,
158
+ onClick: !disabled && handleOnClick,
159
+ onContextMenu: !disabled && handleOnContextMenu,
160
+ ref: ref,
161
+ type: "button"
162
+ }), /*#__PURE__*/React__default.createElement("span", {
163
+ className: "".concat(blockClass, "__label"),
164
+ title: _labelTitle || label
165
+ }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
166
+ className: "".concat(blockClass, "__value"),
167
+ title: valueTitle || value
168
+ }, _value));
169
+ }
170
+
171
+ // RETURN LINK
172
+ if (kind === 'link') {
173
+ return /*#__PURE__*/React__default.createElement("a", _extends({}, rest, {
174
+ href: href,
175
+ className: cx(classNames, "".concat(blockClass, "--link")),
176
+ onClick: handleOnClick,
177
+ onContextMenu: handleOnContextMenu,
178
+ ref: ref
179
+ }), /*#__PURE__*/React__default.createElement("span", {
180
+ className: "".concat(blockClass, "__label"),
181
+ title: _labelTitle || label
182
+ }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
183
+ className: "".concat(blockClass, "__value"),
184
+ title: valueTitle || value
185
+ }, _value));
186
+ }
187
+
188
+ // RETURN DEFAULT (NON-INTERACTIVE)
189
+ return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
190
+ className: cx(classNames, "".concat(blockClass, "--default")),
191
+ ref: ref
192
+ }), /*#__PURE__*/React__default.createElement("span", {
193
+ className: "".concat(blockClass, "__label"),
194
+ title: _labelTitle || label
195
+ }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
196
+ className: "".concat(blockClass, "__value"),
197
+ title: valueTitle || value
198
+ }, _value));
199
+ });
200
+ DecoratorBase.displayName = componentName;
201
+
202
+ // See the other Decorator types for detailed, context-specific comments.
203
+ DecoratorBase.propTypes = {
204
+ className: PropTypes.string,
205
+ disabled: PropTypes.bool,
206
+ hideIcon: PropTypes.bool,
207
+ href: PropTypes.string,
208
+ /**
209
+ * `kind` differentiates between each type of Decorator, and is for internal use only.
210
+ */
211
+ kind: PropTypes.oneOf(['default', 'link', 'single-button', 'dual-button']),
212
+ label: PropTypes.string,
213
+ onClick: PropTypes.func,
214
+ onClickLabel: PropTypes.func,
215
+ onClickValue: PropTypes.func,
216
+ onContextMenu: PropTypes.func,
217
+ onContextMenuLabel: PropTypes.func,
218
+ onContextMenuValue: PropTypes.func,
219
+ score: PropTypes.number,
220
+ scoreThresholds: PropTypes.arrayOf(PropTypes.number),
221
+ setLabelTitle: PropTypes.func,
222
+ small: PropTypes.bool,
223
+ theme: PropTypes.oneOf(['light', 'dark']),
224
+ truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
225
+ maxLength: PropTypes.number,
226
+ front: PropTypes.number,
227
+ back: PropTypes.number
228
+ })]),
229
+ value: PropTypes.string.isRequired,
230
+ valueTitle: PropTypes.string
231
+ };
232
+
233
+ export { DecoratorBase };
@@ -0,0 +1 @@
1
+ export { DecoratorBase } from "./DecoratorBase";
@@ -5,4 +5,4 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  export function getMagnitude(score: any, thresholds: any): "Medium" | "Unknown" | "Benign" | "Low" | "High" | "Critical";
8
- export function truncate(inputText: any, truncateValue?: {}): any;
8
+ export function truncate(inputText: any, truncateValue: any): any;
@@ -6,31 +6,31 @@
6
6
  */
7
7
 
8
8
  var getMagnitude = function getMagnitude(score, thresholds) {
9
- if (typeof score === 'number') {
10
- if (score <= thresholds[0]) {
11
- return 'Benign';
12
- }
13
- if (score < thresholds[1]) {
14
- return 'Low';
15
- }
16
- if (score < thresholds[2]) {
17
- return 'Medium';
18
- }
19
- if (score < thresholds[3]) {
20
- return 'High';
21
- }
22
- if (score >= thresholds[3]) {
23
- return 'Critical';
24
- }
9
+ if (typeof score !== 'number') {
10
+ return 'Unknown';
25
11
  }
26
- return 'Unknown';
12
+ if (score <= thresholds[0]) {
13
+ return 'Benign';
14
+ }
15
+ if (score < thresholds[1]) {
16
+ return 'Low';
17
+ }
18
+ if (score < thresholds[2]) {
19
+ return 'Medium';
20
+ }
21
+ if (score < thresholds[3]) {
22
+ return 'High';
23
+ }
24
+ return 'Critical';
27
25
  };
28
26
 
29
27
  // If a "midline" truncation has been defined,
30
28
  // then return the formatted midline value generated here,
31
29
  // else return to the original value.
32
- var truncate = function truncate(inputText) {
33
- var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
30
+ var truncate = function truncate(inputText, truncateValue) {
31
+ if (!truncateValue) {
32
+ return inputText;
33
+ }
34
34
  var maxLength = truncateValue.maxLength,
35
35
  front = truncateValue.front,
36
36
  back = truncateValue.back;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
3
+ */
4
+ export let DecoratorDualButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
+ import React from 'react';