@carbon/ibm-products 2.15.1 → 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 (42) 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/DatagridVirtualBody.js +14 -18
  19. package/es/components/Datagrid/Datagrid.docs-page.js +7 -1
  20. package/es/components/Datagrid/useActionsColumn.js +7 -5
  21. package/es/components/Datagrid/useDatagrid.js +8 -0
  22. package/es/components/Datagrid/useInfiniteScroll.js +10 -9
  23. package/es/components/Datagrid/useParentDimensions.js +6 -6
  24. package/es/components/Datagrid/useResizeTable.js +7 -7
  25. package/es/components/Datagrid/useSkeletonRows.js +6 -6
  26. package/es/components/Datagrid/useStickyColumn.js +13 -6
  27. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +1 -1
  28. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +4 -3
  29. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  30. package/lib/components/Datagrid/Datagrid/DatagridRow.js +5 -2
  31. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  32. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +13 -18
  33. package/lib/components/Datagrid/Datagrid.docs-page.js +7 -1
  34. package/lib/components/Datagrid/useActionsColumn.js +7 -5
  35. package/lib/components/Datagrid/useDatagrid.js +8 -0
  36. package/lib/components/Datagrid/useInfiniteScroll.js +9 -9
  37. package/lib/components/Datagrid/useParentDimensions.js +5 -6
  38. package/lib/components/Datagrid/useResizeTable.js +6 -7
  39. package/lib/components/Datagrid/useSkeletonRows.js +6 -6
  40. package/lib/components/Datagrid/useStickyColumn.js +13 -6
  41. package/package.json +2 -2
  42. package/scss/components/Datagrid/styles/_datagrid.scss +26 -5
@@ -41,12 +41,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
41
41
  column = cell.column;
42
42
  if (column.isAction) {
43
43
  var _cx3;
44
+ var isColumnSticky = !!column.sticky;
44
45
  return [props, {
45
46
  children: /*#__PURE__*/React.createElement("div", {
46
47
  className: "".concat(blockClass, "__actions-column-contents")
47
48
  }, isFetching && /*#__PURE__*/React.createElement(IconSkeleton, {
48
49
  className: "".concat(blockClass, "__actions-column-loading")
49
- }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/React.createElement("div", {
50
+ }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React.createElement("div", {
50
51
  className: "".concat(blockClass, "_actions-column"),
51
52
  style: {
52
53
  display: 'flex'
@@ -81,7 +82,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
81
82
  _onClick(id, row, e);
82
83
  }
83
84
  })));
84
- })), !isFetching && rowActions.length > 2 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
85
+ })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
85
86
  align: "left",
86
87
  size: "sm",
87
88
  flipped: true,
@@ -111,9 +112,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
111
112
  key: id
112
113
  }));
113
114
  })))),
114
- className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
115
+ className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky), _cx3)),
115
116
  style: {
116
- width: rowActions.length > 2 ? 48 : 96
117
+ width: rowActions.length > 2 || isColumnSticky ? 48 : 96
117
118
  }
118
119
  }];
119
120
  }
