@carbon/ibm-products 1.40.0 → 1.41.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 (40) hide show
  1. package/css/index-full-carbon.css +18 -0
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +18 -0
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +2 -2
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +18 -0
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +2 -2
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -3
  14. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +5 -4
  15. package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  16. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +9 -3
  17. package/es/components/Datagrid/Datagrid/DatagridRow.js +2 -8
  18. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +27 -8
  19. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +26 -36
  20. package/es/components/Datagrid/Datagrid.stories/index.js +1 -1
  21. package/es/components/Datagrid/useFiltering.js +0 -2
  22. package/es/components/Datagrid/useParentDimensions.js +3 -1
  23. package/es/components/Datagrid/utils/getArgTypes.js +5 -0
  24. package/es/components/Datagrid/utils/getInlineEditColumns.js +6 -1
  25. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -3
  26. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +5 -4
  27. package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
  28. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +9 -3
  29. package/lib/components/Datagrid/Datagrid/DatagridRow.js +2 -11
  30. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +27 -8
  31. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +26 -36
  32. package/lib/components/Datagrid/Datagrid.stories/index.js +1 -1
  33. package/lib/components/Datagrid/useFiltering.js +0 -2
  34. package/lib/components/Datagrid/useParentDimensions.js +3 -1
  35. package/lib/components/Datagrid/utils/getArgTypes.js +5 -0
  36. package/lib/components/Datagrid/utils/getInlineEditColumns.js +6 -1
  37. package/package.json +2 -2
  38. package/scss/components/Datagrid/_storybook-styles.scss +7 -0
  39. package/scss/components/Datagrid/styles/_datagrid.scss +17 -0
  40. package/scss/components/FilterSummary/_filter-summary.scss +1 -0
@@ -22,7 +22,9 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
22
22
  emptyStateSize = datagridState.emptyStateSize,
23
23
  _datagridState$emptyS = datagridState.emptyStateType,
24
24
  emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
25
- illustrationTheme = datagridState.illustrationTheme;
25
+ illustrationTheme = datagridState.illustrationTheme,
26
+ emptyStateAction = datagridState.emptyStateAction,
27
+ emptyStateLink = datagridState.emptyStateLink;
26
28
  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
27
29
  className: "".concat(blockClass, "__empty-state-body")
28
30
  }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
@@ -31,12 +33,16 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
31
33
  illustrationTheme: illustrationTheme,
32
34
  size: emptyStateSize,
33
35
  title: emptyStateTitle,
34
- subtitle: emptyStateDescription
36
+ subtitle: emptyStateDescription,
37
+ action: emptyStateAction,
38
+ link: emptyStateLink
35
39
  }), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, {
36
40
  illustrationTheme: illustrationTheme,
37
41
  size: emptyStateSize,
38
42
  title: emptyStateTitle,
39
- subtitle: emptyStateDescription
43
+ subtitle: emptyStateDescription,
44
+ action: emptyStateAction,
45
+ link: emptyStateLink
40
46
  }))));
41
47
  };
42
48
  export default DatagridEmptyBody;
@@ -10,14 +10,12 @@ var _excluded = ["children"];
10
10
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11
11
  */
12
12
  // @flow
13
- import React, { useContext } from 'react';
13
+ import React from 'react';
14
14
  import { DataTable, SkeletonText } from 'carbon-components-react';
15
15
  import { px } from '@carbon/layout';
16
16
  import cx from 'classnames';
17
17
  import { selectionColumnId } from '../common-column-ids';
18
18
  import { pkg, carbon } from '../../../settings';
19
- import { InlineEditContext } from './addons/InlineEdit/InlineEditContext/InlineEditContext';
20
- import { getCellIdAsObject } from './addons/InlineEdit/InlineEditContext/getCellIdAsObject';
21
19
  var blockClass = "".concat(pkg.prefix, "--datagrid");
22
20
  var TableRow = DataTable.TableRow,
23
21
  TableCell = DataTable.TableCell;
