@carbon/ibm-products 2.15.1 → 2.16.0

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -19,13 +19,13 @@ var _stateReducer = require("./addons/stateReducer");
 var _getNodeTextContent = require("../../../global/js/utils/getNodeTextContent");
 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); }
 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; }
-/**
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
+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; }
+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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2020, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -38,35 +38,44 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
   return props;
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  var resizerAriaLabel = datagridState.resizerAriaLabel;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   (0, _react.useEffect)(function () {
     var tableId = datagridState.tableId;
-    if (tableId) {
-      var gridElement = document.querySelector("#".concat(tableId));
-      var tableElement = gridElement.querySelector('table');
-      var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
-      var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
-      var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
-      var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
-      var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
-      var setCustomValues = function setCustomValues(_ref) {
-        var _ref$rowHeight = _ref.rowHeight,
-          rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
-          gridHeight = _ref.gridHeight;
-        headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
-        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
-        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
-      };
-      setCustomValues({
-        gridHeight: gridElement.offsetHeight,
-        rowHeight: headerRowElement.clientHeight
-      });
-    }
+    var gridElement = document.querySelector("#".concat(tableId));
+    var tableElement = gridElement.querySelector('table');
+    var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
+    var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
+    var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
+    var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
+    var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
+    var setCustomValues = function setCustomValues(_ref) {
+      var rowHeight = _ref.rowHeight,
+        gridHeight = _ref.gridHeight;
+      headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
+      headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
+      headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
+    };
+    setCustomValues({
+      gridHeight: gridElement.offsetHeight,
+      rowHeight: headerRowElement.clientHeight
+    });
   }, [datagridState.rowSize, datagridState.tableId, datagridState]);
   var _useState = (0, _react.useState)(2),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     incrementAmount = _useState2[0];
+  var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
+    var _resizeProps = _objectSpread({}, resizeProps()),
+      onMouseDown = _resizeProps.onMouseDown;
+    // When event.button is 2, that is a right click
+    // and we do not want to resize
+    if (event.button === 2 || event.ctrlKey) {
+      event.target.blur();
+      return;
+    }
+    onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
+  };
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
@@ -88,13 +97,17 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
     var columnResizing = state.columnResizing;
-    var columnWidths = columnResizing.columnWidths;
+    var _ref4 = columnResizing || {},
+      columnWidths = _ref4.columnWidths;
     var originalCol = visibleColumns[index];
     return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
-      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),
+      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),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, 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(), {
+    }, 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(), {
+      onMouseDown: function onMouseDown(event) {
+        return handleOnMouseDownResize(event, header.getResizerProps);
+      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
@@ -118,7 +131,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
       type: "range",
       defaultValue: originalCol.width,
-      "aria-label": "Resize column"
+      "aria-label": resizerAriaLabel || 'Resize column'
     })), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "__col-resize-indicator")
     })));

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -32,8 +32,11 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
+    var _row$getRowProps = row.getRowProps(),
+      key = _row$getRowProps.key;
     return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     }));
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -37,7 +37,8 @@ var DatagridRow = function DatagridRow(datagridState) {
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
-    prepareRow = datagridState.prepareRow;
+    prepareRow = datagridState.prepareRow,
+    key = datagridState.key;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -95,7 +96,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
   };
   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));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: key
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
     className: rowClassNames
   }, row.getRowProps(), {
     key: row.id,

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -15,14 +15,12 @@ var _react2 = require("@carbon/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _excluded = ["onChange"];
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2023
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-// @flow
 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); }
 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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -33,6 +31,7 @@ var SelectAll = exports.SelectAll = function SelectAll(datagridState) {
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   (0, _react.useLayoutEffect)(function () {
+    /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -53,15 +52,15 @@ var SelectAll = exports.SelectAll = function SelectAll(datagridState) {
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
+      isFirstColumnStickyLeft && windowSize > 671))
     });
   }
   var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
-  var _ref = selectProps || {},
-    indeterminate = _ref.indeterminate;
+  var indeterminate = selectProps.indeterminate;
   var handleSelectAllChange = function handleSelectAllChange(event) {
     if (indeterminate) {
       return onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -73,7 +72,8 @@ var SelectAll = exports.SelectAll = function SelectAll(datagridState) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
+    isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/_react.default.createElement(_react2.TableSelectAll, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: handleSelectAllChange,

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -28,8 +28,11 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
+    var _row$getRowProps = row.getRowProps(),
+      key = _row$getRowProps.key;
     return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     }));
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactWindow = require("react-window");
@@ -18,12 +17,11 @@ var _useResizeObserver = require("../../../global/js/hooks/useResizeObserver");
 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); }
 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; }
 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; }
-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; } /*
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Licensed Materials - Property of IBM
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * 5724-Q36
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * (c) Copyright IBM Corp. 2020 - 2023
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * US Government Users Restricted Rights - Use, duplication or disclosure
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * restricted by GSA ADP Schedule Contract with IBM Corp.
+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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2020, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * LICENSE file in the root directory of this source tree.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var rowSizeMap = {
@@ -31,12 +29,7 @@ var rowSizeMap = {
   sm: 32,
   md: 40,
   lg: 48,
-  xl: 64,
-  // TODO: deprecate the below values in next major release (v8) on carbon-components-react
-  short: 32,
-  compact: 24,
-  normal: 48,
-  tall: 64
+  xl: 64
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
@@ -54,19 +47,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     DatagridPagination = datagridState.DatagridPagination,
     page = datagridState.page,
     handleResize = datagridState.handleResize,
-    gridRef = datagridState.gridRef;
+    gridRef = datagridState.gridRef,
+    tableId = datagridState.tableId;
+
+  /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
   (0, _useResizeObserver.useResizeObserver)(gridRef, handleVirtualGridResize);
-  var syncScroll = function syncScroll(e) {
-    var virtualBody = e.target;
-    document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
-    var spacerColumn = document.querySelector(".".concat(blockClass, "__head-wrap thead th:last-child"));
-    spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
-  };
-
   (0, _react.useEffect)(function () {
     handleResize();
   }, [handleResize]);
@@ -75,17 +64,30 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     listRef.current.resetAfterIndex(0);
   }
   var visibleRows = DatagridPagination && page || rows;
+  var testRef = (0, _react.useRef)();
+
+  // Sync the scrollLeft position of the virtual body to the table header
+  (0, _react.useEffect)(function () {
+    function handleScroll(event) {
+      var virtualBody = event.target;
+      document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
+      var spacerColumn = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap thead th:last-child"));
+      spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
+    }
+
+    var testRefValue = testRef.current;
+    testRefValue.addEventListener('scroll', handleScroll);
+    return function () {
+      testRefValue.removeEventListener('scroll', handleScroll);
+    };
+  });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
     style: {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
-    onScroll: function onScroll(e) {
-      return syncScroll(e);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
+  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, getTableBodyProps(), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {
@@ -94,6 +96,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
     innerRef: innerListRef,
+    outerRef: testRef,
     ref: listRef,
     className: "".concat(blockClass, "__virtual-scrollbar"),
     style: {
@@ -104,10 +107,13 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       style = _ref.style;
     var row = visibleRows[index];
     prepareRow(row);
+    var _row$getRowProps = row.getRowProps(),
+      key = _row$getRowProps.key;
     return /*#__PURE__*/_react.default.createElement("div", {
       style: _objectSpread({}, style)
     }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     })));
   })));
 };

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -71,10 +71,10 @@ var DraggableItemsList = exports.DraggableItemsList = function DraggableItemsLis
     if (destOverCol !== null && destOverCol !== void 0 && destOverCol.length && (_destOverCol$ = destOverCol[0]) !== null && _destOverCol$ !== void 0 && _destOverCol$.disabled) {
       return;
     }
