@carbon/ibm-products 2.29.0-alpha.10 → 2.30.0-alpha.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. package/css/index-full-carbon.css +1405 -3
  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 +39 -3
  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 +1405 -3
  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 +1405 -3
  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/AboutModal/AboutModal.d.ts +73 -2
  18. package/es/components/AboutModal/AboutModal.js +10 -28
  19. package/es/components/DataSpreadsheet/DataSpreadsheet.js +120 -145
  20. package/es/components/Datagrid/Datagrid/DatagridRow.js +1 -1
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -3
  22. package/es/components/Datagrid/useActionsColumn.js +6 -2
  23. package/es/components/Decorator/Decorator.d.ts +5 -0
  24. package/es/components/Decorator/Decorator.js +348 -0
  25. package/es/components/Decorator/DecoratorIcon.d.ts +5 -0
  26. package/es/components/Decorator/DecoratorIcon.js +95 -0
  27. package/es/components/Decorator/index.d.ts +1 -0
  28. package/es/components/Decorator/utils.d.ts +8 -0
  29. package/es/components/Decorator/utils.js +43 -0
  30. package/es/components/Toolbar/ToolbarButton.d.ts +24 -3
  31. package/es/components/Toolbar/ToolbarButton.js +2 -2
  32. package/es/components/index.d.ts +1 -0
  33. package/es/global/js/package-settings.d.ts +1 -0
  34. package/es/global/js/package-settings.js +1 -0
  35. package/es/index.js +1 -0
  36. package/es/settings.d.ts +1 -0
  37. package/lib/components/AboutModal/AboutModal.d.ts +73 -2
  38. package/lib/components/AboutModal/AboutModal.js +8 -26
  39. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +120 -145
  40. package/lib/components/Datagrid/Datagrid/DatagridRow.js +1 -1
  41. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -3
  42. package/lib/components/Datagrid/useActionsColumn.js +6 -2
  43. package/lib/components/Decorator/Decorator.d.ts +5 -0
  44. package/lib/components/Decorator/Decorator.js +355 -0
  45. package/lib/components/Decorator/DecoratorIcon.d.ts +5 -0
  46. package/lib/components/Decorator/DecoratorIcon.js +102 -0
  47. package/lib/components/Decorator/index.d.ts +1 -0
  48. package/lib/components/Decorator/utils.d.ts +8 -0
  49. package/lib/components/Decorator/utils.js +48 -0
  50. package/lib/components/Toolbar/ToolbarButton.d.ts +24 -3
  51. package/lib/components/Toolbar/ToolbarButton.js +2 -2
  52. package/lib/components/index.d.ts +1 -0
  53. package/lib/global/js/package-settings.d.ts +1 -0
  54. package/lib/global/js/package-settings.js +1 -0
  55. package/lib/index.js +5 -0
  56. package/lib/settings.d.ts +1 -0
  57. package/package.json +5 -5
  58. package/scss/components/AboutModal/_about-modal.scss +7 -2
  59. package/scss/components/Datagrid/styles/_useExpandedRow.scss +8 -0
  60. package/scss/components/Datagrid/styles/_useNestedRows.scss +54 -0
  61. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +1 -1
  62. package/scss/components/Decorator/_carbon-imports.scss +9 -0
  63. package/scss/components/Decorator/_decorator.scss +400 -0
  64. package/scss/components/Decorator/_index-with-carbon.scss +9 -0
  65. package/scss/components/Decorator/_index.scss +8 -0
  66. package/scss/components/TagSet/_tag-set.scss +1 -0
  67. package/scss/components/_index-with-carbon.scss +1 -0
  68. package/scss/components/_index.scss +1 -0
