@carbon/ibm-products 2.15.2 → 2.16.0

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -39,7 +39,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
-  var _cx4;
+  var _cx5;
   var datagridState = _ref.datagridState,
     title = _ref.title;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
@@ -52,8 +52,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   var activeCellId = inlineEditState.activeCellId,
     gridActive = inlineEditState.gridActive,
     editId = inlineEditState.editId;
-  var _datagridState$getTab = datagridState.getTableProps,
-    getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+  var getTableProps = datagridState.getTableProps,
     getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
     withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
@@ -76,6 +75,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     state = datagridState.state,
     page = datagridState.page,
     rows = datagridState.rows;
+  var columnResizing = state.columnResizing;
   var contentRows = DatagridPagination && page || rows;
   var gridAreaRef = (0, _react.useRef)();
   var multiKeyTrackingRef = (0, _react.useRef)();
@@ -97,10 +97,11 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
-      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
-      onKeyDown: withInlineEdit ? function (event) {
+      onKeyDown: /* istanbul ignore next */
+      withInlineEdit && function (event) {
         return (0, _handleGridKeyPress.handleGridKeyPress)({
           event: event,
           dispatch: dispatch,
@@ -109,10 +110,10 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
           state: inlineEditState,
           usingMac: usingMac
         });
-      } : null,
-      onFocus: withInlineEdit ? function () {
+      },
+      onFocus: withInlineEdit && function () {
         return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
-      } : null,
+      },
       title: title
     }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: contentRows
@@ -141,6 +142,8 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   (0, _hooks3.useSubscribeToEventEmitter)(_constants.CLEAR_SINGLE_FILTER, function (id) {
     return (0, _FilterProvider.clearSingleFilter)(id, setAllFilters, state);
   });
+
+  /* istanbul ignore next */
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -153,7 +156,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
-    className: (0, _classnames.default)("".concat(gcClass), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx4)),
+    className: (0, _classnames.default)("".concat(gcClass), (_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx5)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -20,10 +20,10 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
     var row = datagridState.row;
-    var _ref = row || {},
-      expandedContentHeight = _ref.expandedContentHeight;
+    var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
       var _event$target;
+      /* istanbul ignore else */
       if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.parentNode) !== null && _event$target !== void 0 && _event$target.previousElementSibling) {
         var parentNode = event.target.parentNode.previousElementSibling;
         if (eventType === 'enter') {
@@ -44,7 +44,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
       style: {
-        height: expandedContentHeight ? expandedContentHeight : null
+        height: expandedContentHeight && expandedContentHeight
       }
     }, /*#__PURE__*/_react.default.createElement(ExpandedRowContentComponent, datagridState)));
   };

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
@@ -96,6 +105,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, 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') {
@@ -119,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/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/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");
@@ -48,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(event) {
-    var virtualBody = event.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]);
@@ -69,15 +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: syncScroll
-  }), /*#__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) {
@@ -86,6 +96,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
     innerRef: innerListRef,
+    outerRef: testRef,
     ref: listRef,
     className: "".concat(blockClass, "__virtual-scrollbar"),
     style: {

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,13 +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.',
+      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});\n          "
+        code: "\nuseDatagrid({\n  columns,\n  data,\n  disableResizing: true,\n  resizerAriaLabel: 'Resize column',\n});\n          "
       }
     }, {
       title: 'Rendering the table toolbar',

package/lib/components/Datagrid/useDatagrid.js

@@ -38,6 +38,9 @@ var useDatagrid = function useDatagrid(params) {
   }
   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');
   }, []);
@@ -47,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;
 };

package/lib/components/Datagrid/useOnRowClick.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _settings = require("../../settings");
-/*
- * 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.
+/**
+ * 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 useOnRowClick = function useOnRowClick(hooks) {
@@ -49,7 +48,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
       var onKeyDown = function onKeyDown(event) {
         var key = event.key;
         if (key === 'Enter') {
-          onClick();
+          onClick(event);
         }
       };
       return [props, {

package/lib/components/Datagrid/useSelectRows.js

@@ -17,6 +17,7 @@ var _react2 = require("@carbon/react");
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
 var _commonColumnIds = require("./common-column-ids");
 var _settings = require("../../settings");
+var _stateReducer = require("./Datagrid/addons/stateReducer");
 var _excluded = ["onChange", "title"];
 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; }
@@ -85,7 +86,8 @@ var SelectRow = function SelectRow(datagridState) {
     onRadioSelect = datagridState.onRadioSelect,
     onRowSelect = datagridState.onRowSelect,
     columns = datagridState.columns,
-    withStickyColumn = datagridState.withStickyColumn;
+    withStickyColumn = datagridState.withStickyColumn,
+    dispatch = datagridState.dispatch;
   var _useState = (0, _react.useState)(window.innerWidth),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     windowSize = _useState2[0],
@@ -99,16 +101,17 @@ var SelectRow = function SelectRow(datagridState) {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
-  var onSelectHandler = function onSelectHandler(e) {
-    e.stopPropagation(); // avoid triggering onRowClick
+  var onSelectHandler = function onSelectHandler(event) {
+    event.stopPropagation(); // avoid triggering onRowClick
     if (radio) {
       toggleAllRowsSelected(false);
       if (onRadioSelect) {
         onRadioSelect(row);
       }
     }
-    onChange(e);
-    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
+    onChange(event);
+    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
+    (0, _stateReducer.handleToggleRowSelected)(dispatch, row, event.target.checked);
   };
   var selectDisabled = isFetching || row.getRowProps().disabled;
   var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),

package/lib/components/Datagrid/useSortableColumns.js

@@ -33,9 +33,8 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   if (!col) {
     return;
   }
-  var _ref2 = col || {},
-    isSorted = _ref2.isSorted,
-    isSortedDesc = _ref2.isSortedDesc;
+  var isSorted = col.isSorted,
+    isSortedDesc = col.isSortedDesc;
   if (!isSorted) {
     return defaultSortableLabelText;
   }
@@ -50,17 +49,16 @@ var getAriaPressedValue = function getAriaPressedValue(col) {
   if (!col) {
     return;
   }
-  var _ref3 = col || {},
-    isSorted = _ref3.isSorted;
+  var isSorted = col.isSorted;
   if (isSorted) {
     return 'true';
   }
   return 'false';
 };
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref4) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
     var _instance$customizeCo;
-    var instance = _ref4.instance;
+    var instance = _ref2.instance;
     var onSort = instance.onSort,
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -52,7 +52,8 @@ var ErrorEmptyState = exports.ErrorEmptyState = /*#__PURE__*/_react.default.forw
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ErrorIllustration.ErrorIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -52,7 +52,8 @@ var NoTagsEmptyState = exports.NoTagsEmptyState = /*#__PURE__*/_react.default.fo
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoTagsIllustration.NoTagsIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,