-    var fromVisibleIndex = columns.findIndex(function (col) {
+    var fromVisibleIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var toVisibleIndex = columns.findIndex(function (col) {
+    var toVisibleIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, over);
     });
     var colTitle = (0, _getNodeTextContent.getNodeTextContent)(updatedDragCols[fromVisibleIndex].Header);

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeEndEvent = void 0;
+exports.stateReducer = exports.handleToggleRowSelected = exports.handleColumnResizingEvent = exports.handleColumnResizeEndEvent = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -20,6 +20,7 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
+var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var handleColumnResizeEndEvent = exports.handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -51,8 +52,43 @@ var handleColumnResizingEvent = exports.handleColumnResizingEvent = function han
     }
   });
 };
+var handleToggleRowSelected = exports.handleToggleRowSelected = function handleToggleRowSelected(dispatch, rowData, isChecked) {
+  return dispatch({
+    type: TOGGLE_ROW_SELECTED,
+    payload: {
+      rowData: rowData,
+      isChecked: isChecked
+    }
+  });
+};
 var stateReducer = exports.stateReducer = function stateReducer(newState, action) {
   switch (action.type) {
+    case TOGGLE_ROW_SELECTED:
+      {
+        var _ref = action.payload || {},
+          rowData = _ref.rowData,
+          isChecked = _ref.isChecked;
+        if (!rowData) {
+          return;
+        }
+        if (isChecked) {
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, (0, _defineProperty2.default)({}, rowData.index, rowData))
+          });
+        }
+        if (rowData && !isChecked) {
+          var newData = _objectSpread({}, newState.selectedRowData);
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref2) {
+            var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+              key = _ref3[0];
+            return parseInt(key) !== parseInt(rowData.index);
+          }));
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: dataWithRemovedRow
+          });
+        }
+        return _objectSpread({}, newState);
+      }
     case INIT:
       {
         return _objectSpread(_objectSpread({}, newState), {}, {
@@ -61,27 +97,27 @@ var stateReducer = exports.stateReducer = function stateReducer(newState, action
       }
     case COLUMN_RESIZE_START:
       {
-        var _ref = action.payload || {},
-          headerId = _ref.headerId;
+        var _ref4 = action.payload || {},
+          headerId = _ref4.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref2 = action.payload || {},
-          _headerId = _ref2.headerId,
-          newWidth = _ref2.newWidth,
-          defaultWidth = _ref2.defaultWidth;
+        var _ref5 = action.payload || {},
+          _headerId = _ref5.headerId,
+          newWidth = _ref5.newWidth,
+          defaultWidth = _ref5.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
-          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-            _ = _ref4[0],
-            value = _ref4[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref6) {
+          var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
+            _ = _ref7[0],
+            value = _ref7[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -96,10 +132,10 @@ var stateReducer = exports.stateReducer = function stateReducer(newState, action
       }
     case COLUMN_RESIZE_END:
       {
-        var _ref5 = action.payload || {},
-          onColResizeEnd = _ref5.onColResizeEnd,
-          _headerId2 = _ref5.headerId,
-          isKeyEvent = _ref5.isKeyEvent;
+        var _ref8 = action.payload || {},
+          onColResizeEnd = _ref8.onColResizeEnd,
+          _headerId2 = _ref8.headerId,
+          isKeyEvent = _ref8.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;

package/lib/components/Datagrid/Datagrid.docs-page.js

@@ -55,7 +55,13 @@ var DocsPage = exports.DocsPage = function DocsPage() {
       description: "There is also an optional resize callback when resizing columns, allowing you to save the widths of columns that have been resized. The resize callback returns the column that was just resized and it's width, in addition to all of the columns that have been resized and their widths.",
       source: {
         language: 'jsx',
-        code: "\nuseDatagrid({\n  columns,\n  data,\n  onColResizeEnd: (currentColumn, allColumns) =>\n      console.log(currentColumn, allColumns),\n});\n          "
+        code: "\nuseDatagrid({\n  columns,\n  data,\n  onColResizeEnd: (currentColumn, allColumns) =>\n      console.log(currentColumn, allColumns),\n  resizerAriaLabel: 'Resize column',\n});\n          "
+      }
+    }, {
+      description: 'Disabling the resizable columns is possible by specifying `disableResizing: true` within the `useDatagrid` hook. To pass in your own translated label for the column resizer, add the `resizerAriaLabel` property',
+      source: {
+        language: 'jsx',
+        code: "\nuseDatagrid({\n  columns,\n  data,\n  disableResizing: true,\n  resizerAriaLabel: 'Resize column',\n});\n          "
       }
     }, {
       title: 'Rendering the table toolbar',
@@ -90,7 +96,7 @@ var DocsPage = exports.DocsPage = function DocsPage() {
     }, {
       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.",
       source: {
-        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);"
+        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);"
       }
     }, {
       description: "Virtualized data:\n- Include `useInfiniteScroll` hook\n- The Datagrid will know to use virtualized data just by providing the `useInfiniteScroll` hook\n        ",

package/lib/components/Datagrid/useActionsColumn.js

@@ -50,12 +50,13 @@ var useActionsColumn = function useActionsColumn(hooks) {
           column = cell.column;
         if (column.isAction) {
           var _cx3;
+          var isColumnSticky = !!column.sticky;
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
               className: "".concat(blockClass, "__actions-column-contents")
             }, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
+            }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/_react.default.createElement("div", {
               className: "".concat(blockClass, "_actions-column"),
               style: {
                 display: 'flex'
@@ -90,7 +91,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   _onClick(id, row, e);
                 }
               })));
-            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+            })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
               align: "left",
               size: "sm",
               flipped: true,
@@ -120,9 +121,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 key: id
               }));
             })))),
