@carbon/ibm-products 2.15.0 → 2.15.2

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 (56) hide show
  1. package/css/index-full-carbon.css +22 -8
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +22 -8
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +22 -8
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +1 -1
  14. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +4 -3
  15. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  16. package/es/components/Datagrid/Datagrid/DatagridRow.js +5 -2
  17. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  18. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +18 -19
  19. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +14 -18
  20. package/es/components/Datagrid/Datagrid.docs-page.js +7 -1
  21. package/es/components/Datagrid/useActionsColumn.js +7 -5
  22. package/es/components/Datagrid/useColumnCenterAlign.js +6 -6
  23. package/es/components/Datagrid/useColumnRightAlign.js +6 -6
  24. package/es/components/Datagrid/useDatagrid.js +8 -0
  25. package/es/components/Datagrid/useInfiniteScroll.js +10 -9
  26. package/es/components/Datagrid/useNestedRowExpander.js +10 -1
  27. package/es/components/Datagrid/useParentDimensions.js +6 -6
  28. package/es/components/Datagrid/useResizeTable.js +7 -7
  29. package/es/components/Datagrid/useRowExpander.js +11 -1
  30. package/es/components/Datagrid/useSelectAllToggle.js +2 -2
  31. package/es/components/Datagrid/useSelectRows.js +27 -21
  32. package/es/components/Datagrid/useSkeletonRows.js +6 -6
  33. package/es/components/Datagrid/useStickyColumn.js +13 -6
  34. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +1 -1
  35. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +4 -3
  36. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  37. package/lib/components/Datagrid/Datagrid/DatagridRow.js +5 -2
  38. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  39. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +18 -19
  40. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +13 -18
  41. package/lib/components/Datagrid/Datagrid.docs-page.js +7 -1
  42. package/lib/components/Datagrid/useActionsColumn.js +7 -5
  43. package/lib/components/Datagrid/useColumnCenterAlign.js +5 -6
  44. package/lib/components/Datagrid/useColumnRightAlign.js +5 -6
  45. package/lib/components/Datagrid/useDatagrid.js +8 -0
  46. package/lib/components/Datagrid/useInfiniteScroll.js +9 -9
  47. package/lib/components/Datagrid/useNestedRowExpander.js +15 -9
  48. package/lib/components/Datagrid/useParentDimensions.js +5 -6
  49. package/lib/components/Datagrid/useResizeTable.js +6 -7
  50. package/lib/components/Datagrid/useRowExpander.js +16 -9
  51. package/lib/components/Datagrid/useSelectAllToggle.js +2 -2
  52. package/lib/components/Datagrid/useSelectRows.js +27 -21
  53. package/lib/components/Datagrid/useSkeletonRows.js +6 -6
  54. package/lib/components/Datagrid/useStickyColumn.js +13 -6
  55. package/package.json +2 -2
  56. package/scss/components/Datagrid/styles/_datagrid.scss +26 -5
@@ -22,9 +22,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
22
22
  * LICENSE file in the root directory of this source tree.
23
23
  */
24
24
 
25
- var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
25
+ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__table-toolbar");
26
26
  var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
27
- var _Object$keys;
28
27
  var _useState = (0, _react.useState)(false),
29
28
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
30
29
  displayAllInMenu = _useState2[0],
@@ -43,7 +42,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
43
42
  toolbarBatchActions = datagridState.toolbarBatchActions,
44
43
  setGlobalFilter = datagridState.setGlobalFilter,
45
44
  rows = datagridState.rows;
46
- var totalSelected = (_Object$keys = Object.keys(selectedRowIds || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length;
45
+ var selectedKeys = Object.keys(selectedRowIds || {});
46
+ var totalSelected = selectedKeys.length;
47
47
 
48
48
  // Get initial width of batch actions container,
49
49
  // used to measure when all items are put inside
@@ -64,21 +64,20 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
64
64
  }
65
65
  }, [width, ref, initialListWidth]);
66
66
  var getSelectedRowData = function getSelectedRowData() {
67
- var selectedRowIndexes = Object.keys(selectedRowIds);
68
- var selectedRowData = selectedRowIndexes && selectedRowIndexes.length ? selectedRowIndexes.map(function (rowIndex) {
67
+ if (selectedKeys.length === 0) {
68
+ return [];
69
+ }
70
+ return selectedKeys.map(function (rowIndex) {
69
71
  var filteredRow = rows.filter(function (row) {
70
72
  return row.index === parseInt(rowIndex);
71
73
  });
72
- if (filteredRow.length) {
73
- return filteredRow[0];
74
- }
75
- return [];
76
- }) : [];
77
- return selectedRowData;
74
+ return filteredRow.length ? filteredRow[0] : [];
75
+ });
78
76
  };
