@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,348 @@
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 { getDevtoolsProps } from '../../global/js/utils/devtools.js';
13
+ import { pkg } from '../../settings.js';
14
+ import { getMagnitude, truncate } from './utils.js';
15
+ import { DecoratorIcon } from './DecoratorIcon.js';
16
+
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
+ 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
+
32
+ /**
33
+ * The Decorator groups a key/value pair to look and behave like a single UI element.
34
+ */
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
+ }
202
+ });
203
+
204
+ // Return a placeholder if not released and not enabled by feature flag
205
+ Decorator = pkg.checkComponentEnabled(Decorator, componentName);
206
+
207
+ // The display name of the component, used by React. Note that displayName
208
+ // is used in preference to relying on function.name.
209
+ Decorator.displayName = componentName;
210
+
211
+ // The types and DocGen commentary for the component props,
212
+ // in alphabetical order (for consistency).
213
+ // See https://www.npmjs.com/package/prop-types#usage.
214
+ Decorator.propTypes = {
215
+ /**
216
+ * Provide an optional class to be applied to the containing node.
217
+ */
218
+ className: PropTypes.string,
219
+ /**
220
+ * `disabled` only applies if `kind` is "single-button" or "dual-button".
221
+ */
222
+ disabled: PropTypes.bool,
223
+ /**
224
+ * Do not show the icon, regardless of score.
225
+ */
226
+ 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
+ /**
244
+ * The label for the data.
245
+ */
246
+ 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
+ /**
284
+ * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
285
+ *
286
+ * If you don't want to show the icon at all, set `hideIcon={true}`.
287
+ */
288
+ score: PropTypes.number,
289
+ /**
290
+ * Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
291
+ *
292
+ * An array of 4 numbers determines the range of thresholds.
293
+ *
294
+ * Example using `[0, 4, 7, 10]`:
295
+ * <br/>- `<= 0` "Benign"
296
+ * <br/>- `1-3` "Low"
297
+ * <br/>- `4-6` "Medium"
298
+ * <br/>- `7-9` "High"
299
+ * <br/>- `>= 10` "Critical"
300
+ * <br/>- `NaN` "Unknown"
301
+ */
302
+ scoreThresholds: PropTypes.arrayOf(PropTypes.number),
303
+ /**
304
+ * Callback function for building the label's descriptive text for screen readers.
305
+ *
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`.
308
+ *
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.
311
+ *
312
+ * If not defined, the title will default to the `label` prop.
313
+ */
314
+ setLabelTitle: PropTypes.func,
315
+ /**
316
+ * Styled smaller to better fit inline with text.
317
+ */
318
+ small: PropTypes.bool,
319
+ /**
320
+ * Determines the theme of the component.
321
+ */
322
+ theme: PropTypes.oneOf(['light', 'dark']),
323
+ /**
324
+ * 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
+ */
333
+ truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
334
+ maxLength: PropTypes.number,
335
+ front: PropTypes.number,
336
+ back: PropTypes.number
337
+ })]),
338
+ /**
339
+ * The value of the data.
340
+ */
341
+ value: PropTypes.string.isRequired,
342
+ /**
343
+ * Overrides the default title for the Decorator's value.
344
+ */
345
+ valueTitle: PropTypes.string
346
+ };
347
+
348
+ export { Decorator };
@@ -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,95 @@
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, extends as _extends, defineProperty as _defineProperty } 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 { CircleStroke, ChevronMini, Caution, DiamondFill, SquareFill, CircleFill } from '@carbon/react/icons';
13
+ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
14
+ import { pkg } from '../../settings.js';
15
+
16
+ var _excluded = ["className", "magnitude", "small"];
17
+
18
+ // The block part of our conventional BEM class names (blockClass__E--M).
19
+ var blockClass = "".concat(pkg.prefix, "--decorator-icon");
20
+ var componentName = 'DecoratorIcon';
21
+ var defaults = {
22
+ magnitude: 'unknown',
23
+ small: false
24
+ };
25
+
26
+ /**
27
+ * The shape and color of the Decorator's icon.
28
+ */
29
+ var DecoratorIcon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
30
+ var className = _ref.className,
31
+ _ref$magnitude = _ref.magnitude,
32
+ magnitude = _ref$magnitude === void 0 ? defaults.magnitude : _ref$magnitude,
33
+ _ref$small = _ref.small,
34
+ small = _ref$small === void 0 ? defaults.small : _ref$small,
35
+ rest = _objectWithoutProperties(_ref, _excluded);
36
+ var Icon;
37
+ switch (magnitude) {
38
+ case 'benign':
39
+ Icon = CircleFill;
40
+ break;
41
+ case 'low':
42
+ Icon = SquareFill;
43
+ break;
44
+ case 'medium':
45
+ Icon = DiamondFill;
46
+ break;
47
+ case 'high':
48
+ Icon = Caution;
49
+ break;
50
+ case 'critical':
51
+ Icon = ChevronMini;
52
+ break;
53
+ default:
54
+ Icon = CircleStroke;
55
+ break;
56
+ }
57
+ return /*#__PURE__*/React__default.createElement(Icon, _extends({}, rest, {
58
+ "aria-hidden": true,
59
+ className: cx(blockClass, className, "".concat(blockClass, "__magnitude-").concat(magnitude), _defineProperty({}, "".concat(blockClass, "--sm"), small)),
60
+ focusable: false,
61
+ ref: ref
62
+ // Adding viewBox allows resizing `svg` elements via CSS.
63
+ // The "ChevronMini" icon is half size,
64
+ // so set to '8 8 8 8' to match the size of the other icons.
65
+ ,
66
+ viewBox: magnitude === 'critical' ? '8 8 8 8' : '0 0 16 16'
67
+ }, getDevtoolsProps(componentName)));
68
+ });
69
+
70
+ // Return a placeholder if not released and not enabled by feature flag
71
+ DecoratorIcon = pkg.checkComponentEnabled(DecoratorIcon, componentName);
72
+
73
+ // The display name of the component, used by React. Note that displayName
74
+ // is used in preference to relying on function.name.
75
+ DecoratorIcon.displayName = componentName;
76
+
77
+ // The types and DocGen commentary for the component props,
78
+ // in alphabetical order (for consistency).
79
+ // See https://www.npmjs.com/package/prop-types#usage.
80
+ DecoratorIcon.propTypes = {
81
+ /**
82
+ * Provide an optional class to be applied to the containing node.
83
+ */
84
+ className: PropTypes.string,
85
+ /**
86
+ * Determines the shape and color of the icon.
87
+ */
88
+ magnitude: PropTypes.oneOf(['unknown', 'benign', 'low', 'medium', 'high', 'critical']),
89
+ /**
90
+ * Reduce the size of the icon in proportion to a smaller Decorator.
91
+ */
92
+ small: PropTypes.bool
93
+ };
94
+
95
+ export { DecoratorIcon };
@@ -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,43 @@
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
+ 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
+ }
25
+ }
26
+ return 'Unknown';
27
+ };
28
+
29
+ // If a "midline" truncation has been defined,
30
+ // then return the formatted midline value generated here,
31
+ // else return to the original value.
32
+ var truncate = function truncate(inputText) {
33
+ var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
34
+ var maxLength = truncateValue.maxLength,
35
+ front = truncateValue.front,
36
+ back = truncateValue.back;
37
+ if (maxLength && inputText.length > maxLength) {
38
+ return "".concat(inputText.substring(0, front), "\u2026").concat(inputText.substr(inputText.length - back));
39
+ }
40
+ return inputText;
41
+ };
42
+
43
+ export { getMagnitude, 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 {};
@@ -15,11 +15,11 @@ import { ToolbarContext, blockClass as blockClass$1 } from './Toolbar.js';
15
15
 
16
16
  var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
17
17
  var blockClass = "".concat(blockClass$1, "__button");
18
-
19
18
  /** Toolbar buttons are common functions performed as part of a products interface or an open window. */
20
19
  var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
21
20
  var _useContext;
22
- var caret = _ref.caret,
21
+ var _ref$caret = _ref.caret,
22
+ caret = _ref$caret === void 0 ? false : _ref$caret,
23
23
  children = _ref.children,
24
24
  className = _ref.className,
25
25
  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;
@@ -91,6 +91,7 @@ var defaults = {
91
91
  CoachmarkOverlayElement: false,
92
92
  CoachmarkOverlayElements: false,
93
93
  CoachmarkStack: false,
94
+ Decorator: false,
94
95
  DescriptionList: false,
95
96
  SearchBar: false,
96
97
  UserAvatar: false,
package/es/index.js CHANGED
@@ -105,6 +105,7 @@ export { InterstitialScreen } from './components/InterstitialScreen/Interstitial
105
105
  export { InterstitialScreenView } from './components/InterstitialScreenView/InterstitialScreenView.js';
106
106
  export { InterstitialScreenViewModule } from './components/InterstitialScreenViewModule/InterstitialScreenViewModule.js';
107
107
  export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
108
+ export { Decorator } from './components/Decorator/Decorator.js';
108
109
  export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
109
110
  export { FullPageError } from './components/FullPageError/FullPageError.js';
110
111
  export { SearchBar } from './components/SearchBar/SearchBar.js';
package/es/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;
@@ -1,3 +1,74 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2021
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
+ import React, { ReactNode } from 'react';
8
+ interface AboutModalProps {
9
+ /**
10
+ * If you are legally required to display logos of technologies used
11
+ * to build your product you can provide this in the additionalInfo.
12
+ * Additional information will be displayed in the footer.
13
+ */
14
+ additionalInfo?: ReactNode;
15
+ /**
16
+ * Provide an optional class to be applied to the modal root node.
17
+ */
18
+ className?: string;
19
+ /**
20
+ * The accessibility title for the close icon.
21
+ */
22
+ closeIconDescription: string;
23
+ /**
24
+ * Subhead text providing any relevant product disclaimers including
25
+ * legal information (optional)
26
+ */
27
+ content?: ReactNode;
28
+ /**
29
+ * Trademark and copyright information. Displays first year of
30
+ * product release to current year.
31
+ */
32
+ copyrightText: string;
33
+ /**
34
+ * An array of Carbon `Link` component if there are additional information
35
+ * to call out within the card. The about modal should be used to display
36
+ * the product information and not where users go to find help (optional)
37
+ */
38
+ links?: ReactNode[];
39
+ /**
40
+ * A visual symbol used to represent the product.
41
+ */
42
+ logo: ReactNode;
43
+ /**
44
+ * Specifies aria label for AboutModal
45
+ */
46
+ modalAriaLabel?: string;
47
+ /**
48
+ * Specifies an optional handler which is called when the AboutModal
49
+ * is closed. Returning `false` prevents the AboutModal from closing.
50
+ */
51
+ onClose?: () => void | boolean;
52
+ /**
53
+ * Specifies whether the AboutModal is open or not.
54
+ */
55
+ open?: boolean;
56
+ /**
57
+ * The DOM node the tearsheet should be rendered within. Defaults to document.body.
58
+ */
59
+ portalTarget?: ReactNode;
60
+ /**
61
+ * Header text that provides the product name. The IBM Services logo
62
+ * consists of two discrete, but required, elements: the iconic
63
+ * IBM 8-bar logo represented alongside the IBM Services logotype.
64
+ * Please follow these guidelines to ensure proper execution.
65
+ */
66
+ title: ReactNode;
67
+ /**
68
+ * Text that provides information on the version number of your product.
69
+ */
70
+ version: string;
71
+ }
1
72
  /**
2
73
  * The `AboutModal` component provides a way to communicate product information
3
74
  * to users. It is triggered by a user’s action, appears on top of the main
@@ -5,5 +76,5 @@
5
76
  * should be immediately apparent to the user, with a clear and obvious path
6
77
  * to completion.
7
78
  */
8
- export let AboutModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
9
- import React from 'react';
79
+ export declare let AboutModal: React.ForwardRefExoticComponent<AboutModalProps & React.RefAttributes<HTMLDivElement>>;
80
+ export {};