@@ -35,10 +33,6 @@ var DatagridRow = function DatagridRow(datagridState) {
35
33
  var row = datagridState.row,
36
34
  rowSize = datagridState.rowSize,
37
35
  withNestedRows = datagridState.withNestedRows;
38
- var _useContext = useContext(InlineEditContext),
39
- state = _useContext.state;
40
- var activeCellId = state.activeCellId;
41
- var activeCellObject = activeCellId && getCellIdAsObject(activeCellId);
42
36
  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
43
37
  var isExpanded = _ref.isExpanded,
44
38
  subRows = _ref.subRows;
@@ -52,7 +46,7 @@ var DatagridRow = function DatagridRow(datagridState) {
52
46
  return size;
53
47
  };
54
48
  return /*#__PURE__*/React.createElement(TableRow, _extends({
55
- className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
49
+ className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
56
50
  }, row.getRowProps(), {
57
51
  key: row.id,
58
52
  onMouseEnter: function onMouseEnter(event) {
@@ -13,6 +13,8 @@ import React, { useEffect } from 'react';
13
13
  import { VariableSizeList } from 'react-window';
14
14
  import { DataTable } from 'carbon-components-react';
15
15
  import { pkg } from '../../../settings';
16
+ import DatagridHead from './DatagridHead';
17
+ import { px } from '@carbon/layout';
16
18
  var blockClass = "".concat(pkg.prefix, "--datagrid");
17
19
  var TableBody = DataTable.TableBody;
18
20
  var rowSizeMap = {
@@ -29,6 +31,7 @@ var rowSizeMap = {
29
31
  };
30
32
  var defaultRowHeight = rowSizeMap.lg;
31
33
  var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
34
+ var _gridRef$current, _gridRef$current2;
32
35
  var getTableBodyProps = datagridState.getTableBodyProps,
33
36
  rows = datagridState.rows,
34
37
  prepareRow = datagridState.prepareRow,
@@ -42,7 +45,14 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
42
45
  DatagridPagination = datagridState.DatagridPagination,
43
46
  page = datagridState.page,
44
47
  handleResize = datagridState.handleResize,
45
- withOverflowRow = datagridState.withOverflowRow;
48
+ gridRef = datagridState.gridRef;
49
+ var syncScroll = function syncScroll(e) {
50
+ var virtualBody = e.target;
51
+ document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
52
+ var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
53
+ spacerColumn.style.width = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
54
+ };
55
+
46
56
  useEffect(function () {
47
57
  handleResize();
48
58
  }, [handleResize]);
@@ -51,8 +61,16 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
51
61
  listRef.current.resetAfterIndex(0);
52
62
  }
53
63
  var visibleRows = DatagridPagination && page || rows;
54
- return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
55
- onScroll: onScroll
64
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
65
+ className: "".concat(blockClass, "__head-warp"),
66
+ style: {
67
+ width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
68
+ overflow: 'hidden'
69
+ }
70
+ }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
71
+ onScroll: function onScroll(e) {
72
+ return syncScroll(e);
73
+ }
56
74
  }), /*#__PURE__*/React.createElement(VariableSizeList, {
57
75
  height: virtualHeight || tableHeight,
58
76
  itemCount: visibleRows.length,
@@ -63,19 +81,20 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
63
81
  onScroll: onScroll,
64
82
  innerRef: innerListRef,
65
83
  ref: listRef,
66
- className: "".concat(blockClass, "__virtual-scrollbar")
84
+ className: "".concat(blockClass, "__virtual-scrollbar"),
85
+ style: {
86
+ width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
87
+ }
67
88
  }, function (_ref) {
68
89
  var index = _ref.index,
69
90
  style = _ref.style;
70
91
  var row = visibleRows[index];
71
92
  prepareRow(row);
72
93
  return /*#__PURE__*/React.createElement("div", {
73
- style: _objectSpread(_objectSpread({}, style), {}, {
74
- overflow: withOverflowRow ? 'visible' : 'hidden'
75
- })
94
+ style: _objectSpread({}, style)
76
95
  }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
77
96
  row: row
78
97
  })));
79
- }));
98
+ })));
80
99
  };
