@carbon/ibm-products 2.21.0 → 2.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +8 -5
  2. package/css/index-full-carbon.css +531 -251
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +199 -177
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +243 -189
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +1 -1
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +223 -192
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +1 -1
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
  23. package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
  24. package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
  25. package/es/components/DelimitedList/DelimitedList.js +73 -0
  26. package/es/components/DelimitedList/index.js +8 -0
  27. package/es/components/SidePanel/SidePanel.js +145 -189
  28. package/es/components/TagSet/TagSet.js +21 -5
  29. package/es/components/TagSet/TagSetOverflow.js +13 -8
  30. package/es/components/index.js +2 -1
  31. package/es/global/js/hooks/useResizeObserver.js +5 -2
  32. package/es/global/js/package-settings.js +1 -0
  33. package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  35. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  36. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
  38. package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
  39. package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
  40. package/lib/components/DelimitedList/DelimitedList.js +78 -0
  41. package/lib/components/DelimitedList/index.js +12 -0
  42. package/lib/components/SidePanel/SidePanel.js +145 -189
  43. package/lib/components/TagSet/TagSet.js +21 -5
  44. package/lib/components/TagSet/TagSetOverflow.js +12 -7
  45. package/lib/components/index.js +8 -1
  46. package/lib/global/js/hooks/useResizeObserver.js +5 -2
  47. package/lib/global/js/package-settings.js +1 -0
  48. package/package.json +9 -8
  49. package/scss/components/Datagrid/_datagrid.scss +4 -0
  50. package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
  51. package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
  52. package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
  53. package/scss/components/DelimitedList/_delimited-list.scss +27 -0
  54. package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
  55. package/scss/components/DelimitedList/_index.scss +8 -0
  56. package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
  57. package/scss/components/SidePanel/_side-panel.scss +155 -187
  58. package/scss/components/_index-with-carbon.scss +1 -0
  59. package/scss/components/_index.scss +1 -0
  60. package/telemetry.yml +790 -0
@@ -1,3 +1,4 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  /**
3
4
  * Copyright IBM Corp. 2023, 2023
@@ -7,6 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
7
8
  */
8
9
  import { useRef, useState, useLayoutEffect, useEffect } from 'react';
9
10
  export var useResizeObserver = function useResizeObserver(ref, callback) {
11
+ var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
10
12
  var _useState = useState(-1),
11
13
  _useState2 = _slicedToArray(_useState, 2),
12
14
  width = _useState2[0],
@@ -38,7 +40,8 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
38
40
  return;
39
41
  }
40
42
  getInitialSize();
41
- }, [width, height, ref]);
43
+ // eslint-disable-next-line react-hooks/exhaustive-deps
44
+ }, [width, height, ref].concat(_toConsumableArray(deps)));
42
45
  useLayoutEffect(function () {
43
46
  if (!(ref !== null && ref !== void 0 && ref.current)) {
44
47
  return;
@@ -68,7 +71,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
68
71
  observer = null;
69
72
  };
70
73
  // eslint-disable-next-line react-hooks/exhaustive-deps
71
- }, [ref.current]);
74
+ }, [ref].concat(_toConsumableArray(deps)));
72
75
  return {
73
76
  width: width,
74
77
  height: height
@@ -69,6 +69,7 @@ var defaults = {
69
69
  EditTearsheetNarrow: false,
70
70
  EditFullPage: false,
71
71
  EditUpdateCards: false,
72
+ DelimitedList: false,
72
73
  /* new component flags here - comment used by generate CLI */
73
74
 
74
75
  // Novice to pro components not yet reviewed and released:
@@ -95,7 +95,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
95
95
  });
96
96
  var renderTable = function renderTable() {
97
97
  var _getTableProps;
98
- return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
98
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
99
99
  className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
100
100
  role: withInlineEdit ? 'grid' : undefined,
101
101
  tabIndex: withInlineEdit ? 0 : -1,
@@ -116,7 +116,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
116
116
  title: title
117
117
  }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
118
118
  rows: contentRows
119
- })));
119
+ }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
120
120
  };
121
121
  var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
122
122
  ref: withInlineEdit ? multiKeyTrackingRef : null,
