@carbon/ibm-products 1.61.1 → 1.62.0

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -25,9 +25,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var toolbarClass = "".concat(blockClass, "__table-toolbar");
+var menuClass = "".concat(blockClass, "__button-menu");
 var TableToolbar = _carbonComponentsReact.DataTable.TableToolbar;
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
-  var _Object$keys;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     displayAllInMenu = _useState2[0],
@@ -43,8 +44,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   var selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
-    setGlobalFilter = datagridState.setGlobalFilter;
-  var totalSelected = (_Object$keys = Object.keys(selectedRowIds || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length;
+    setGlobalFilter = datagridState.setGlobalFilter,
+    batchActionMenuButtonLabel = datagridState.batchActionMenuButtonLabel,
+    translateWithIdBatchActions = datagridState.translateWithIdBatchActions;
+  var batchActionMenuButtonLabelText = batchActionMenuButtonLabel !== null && batchActionMenuButtonLabel !== void 0 ? batchActionMenuButtonLabel : 'More';
+  var selectedKeys = Object.keys(selectedRowIds || {});
+  var totalSelected = selectedKeys.length;
 
   // Get initial width of batch actions container,
   // used to measure when all items are put inside
@@ -74,25 +79,25 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       return null;
     }
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
-      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
+      label: width > minWidthBeforeOverflowIcon ? batchActionMenuButtonLabelText : null,
       renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add16 : _iconsReact.OverflowMenuVertical16,
-      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
-      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      className: (0, _classnames.default)([menuClass, (0, _defineProperty2.default)({}, "".concat(menuClass, "--icon-only"), width <= minWidthBeforeOverflowIcon)]),
+      menuOptionsClass: "".concat(menuClass, "-options"),
       flipped: true
-    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2 && !displayAllInMenu) {
-        return;
-      }
-      return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
-        key: "".concat(batchAction.label, "-").concat(index),
-        itemText: batchAction.label,
-        onClick: function onClick() {
-          batchAction.onClick();
-          if (batchAction.type === 'select_all') {
-            toggleAllRowsSelected(true);
+    }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
+      var hidden = index < 2 && !displayAllInMenu;
+      if (!hidden) {
+        return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+          key: "".concat(batchAction.label, "-").concat(index),
+          itemText: batchAction.label,
+          onClick: function onClick() {
+            batchAction.onClick();
+            if (batchAction.type === 'select_all') {
+              toggleAllRowsSelected(true);
+            }
           }
-        }
-      });
+        });
+      }
     }));
   };
 
@@ -105,7 +110,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     onCancel: function onCancel() {
       toggleAllRowsSelected(false);
       setGlobalFilter(null);
-    }
+    },
+    translateWithId: translateWithIdBatchActions
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableBatchAction, {
@@ -130,12 +136,12 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
     DatagridBatchActions = datagridState.DatagridBatchActions,
     batchActions = datagridState.batchActions,
     rowSize = datagridState.rowSize;
-  var getRowHeight = rowSize ? rowSize : 'lg';
+  var getRowHeight = rowSize || 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _classnames.default)("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
+    className: (0, _classnames.default)([toolbarClass, "".concat(toolbarClass, "--").concat(getRowHeight)])
   }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__table-toolbar")
+    className: toolbarClass
   }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 var _default = DatagridToolbar;

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

@@ -26,12 +26,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) {
@@ -50,13 +45,17 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     page = datagridState.page,
     handleResize = datagridState.handleResize,
     gridRef = datagridState.gridRef;
+
+  /* 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;
+
+  /* istanbul ignore next */
+  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
@@ -79,9 +78,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps({
     role: false
   }), {
-    onScroll: function onScroll(e) {
-      return syncScroll(e);
-    }
+    onScroll: syncScroll
   }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -101,10 +98,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/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"));
@@ -15,6 +15,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 = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -48,8 +49,44 @@ var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, hea
   });
 };
 exports.handleColumnResizingEvent = handleColumnResizingEvent;