79
77
 
80
78
  // Render batch actions in ButtonMenu
81
79
  var renderBatchActionOverflow = function renderBatchActionOverflow() {
80
+ var menuClass = "".concat(blockClass, "__button-menu");
82
81
  var minWidthBeforeOverflowIcon = 380;
83
82
  // Do not render ButtonMenu when there are 3 or less items
84
83
  // and if there is enough available space to render all the items
@@ -96,12 +95,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
96
95
  };
97
96
  return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
98
97
  label: "More",
99
- className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
100
- }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
101
- if (index < 2 && !displayAllInMenu) {
102
- return;
98
+ className: (0, _classnames.default)([menuClass, (0, _defineProperty2.default)({}, "".concat(menuClass, "-icon-only"), width <= minWidthBeforeOverflowIcon)])
99
+ }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
100
+ var hidden = index < 2 && !displayAllInMenu;
101
+ if (!hidden) {
102
+ return renderItem(batchAction, index);
103
103
  }
104
- return renderItem(batchAction, index);
105
104
  }));
106
105
  };
107
106
  var onClickHandler = function onClickHandler(event, batchAction) {
@@ -149,12 +148,12 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
149
148
  DatagridBatchActions = datagridState.DatagridBatchActions,
150
149
  batchActions = datagridState.batchActions,
151
150
  rowSize = datagridState.rowSize;
152
- var getRowHeight = rowSize ? rowSize : 'lg';
151
+ var getRowHeight = rowSize || 'lg';
153
152
  return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
154
153
  ref: ref,
155
- className: (0, _classnames.default)("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
154
+ className: (0, _classnames.default)([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
156
155
  }, /*#__PURE__*/_react.default.createElement(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
157
- className: "".concat(blockClass, "__table-toolbar")
156
+ className: blockClass
158
157
  }, /*#__PURE__*/_react.default.createElement(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
159
158
  };
160
159
  var _default = exports.default = DatagridToolbar;
@@ -18,12 +18,11 @@ var _useResizeObserver = require("../../../global/js/hooks/useResizeObserver");
18
18
  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); }
19
19
  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; }
20
20
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
22
- * Licensed Materials - Property of IBM
23
- * 5724-Q36
24
- * (c) Copyright IBM Corp. 2020 - 2023
25
- * US Government Users Restricted Rights - Use, duplication or disclosure
26
- * restricted by GSA ADP Schedule Contract with IBM Corp.
21
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
22
+ * Copyright IBM Corp. 2020, 2023
23
+ *
24
+ * This source code is licensed under the Apache-2.0 license found in the
25
+ * LICENSE file in the root directory of this source tree.
27
26
  */
28
27
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
29
28
  var rowSizeMap = {
@@ -31,12 +30,7 @@ var rowSizeMap = {
31
30
  sm: 32,
32
31
  md: 40,
33
32
  lg: 48,
34
- xl: 64,
35
- // TODO: deprecate the below values in next major release (v8) on carbon-components-react
36
- short: 32,
37
- compact: 24,
38
- normal: 48,
39
- tall: 64
33
+ xl: 64
40
34
  };
41
35
  var defaultRowHeight = rowSizeMap.lg;
42
36
  var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
@@ -60,8 +54,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
60
54
  gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
61
55
  };
62
56
  (0, _useResizeObserver.useResizeObserver)(gridRef, handleVirtualGridResize);
63
- var syncScroll = function syncScroll(e) {
64
- var virtualBody = e.target;
57
+ var syncScroll = function syncScroll(event) {
58
+ var virtualBody = event.target;
65
59
  document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
66
60
  var spacerColumn = document.querySelector(".".concat(blockClass, "__head-wrap thead th:last-child"));
67
61
  spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
@@ -82,9 +76,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
82
76
  overflow: 'hidden'
83
77
  }
84
78
  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
85
- onScroll: function onScroll(e) {
86
- return syncScroll(e);
87
- }
79
+ onScroll: syncScroll
88
80
  }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
89
81
  height: virtualHeight || tableHeight,
90
82
  itemCount: visibleRows.length,
@@ -104,10 +96,13 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
104
96
  style = _ref.style;
105
97
  var row = visibleRows[index];