@@ -152,6 +152,11 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
152
152
  overflowType: "tag"
153
153
  });
154
154
  };
155
+ var renderPagination = function renderPagination() {
156
+ if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
157
+ return /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState);
158
+ }
159
+ };
155
160
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
156
161
  className: (0, _classnames.default)("".concat(gcClass), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
157
162
  title: gridTitle,
@@ -171,7 +176,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
171
176
  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
172
177
  className: "".concat(blockClass, "__virtualScrollContainer"),
173
178
  ref: gridRef
174
- }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
179
+ }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
175
180
  instance: datagridState
176
181
  }));
177
182
  };
@@ -40,7 +40,9 @@ var DatagridRow = function DatagridRow(datagridState) {
40
40
  prepareRow = datagridState.prepareRow,
41
41
  key = datagridState.key,
42
42
  tableId = datagridState.tableId,
43
- withExpandedRows = datagridState.withExpandedRows;
43
+ withExpandedRows = datagridState.withExpandedRows,
44
+ withMouseHover = datagridState.withMouseHover,
45
+ setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
44
46
  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
45
47
  var isExpanded = _ref.isExpanded,
46
48
  subRows = _ref.subRows;
@@ -85,6 +87,9 @@ var DatagridRow = function DatagridRow(datagridState) {
85
87
  return null;
86
88
  };
87
89
  var handleMouseLeave = function handleMouseLeave(event) {
90
+ if (withMouseHover) {
91
+ setMouseOverRowIndex(null);
92
+ }
88
93
  var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
89
94
  hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
90
95
  };
@@ -71,13 +71,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
71
71
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
72
72
  stackedLayout = _useState4[0],
73
73
  setStackedLayout = _useState4[1];
74
+ var handleCancel = function handleCancel() {
75
+ setOpen(false);
76
+ onCancel();
77
+ };
74
78
  var _useFilters = (0, _hooks2.useFilters)({
75
79
  updateMethod: updateMethod,
76
80
  filters: filters,
77
81
  setAllFilters: setAllFilters,
78
82
  variation: _constants.FLYOUT,
79
83
  reactTableFiltersState: reactTableFiltersState,
80
- onCancel: onCancel
84
+ onCancel: handleCancel
81
85
  }),
82
86
  filtersState = _useFilters.filtersState,
83
87
  prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -187,8 +191,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
187
191
  kind: 'secondary',
188
192
  label: secondaryActionLabel,
189
193
  onClick: cancel,
190
- isExpressive: false,
191
- disabled: shouldDisableButtons
194
+ isExpressive: false
192
195
  }],
193
196
  size: "md",
194
197
  buttonSize: "md"
@@ -196,8 +196,8 @@ var FilterPanel = function FilterPanel(_ref) {
196
196
  var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
197
197
  var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
198
198
  var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
199
- var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
200
- showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)");
199
+ var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
200
+ showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)") : 0;
201
201
  return height;
202
202
  };
203
203
  return /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