81
100
  export default DatagridVirtualBody;
@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
48
48
  onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
49
49
  _ref$onCancel = _ref.onCancel,
50
50
  onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
51
- _ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
52
- shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
53
51
  _ref$secondaryActionL = _ref.secondaryActionLabel,
54
52
  secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
55
- setAllFilters = _ref.setAllFilters,
56
- setFilter = _ref.setFilter;
53
+ setAllFilters = _ref.setAllFilters;
57
54
  /** Context state and methods */
58
55
  var _useContext = useContext(FilterContext),
59
56
  EventEmitter = _useContext.EventEmitter;
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
100
97
  prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
101
98
  };
102
99
  var cancel = function cancel() {
103
- revertToPreviousFilters();
104
- onCancel();
100
+ // Reverting to previous filters only applies when using batch actions
101
+ if (updateMethod === BATCH) {
102
+ revertToPreviousFilters();
103
+ onCancel();
104
+ }
105
105
  closeFlyout();
106
106
  };
107
107
  var reset = function reset() {
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
133
133
  if (type === DATE && !value[1]) {
134
134
  return;
135
135
  }
136
- if (updateMethod === BATCH) {
137
- var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
138
- // check if the filter already exists in the array
139
- var filter = filtersObjectArrayCopy.find(function (item) {
140
- return item.id === column;
136
+ var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
137
+ // check if the filter already exists in the array
138
+ var filter = filtersObjectArrayCopy.find(function (item) {
139
+ return item.id === column;
140
+ });
141
+
142
+ // if filter exists in array then update the filter's new value
143
+ if (filter) {
144
+ filter.value = value;
145
+ } else {
146
+ filtersObjectArrayCopy.push({
147
+ id: column,
148
+ value: value,
149
+ type: type
141
150
  });
151
+ }
152
+ setFiltersObjectArray(filtersObjectArrayCopy);
142
153
 
143
- // if filter exists in array then update the filter's new value
144
- if (filter) {
145
- filter.value = value;
146
- } else {
147
- filtersObjectArrayCopy.push({
148
- id: column,
149
- value: value,
150
- type: type
151
- });
152
- }
153
- setFiltersObjectArray(filtersObjectArrayCopy);
154
- } else if (updateMethod === INSTANT) {
155
- setFilter(column, value);
154
+ // Automatically apply the filters if the updateMethod is instant
155
+ if (updateMethod === INSTANT) {
156
+ setAllFilters(filtersObjectArrayCopy);
156
157
  }
157
- }, [setFilter, updateMethod, filtersObjectArray]);
158
+ }, [setAllFilters, updateMethod, filtersObjectArray]);
158
159
 
159
160
  /** Effects */