+var handleToggleRowSelected = function handleToggleRowSelected(dispatch, rowData, isChecked) {
+  return dispatch({
+    type: TOGGLE_ROW_SELECTED,
+    payload: {
+      rowData: rowData,
+      isChecked: isChecked
+    }
+  });
+};
+exports.handleToggleRowSelected = handleToggleRowSelected;
 var 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), {}, {
@@ -58,27 +95,27 @@ var 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 || [];
@@ -93,10 +130,10 @@ var 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.stories/StickyActionsColumnStory.js

@@ -45,7 +45,7 @@
 
 //     ## Sample usage:
 //     1. include \`useActionsColumn\` hook
-//     2. add \`isAction = true\` to the column object in which you which to add the overflow menu actions
+//     2. add \`isAction = true\` to the column object in which you wish to add the overflow menu actions
 //     3. add \`rowActions = []\` array to the props
 //       - \`rowActions[].id\` for callback to identify the action is called
 //       - \`rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)\` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)

package/lib/components/Datagrid/useActionsColumn.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,21 +8,16 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _settings = require("../../settings");
 var _excluded = ["id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
-  (0, _react.useEffect)(function () {
-    _settings.pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
-  }, []);
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,
@@ -44,12 +38,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(_carbonComponentsReact.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'
@@ -73,6 +68,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 hasIconOnly: true,
                 light: true,
                 iconDescription: itemText,
+                ariaLabel: itemText,
                 kind: "ghost",
                 className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
                 onClick: function onClick(e) {
@@ -84,7 +80,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   _onClick(id, row, e);
                 }
               })));
-            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+            })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
@@ -114,9 +110,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
             }
           }];
         }
@@ -131,9 +127,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

@@ -22,8 +22,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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');
   }, []);
@@ -33,7 +44,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/useFlexResize.js

@@ -6,29 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * 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 useFlexResize = function useFlexResize(hooks) {
-  var spacerColumn = {
+  var spacer = {
     id: 'spacer',
     width: 0,
     disableSortBy: true,
     disableResizing: true
   };
   hooks.visibleColumns.push(function (columns) {
-    return [].concat((0, _toConsumableArray2.default)(columns), [spacerColumn]);
+    // always move actions and spacer to the end
+    var actionsIdx = columns.findIndex(function (col) {
+      return col.isAction;
+    });
+    if (actionsIdx === -1) {
+      return [].concat((0, _toConsumableArray2.default)(columns), [spacer]);
+    }
+    var cols = (0, _toConsumableArray2.default)(columns);
+    var actions = cols.splice(actionsIdx, 1)[0];
+    cols.splice(columns.length, 0, spacer, actions);
+    return cols;
   });
   var changeProps = function changeProps(props, data) {
     var column = data.column;
     if (!column && data.cell) {
       column = data.cell.column;
     }
-    if (column.id === spacerColumn.id) {
+    if (column.id === spacer.id) {
       return [props, {
         style: {
           flex: '1 1 0'

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -9,12 +9,11 @@ var _react = require("react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions"));
 var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * 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 useInfiniteScroll = function useInfiniteScroll(hooks) {
@@ -25,10 +24,11 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
       tableHeight = instance.tableHeight,
       innerListRef = instance.innerListRef,
       fetchMoreData = instance.fetchMoreData,
-      tableId = instance.tableId;
+      tableId = instance.tableId,
+      loadMoreThreshold = instance.loadMoreThreshold;
     var tableElement = document.querySelector("#".concat(tableId));
     var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
-    var loadMoreThreshold = 200;
+    var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
     var emptyFetchData = function emptyFetchData() {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
     var fetchMore = (0, _react.useCallback)((0, _debounce.default)(fetchMoreData || emptyFetchData, 3000, {
@@ -39,7 +39,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
       var scrollDirection = _ref.scrollDirection,
         scrollOffset = _ref.scrollOffset;
       if (innerListRef && innerListRef.current) {
-        if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
+        if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThresholdValue) {
           if (fetchMoreData) {
             fetchMore();
           }

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/useParentDimensions.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * 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 useParentDimensions = function useParentDimensions(hooks) {

package/lib/components/Datagrid/useResizeTable.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * 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 useResizeTable = function useResizeTable(hooks) {
@@ -33,7 +32,7 @@ var useResizeTable = function useResizeTable(hooks) {
           resizeObserver = null;
         };
       }
-      return console.error(' Could not resize table, no support for ResizeObserver');
+      return console.error('Could not resize table, no support for ResizeObserver');
     }, [handleResize, parent]);
   };
   hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 // @flow
 
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__select-all");
 var useSelectAllToggle = function useSelectAllToggle(hooks) {
   useSelectAllWithToggleComponent(hooks);
   useAddClassNameToSelectRow(hooks);
@@ -71,7 +71,7 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
     var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
     if (column.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
       return [props, {
-        className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+        className: (0, _classnames.default)(["".concat(blockClass, "-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)])
       }];
     }
     return [props];