@carbon/ibm-products 1.69.0 → 1.70.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/css/index-full-carbon.css +17 -5
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +16 -5
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +17 -5
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +17 -5
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/ButtonMenu/ButtonMenu.js +11 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +9 -8
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +14 -6
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -8
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
- package/es/components/Datagrid/useActionsColumn.js +18 -14
- package/es/components/Datagrid/useFiltering.js +3 -1
- package/es/components/Datagrid/useNestedRowExpander.js +2 -2
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/Datagrid/utils/filterPropsForTesting.js +150 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
- package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
- package/es/components/FilterSummary/FilterSummary.js +19 -15
- package/es/components/InterstitialScreen/InterstitialScreen.js +8 -7
- package/lib/components/ButtonMenu/ButtonMenu.js +11 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -8
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +14 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -10
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
- package/lib/components/Datagrid/useActionsColumn.js +17 -13
- package/lib/components/Datagrid/useFiltering.js +2 -0
- package/lib/components/Datagrid/useNestedRowExpander.js +1 -1
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/Datagrid/utils/filterPropsForTesting.js +159 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
- package/lib/components/FilterSummary/FilterSummary.js +18 -14
- package/lib/components/InterstitialScreen/InterstitialScreen.js +8 -6
- package/package.json +2 -2
- package/scss/components/Datagrid/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +10 -4
- package/scss/components/InterstitialScreen/_interstitial-screen.scss +1 -0
- package/scss/components/SidePanel/_side-panel.scss +5 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
|
|
3
|
+
var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuAriaLabel", "menuOptionsClass", "renderIcon", "size"];
|
|
4
4
|
/**
|
|
5
5
|
* Copyright IBM Corp. 2021, 2021
|
|
6
6
|
*
|
|
@@ -18,6 +18,7 @@ import { pkg, carbon } from '../../settings';
|
|
|
18
18
|
|
|
19
19
|
// Carbon and package components we use.
|
|
20
20
|
import { Button, OverflowMenu } from 'carbon-components-react';
|
|
21
|
+
import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
|
|
21
22
|
|
|
22
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
23
24
|
var blockClass = "".concat(pkg.prefix, "--button-menu");
|
|
@@ -39,12 +40,14 @@ var defaults = {
|
|
|
39
40
|
* OverflowMenuItem component.
|
|
40
41
|
*/
|
|
41
42
|
export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
43
|
+
var _ref2;
|
|
42
44
|
var children = _ref.children,
|
|
43
45
|
className = _ref.className,
|
|
44
46
|
iconDescription = _ref.iconDescription,
|
|
45
47
|
_ref$kind = _ref.kind,
|
|
46
48
|
kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
|
|
47
49
|
label = _ref.label,
|
|
50
|
+
menuAriaLabel = _ref.menuAriaLabel,
|
|
48
51
|
menuOptionsClass = _ref.menuOptionsClass,
|
|
49
52
|
Icon = _ref.renderIcon,
|
|
50
53
|
_ref$size = _ref.size,
|
|
@@ -59,6 +62,7 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
59
62
|
|
|
60
63
|
menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
|
|
61
64
|
size: size,
|
|
65
|
+
ariaLabel: (_ref2 = menuAriaLabel !== null && menuAriaLabel !== void 0 ? menuAriaLabel : getNodeTextContent(label)) !== null && _ref2 !== void 0 ? _ref2 : undefined,
|
|
62
66
|
renderIcon: function renderIcon() {
|
|
63
67
|
return /*#__PURE__*/React.createElement("div", {
|
|
64
68
|
className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--").concat(kind), "".concat(carbon.prefix, "--btn--").concat(buttonSize)])
|
|
@@ -105,6 +109,12 @@ ButtonMenu.propTypes = {
|
|
|
105
109
|
* The button label for the menu trigger.
|
|
106
110
|
*/
|
|
107
111
|
label: PropTypes.node,
|
|
112
|
+
/**
|
|
113
|
+
* Provide the menuAriaLabel prop to be passed to the ButtonMenu component.
|
|
114
|
+
* This optional label should contain or match the visible labels or
|
|
115
|
+
* it will automatically take button label
|
|
116
|
+
*/
|
|
117
|
+
menuAriaLabel: PropTypes.string,
|
|
108
118
|
/**
|
|
109
119
|
* class name applied to the overflow options
|
|
110
120
|
*/
|
|
@@ -88,7 +88,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
|
88
88
|
});
|
|
89
89
|
var renderTable = function renderTable() {
|
|
90
90
|
var _getTableProps;
|
|
91
|
-
return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
|
91
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
|
|
92
92
|
className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
|
93
93
|
role: withInlineEdit && 'grid',
|
|
94
94
|
tabIndex: withInlineEdit && 0,
|
|
@@ -109,7 +109,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
|
109
109
|
title: title
|
|
110
110
|
}), !withVirtualScroll && /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
|
|
111
111
|
rows: contentRows
|
|
112
|
-
})));
|
|
112
|
+
}))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
|
|
113
113
|
};
|
|
114
114
|
var _useMultipleKeyTracki = useMultipleKeyTracking({
|
|
115
115
|
ref: withInlineEdit ? multiKeyTrackingRef : null,
|
|
@@ -134,8 +134,6 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
|
134
134
|
useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
|
|
135
135
|
return clearSingleFilter(id, setAllFilters, state);
|
|
136
136
|
});
|
|
137
|
-
|
|
138
|
-
/* istanbul ignore next */
|
|
139
137
|
var renderFilterSummary = function renderFilterSummary() {
|
|
140
138
|
return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
|
|
141
139
|
className: "".concat(blockClass, "__filter-summary"),
|
|
@@ -147,6 +145,11 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
|
147
145
|
overflowType: "tag"
|
|
148
146
|
});
|
|
149
147
|
};
|
|
148
|
+
var renderPagination = function renderPagination() {
|
|
149
|
+
if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
|
|
150
|
+
return /*#__PURE__*/React.createElement(DatagridPagination, datagridState);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
150
153
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
|
|
151
154
|
className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx5 = {}, _defineProperty(_cx5, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx5, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx5, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx5)),
|
|
152
155
|
title: gridTitle,
|
|
@@ -154,9 +157,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
|
154
157
|
}, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
|
|
155
158
|
className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
|
|
156
159
|
ref: gridAreaRef
|
|
157
|
-
}, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
|
|
158
|
-
updateMethod: "batch"
|
|
159
|
-
}, getFilterFlyoutProps(), {
|
|
160
|
+
}, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({}, getFilterFlyoutProps(), {
|
|
160
161
|
title: filterProps.panelTitle,
|
|
161
162
|
filterSections: filterProps.sections,
|
|
162
163
|
isFetching: isFetching
|
|
@@ -167,7 +168,7 @@ export var DatagridContent = function DatagridContent(_ref) {
|
|
|
167
168
|
}, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
|
|
168
169
|
className: "".concat(blockClass, "__virtualScrollContainer"),
|
|
169
170
|
ref: gridRef
|
|
170
|
-
}, renderTable()) : renderTable()))), (
|
|
171
|
+
}, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
|
|
171
172
|
instance: datagridState
|
|
172
173
|
}));
|
|
173
174
|
};
|
|
@@ -37,7 +37,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
|
37
37
|
prepareRow = datagridState.prepareRow,
|
|
38
38
|
key = datagridState.key,
|
|
39
39
|
tableId = datagridState.tableId,
|
|
40
|
-
withExpandedRows = datagridState.withExpandedRows
|
|
40
|
+
withExpandedRows = datagridState.withExpandedRows,
|
|
41
|
+
withMouseHover = datagridState.withMouseHover,
|
|
42
|
+
setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
|
|
41
43
|
var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
|
|
42
44
|
var isExpanded = _ref.isExpanded,
|
|
43
45
|
subRows = _ref.subRows;
|
|
@@ -82,6 +84,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
|
82
84
|
return null;
|
|
83
85
|
};
|
|
84
86
|
var handleMouseLeave = function handleMouseLeave(event) {
|
|
87
|
+
if (withMouseHover) {
|
|
88
|
+
setMouseOverRowIndex(null);
|
|
89
|
+
}
|
|
85
90
|
var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
|
|
86
91
|
hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
|
87
92
|
};
|
|
@@ -44,7 +44,8 @@ var SelectAll = function SelectAll(datagridState) {
|
|
|
44
44
|
dispatch = datagridState.dispatch,
|
|
45
45
|
rows = datagridState.rows,
|
|
46
46
|
getRowId = datagridState.getRowId,
|
|
47
|
-
toggleAllRowsSelected = datagridState.toggleAllRowsSelected
|
|
47
|
+
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
|
48
|
+
onAllRowSelect = datagridState.onAllRowSelect;
|
|
48
49
|
var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
|
|
49
50
|
if (hideSelectAll || radio) {
|
|
50
51
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -66,6 +67,7 @@ var SelectAll = function SelectAll(datagridState) {
|
|
|
66
67
|
indeterminate: true
|
|
67
68
|
});
|
|
68
69
|
toggleAllRowsSelected(false);
|
|
70
|
+
onAllRowSelect === null || onAllRowSelect === void 0 ? void 0 : onAllRowSelect(rows, event);
|
|
69
71
|
return onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
70
72
|
target: {
|
|
71
73
|
checked: false
|
|
@@ -78,6 +80,7 @@ var SelectAll = function SelectAll(datagridState) {
|
|
|
78
80
|
getRowId: getRowId,
|
|
79
81
|
isChecked: event.target.checked
|
|
80
82
|
});
|
|
83
|
+
onAllRowSelect === null || onAllRowSelect === void 0 ? void 0 : onAllRowSelect(rows, event);
|
|
81
84
|
return onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
82
85
|
};
|
|
83
86
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -40,7 +40,7 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
|
40
40
|
}, "".concat(blockClass, "__draggable-handleStyle"))
|
|
41
41
|
}, isSticky ? /*#__PURE__*/React.createElement(Locked16, null) : /*#__PURE__*/React.createElement(Draggable16, null)), children);
|
|
42
42
|
var style = {
|
|
43
|
-
transform: CSS.Transform.toString(transform),
|
|
43
|
+
transform: !disabled ? CSS.Transform.toString(transform) : {},
|
|
44
44
|
transition: transition
|
|
45
45
|
};
|
|
46
46
|
return /*#__PURE__*/React.createElement("li", _extends({
|
|
@@ -38,6 +38,9 @@ var Columns = function Columns(_ref) {
|
|
|
38
38
|
$splice: [[from, 1], [to, 0, fromCol]]
|
|
39
39
|
}));
|
|
40
40
|
}, [columns, setColumnsObject]);
|
|
41
|
+
var filteredStickyColumn = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
|
|
42
|
+
return !item.sticky;
|
|
43
|
+
});
|
|
41
44
|
return /*#__PURE__*/React.createElement("div", {
|
|
42
45
|
className: "".concat(blockClass, "__customize-columns-column-list"),
|
|
43
46
|
ref: listRef
|
|
@@ -61,7 +64,7 @@ var Columns = function Columns(_ref) {
|
|
|
61
64
|
checked: getVisibleColumnsCount() === columns.length,
|
|
62
65
|
indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
|
|
63
66
|
onChange: function onChange() {
|
|
64
|
-
onSelectColumn(
|
|
67
|
+
onSelectColumn(filteredStickyColumn, getVisibleColumnsCount() !== columns.length);
|
|
65
68
|
},
|
|
66
69
|
id: "".concat(blockClass, "__customization-column-select-all"),
|
|
67
70
|
labelText: selectAllLabel
|
package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
|
@@ -90,7 +90,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
|
90
90
|
};
|
|
91
91
|
var onCheckboxCheck = function onCheckboxCheck(col, value) {
|
|
92
92
|
var changedDefinitions = columnObjects.map(function (definition) {
|
|
93
|
-
if (Array.isArray(col) && col.indexOf(definition) !=
|
|
93
|
+
if (Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) {
|
|
94
94
|
return _objectSpread(_objectSpread({}, definition), {}, {
|
|
95
95
|
isVisible: value
|
|
96
96
|
});
|
|
@@ -21,18 +21,23 @@ import { useSubscribeToEventEmitter, useFilters, useShouldDisableButtons } from
|
|
|
21
21
|
import { carbon } from '../../../../../settings';
|
|
22
22
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
23
23
|
var componentClass = "".concat(blockClass, "-filter-flyout");
|
|
24
|
+
var defaults = {
|
|
25
|
+
flyoutIconDescription: 'Open filters',
|
|
26
|
+
title: 'Filter',
|
|
27
|
+
primaryActionLabel: 'Apply',
|
|
28
|
+
secondaryActionLabel: 'Cancel'
|
|
29
|
+
};
|
|
24
30
|
var FilterFlyout = function FilterFlyout(_ref) {
|
|
25
31
|
var _cx2;
|
|
26
|
-
var
|
|
27
|
-
updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
|
|
32
|
+
var updateMethod = _ref.updateMethod,
|
|
28
33
|
_ref$flyoutIconDescri = _ref.flyoutIconDescription,
|
|
29
|
-
flyoutIconDescription = _ref$flyoutIconDescri === void 0 ?
|
|
34
|
+
flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
|
|
30
35
|
_ref$filters = _ref.filters,
|
|
31
36
|
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
|
32
37
|
_ref$title = _ref.title,
|
|
33
|
-
title = _ref$title === void 0 ?
|
|
38
|
+
title = _ref$title === void 0 ? defaults.title : _ref$title,
|
|
34
39
|
_ref$primaryActionLab = _ref.primaryActionLabel,
|
|
35
|
-
primaryActionLabel = _ref$primaryActionLab === void 0 ?
|
|
40
|
+
primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
|
|
36
41
|
_ref$onFlyoutOpen = _ref.onFlyoutOpen,
|
|
37
42
|
onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
|
|
38
43
|
_ref$onFlyoutClose = _ref.onFlyoutClose,
|
|
@@ -42,7 +47,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
|
42
47
|
_ref$onCancel = _ref.onCancel,
|
|
43
48
|
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
|
44
49
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
|
45
|
-
secondaryActionLabel = _ref$secondaryActionL === void 0 ?
|
|
50
|
+
secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
|
|
46
51
|
setAllFilters = _ref.setAllFilters,
|
|
47
52
|
_ref$data = _ref.data,
|
|
48
53
|
data = _ref$data === void 0 ? [] : _ref$data,
|
|
@@ -88,6 +93,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
|
|
|
88
93
|
_useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
|
|
89
94
|
shouldDisableButtons = _useShouldDisableButt2[0],
|
|
90
95
|
setShouldDisableButtons = _useShouldDisableButt2[1];
|
|
96
|
+
|
|
97
|
+
// Skip resize testing
|
|
98
|
+
/* istanbul ignore next */
|
|
91
99
|
var handleResize = function handleResize(current) {
|
|
92
100
|
var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
|
|
93
101
|
var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
|
|
@@ -24,14 +24,21 @@ import { useFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from
|
|
|
24
24
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
25
25
|
var componentClass = "".concat(blockClass, "-filter-panel");
|
|
26
26
|
var MotionActionSet = motion(ActionSet);
|
|
27
|
+
var defaults = {
|
|
28
|
+
title: 'Filter',
|
|
29
|
+
closeIconDescription: 'Close filter panel',
|
|
30
|
+
primaryActionLabel: 'Apply',
|
|
31
|
+
secondaryActionLabel: 'Cancel',
|
|
32
|
+
searchLabelText: 'Filter search',
|
|
33
|
+
searchPlaceholder: 'Find filters'
|
|
34
|
+
};
|
|
27
35
|
var FilterPanel = function FilterPanel(_ref) {
|
|
28
36
|
var _cx;
|
|
29
37
|
var _ref$title = _ref.title,
|
|
30
|
-
title = _ref$title === void 0 ?
|
|
38
|
+
title = _ref$title === void 0 ? defaults.title : _ref$title,
|
|
31
39
|
_ref$closeIconDescrip = _ref.closeIconDescription,
|
|
32
|
-
closeIconDescription = _ref$closeIconDescrip === void 0 ?
|
|
33
|
-
|
|
34
|
-
updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
|
|
40
|
+
closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
|
|
41
|
+
updateMethod = _ref.updateMethod,
|
|
35
42
|
filterSections = _ref.filterSections,
|
|
36
43
|
setAllFilters = _ref.setAllFilters,
|
|
37
44
|
_ref$onApply = _ref.onApply,
|
|
@@ -47,13 +54,13 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
47
54
|
_ref$filterPanelMinHe = _ref.filterPanelMinHeight,
|
|
48
55
|
filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
|
|
49
56
|
_ref$primaryActionLab = _ref.primaryActionLabel,
|
|
50
|
-
primaryActionLabel = _ref$primaryActionLab === void 0 ?
|
|
57
|
+
primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
|
|
51
58
|
_ref$secondaryActionL = _ref.secondaryActionLabel,
|
|
52
|
-
secondaryActionLabel = _ref$secondaryActionL === void 0 ?
|
|
59
|
+
secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
|
|
53
60
|
_ref$searchLabelText = _ref.searchLabelText,
|
|
54
|
-
searchLabelText = _ref$searchLabelText === void 0 ?
|
|
61
|
+
searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
|
|
55
62
|
_ref$searchPlaceholde = _ref.searchPlaceholder,
|
|
56
|
-
searchPlaceholder = _ref$searchPlaceholde === void 0 ?
|
|
63
|
+
searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
|
|
57
64
|
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
|
58
65
|
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
|
|
59
66
|
_ref$isFetching = _ref.isFetching,
|
|
@@ -177,7 +184,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
177
184
|
var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
|
|
178
185
|
var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
|
|
179
186
|
var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
|
|
180
|
-
var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(
|
|
187
|
+
var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
|
|
188
|
+
showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)") : 0;
|
|
181
189
|
return height;
|
|
182
190
|
};
|
|
183
191
|
return /*#__PURE__*/React.createElement(motion.div, {
|
|
@@ -203,7 +211,10 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
|
203
211
|
tooltipPosition: "bottom",
|
|
204
212
|
tooltipAlignment: "end",
|
|
205
213
|
onClick: closePanel
|
|
206
|
-
}), showFilterSearch &&
|
|
214
|
+
}), showFilterSearch &&
|
|
215
|
+
/*#__PURE__*/
|
|
216
|
+
/* istanbul ignore next */
|
|
217
|
+
React.createElement("div", {
|
|
207
218
|
ref: filterSearchRef,
|
|
208
219
|
className: "".concat(componentClass, "__search")
|
|
209
220
|
}, /*#__PURE__*/React.createElement(Search, {
|
|
@@ -4,12 +4,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
6
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
|
-
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
|
7
|
+
/**
|
|
8
|
+
* Copyright IBM Corp. 2023, 2024
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
|
13
12
|
*/
|
|
14
13
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
15
14
|
import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput, RadioButton, RadioButtonGroup } from 'carbon-components-react';
|
|
@@ -23,8 +22,7 @@ var useFilters = function useFilters(_ref) {
|
|
|
23
22
|
setAllFilters = _ref.setAllFilters,
|
|
24
23
|
variation = _ref.variation,
|
|
25
24
|
reactTableFiltersState = _ref.reactTableFiltersState,
|
|
26
|
-
|
|
27
|
-
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
|
25
|
+
onCancel = _ref.onCancel,
|
|
28
26
|
panelOpen = _ref.panelOpen,
|
|
29
27
|
isFetching = _ref.isFetching;
|
|
30
28
|
/** State */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
/**
|
|
3
|
-
* Copyright IBM Corp. 2023,
|
|
3
|
+
* Copyright IBM Corp. 2023, 2024
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -18,8 +18,7 @@ import isEqual from 'lodash/isEqual';
|
|
|
18
18
|
* @returns {Array} returns a tuple of the state and setter function
|
|
19
19
|
*/
|
|
20
20
|
var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
|
|
21
|
-
var
|
|
22
|
-
initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
|
|
21
|
+
var initialValue = _ref.initialValue,
|
|
23
22
|
filtersState = _ref.filtersState,
|
|
24
23
|
prevFiltersRef = _ref.prevFiltersRef;
|
|
25
24
|
var _useState = useState(initialValue),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2022,
|
|
2
|
+
* Copyright IBM Corp. 2022, 2024
|
|
3
3
|
*
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -18,9 +18,7 @@ var applyInitialFilters = function applyInitialFilters(filterState, initialFilte
|
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
// This functions takes the filters passed in and makes an object to track it's state
|
|
21
|
-
export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
|
|
22
|
-
var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
|
|
23
|
-
var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
21
|
+
export var getInitialStateFromFilters = function getInitialStateFromFilters(filters, variation, initialFilters) {
|
|
24
22
|
var initialFilterState = {};
|
|
25
23
|
var setInitialState = function setInitialState(_ref) {
|
|
26
24
|
var type = _ref.type,
|
|
@@ -74,8 +72,6 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
|
|
|
74
72
|
return setInitialState(filter);
|
|
75
73
|
});
|
|
76
74
|
});
|
|
77
|
-
} else {
|
|
78
|
-
console.error('No variation passed into useInitialStateFromFilters');
|
|
79
75
|
}
|
|
80
76
|
if (initialFilters.length > 0) {
|
|
81
77
|
applyInitialFilters(initialFilterState, initialFilters);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["id", "itemText", "onClick", "
|
|
4
|
+
var _excluded = ["id", "itemText", "onClick", "shouldHideMenuItem", "align", "icon"],
|
|
5
5
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -14,8 +14,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
14
14
|
|
|
15
15
|
import React from 'react';
|
|
16
16
|
import cx from 'classnames';
|
|
17
|
-
import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
|
|
17
|
+
import { IconSkeleton, OverflowMenu, OverflowMenuItem, Button } from 'carbon-components-react';
|
|
18
18
|
import { pkg } from '../../settings';
|
|
19
|
+
import { prepareProps } from '../../global/js/utils/props-helper';
|
|
19
20
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
20
21
|
var useActionsColumn = function useActionsColumn(hooks) {
|
|
21
22
|
var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
|
|
@@ -50,12 +51,14 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
|
50
51
|
display: 'flex'
|
|
51
52
|
}
|
|
52
53
|
}, rowActions.map(function (action, index) {
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
shouldHideMenuItem =
|
|
58
|
-
|
|
54
|
+
var preparedActionProps = prepareProps(action, ['isDelete']);
|
|
55
|
+
var id = preparedActionProps.id,
|
|
56
|
+
itemText = preparedActionProps.itemText,
|
|
57
|
+
_onClick = preparedActionProps.onClick,
|
|
58
|
+
shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
|
|
59
|
+
align = preparedActionProps.align,
|
|
60
|
+
icon = preparedActionProps.icon,
|
|
61
|
+
rest = _objectWithoutProperties(preparedActionProps, _excluded);
|
|
59
62
|
var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
|
|
60
63
|
if (hidden) {
|
|
61
64
|
return null;
|
|
@@ -63,13 +66,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
|
63
66
|
return /*#__PURE__*/React.createElement("div", {
|
|
64
67
|
className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
|
|
65
68
|
key: "".concat(itemText, "__").concat(index)
|
|
66
|
-
}, /*#__PURE__*/React.createElement(
|
|
69
|
+
}, /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
|
|
70
|
+
tooltipPosition: align || 'top',
|
|
71
|
+
kind: "ghost",
|
|
72
|
+
name: itemText //for test use
|
|
73
|
+
,
|
|
67
74
|
renderIcon: icon,
|
|
68
|
-
hasIconOnly: true,
|
|
69
|
-
light: true,
|
|
70
75
|
iconDescription: itemText,
|
|
71
|
-
ariaLabel: itemText,
|
|
72
|
-
kind: "ghost",
|
|
73
76
|
className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
|
|
74
77
|
onClick: function onClick(e) {
|
|
75
78
|
if (getDisabledState(row.index)) {
|
|
@@ -78,7 +81,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
|
78
81
|
}
|
|
79
82
|
e.stopPropagation();
|
|
80
83
|
_onClick(id, row, e);
|
|
81
|
-
}
|
|
84
|
+
},
|
|
85
|
+
hasIconOnly: true
|
|
82
86
|
})));
|
|
83
87
|
})), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
|
|
84
88
|
size: "sm",
|
|
@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
/**
|
|
7
|
-
* Copyright IBM Corp. 2022,
|
|
7
|
+
* Copyright IBM Corp. 2022, 2024
|
|
8
8
|
*
|
|
9
9
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -18,6 +18,8 @@ var useFiltering = function useFiltering(hooks) {
|
|
|
18
18
|
useEffect(function () {
|
|
19
19
|
pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
|
|
20
20
|
}, []);
|
|
21
|
+
|
|
22
|
+
/* istanbul ignore next */
|
|
21
23
|
var filterTypes = useMemo(function () {
|
|
22
24
|
return {
|
|
23
25
|
date: function date(rows, id, _ref) {
|
|
@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
/* eslint-disable react/prop-types */
|
|
7
7
|
/**
|
|
8
|
-
* Copyright IBM Corp. 2020,
|
|
8
|
+
* Copyright IBM Corp. 2020, 2024
|
|
9
9
|
*
|
|
10
10
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -27,7 +27,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
|
|
27
27
|
instance: tempState === null || tempState === void 0 ? void 0 : tempState.current,
|
|
28
28
|
lastExpandedRowIndex: lastExpandedRowIndex === null || lastExpandedRowIndex === void 0 ? void 0 : lastExpandedRowIndex.current,
|
|
29
29
|
blockClass: blockClass,
|
|
30
|
-
activeElement: document.activeElement
|
|
30
|
+
activeElement: typeof document !== 'undefined' && document.activeElement
|
|
31
31
|
});
|
|
32
32
|
var visibleColumns = function visibleColumns(columns) {
|
|
33
33
|
var expanderColumn = {
|
|
@@ -37,7 +37,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
|
|
|
37
37
|
});
|
|
38
38
|
});
|
|
39
39
|
Object.assign(instance, {
|
|
40
|
-
rows: rowsWithMouseOver
|
|
40
|
+
rows: rowsWithMouseOver,
|
|
41
|
+
withMouseHover: true,
|
|
42
|
+
setMouseOverRowIndex: setMouseOverRowIndex
|
|
41
43
|
});
|
|
42
44
|
hooks.getRowProps.push(getRowProps);
|
|
43
45
|
};
|