@@ -0,0 +1,355 @@
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
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var React = require('react');
14
+ var index = require('../../node_modules/prop-types/index.js');
15
+ var cx = require('classnames');
16
+ var devtools = require('../../global/js/utils/devtools.js');
17
+ var settings = require('../../settings.js');
18
+ var utils = require('./utils.js');
19
+ var DecoratorIcon = require('./DecoratorIcon.js');
20
+
21
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
+
23
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
+
26
+ var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
27
+ var blockClass = "".concat(settings.pkg.prefix, "--decorator");
28
+ var componentName = 'Decorator';
29
+ var defaults = {
30
+ kind: 'default',
31
+ onClick: function onClick() {},
32
+ onClickLabel: function onClickLabel() {},
33
+ onClickValue: function onClickValue() {},
34
+ onContextMenu: function onContextMenu() {},
35
+ onContextMenuLabel: function onContextMenuLabel() {},
36
+ onContextMenuValue: function onContextMenuValue() {},
37
+ scoreThresholds: [0, 4, 7, 10],
38
+ theme: 'light'
39
+ };
40
+
41
+ /**
42
+ * The Decorator groups a key/value pair to look and behave like a single UI element.
43
+ */
44
+ exports.Decorator = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
45
+ var className = _ref.className,
46
+ disabled = _ref.disabled,
47
+ hideIcon = _ref.hideIcon,
48
+ href = _ref.href,
49
+ _ref$kind = _ref.kind,
50
+ kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
51
+ label = _ref.label,
52
+ setLabelTitle = _ref.setLabelTitle,
53
+ _ref$onClick = _ref.onClick,
54
+ onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
55
+ _ref$onClickLabel = _ref.onClickLabel,
56
+ onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
57
+ _ref$onClickValue = _ref.onClickValue,
58
+ onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
59
+ _ref$onContextMenu = _ref.onContextMenu,
60
+ onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
61
+ _ref$onContextMenuLab = _ref.onContextMenuLabel,
62
+ onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
63
+ _ref$onContextMenuVal = _ref.onContextMenuValue,
64
+ onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
65
+ score = _ref.score,
66
+ _ref$scoreThresholds = _ref.scoreThresholds,
67
+ scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
68
+ small = _ref.small,
69
+ _ref$theme = _ref.theme,
70
+ theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
71
+ truncateValue = _ref.truncateValue,
72
+ value = _ref.value,
73
+ valueTitle = _ref.valueTitle,
74
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
75
+ var magnitude = utils.getMagnitude(score, scoreThresholds);
76
+ var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
77
+ var _value = utils.truncate(value, truncateValue);
78
+
79
+ // These class names apply to all types of Decorator.
80
+ var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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));
81
+
82
+ // These properties apply to all <DecoratorIcons>.
83
+ var decoratorIconsProps = {
84
+ className: "".concat(blockClass, "__icon"),
85
+ magnitude: magnitude.toLowerCase(),
86
+ // e.g. "Medium" -> "medium"
87
+ small: small
88
+ };
89
+
90
+ // Optional callback functions if `kind` is "link" or "single-button".
91
+ var handleOnClick = function handleOnClick(event) {
92
+ onClick(event, {
93
+ score: score,
94
+ label: label,
95
+ value: value,
96
+ magnitude: magnitude
97
+ });
98
+ };
99
+ var handleOnContextMenu = function handleOnContextMenu(event) {
100
+ onContextMenu(event, {
101
+ score: score,
102
+ label: label,
103
+ value: value,
104
+ magnitude: magnitude
105
+ });
106
+ };
107
+
108
+ // RETURN DUAL BUTTONS
109
+ if (kind === 'dual-button') {
110
+ // Optional callback functions if `kind` is "dual-button" only.
111
+ var handleOnClickLabel = function handleOnClickLabel(event) {
112
+ onClickLabel(event, {
113
+ score: score,
114
+ label: label,
115
+ value: value,
116
+ magnitude: magnitude
117
+ });
118
+ };
119
+ var handleOnClickValue = function handleOnClickValue(event) {
120
+ onClickValue(event, {
121
+ score: score,
122
+ label: label,
123
+ value: value,
124
+ magnitude: magnitude
125
+ });
126
+ };
127
+ var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
128
+ onContextMenuLabel(event, {
129
+ score: score,
130
+ label: label,
131
+ value: value,
132
+ magnitude: magnitude
133
+ });
134
+ };
135
+ var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
136
+ onContextMenuValue(event, {
137
+ score: score,
138
+ label: label,
139
+ value: value,
140
+ magnitude: magnitude
141
+ });
142
+ };
143
+ return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
144
+ className: cx__default["default"](classNames, "".concat(blockClass, "--buttons"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
145
+ ref: ref
146
+ }), /*#__PURE__*/React__default["default"].createElement("button", {
147
+ className: "".concat(blockClass, "__label"),
148
+ disabled: disabled,
149
+ onClick: !disabled && handleOnClickLabel,
150
+ onContextMenu: !disabled && handleOnContextMenuLabel,
151
+ title: _labelTitle || label,
152
+ type: "button"
153
+ }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("button", {
154
+ className: "".concat(blockClass, "__value"),
155
+ disabled: disabled,
156
+ onClick: !disabled && handleOnClickValue,
157
+ onContextMenu: !disabled && handleOnContextMenuValue,
158
+ title: valueTitle || value,
159
+ type: "button"
160
+ }, _value));
161
+ }
162
+
163
+ // RETURN SINGLE BUTTON
164
+ if (kind === 'single-button') {
165
+ return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
166
+ className: cx__default["default"](classNames, "".concat(blockClass, "--button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
167
+ disabled: disabled,
168
+ onClick: !disabled && handleOnClick,
169
+ onContextMenu: !disabled && handleOnContextMenu,
170
+ ref: ref,
171
+ type: "button"
172
+ }), /*#__PURE__*/React__default["default"].createElement("span", {
173
+ className: "".concat(blockClass, "__label"),
174
+ title: _labelTitle || label
175
+ }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
176
+ className: "".concat(blockClass, "__value"),
177
+ title: valueTitle || value
178
+ }, _value));
179
+ }
180
+
181
+ // RETURN LINK
182
+ if (kind === 'link') {
183
+ return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
184
+ href: href,
185
+ className: cx__default["default"](classNames, "".concat(blockClass, "--link")),
186
+ onClick: handleOnClick,
187
+ onContextMenu: handleOnContextMenu,
188
+ ref: ref
189
+ }), /*#__PURE__*/React__default["default"].createElement("span", {
190
+ className: "".concat(blockClass, "__label"),
191
+ title: _labelTitle || label
192
+ }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
193
+ className: "".concat(blockClass, "__value"),
194
+ title: valueTitle || value
195
+ }, _value));
196
+ }
197
+
198
+ // RETURN DEFAULT (NON-INTERACTIVE)
199
+ if (kind === 'default') {
200
+ return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
201
+ className: cx__default["default"](classNames, "".concat(blockClass, "--default")),
202
+ ref: ref
203
+ }), /*#__PURE__*/React__default["default"].createElement("span", {
204
+ className: "".concat(blockClass, "__label"),
205
+ title: _labelTitle || label
206
+ }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
207
+ className: "".concat(blockClass, "__value"),
208
+ title: valueTitle || value
209
+ }, _value));
210
+ }
211
+ });
212
+
213
+ // Return a placeholder if not released and not enabled by feature flag
214
+ exports.Decorator = settings.pkg.checkComponentEnabled(exports.Decorator, componentName);
215
+
216
+ // The display name of the component, used by React. Note that displayName
217
+ // is used in preference to relying on function.name.
218
+ exports.Decorator.displayName = componentName;
219
+
220
+ // The types and DocGen commentary for the component props,
221
+ // in alphabetical order (for consistency).
222
+ // See https://www.npmjs.com/package/prop-types#usage.
223
+ exports.Decorator.propTypes = {
224
+ /**
225
+ * Provide an optional class to be applied to the containing node.
226
+ */
227
+ className: index["default"].string,
228
+ /**
229
+ * `disabled` only applies if `kind` is "single-button" or "dual-button".
230
+ */
231
+ disabled: index["default"].bool,
232
+ /**
233
+ * Do not show the icon, regardless of score.
234
+ */
235
+ hideIcon: index["default"].bool,
236
+ /**
237
+ * `href` is req'd if `kind` is "link".
238
+ *
239
+ * These two properties together will render the `label` and `value` as a single anchor tag.
240
+ */
241
+ href: index["default"].string,
242
+ /**
243
+ * If `kind` is "dual-button" then refer to the `onClickLabel`, `onClickValue`, `onContextMenuLabel`, and `onContextMenuValue` callback functions.
244
+ *
245
+ * If `kind` is "single-button" then refer to the `onClick` and `onContextMenu` callback functions.
246
+ *
247
+ * If `kind` is "link" then also populate `href`.
248
+ *
249
+ * `kind's` default value is "default" and has no other requirements.
250
+ */
251
+ kind: index["default"].oneOf(['default', 'link', 'single-button', 'dual-button']),
252
+ /**
253
+ * The label for the data.
254
+ */
255
+ label: index["default"].string,
256
+ /**
257
+ * Optional callback function if `kind` is "link" or "single-button".
258
+ *
259
+ * Returns two objects: `event` and `{ score, label, value, magnitude }`
260
+ */
261
+ onClick: index["default"].func,
262
+ /**
263
+ * Optional callback functions if `kind` is "dual-button" only.
264
+ *
265
+ * Returns two objects: `event` and `{ score, label, value, magnitude }`
266
+ */
267
+ onClickLabel: index["default"].func,
268
+ /**
269
+ * Optional callback functions if `kind` is "dual-button" only.
270
+ *
271
+ * Returns two objects: `event` and `{ score, label, value, magnitude }`
272
+ */
273
+ onClickValue: index["default"].func,
274
+ /**
275
+ * Optional callback function if `kind` is "link" or "single-button".
276
+ *
277
+ * Returns two objects: `event` and `{ score, label, value, magnitude }`
278
+ */
279
+ onContextMenu: index["default"].func,
280
+ /**
281
+ * Optional callback functions if `kind` is "dual-button" only.
282
+ *
283
+ * Returns two objects: `event` and `{ score, label, value, magnitude }`
284
+ */
285
+ onContextMenuLabel: index["default"].func,
286
+ /**
287
+ * Optional callback functions if `kind` is "dual-button" only.
288
+ *
289
+ * Returns two objects: `event` and `{ score, label, value, magnitude }`
290
+ */
291
+ onContextMenuValue: index["default"].func,
292
+ /**
293
+ * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
294
+ *
295
+ * If you don't want to show the icon at all, set `hideIcon={true}`.
296
+ */
297
+ score: index["default"].number,
298
+ /**
299
+ * Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
300
+ *
301
+ * An array of 4 numbers determines the range of thresholds.
302
+ *
303
+ * Example using `[0, 4, 7, 10]`:
304
+ * <br/>- `<= 0` "Benign"
305
+ * <br/>- `1-3` "Low"
306
+ * <br/>- `4-6` "Medium"
307
+ * <br/>- `7-9` "High"
308
+ * <br/>- `>= 10` "Critical"
309
+ * <br/>- `NaN` "Unknown"
310
+ */
311
+ scoreThresholds: index["default"].arrayOf(index["default"].number),
312
+ /**
313
+ * Callback function for building the label's descriptive text for screen readers.
314
+ *
315
+ * The default description is in the form of `"(magnitude)" magnitude: score X out of Y"`.
316
+ * E.g. `"Medium" magnitude: score 5 out of 10`.
317
+ *
318
+ * Where `magnitude` is the label associated with the specific score,
319
+ * X is the `score`, and Y is the last element of the `setLabelTitle` array.
320
+ *
321
+ * If not defined, the title will default to the `label` prop.
322
+ */
323
+ setLabelTitle: index["default"].func,
324
+ /**
325
+ * Styled smaller to better fit inline with text.
326
+ */
327
+ small: index["default"].bool,
328
+ /**
329
+ * Determines the theme of the component.
330
+ */
331
+ theme: index["default"].oneOf(['light', 'dark']),
332
+ /**
333
+ * If not defined, it will behave as `display:inline-block`.
334
+ *
335
+ * If `end` it will append "..." to the `value` if there is not enough space.
336
+ *
337
+ * If `start` it will prepend "..." to the `value` if there is not enough space.
338
+ *
339
+ * If `{maxLength, front, back}` it will inject "..." in the middle
340
+ * of the `value` regardless of available space.
341
+ */
342
+ truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
343
+ maxLength: index["default"].number,
344
+ front: index["default"].number,
345
+ back: index["default"].number
346
+ })]),
347
+ /**
348
+ * The value of the data.
349
+ */
350
+ value: index["default"].string.isRequired,
351
+ /**
352
+ * Overrides the default title for the Decorator's value.
353
+ */
354
+ valueTitle: index["default"].string
355
+ };
@@ -0,0 +1,5 @@
1
+ /**
2
+ * The shape and color of the Decorator's icon.
3
+ */
4
+ export let DecoratorIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
+ import React from 'react';
@@ -0,0 +1,102 @@
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
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var React = require('react');
14
+ var index = require('../../node_modules/prop-types/index.js');
15
+ var cx = require('classnames');
16
+ var icons = require('@carbon/react/icons');
17
+ var devtools = require('../../global/js/utils/devtools.js');
18
+ var settings = require('../../settings.js');
19
+
20
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
+
22
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
24
+
25
+ var _excluded = ["className", "magnitude", "small"];
26
+
27
+ // The block part of our conventional BEM class names (blockClass__E--M).
28
+ var blockClass = "".concat(settings.pkg.prefix, "--decorator-icon");
29
+ var componentName = 'DecoratorIcon';
30
+ var defaults = {
31
+ magnitude: 'unknown',
32
+ small: false
33
+ };
34
+
35
+ /**
36
+ * The shape and color of the Decorator's icon.
37
+ */
38
+ exports.DecoratorIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
39
+ var className = _ref.className,
40
+ _ref$magnitude = _ref.magnitude,
41
+ magnitude = _ref$magnitude === void 0 ? defaults.magnitude : _ref$magnitude,
42
+ _ref$small = _ref.small,
43
+ small = _ref$small === void 0 ? defaults.small : _ref$small,
44
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
45
+ var Icon;
46
+ switch (magnitude) {
47
+ case 'benign':
48
+ Icon = icons.CircleFill;
49
+ break;
50
+ case 'low':
51
+ Icon = icons.SquareFill;
52
+ break;
53
+ case 'medium':
54
+ Icon = icons.DiamondFill;
55
+ break;
56
+ case 'high':
57
+ Icon = icons.Caution;
58
+ break;
59
+ case 'critical':
60
+ Icon = icons.ChevronMini;
61
+ break;
62
+ default:
63
+ Icon = icons.CircleStroke;
64
+ break;
65
+ }
66
+ return /*#__PURE__*/React__default["default"].createElement(Icon, _rollupPluginBabelHelpers["extends"]({}, rest, {
67
+ "aria-hidden": true,
68
+ className: cx__default["default"](blockClass, className, "".concat(blockClass, "__magnitude-").concat(magnitude), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--sm"), small)),
69
+ focusable: false,
70
+ ref: ref
71
+ // Adding viewBox allows resizing `svg` elements via CSS.
72
+ // The "ChevronMini" icon is half size,
73
+ // so set to '8 8 8 8' to match the size of the other icons.
74
+ ,
75
+ viewBox: magnitude === 'critical' ? '8 8 8 8' : '0 0 16 16'
76
+ }, devtools.getDevtoolsProps(componentName)));
77
+ });
78
+
79
+ // Return a placeholder if not released and not enabled by feature flag
80
+ exports.DecoratorIcon = settings.pkg.checkComponentEnabled(exports.DecoratorIcon, componentName);
81
+
82
+ // The display name of the component, used by React. Note that displayName
83
+ // is used in preference to relying on function.name.
84
+ exports.DecoratorIcon.displayName = componentName;
85
+
86
+ // The types and DocGen commentary for the component props,
87
+ // in alphabetical order (for consistency).
88
+ // See https://www.npmjs.com/package/prop-types#usage.
89
+ exports.DecoratorIcon.propTypes = {
90
+ /**
91
+ * Provide an optional class to be applied to the containing node.
92
+ */
93
+ className: index["default"].string,
94
+ /**
95
+ * Determines the shape and color of the icon.
96
+ */
97
+ magnitude: index["default"].oneOf(['unknown', 'benign', 'low', 'medium', 'high', 'critical']),
98
+ /**
99
+ * Reduce the size of the icon in proportion to a smaller Decorator.
100
+ */
101
+ small: index["default"].bool
102
+ };
@@ -0,0 +1 @@
1
+ export { Decorator } from "./Decorator";
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024, 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
+ export function getMagnitude(score: any, thresholds: any): "Medium" | "Unknown" | "Benign" | "Low" | "High" | "Critical";
8
+ export function truncate(inputText: any, truncateValue?: {}): any;
@@ -0,0 +1,48 @@
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
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var getMagnitude = function getMagnitude(score, thresholds) {
13
+ if (typeof score === 'number') {
14
+ if (score <= thresholds[0]) {
15
+ return 'Benign';
16
+ }
17
+ if (score < thresholds[1]) {
18
+ return 'Low';
19
+ }
20
+ if (score < thresholds[2]) {
21
+ return 'Medium';
22
+ }
23
+ if (score < thresholds[3]) {
24
+ return 'High';
25
+ }
26
+ if (score >= thresholds[3]) {
27
+ return 'Critical';
28
+ }
29
+ }
30
+ return 'Unknown';
31
+ };
32
+
33
+ // If a "midline" truncation has been defined,
34
+ // then return the formatted midline value generated here,
35
+ // else return to the original value.
36
+ var truncate = function truncate(inputText) {
37
+ var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
38
+ var maxLength = truncateValue.maxLength,
39
+ front = truncateValue.front,
40
+ back = truncateValue.back;
41
+ if (maxLength && inputText.length > maxLength) {
42
+ return "".concat(inputText.substring(0, front), "\u2026").concat(inputText.substr(inputText.length - back));
43
+ }
44
+ return inputText;
45
+ };
46
+
47
+ exports.getMagnitude = getMagnitude;
48
+ exports.truncate = truncate;
@@ -1,4 +1,25 @@
1
- export const blockClass: string;
2
- /** Toolbar buttons are common functions performed as part of a products interface or an open window. */
3
- export let ToolbarButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
1
+ /**
2
+ * Copyright IBM Corp. 2021, 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
+ /// <reference path="../../../src/custom-typings/index.d.ts" />
8
+ import { IconButton } from '@carbon/react';
4
9
  import React from 'react';
10
+ export declare const blockClass: string;
11
+ interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
12
+ /** Determines whether the caret is rendered */
13
+ caret?: boolean;
14
+ /** Provide an optional class to be applied to the containing node */
15
+ className?: string;
16
+ /** Specifies the label for the icon button */
17
+ iconDescription: string;
18
+ /** Specifies the icon to be used by the ToolbarButton component */
19
+ renderIcon: React.ElementType;
20
+ }
21
+ /** Toolbar buttons are common functions performed as part of a products interface or an open window. */
22
+ export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
23
+ children?: React.ReactNode;
24
+ } & React.RefAttributes<unknown>>;
25
+ export {};
@@ -24,11 +24,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
 