106
98
  prepareRow(row);
99
+ var _row$getRowProps = row.getRowProps(),
100
+ key = _row$getRowProps.key;
107
101
  return /*#__PURE__*/_react.default.createElement("div", {
108
102
  style: _objectSpread({}, style)
109
103
  }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
110
- row: row
104
+ row: row,
105
+ key: key
111
106
  })));
112
107
  })));
113
108
  };
@@ -57,6 +57,12 @@ var DocsPage = exports.DocsPage = function DocsPage() {
57
57
  language: 'jsx',
58
58
  code: "\nuseDatagrid({\n columns,\n data,\n onColResizeEnd: (currentColumn, allColumns) =>\n console.log(currentColumn, allColumns),\n});\n "
59
59
  }
60
+ }, {
61
+ description: 'Disabling the resizable columns is possible by specifying `disableResizing: true` within the `useDatagrid` hook.',
62
+ source: {
63
+ language: 'jsx',
64
+ code: "\nuseDatagrid({\n columns,\n data,\n disableResizing: true,\n});\n "
65
+ }
60
66
  }, {
61
67
  title: 'Rendering the table toolbar',
62
68
  image: /*#__PURE__*/_react.default.createElement("img", {
@@ -90,7 +96,7 @@ var DocsPage = exports.DocsPage = function DocsPage() {
90
96
  }, {
91
97
  description: "Infinite scroll:\n- Include `useInfiniteScroll` hook\n- Add `fetchMoreData` property to `useDatagrid`, this will be a function that is called when the scroll threshold is met. Optionally change the height of the grid with the `virtualHeight` property.",
92
98
  source: {
93
- code: "\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n isFetching,\n fetchMoreData: fetchData,\n virtualHeight: 540,\n emptyStateTitle: 'Empty state title',\n emptyStateDescription: 'Description explaining why the table is empty',\n },\n useInfiniteScroll\n);"
99
+ code: "\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n isFetching,\n fetchMoreData: fetchData,\n virtualHeight: 540,\n loadMoreThreshold: 200,\n emptyStateTitle: 'Empty state title',\n emptyStateDescription: 'Description explaining why the table is empty',\n },\n useInfiniteScroll\n);"
94
100
  }
95
101
  }, {
96
102
  description: "Virtualized data:\n- Include `useInfiniteScroll` hook\n- The Datagrid will know to use virtualized data just by providing the `useInfiniteScroll` hook\n ",
@@ -50,12 +50,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
50
50
  column = cell.column;
51
51
  if (column.isAction) {
52
52
  var _cx3;
53
+ var isColumnSticky = !!column.sticky;
53
54
  return [props, {
54
55
  children: /*#__PURE__*/_react.default.createElement("div", {
55
56
  className: "".concat(blockClass, "__actions-column-contents")
56
57
  }, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
57
58
  className: "".concat(blockClass, "__actions-column-loading")
58
- }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
59
+ }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/_react.default.createElement("div", {
59
60
  className: "".concat(blockClass, "_actions-column"),
60
61
  style: {
61
62
  display: 'flex'
@@ -90,7 +91,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
90
91
  _onClick(id, row, e);
91
92
  }
92
93
  })));
93
- })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
94
+ })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
94
95
  align: "left",
95
96
  size: "sm",
96
97
  flipped: true,
@@ -120,9 +121,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
120
121
  key: id
121
122
  }));
122
123
  })))),
123
- className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
124
+ className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky), _cx3)),
124
125
  style: {
125
- width: rowActions.length > 2 ? 48 : 96
126
+ width: rowActions.length > 2 || isColumnSticky ? 48 : 96
126
127
  }
127
128
  }];
128
129
  }