160
161
  useClickOutside(filterFlyoutRef, function (target) {
161
- if (shouldClickOutsideToClose === false) {
162
- return;
163
- }
164
162
  var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
165
163
  if (!open || hasClickedOnDatePicker) {
166
164
  return;
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
361
359
  * Function that sets all the filters, this comes from the datagridState
362
360
  */
363
361
  setAllFilters: PropTypes.func.isRequired,
364
- /**
365
- * Function that sets an individual filter, this comes from the datagridState
366
- */
367
- setFilter: PropTypes.func.isRequired,
368
- /**
369
- * Boolean if you want the flyout to close when clicked outside of the parent
370
- */
371
- shouldClickOutsideToClose: PropTypes.bool,
372
362
  /**
373
363
  * Title of the filter flyout
374
364
  */
@@ -2,4 +2,4 @@ export { story as CustomizeColumnStory } from './CustomizeColumnStory';
2
2
  export { default as StickyActionsColumn } from './StickyActionsColumnStory';
3
3
  export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
4
4
  export { story as LeftPanelStory } from './LeftPanelStory';
5
- export { story as SelectAllWitHToggle } from './SelectAllWithToggleStory';
5
+ export { story as SelectAllWithToggle } from './SelectAllWithToggleStory';
@@ -61,7 +61,6 @@ var useFiltering = function useFiltering(hooks) {
61
61
  hooks.useInstance.push(function (instance) {
62
62
  var filterProps = instance.filterProps,
63
63
  setAllFilters = instance.setAllFilters,
64
- setFilter = instance.setFilter,
65
64
  headers = instance.headers;
66
65
  var defaultProps = {
67
66
  variation: 'flyout'
@@ -69,7 +68,6 @@ var useFiltering = function useFiltering(hooks) {
69
68
  var getFilterFlyoutProps = function getFilterFlyoutProps() {
70
69
  return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
71
70
  setAllFilters: setAllFilters,
72
- setFilter: setFilter,
73
71
  headers: headers
74
72
  });
75
73
  };
@@ -12,6 +12,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
12
12
  var headRef = useRef();
13
13
  var innerListRef = useRef();
14
14
  var listRef = useRef();
15
+ var gridRef = useRef();
15
16
  var _useState = useState(),
16
17
  _useState2 = _slicedToArray(_useState, 2),
17
18
  tableHeight = _useState2[0],
@@ -47,7 +48,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
47
48
  headRef: headRef,
48
49
  innerListRef: innerListRef,
49
50
  handleResize: handleResize,
50
- listRef: listRef
51
+ listRef: listRef,
52
+ gridRef: gridRef
51
53
  });
52
54
  };
53
55
  hooks.useInstance.push(useInstance);
@@ -90,5 +90,10 @@ export var ARG_TYPES = {
90
90
  customizeColumnsProps: {
91
91
  control: 'object',
92
92
  description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
93
+ },
94
+ filterProps: {
95
+ name: 'Filter props',
96
+ control: 'object',
97
+ description: 'This is an object for all the props passed into the filter flyout and filter panel'
93
98
  }
94
99
  };
@@ -74,8 +74,13 @@ export var getInlineEditColumns = function getInlineEditColumns() {
74
74
  accessor: 'visits',
75
75
  width: 120,
76
76
  inlineEdit: {
77
+ validator: function validator(n) {
78
+ return n && n < 10;
79
+ },
77
80
  type: 'number',
78
- inputProps: {} // These props are passed to the Carbon component used for inline editing
81
+ inputProps: {
82
+ invalidText: 'Invalid number, must be 10 or greater'
83
+ } // These props are passed to the Carbon component used for inline editing
79
84
  }
80
85
  }, {
81
86
  Header: 'Active since',
@@ -186,9 +186,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
186
186
  // Removes the active cell element
187
187
  var removeActiveCell = (0, _react.useCallback)(function () {
188
188
  var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
189
- if (activeCellHighlight) {
190
- activeCellHighlight.style.display = 'none';
191
- }
189
+ activeCellHighlight.style.display = 'none';
192
190
  }, [spreadsheetRef]);
193
191
  var removeCellEditor = (0, _react.useCallback)(function () {
194
192
  setCellEditorValue('');
@@ -14,6 +14,7 @@ var _rangeWithCallback = require("../../../global/js/utils/rangeWithCallback");
14
14
  */
15
15
 
16
16
  var handleCellDeletion = function handleCellDeletion(_ref) {
17
+ var _selectionAreaToEmpty, _selectionAreaToEmpty2, _selectionAreaToEmpty3, _selectionAreaToEmpty4, _selectionAreaToEmpty5, _selectionAreaToEmpty6, _selectionAreaToEmpty7, _selectionAreaToEmpty8;
17
18
  var activeCellCoordinates = _ref.activeCellCoordinates,
18
19
  selectionAreas = _ref.selectionAreas,
19
20
  currentMatcher = _ref.currentMatcher,
@@ -31,10 +32,10 @@ var handleCellDeletion = function handleCellDeletion(_ref) {
31
32
  return item.matcher === currentMatcher;
32
33
  });
33
34
  var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
34
- var lowestColumnIndex = Math.min(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
35
- var greatestColumnIndex = Math.max(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
36
- var lowestRowIndex = Math.min(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
37
- var greatestRowIndex = Math.max(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
35
+ var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
36
+ var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
37
+ var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
38
+ var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
38
39
  (0, _rangeWithCallback.rangeWithCallback)(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
39
40
  (0, _rangeWithCallback.rangeWithCallback)(lowestRowIndex, greatestRowIndex, function (rowIndex) {
40
41
  var cellProps = rows[rowIndex].cells[columnIndex];
@@ -51,7 +51,8 @@ var DatagridContent = function DatagridContent(_ref) {
51
51
  withInlineEdit = datagridState.withInlineEdit,
52
52
  tableId = datagridState.tableId,
53
53
  DatagridActions = datagridState.DatagridActions,
54
- totalColumnsWidth = datagridState.totalColumnsWidth;
54
+ totalColumnsWidth = datagridState.totalColumnsWidth,
55
+ gridRef = datagridState.gridRef;
55
56
  var rows = DatagridPagination && datagridState.page || datagridState.rows;
56
57
  var gridActive = state.gridActive,
57
58
  editId = state.editId;
@@ -91,7 +92,7 @@ var DatagridContent = function DatagridContent(_ref) {
91
92
  onFocus: withInlineEdit ? function () {
92
93
  return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
93
94
  } : null
94
- }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
95
+ }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
95
96
  rows: rows
96
97
  })));
97
98
  };
@@ -126,6 +127,9 @@ var DatagridContent = function DatagridContent(_ref) {
126
127
  className: "".concat(blockClass, "__datagridLeftPanel")
127
128
  }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
128
129
  ref: multiKeyTrackingRef
130
+ }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
131
+ className: "".concat(blockClass, "__virtualScrollContainer"),
132
+ ref: gridRef
129
133
  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
130
134
  instance: datagridState
131
135
  }));
@@ -150,6 +154,7 @@ DatagridContent.propTypes = {
150
154
  page: _propTypes.default.arrayOf(_propTypes.default.object),
151
155
  rows: _propTypes.default.arrayOf(_propTypes.default.object),
152
156
  tableId: _propTypes.default.string,
153
- totalColumnsWidth: _propTypes.default.number
157
+ totalColumnsWidth: _propTypes.default.number,
158
+ gridRef: _propTypes.default.object
154
159
  })
155
160
  };
@@ -30,7 +30,9 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
30
30
  emptyStateSize = datagridState.emptyStateSize,
31
31
  _datagridState$emptyS = datagridState.emptyStateType,
32
32
  emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
33
- illustrationTheme = datagridState.illustrationTheme;
33
+ illustrationTheme = datagridState.illustrationTheme,
34
+ emptyStateAction = datagridState.emptyStateAction,
35
+ emptyStateLink = datagridState.emptyStateLink;
34
36
  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
35
37
  className: "".concat(blockClass, "__empty-state-body")
36
38
  }), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