25
25
  var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
26
26
  var blockClass = "".concat(Toolbar.blockClass, "__button");
27
-
28
27
  /** Toolbar buttons are common functions performed as part of a products interface or an open window. */
29
28
  exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
30
29
  var _useContext;
31
- var caret = _ref.caret,
30
+ var _ref$caret = _ref.caret,
31
+ caret = _ref$caret === void 0 ? false : _ref$caret,
32
32
  children = _ref.children,
33
33
  className = _ref.className,
34
34
  renderIcon = _ref.renderIcon,
@@ -40,6 +40,7 @@ export { InterstitialScreen } from "./InterstitialScreen";
40
40
  export { InterstitialScreenView } from "./InterstitialScreenView";
41
41
  export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
42
42
  export { DelimitedList } from "./DelimitedList";
43
+ export { Decorator } from "./Decorator";
43
44
  export { DescriptionList } from "./DescriptionList";
44
45
  export { FullPageError } from "./FullPageError";
45
46
  export { SearchBar } from "./SearchBar";
@@ -89,6 +89,7 @@ declare namespace defaults {
89
89
  let CoachmarkOverlayElement: boolean;
90
90
  let CoachmarkOverlayElements: boolean;
91
91
  let CoachmarkStack: boolean;
92
+ let Decorator: boolean;
92
93
  let DescriptionList: boolean;
93
94
  let SearchBar: boolean;
94
95
  let UserAvatar: boolean;
@@ -95,6 +95,7 @@ var defaults = {
95
95
  CoachmarkOverlayElement: false,
96
96
  CoachmarkOverlayElements: false,
97
97
  CoachmarkStack: false,
98
+ Decorator: false,
98
99
  DescriptionList: false,
99
100
  SearchBar: false,
100
101
  UserAvatar: false,
package/lib/index.js CHANGED
@@ -109,6 +109,7 @@ var InterstitialScreen = require('./components/InterstitialScreen/InterstitialSc
109
109
  var InterstitialScreenView = require('./components/InterstitialScreenView/InterstitialScreenView.js');
110
110
  var InterstitialScreenViewModule = require('./components/InterstitialScreenViewModule/InterstitialScreenViewModule.js');
111
111
  var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
112
+ var Decorator = require('./components/Decorator/Decorator.js');
112
113
  var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
113
114
  var FullPageError = require('./components/FullPageError/FullPageError.js');
114
115
  var SearchBar = require('./components/SearchBar/SearchBar.js');
@@ -450,6 +451,10 @@ Object.defineProperty(exports, 'DelimitedList', {
450
451
  enumerable: true,
451
452
  get: function () { return DelimitedList.DelimitedList; }
452
453
  });
454
+ Object.defineProperty(exports, 'Decorator', {
455
+ enumerable: true,
456
+ get: function () { return Decorator.Decorator; }
457
+ });
453
458
  Object.defineProperty(exports, 'DescriptionList', {
454
459
  enumerable: true,
455
460
  get: function () { return DescriptionList.DescriptionList; }
package/lib/settings.d.ts CHANGED
@@ -75,6 +75,7 @@ export const pkg: {
75
75
  CoachmarkOverlayElement: boolean;
76
76
  CoachmarkOverlayElements: boolean;
77
77
  CoachmarkStack: boolean;
78
+ Decorator: boolean;
78
79
  DescriptionList: boolean;
79
80
  SearchBar: boolean;
80
81
  UserAvatar: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.29.0-alpha.10+d6e306fa2",
4
+ "version": "2.30.0-alpha.9+c0cf58a1e",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -76,7 +76,7 @@
76
76
  "fs-extra": "^11.2.0",
77
77
  "glob": "^10.3.10",
78
78
  "jest": "^29.7.0",
79
- "jest-config-ibm-cloud-cognitive": "^1.1.4",
79
+ "jest-config-ibm-cloud-cognitive": "^1.1.5",
80
80
  "jest-environment-jsdom": "^29.7.0",
81
81
  "namor": "^1.1.2",
82
82
  "npm-check-updates": "^16.14.12",
@@ -90,7 +90,7 @@
90
90
  },
91
91
  "dependencies": {
92
92
  "@babel/runtime": "^7.23.9",
93
- "@carbon/ibm-products-styles": "^2.27.1",
93
+ "@carbon/ibm-products-styles": "^2.29.0-alpha.9+c0cf58a1e",
94
94
  "@carbon/telemetry": "^0.1.0",
95
95
  "@dnd-kit/core": "^6.0.8",
96
96
  "@dnd-kit/sortable": "^8.0.0",
@@ -107,11 +107,11 @@
107
107
  "@carbon/grid": "^11.21.1",
108
108
  "@carbon/layout": "^11.20.1",
109
109
  "@carbon/motion": "^11.16.1",
110
- "@carbon/react": "^1.51.0",
110
+ "@carbon/react": "^1.51.1",
111
111
  "@carbon/themes": "^11.32.0",
112
112
  "@carbon/type": "^11.25.1",
113
113
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
114
114
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
115
115
  },
116
- "gitHead": "d6e306fa2b58a454c879f911187e17076ce06ea3"
116
+ "gitHead": "c0cf58a1e78a4ee8f66b551d39b5705fecd4674e"
117
117
  }