@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.
- package/README.md +8 -5
- package/css/index-full-carbon.css +531 -251
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +199 -177
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +243 -189
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +223 -192
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
- package/es/components/DelimitedList/DelimitedList.js +73 -0
- package/es/components/DelimitedList/index.js +8 -0
- package/es/components/SidePanel/SidePanel.js +145 -189
- package/es/components/TagSet/TagSet.js +21 -5
- package/es/components/TagSet/TagSetOverflow.js +13 -8
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +5 -2
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
- package/lib/components/DelimitedList/DelimitedList.js +78 -0
- package/lib/components/DelimitedList/index.js +12 -0
- package/lib/components/SidePanel/SidePanel.js +145 -189
- package/lib/components/TagSet/TagSet.js +21 -5
- package/lib/components/TagSet/TagSetOverflow.js +12 -7
- package/lib/components/index.js +8 -1
- package/lib/global/js/hooks/useResizeObserver.js +5 -2
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +9 -8
- package/scss/components/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
- package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
- package/scss/components/DelimitedList/_delimited-list.scss +27 -0
- package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
- package/scss/components/DelimitedList/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
- package/scss/components/SidePanel/_side-panel.scss +155 -187
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- 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
|
-
|
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.
|
74
|
+
}, [ref].concat(_toConsumableArray(deps)));
|
72
75
|
return {
|
73
76
|
width: width,
|
74
77
|
height: height
|
@@ -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()))), (
|
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:
|
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
|
130
|
+
var filterCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
|
131
131
|
// // check if the filter already exists in the array
|
132
|
-
var filter =
|
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
|
-
|
140
|
+
filterCopy.push({
|
141
141
|
id: column,
|
142
142
|
value: value,
|
143
143
|
type: type
|
144
144
|
});
|
145
145
|
}
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
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(
|
203
|
-
|
204
|
-
// // Automatically apply the filters if the updateMethod is instant
|
161
|
+
setFiltersObjectArray(filterCopy);
|
205
162
|
if (updateMethod === _constants.INSTANT) {
|
206
|
-
setAllFilters(
|
163
|
+
setAllFilters(filterCopy);
|
207
164
|
}
|
208
165
|
};
|
166
|
+
|
209
167
|
/** Render the individual filter component */
|
210
|
-
var renderFilter = function renderFilter(
|
168
|
+
var renderFilter = function renderFilter(_ref6) {
|
211
169
|
var _filtersState$column3, _filtersState$column4;
|
212
|
-
var type =
|
213
|
-
column =
|
214
|
-
components =
|
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(_,
|
236
|
-
var 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
|
285
|
+
var _ref8, _radio$id;
|
328
286
|
return /*#__PURE__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
|
329
|
-
key: (
|
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(
|
296
|
+
onChange: function onChange(_ref9) {
|
339
297
|
var _components$Dropdown$, _components$Dropdown;
|
340
|
-
var 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");
|