@@ -128,9 +129,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
128
129
  var addHeaderWidth = function addHeaderWidth(props, cellData) {
129
130
  var column = cellData.column;
130
131
  if (column.isAction) {
132
+ var isColumnSticky = !!column.sticky;
131
133
  return [props, {
132
134
  style: _objectSpread(_objectSpread({}, props.style), {}, {
133
- width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
135
+ width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
134
136
  })
135
137
  }];
136
138
  }
@@ -22,6 +22,14 @@ import useFloatingScroll from './useFloatingScroll';
22
22
  import { stateReducer } from './Datagrid/addons/stateReducer';
23
23
  var useDatagrid = function useDatagrid(params) {
24
24
  var defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletonRows, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
25
+
26
+ // Disable resizing
27
+ if (params.disableResizing) {
28
+ var resizeIndex = defaultPlugins.findIndex(function (p) {
29
+ return p.pluginName === 'useResizeColumns';
30
+ });
31
+ defaultPlugins.splice(resizeIndex, 1);
32
+ }
25
33
  var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
26
34
  var clientEndPlugins = params.endPlugins || [];
27
35
  var tableId = useMemo(function () {
@@ -1,10 +1,10 @@
1
- /*
2
- * Licensed Materials - Property of IBM
3
- * 5724-Q36
4
- * (c) Copyright IBM Corp. 2020
5
- * US Government Users Restricted Rights - Use, duplication or disclosure
6
- * restricted by GSA ADP Schedule Contract with IBM Corp.
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
7
6
  */
7
+
8
8
  import { useCallback, useEffect } from 'react';
9
9
  import debounce from 'lodash/debounce';
10
10
  import useParentDimensions from './useParentDimensions';
@@ -21,10 +21,11 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
21
21
  tableHeight = instance.tableHeight,
22
22
  innerListRef = instance.innerListRef,
23
23
  fetchMoreData = instance.fetchMoreData,
24
- tableId = instance.tableId;
24
+ tableId = instance.tableId,
25
+ loadMoreThreshold = instance.loadMoreThreshold;
25
26
  var tableElement = document.querySelector("#".concat(tableId));
26
27
  var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
27
- var loadMoreThreshold = 200;
28
+ var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
28
29
  var emptyFetchData = function emptyFetchData() {};
29
30
  // eslint-disable-next-line react-hooks/exhaustive-deps
30
31
  var fetchMore = useCallback(debounce(fetchMoreData || emptyFetchData, 3000, {
@@ -35,7 +36,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
35
36
  var scrollDirection = _ref.scrollDirection,
36
37
  scrollOffset = _ref.scrollOffset;
37
38
  if (innerListRef && innerListRef.current) {
38
- if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
39
+ if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThresholdValue) {
39
40
  if (fetchMoreData) {
40
41
  fetchMore();
41
42
  }
@@ -1,11 +1,11 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /*
3
- * Licensed Materials - Property of IBM
4
- * 5724-Q36
5
- * (c) Copyright IBM Corp. 2020
6
- * US Government Users Restricted Rights - Use, duplication or disclosure
7
- * restricted by GSA ADP Schedule Contract with IBM Corp.
2
+ /**
3
+ * Copyright IBM Corp. 2020, 2023
4
+ *
5
+ * This source code is licensed under the Apache-2.0 license found in the
6
+ * LICENSE file in the root directory of this source tree.
8
7
  */
8
+
9
9
  import { useRef, useState } from 'react';
10
10
  var useParentDimensions = function useParentDimensions(hooks) {
11
11
  var rootRef = useRef();
@@ -1,10 +1,10 @@
1
- /*
2
- * Licensed Materials - Property of IBM
3
- * 5724-Q36
4
- * (c) Copyright IBM Corp. 2020
5
- * US Government Users Restricted Rights - Use, duplication or disclosure
6
- * restricted by GSA ADP Schedule Contract with IBM Corp.
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
7
6
  */
7
+
8
8
  import { useLayoutEffect } from 'react';
9
9
  var useResizeTable = function useResizeTable(hooks) {
10
10
  var useInstanceBeforeDimensions = function useInstanceBeforeDimensions(instance) {
@@ -26,7 +26,7 @@ var useResizeTable = function useResizeTable(hooks) {
26
26
  resizeObserver = null;
27
27
  };
28
28
  }
29
- return console.error(' Could not resize table, no support for ResizeObserver');
29
+ return console.error('Could not resize table, no support for ResizeObserver');
30
30
  }, [handleResize, parent]);
31
31
  };
32
32
  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
@@ -1,11 +1,11 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
- /*
3
- * Licensed Materials - Property of IBM
4
- * 5724-Q36
5
- * (c) Copyright IBM Corp. 2020
6
- * US Government Users Restricted Rights - Use, duplication or disclosure
7
- * restricted by GSA ADP Schedule Contract with IBM Corp.
2
+ /**
3
+ * Copyright IBM Corp. 2020, 2023
4
+ *
5
+ * This source code is licensed under the Apache-2.0 license found in the
6
+ * LICENSE file in the root directory of this source tree.
8
7
  */
8
+
9
9
  var useSkeletons = function useSkeletons(hooks) {
10
10
  var useInstance = function useInstance(instance) {
11
11
  var isFetching = instance.isFetching,
@@ -2,12 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  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; }
4
4
  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) { _defineProperty(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; }
5
- /*
6
- * Licensed Materials - Property of IBM
7
- * 5724-Q36
8
- * (c) Copyright IBM Corp. 2021
9
- * US Government Users Restricted Rights - Use, duplication or disclosure
10
- * restricted by GSA ADP Schedule Contract with IBM Corp.
5
+ /**
6
+ * Copyright IBM Corp. 2021, 2023
7
+ *
8
+ * This source code is licensed under the Apache-2.0 license found in the
9
+ * LICENSE file in the root directory of this source tree.
11
10
  */
12
11
 
13
12
  import { useEffect, useRef, useLayoutEffect, useState } from 'react';
@@ -29,9 +28,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
29
28
  setWindowSize(window.innerWidth);
30
29
  }, []);
31
30
  useLayoutEffect(function () {
31
+ /* istanbul ignore next */
32
32
  function updateSize() {
33
33
  setWindowSize(window.innerWidth);
34
34
  }
35
+ /* istanbul ignore next */
35
36
  window.addEventListener('resize', updateSize);
36
37
  return function () {
37
38
  return window.removeEventListener('resize', updateSize);
@@ -52,14 +53,17 @@ var useStickyColumn = function useStickyColumn(hooks) {
52
53
  useEffect(function () {
53
54
  var tableBodyElement = tableBodyRef.current;
54
55
  var headerCellElement = stickyHeaderCellRef.current;
56
+ /* istanbul ignore next */
55
57
  if (hasVertScroll(tableBodyElement) && headerCellElement) {
56
58
  headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
57
59
  }
58
60
  var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
61
+ /* istanbul ignore next */
59
62
  if (typeof window !== 'undefined') {
60
63
  window.addEventListener('resize', boundListener);
61
64
  }
62
65
  return function () {
66
+ /* istanbul ignore next */
63
67
  if (typeof window !== 'undefined') {
64
68
  window.removeEventListener('resize', boundListener);
65
69
  }
@@ -158,6 +162,7 @@ var changeProps = function changeProps(elementName, headerCellRef, windowSize, p
158
162
  };
159
163
  var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
160
164
  if (headerCellEle) {
165
+ /* istanbul ignore next */
161
166
  if (hasVertScroll(tableBodyEle)) {
162
167
  headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
163
168
  } else {
@@ -167,6 +172,7 @@ var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
167
172
  }
168
173
  };
169
174
  var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
175
+ /* istanbul ignore next */
170
176
  if (tableBodyEle && headerCellEle) {
171
177
  var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
172
178
  if (isScrolledToRight) {
@@ -179,6 +185,7 @@ var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle
179
185
  }
180
186
  };
181
187
  var hasVertScroll = function hasVertScroll(element) {
188
+ /* istanbul ignore next */
182
189
  if (!element) {
183
190
  return false;
184
191
  }
@@ -46,7 +46,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
46
46
  style: {
47
47
  height: expandedContentHeight ? expandedContentHeight : null
48
48
  }
49
- }, ExpandedRowContentComponent(datagridState)));
49
+ }, /*#__PURE__*/_react.default.createElement(ExpandedRowContentComponent, datagridState)));
50
50
  };
51
51
  };
52
52
  var _default = exports.default = DatagridExpandedRow;
@@ -88,13 +88,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
88
88
  dispatch = datagridState.dispatch,
89
89
  onColResizeEnd = datagridState.onColResizeEnd;
90
90
  var columnResizing = state.columnResizing;
91
- var columnWidths = columnResizing.columnWidths;
91
+ var _ref4 = columnResizing || {},
92
+ columnWidths = _ref4.columnWidths;
92
93
  var originalCol = visibleColumns[index];
93
94
  return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
94
- className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
95
+ className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx), header.getHeaderProps().className),
95
96
  key: header.id,
96
97
  "aria-hidden": header.id === 'spacer' && 'true'
97
- }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
98
+ }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
98
99
  onKeyDown: function onKeyDown(event) {
99
100
  var key = event.key;
100
101
  if (key === 'ArrowLeft' || key === 'ArrowRight') {
@@ -32,8 +32,11 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
32
32
  className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
33
33
  }), rows.map(function (row) {
34
34
  prepareRow(row);
35
+ var _row$getRowProps = row.getRowProps(),
36
+ key = _row$getRowProps.key;
35
37
  return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
36
- row: row
38
+ row: row,
39
+ key: key
37
40
  }));
38
41
  }));