@@ -127,9 +127,9 @@ var useFilters = function useFilters(_ref2) {
127
127
  if (type === _constants.DATE && value.length > 0 && !value[1]) {
128
128
  return;
129
129
  }
130
- var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
130
+ var filterCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
131
131
  // // check if the filter already exists in the array
132
- var filter = filtersObjectArrayCopy.find(function (item) {
132
+ var filter = filterCopy.find(function (item) {
133
133
  return item.id === column;
134
134
  });
135
135
 
@@ -137,81 +137,39 @@ var useFilters = function useFilters(_ref2) {
137
137
  if (filter) {
138
138
  filter.value = value;
139
139
  } else {
140
- filtersObjectArrayCopy.push({
140
+ filterCopy.push({
141
141
  id: column,
142
142
  value: value,
143
143
  type: type
144
144
  });
145
145
  }
146
-
147
- // ATTENTION: this is where you would reset or remove individual filters from the filters array
148
- if (type === _constants.CHECKBOX) {
149
- /**
150
- When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
151
- This checks if all the checkboxes are selected = false and removes it from the array
152
- */
153
- var index = filtersObjectArrayCopy.findIndex(function (filter) {
154
- return filter.id === column;
155
- });
156
-
157
- // If all the selected state is false remove from array
158
- var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
159
- return val.selected === false;
160
- });
161
- if (shouldRemoveFromArray) {
162
- filtersObjectArrayCopy.splice(index, 1);
163
- }
164
- } else if (type === _constants.DATE) {
165
- if (value.length === 0) {
166
- /**
167
- Checks to see if the date value is an empty array, if it is that means the user wants
168
- to reset the date filter
169
- */
170
- var _index = filtersObjectArrayCopy.findIndex(function (filter) {
171
- return filter.id === column;
172
- });
173
-
174
- // Remove it from the filters array since there is nothing to filter
175
- filtersObjectArrayCopy.splice(_index, 1);
176
- }
177
- } else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
178
- if (value === 'Any') {
179
- /**
180
- Checks to see if the selected value is 'Any', that means the user wants
181
- to reset specific filter
182
- */
183
- var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
184
- return filter.id === column;
185
- });
186
-
187
- // Remove it from the filters array
188
- filtersObjectArrayCopy.splice(_index2, 1);
189
- }
190
- } else if (type === _constants.NUMBER) {
191
- // If the value is empty remove it from the filtersObjectArray
192
- if (value === '') {
193
- // Find the column that uses number and displays an empty string
194
- var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
195
- return filter.id === column;
196
- });
197
-
198
- // Remove it from the filters array
199
- filtersObjectArrayCopy.splice(_index3, 1);
200
- }
146
+ var index = filterCopy.findIndex(function (_ref4) {
147
+ var id = _ref4.id;
148
+ return id === column;
149
+ });
150
+ var clearCheckbox = type === _constants.CHECKBOX && filterCopy[index].value.every(function (_ref5) {
151
+ var selected = _ref5.selected;
152
+ return selected === false;
153
+ });
154
+ var clearDate = type === _constants.DATE && value.length === 0;
155
+ var clearAny = (type === _constants.DROPDOWN || type === _constants.RADIO) && value === 'Any';
156
+ var clearNum = type === _constants.NUMBER && value === '';
157
+ var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
158
+ if (shouldClear) {
159
+ filterCopy.splice(index, 1);
201
160
  }
202
- setFiltersObjectArray(filtersObjectArrayCopy);
203
-
204
- // // Automatically apply the filters if the updateMethod is instant
161
+ setFiltersObjectArray(filterCopy);
205
162
  if (updateMethod === _constants.INSTANT) {
206
- setAllFilters(filtersObjectArrayCopy);
163
+ setAllFilters(filterCopy);
207
164
  }
208
165
  };
166
+
209
167
  /** Render the individual filter component */