@@ -39,12 +41,16 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
39
41
  illustrationTheme: illustrationTheme,
40
42
  size: emptyStateSize,
41
43
  title: emptyStateTitle,
42
- subtitle: emptyStateDescription
44
+ subtitle: emptyStateDescription,
45
+ action: emptyStateAction,
46
+ link: emptyStateLink
43
47
  }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
44
48
  illustrationTheme: illustrationTheme,
45
49
  size: emptyStateSize,
46
50
  title: emptyStateTitle,
47
- subtitle: emptyStateDescription
51
+ subtitle: emptyStateDescription,
52
+ action: emptyStateAction,
53
+ link: emptyStateLink
48
54
  }))));
49
55
  };
50
56
  var _default = DatagridEmptyBody;
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -9,17 +8,13 @@ exports.default = void 0;
9
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
- var _react = _interopRequireWildcard(require("react"));
11
+ var _react = _interopRequireDefault(require("react"));
13
12
  var _carbonComponentsReact = require("carbon-components-react");
14
13
  var _layout = require("@carbon/layout");
15
14
  var _classnames = _interopRequireDefault(require("classnames"));
16
15
  var _commonColumnIds = require("../common-column-ids");
17
16
  var _settings = require("../../../settings");
18
- var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
19
- var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
20
17
  var _excluded = ["children"];