39
42
  };
@@ -37,7 +37,8 @@ var DatagridRow = function DatagridRow(datagridState) {
37
37
  var row = datagridState.row,
38
38
  rowSize = datagridState.rowSize,
39
39
  withNestedRows = datagridState.withNestedRows,
40
- prepareRow = datagridState.prepareRow;
40
+ prepareRow = datagridState.prepareRow,
41
+ key = datagridState.key;
41
42
  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
42
43
  var isExpanded = _ref.isExpanded,
43
44
  subRows = _ref.subRows;
@@ -95,7 +96,9 @@ var DatagridRow = function DatagridRow(datagridState) {
95
96
  }
96
97
  };
97
98
  var rowClassNames = (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));
98
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
99
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
100
+ key: key
101
+ }, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
99
102
  className: rowClassNames
100
103
  }, row.getRowProps(), {
101
104
  key: row.id,
@@ -28,8 +28,11 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
28
28
  className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
29
29
  }), rows.map(function (row) {
30
30
  prepareRow(row);
31
+ var _row$getRowProps = row.getRowProps(),
32
+ key = _row$getRowProps.key;
31
33
  return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
32
- row: row
34
+ row: row,
35
+ key: key
33
36
  }));
34
37
  }));
35
38
  };
@@ -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
  }
@@ -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
  }
@@ -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);
@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
- /*
10
- * Licensed Materials - Property of IBM
11
- * 5724-Q36
12
- * (c) Copyright IBM Corp. 2020
13
- * US Government Users Restricted Rights - Use, duplication or disclosure
14
- * restricted by GSA ADP Schedule Contract with IBM Corp.
9
+ /**
10
+ * Copyright IBM Corp. 2020, 2023
11
+ *
12
+ * This source code is licensed under the Apache-2.0 license found in the
13
+ * LICENSE file in the root directory of this source tree.
15
14
  */
15
+
16
16
  var useSkeletons = function useSkeletons(hooks) {
17
17
  var useInstance = function useInstance(instance) {
18
18
  var isFetching = instance.isFetching,