210
- var renderFilter = function renderFilter(_ref4) {
168
+ var renderFilter = function renderFilter(_ref6) {
211
169
  var _filtersState$column3, _filtersState$column4;
212
- var type = _ref4.type,
213
- column = _ref4.column,
214
- components = _ref4.props;
170
+ var type = _ref6.type,
171
+ column = _ref6.column,
172
+ components = _ref6.props;
215
173
  var filter;
216
174
  var isPanel = variation === _constants.PANEL;
217
175
  if (!type) {
@@ -232,8 +190,8 @@ var useFilters = function useFilters(_ref2) {
232
190
  return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
233
191
  key: option.id
234
192
  }, option, {
235
- onChange: function onChange(_, _ref5) {
236
- var checked = _ref5.checked;
193
+ onChange: function onChange(_, _ref7) {
194
+ var checked = _ref7.checked;
237
195
  handleCheckboxChange({
238
196
  checked: checked,
239
197
  filtersState: filtersState,
@@ -324,9 +282,9 @@ var useFilters = function useFilters(_ref2) {
324
282
  labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
325
283
  value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
326
284
  }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
327
- var _ref6, _radio$id;
285
+ var _ref8, _radio$id;
328
286
  return /*#__PURE__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
329
- key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
287
+ key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
330
288
  }, radio));
331
289
  })));
332
290
  }
@@ -335,9 +293,9 @@ var useFilters = function useFilters(_ref2) {
335
293
  filter = /*#__PURE__*/_react2.default.createElement(_react.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
336
294
  selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
337
295
  items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
338
- onChange: function onChange(_ref7) {
296
+ onChange: function onChange(_ref9) {
339
297
  var _components$Dropdown$, _components$Dropdown;
340
- var selectedItem = _ref7.selectedItem;
298
+ var selectedItem = _ref9.selectedItem;
341
299
  setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
342
300
  value: selectedItem,
343
301
  type: type
@@ -42,7 +42,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
42
42
  });
43
43
  });
44
44
  Object.assign(instance, {
45
- rows: rowsWithMouseOver
45
+ rows: rowsWithMouseOver,
46
+ withMouseHover: true,
47
+ setMouseOverRowIndex: setMouseOverRowIndex
46
48
  });
47
49
  hooks.getRowProps.push(getRowProps);
48
50
  };
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
11
+ var stories = _interopRequireWildcard(require("./DelimitedList.stories"));
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
+ var DocsPage = function DocsPage() {
15
+ return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
16
+ blocks: [{
17
+ story: stories.delimited
18
+ }, {
19
+ story: stories.notDelimited
20
+ }, {
21
+ story: stories.empty
22
+ }]
23
+ });
24
+ };
25
+ var _default = exports.default = DocsPage;
@@ -0,0 +1,78 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.DelimitedList = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
+ var _react = _interopRequireDefault(require("react"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+ var _devtools = require("../../global/js/utils/devtools");
14
+ var _settings = require("../../settings");
15
+ var _excluded = ["className", "delimiter", "items", "truncate"];
16
+ /**
17
+ * Copyright IBM Corp. 2024, 2024
18
+ *
19
+ * This source code is licensed under the Apache-2.0 license found in the
20
+ * LICENSE file in the root directory of this source tree.
21
+ */
22
+ // Import portions of React that are needed.
23
+ // Other standard imports.
24
+ var blockClass = "".concat(_settings.pkg.prefix, "--delimited-list");
25
+ var componentName = 'DelimitedList';
26
+ var defaults = {
27
+ delimiter: ', ',
28
+ items: [],
29
+ truncate: true
30
+ };
31
+
32
+ /**
33
+ * `DelimitedList` converts an array of items into a single line of
34
+ * comma-separated values.
35
+ */
36
+ var DelimitedList = exports.DelimitedList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
37
+ var className = _ref.className,
38
+ _ref$delimiter = _ref.delimiter,
39
+ delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
40
+ _ref$items = _ref.items,
41
+ items = _ref$items === void 0 ? defaults.items : _ref$items,
42
+ _ref$truncate = _ref.truncate,
43
+ truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
44
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
45
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
46
+ className: (0, _classnames.default)(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
47
+ ref: ref
48
+ }, (0, _devtools.getDevtoolsProps)(componentName)), items.length > 0 ? items.join(delimiter) : '–');
49
+ });
50
+
51
+ // Return a placeholder if not released and not enabled by feature flag
52
+ exports.DelimitedList = DelimitedList = _settings.pkg.checkComponentEnabled(DelimitedList, componentName);
53
+
54
+ // The display name of the component, used by React. Note that displayName
55
+ // is used in preference to relying on function.name.
56
+ DelimitedList.displayName = componentName;
57
+
58
+ // The types and DocGen commentary for the component props,
59
+ // in alphabetical order (for consistency).
60
+ // See https://www.npmjs.com/package/prop-types#usage.
61
+ DelimitedList.propTypes = {
62
+ /**
63
+ * Provide an optional class to be applied to the containing node.
64
+ */
65
+ className: _propTypes.default.string,
66
+ /**
67
+ * The character(s) used to separate the items.
68
+ */
69
+ delimiter: _propTypes.default.string,
70
+ /**
71
+ * Array of items to be listed.
72
+ */
73
+ items: _propTypes.default.arrayOf(_propTypes.default.any),
74
+ /**
75
+ * Toggle the component's ability to truncate or not.
76
+ */
77
+ truncate: _propTypes.default.bool
78
+ };
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "DelimitedList", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _DelimitedList.DelimitedList;
10
+ }
11
+ });
12
+ var _DelimitedList = require("./DelimitedList");