@@ -137,9 +138,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
137
138
  var addHeaderWidth = function addHeaderWidth(props, cellData) {
138
139
  var column = cellData.column;
139
140
  if (column.isAction) {
141
+ var isColumnSticky = !!column.sticky;
140
142
  return [props, {
141
143
  style: _objectSpread(_objectSpread({}, props.style), {}, {
142
- width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
144
+ width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
143
145
  })
144
146
  }];
145
147
  }
@@ -11,12 +11,11 @@ var _react = _interopRequireDefault(require("react"));
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _settings = require("../../settings");
13
13
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
15
- * Licensed Materials - Property of IBM
16
- * 5724-Q36
17
- * (c) Copyright IBM Corp. 2020
18
- * US Government Users Restricted Rights - Use, duplication or disclosure
19
- * restricted by GSA ADP Schedule Contract with IBM Corp.
14
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
15
+ * Copyright IBM Corp. 2020, 2023
16
+ *
17
+ * This source code is licensed under the Apache-2.0 license found in the
18
+ * LICENSE file in the root directory of this source tree.
20
19
  */
21
20
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
22
21
  var useColumnCenterAlign = function useColumnCenterAlign(hooks) {
@@ -11,12 +11,11 @@ var _react = _interopRequireDefault(require("react"));
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _settings = require("../../settings");
13
13
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
15
- * Licensed Materials - Property of IBM
16
- * 5724-Q36
17
- * (c) Copyright IBM Corp. 2020
18
- * US Government Users Restricted Rights - Use, duplication or disclosure
19
- * restricted by GSA ADP Schedule Contract with IBM Corp.
14
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
15
+ * Copyright IBM Corp. 2020, 2023
16
+ *
17
+ * This source code is licensed under the Apache-2.0 license found in the
18
+ * LICENSE file in the root directory of this source tree.
20
19
  */
21
20
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
22
21
  var useColumnRightAlign = function useColumnRightAlign(hooks) {
@@ -28,6 +28,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
28
28
  */
29
29
  var useDatagrid = function useDatagrid(params) {
30
30
  var defaultPlugins = [_reactTable.useFlexLayout, _DatagridHeaderRow.default, _useSkeletonRows.default, _reactTable.useResizeColumns, _useRowRenderer.default, _useDefaultStringRenderer.default, _useRowSize.default, _reactTable.useFilters, _reactTable.useGlobalFilter, _reactTable.useSortBy, _reactTable.useExpanded];
31
+
32
+ // Disable resizing
33
+ if (params.disableResizing) {
34
+ var resizeIndex = defaultPlugins.findIndex(function (p) {
35
+ return p.pluginName === 'useResizeColumns';
36
+ });
37
+ defaultPlugins.splice(resizeIndex, 1);
38
+ }
31
39
  var defaultEndPlugins = [_reactTable.usePagination, _reactTable.useRowSelect, _useFlexResize.default, _useFloatingScroll.default];
32
40
  var clientEndPlugins = params.endPlugins || [];
33
41
  var tableId = (0, _react.useMemo)(function () {
@@ -10,12 +10,11 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
10
10
  var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions"));
11
11
  var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
12
12
  var _settings = require("../../settings");
13
- /*
14
- * Licensed Materials - Property of IBM
15
- * 5724-Q36
16
- * (c) Copyright IBM Corp. 2020
17
- * US Government Users Restricted Rights - Use, duplication or disclosure
18
- * restricted by GSA ADP Schedule Contract with IBM Corp.
13
+ /**
14
+ * Copyright IBM Corp. 2020, 2023
15
+ *
16
+ * This source code is licensed under the Apache-2.0 license found in the
17
+ * LICENSE file in the root directory of this source tree.
19
18
  */
20
19
 
21
20
  var useInfiniteScroll = function useInfiniteScroll(hooks) {
@@ -29,10 +28,11 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
29
28
  tableHeight = instance.tableHeight,
30
29
  innerListRef = instance.innerListRef,
31
30
  fetchMoreData = instance.fetchMoreData,
32
- tableId = instance.tableId;
31
+ tableId = instance.tableId,
32
+ loadMoreThreshold = instance.loadMoreThreshold;
33
33
  var tableElement = document.querySelector("#".concat(tableId));
34
34
  var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
35
- var loadMoreThreshold = 200;
35
+ var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
36
36
  var emptyFetchData = function emptyFetchData() {};
37
37
  // eslint-disable-next-line react-hooks/exhaustive-deps
38
38
  var fetchMore = (0, _react.useCallback)((0, _debounce.default)(fetchMoreData || emptyFetchData, 3000, {
@@ -43,7 +43,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
43
43
  var scrollDirection = _ref.scrollDirection,
44
44
  scrollOffset = _ref.scrollOffset;
45
45
  if (innerListRef && innerListRef.current) {
46
- if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
46
+ if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThresholdValue) {
47
47
  if (fetchMoreData) {
48
48
  fetchMore();
49
49
  }
@@ -15,14 +15,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
15
15
  var _settings = require("../../settings");
16
16
  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); }
17
17
  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; }
18
- /* eslint-disable react/prop-types */
19
- /**
20
- * Copyright IBM Corp. 2020, 2023
21
- *
22
- * This source code is licensed under the Apache-2.0 license found in the
23
- * LICENSE file in the root directory of this source tree.
24
- */
25
-
18
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
19
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable react/prop-types */ /**
20
+ * Copyright IBM Corp. 2020, 2023
21
+ *
22
+ * This source code is licensed under the Apache-2.0 license found in the
23
+ * LICENSE file in the root directory of this source tree.
24
+ */
26
25
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
27
26
  var useNestedRowExpander = function useNestedRowExpander(hooks) {
28
27
  var tempState = (0, _react.useRef)();
@@ -35,6 +34,13 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
35
34
  Cell: function Cell(_ref) {
36
35
  var _cx;
37
36
  var row = _ref.row;
37
+ var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
38
+ onClick: function onClick(event) {
39
+ // Prevents `onRowClick` from being called if `useOnRowClick` is included
40
+ event.stopPropagation();
41
+ row.toggleRowExpanded();
42
+ }
43
+ });
38
44
  var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
39
45
  _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
40
46
  expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
@@ -45,7 +51,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
45
51
  type: "button",
46
52
  "aria-label": expanderTitle,
47
53
  className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
48
- }, row.getToggleRowExpandedProps(), {
54
+ }, expanderButtonProps, {
49
55
  title: expanderTitle
50
56
  }), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
51
57
  className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("react");
10
- /*
11
- * Licensed Materials - Property of IBM
12
- * 5724-Q36
13
- * (c) Copyright IBM Corp. 2020
14
- * US Government Users Restricted Rights - Use, duplication or disclosure
15
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10
+ /**
11
+ * Copyright IBM Corp. 2020, 2023
12
+ *
13
+ * This source code is licensed under the Apache-2.0 license found in the
14
+ * LICENSE file in the root directory of this source tree.
16
15
  */
17
16
 
18
17
  var useParentDimensions = function useParentDimensions(hooks) {
@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = require("react");
8
- /*
9
- * Licensed Materials - Property of IBM
10
- * 5724-Q36
11
- * (c) Copyright IBM Corp. 2020
12
- * US Government Users Restricted Rights - Use, duplication or disclosure
13
- * restricted by GSA ADP Schedule Contract with IBM Corp.
8
+ /**
9
+ * Copyright IBM Corp. 2020, 2023
10
+ *
11
+ * This source code is licensed under the Apache-2.0 license found in the
12
+ * LICENSE file in the root directory of this source tree.
14
13
  */
15
14
 
16
15
  var useResizeTable = function useResizeTable(hooks) {
@@ -33,7 +32,7 @@ var useResizeTable = function useResizeTable(hooks) {
33
32
  resizeObserver = null;
34
33
  };
35
34
  }
36
- return console.error(' Could not resize table, no support for ResizeObserver');
35
+ return console.error('Could not resize table, no support for ResizeObserver');
37
36
  }, [handleResize, parent]);
38
37
  };
39
38
  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
@@ -8,20 +8,20 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = void 0;
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
12
  var _react = _interopRequireWildcard(require("react"));
12
13
  var _icons = require("@carbon/react/icons");
13
14
  var _settings = require("../../settings");
14
15
  var _classnames = _interopRequireDefault(require("classnames"));
15
16
  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); }
16
17
  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; }
17
- /* eslint-disable react/prop-types */
18
- /**
19
- * Copyright IBM Corp. 2020, 2023
20
- *
21
- * This source code is licensed under the Apache-2.0 license found in the
22
- * LICENSE file in the root directory of this source tree.
23
- */
24
-
18
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
19
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable react/prop-types */ /**
20
+ * Copyright IBM Corp. 2020, 2023
21
+ *
22
+ * This source code is licensed under the Apache-2.0 license found in the
23
+ * LICENSE file in the root directory of this source tree.
24
+ */
25
25
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
26
26
  var useRowExpander = function useRowExpander(hooks) {
27
27
  var tempState = (0, _react.useRef)();
@@ -33,6 +33,13 @@ var useRowExpander = function useRowExpander(hooks) {
33
33
  id: 'expander',
34
34
  Cell: function Cell(_ref) {
35
35
  var row = _ref.row;
36
+ var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
37
+ onClick: function onClick(event) {
38
+ // Prevents `onRowClick` from being called if `useOnRowClick` is included
39
+ event.stopPropagation();
40
+ row.toggleRowExpanded();
41
+ }
42
+ });
36
43
  var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
37
44
  _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
38
45
  expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
@@ -43,7 +50,7 @@ var useRowExpander = function useRowExpander(hooks) {
43
50
  type: "button",
44
51
  "aria-label": expanderTitle,
45
52
  className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
46
- }, row.getToggleRowExpandedProps(), {
53
+ }, expanderButtonProps, {
47
54
  title: expanderTitle
48
55
  }), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
49
56
  className: "".concat(blockClass, "__row-expander--icon")
@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
24
24
  */
25
25
  // @flow
26
26
 
27
- var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
27
+ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__select-all");
28
28
  var useSelectAllToggle = function useSelectAllToggle(hooks) {
29
29
  useSelectAllWithToggleComponent(hooks);
30
30
  useAddClassNameToSelectRow(hooks);
@@ -71,7 +71,7 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
71
71
  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
72
72
  if (column.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
73
73
  return [props, {
74
- className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
74
+ className: (0, _classnames.default)("".concat(blockClass, "-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
75
75
  }];
76
76
  }
77
77
  return [props];
@@ -17,7 +17,7 @@ var _react2 = require("@carbon/react");
17
17
  var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
18
18
  var _commonColumnIds = require("./common-column-ids");
19
19
  var _settings = require("../../settings");
20
- var _excluded = ["onChange"];
20
+ var _excluded = ["onChange", "title"];
21
21
  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); }
22
22
  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; }
23
23
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -29,6 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
29
29
  * restricted by GSA ADP Schedule Contract with IBM Corp.
30
30
  */ // @flow
31
31
  var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
32
+ var checkboxClass = "".concat(_settings.pkg.prefix, "--datagrid__checkbox-cell");
32
33
  var useSelectRows = function useSelectRows(hooks) {
33
34
  useHighlightSelection(hooks);
34
35
  var useInstance = function useInstance(instance) {
@@ -62,9 +63,12 @@ var useSelectRows = function useSelectRows(hooks) {
62
63
  };
63
64
  var useHighlightSelection = function useHighlightSelection(hooks) {
64
65
  var getRowProps = function getRowProps(props, _ref) {
66
+ var _ref2;
65
67
  var row = _ref.row;
68
+ var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
69
+ checked = _row$getToggleRowSele.checked;
66
70
  return [props, {
67
- className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
71
+ className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(_settings.carbon.prefix, "--data-table--selected"), checked), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__active-row"), checked), _ref2)])
68
72
  }];
69
73
  };
70
74
  hooks.getRowProps.push(getRowProps);
@@ -95,30 +99,32 @@ var SelectRow = function SelectRow(datagridState) {
95
99
  return window.removeEventListener('resize', updateSize);
96
100
  };
97
101
  }, []);
102
+ var onSelectHandler = function onSelectHandler(e) {
103
+ e.stopPropagation(); // avoid triggering onRowClick
104
+ if (radio) {
105
+ toggleAllRowsSelected(false);
106
+ if (onRadioSelect) {
107
+ onRadioSelect(row);
108
+ }
109
+ }
110
+ onChange(e);
111
+ onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
112
+ };
98
113
  var selectDisabled = isFetching || row.getRowProps().disabled;
99
- var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
100
- onChange = _row$getToggleRowSele.onChange,
101
- selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
114
+ var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
115
+ onChange = _row$getToggleRowSele2.onChange,
116
+ title = _row$getToggleRowSele2.title,
117
+ selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele2, _excluded);
102
118
  var cellProps = cell.getCellProps();
103
119
  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
120
+ var rowId = "".concat(tableId, "-").concat(row.index);
104
121
  return /*#__PURE__*/_react.default.createElement(_react2.TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
105
122
  radio: radio,
106
- onSelect: function onSelect(e) {
107
- e.stopPropagation(); // avoid triggering onRowClick
108
- if (radio) {
109
- toggleAllRowsSelected(false);
110
- if (onRadioSelect) {
111
- onRadioSelect(row);
112
- }
113
- }
114
- onChange(e);
115
- onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
116
- },
117
- id: "".concat(tableId, "-").concat(row.index),
118
- name: "".concat(tableId, "-").concat(row.index, "-name"),
119
- className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
120
- ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
121
- ,
123
+ onSelect: onSelectHandler,
124
+ id: rowId,
125
+ name: "".concat(rowId, "-name"),
126
+ className: (0, _classnames.default)([checkboxClass, cellProps.className, (0, _defineProperty2.default)({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)]),
127
+ ariaLabel: title,
122
128
  disabled: selectDisabled
123
129
  }));
124
130
  };