@carbon/ibm-products 2.15.0 → 2.15.2

Sign up to get free protection for your applications and to get access to all the features.
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
  };