21
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
22
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
18
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
24
19
  var TableRow = _carbonComponentsReact.DataTable.TableRow,
25
20
  TableCell = _carbonComponentsReact.DataTable.TableCell;
@@ -37,10 +32,6 @@ var DatagridRow = function DatagridRow(datagridState) {
37
32
  var row = datagridState.row,
38
33
  rowSize = datagridState.rowSize,
39
34
  withNestedRows = datagridState.withNestedRows;
40
- var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
41
- state = _useContext.state;
42
- var activeCellId = state.activeCellId;
43
- var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
44
35
  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
45
36
  var isExpanded = _ref.isExpanded,
46
37
  subRows = _ref.subRows;
@@ -54,7 +45,7 @@ var DatagridRow = function DatagridRow(datagridState) {
54
45
  return size;
55
46
  };
56
47
  return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
57
- className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
48
+ className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
58
49
  }, row.getRowProps(), {
59
50
  key: row.id,
60
51
  onMouseEnter: function onMouseEnter(event) {
@@ -12,6 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _reactWindow = require("react-window");
13
13
  var _carbonComponentsReact = require("carbon-components-react");
14
14
  var _settings = require("../../../settings");
15
+ var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
16
+ var _layout = require("@carbon/layout");
15
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
19
  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; }
@@ -32,6 +34,7 @@ var rowSizeMap = {
32
34
  };
33
35
  var defaultRowHeight = rowSizeMap.lg;
34
36
  var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
37
+ var _gridRef$current, _gridRef$current2;
35
38
  var getTableBodyProps = datagridState.getTableBodyProps,
36
39
  rows = datagridState.rows,
37
40
  prepareRow = datagridState.prepareRow,
@@ -45,7 +48,14 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
45
48
  DatagridPagination = datagridState.DatagridPagination,
46
49
  page = datagridState.page,
47
50
  handleResize = datagridState.handleResize,
48
- withOverflowRow = datagridState.withOverflowRow;
51
+ gridRef = datagridState.gridRef;
52
+ var syncScroll = function syncScroll(e) {
53
+ var virtualBody = e.target;
54
+ document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
55
+ var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
56
+ spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
57
+ };
58
+
49
59
  (0, _react.useEffect)(function () {
50
60
  handleResize();
51
61
  }, [handleResize]);
@@ -54,8 +64,16 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
54
64
  listRef.current.resetAfterIndex(0);
55
65
  }
56
66
  var visibleRows = DatagridPagination && page || rows;
57
- return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
58
- onScroll: onScroll
67
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
68
+ className: "".concat(blockClass, "__head-warp"),
69
+ style: {
70
+ width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
71
+ overflow: 'hidden'
72
+ }
73
+ }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
74
+ onScroll: function onScroll(e) {
75
+ return syncScroll(e);
76
+ }
59
77
  }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
60
78
  height: virtualHeight || tableHeight,
61
79
  itemCount: visibleRows.length,
@@ -66,20 +84,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
66
84
  onScroll: onScroll,
67
85
  innerRef: innerListRef,
68
86
  ref: listRef,
