@carbon/ibm-products 2.15.1 → 2.15.2

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