-            className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
+            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)),
             style: {
-              width: rowActions.length > 2 ? 48 : 96
+              width: rowActions.length > 2 || isColumnSticky ? 48 : 96
             }
           }];
         }
@@ -137,9 +138,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
       var addHeaderWidth = function addHeaderWidth(props, cellData) {
         var column = cellData.column;
         if (column.isAction) {
+          var isColumnSticky = !!column.sticky;
           return [props, {
             style: _objectSpread(_objectSpread({}, props.style), {}, {
-              width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
+              width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
             })
           }];
         }

package/lib/components/Datagrid/useDatagrid.js

@@ -28,8 +28,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */
 var useDatagrid = function useDatagrid(params) {
   var defaultPlugins = [_reactTable.useFlexLayout, _DatagridHeaderRow.default, _useSkeletonRows.default, _reactTable.useResizeColumns, _useRowRenderer.default, _useDefaultStringRenderer.default, _useRowSize.default, _reactTable.useFilters, _reactTable.useGlobalFilter, _reactTable.useSortBy, _reactTable.useExpanded];
+
+  // Disable resizing
+  if (params.disableResizing) {
+    var resizeIndex = defaultPlugins.findIndex(function (p) {
+      return p.pluginName === 'useResizeColumns';
+    });
+    defaultPlugins.splice(resizeIndex, 1);
+  }
   var defaultEndPlugins = [_reactTable.usePagination, _reactTable.useRowSelect, _useFlexResize.default, _useFloatingScroll.default];
   var clientEndPlugins = params.endPlugins || [];
+  var defaultColumn = {
+    minWidth: 50
+  };
   var tableId = (0, _react.useMemo)(function () {
     return (0, _uniqueId.default)('datagrid-table-id');
   }, []);
@@ -39,7 +50,8 @@ var useDatagrid = function useDatagrid(params) {
   var tableState = _reactTable.useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
   }, params), {}, {
-    stateReducer: _stateReducer.stateReducer
+    stateReducer: _stateReducer.stateReducer,
+    defaultColumn: defaultColumn
   })].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
   return tableState;
 };