69
- className: "".concat(blockClass, "__virtual-scrollbar")
87
+ className: "".concat(blockClass, "__virtual-scrollbar"),
88
+ style: {
89
+ width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
90
+ }
70
91
  }, function (_ref) {
71
92
  var index = _ref.index,
72
93
  style = _ref.style;
73
94
  var row = visibleRows[index];
74
95
  prepareRow(row);
75
96
  return /*#__PURE__*/_react.default.createElement("div", {
76
- style: _objectSpread(_objectSpread({}, style), {}, {
77
- overflow: withOverflowRow ? 'visible' : 'hidden'
78
- })
97
+ style: _objectSpread({}, style)
79
98
  }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
80
99
  row: row
81
100
  })));
82
- }));
101
+ })));
83
102
  };
84
103
  var _default = DatagridVirtualBody;
85
104
  exports.default = _default;
@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
48
48
  onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
49
49
  _ref$onCancel = _ref.onCancel,
50
50
  onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
51
- _ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
52
- shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
53
51
  _ref$secondaryActionL = _ref.secondaryActionLabel,
54
52
  secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
55
- setAllFilters = _ref.setAllFilters,
56
- setFilter = _ref.setFilter;
53
+ setAllFilters = _ref.setAllFilters;
57
54
  /** Context state and methods */
58
55
  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
59
56
  EventEmitter = _useContext.EventEmitter;
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
100
97
  prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
101
98
  };
102
99
  var cancel = function cancel() {
103
- revertToPreviousFilters();
104
- onCancel();
100
+ // Reverting to previous filters only applies when using batch actions
101
+ if (updateMethod === _constants.BATCH) {
102
+ revertToPreviousFilters();
103
+ onCancel();
104
+ }
105
105
  closeFlyout();
106
106
  };
107
107
  var reset = function reset() {
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
133
133
  if (type === _constants.DATE && !value[1]) {
134
134
  return;
135
135
  }
136
- if (updateMethod === _constants.BATCH) {
137
- var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
138
- // check if the filter already exists in the array
139
- var filter = filtersObjectArrayCopy.find(function (item) {
140
- return item.id === column;
136
+ var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
137
+ // check if the filter already exists in the array
138
+ var filter = filtersObjectArrayCopy.find(function (item) {
139
+ return item.id === column;
140
+ });
141
+
142
+ // if filter exists in array then update the filter's new value
143
+ if (filter) {
144
+ filter.value = value;
145
+ } else {
146
+ filtersObjectArrayCopy.push({
147
+ id: column,
148
+ value: value,
149
+ type: type
141
150
  });
151
+ }
152
+ setFiltersObjectArray(filtersObjectArrayCopy);
142
153
 
143
- // if filter exists in array then update the filter's new value
144
- if (filter) {
145
- filter.value = value;
146
- } else {
147
- filtersObjectArrayCopy.push({
148
- id: column,
149
- value: value,
150
- type: type
151
- });
152
- }
153
- setFiltersObjectArray(filtersObjectArrayCopy);
154
- } else if (updateMethod === _constants.INSTANT) {
155
- setFilter(column, value);
154
+ // Automatically apply the filters if the updateMethod is instant
155
+ if (updateMethod === _constants.INSTANT) {
156
+ setAllFilters(filtersObjectArrayCopy);
156
157
  }
157
- }, [setFilter, updateMethod, filtersObjectArray]);
158
+ }, [setAllFilters, updateMethod, filtersObjectArray]);
158
159
 
159
160
  /** Effects */
160
161
  (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
161
- if (shouldClickOutsideToClose === false) {
162
- return;
163
- }
164
162
  var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
165
163
  if (!open || hasClickedOnDatePicker) {
166
164
  return;
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
361
359
  * Function that sets all the filters, this comes from the datagridState
362
360
  */
363
361
  setAllFilters: _propTypes.default.func.isRequired,
364
- /**
365
- * Function that sets an individual filter, this comes from the datagridState
366
- */
367
- setFilter: _propTypes.default.func.isRequired,
368
- /**
369
- * Boolean if you want the flyout to close when clicked outside of the parent
370
- */
371
- shouldClickOutsideToClose: _propTypes.default.bool,
372
362
  /**
373
363
  * Title of the filter flyout
374
364
  */