@carbon/ibm-products 2.15.2 → 2.17.0-alpha.8

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -3,14 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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
+
 import React, { useLayoutEffect, useState } from 'react';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
@@ -23,6 +22,7 @@ var SelectAll = function SelectAll(datagridState) {
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -43,15 +43,15 @@ var 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.createElement("div", {
-      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
+      isFirstColumnStickyLeft && windowSize > 671))
     });
   }
   var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = _objectWithoutProperties(_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({
@@ -63,7 +63,8 @@ var SelectAll = function SelectAll(datagridState) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
+    isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: handleSelectAllChange,

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -31,7 +31,10 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
     setGlobalFilter = datagridState.setGlobalFilter,
-    rows = datagridState.rows;
+    rows = datagridState.rows,
+    batchActionMenuButtonLabel = datagridState.batchActionMenuButtonLabel,
+    translateWithIdBatchActions = datagridState.translateWithIdBatchActions;
+  var batchActionMenuButtonLabelText = batchActionMenuButtonLabel !== null && batchActionMenuButtonLabel !== void 0 ? batchActionMenuButtonLabel : 'More';
   var selectedKeys = Object.keys(selectedRowIds || {});
   var totalSelected = selectedKeys.length;
 
@@ -84,7 +87,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       });
     };
     return /*#__PURE__*/React.createElement(MenuButton, {
-      label: "More",
+      label: batchActionMenuButtonLabelText,
       className: cx([menuClass, _defineProperty({}, "".concat(menuClass, "-icon-only"), width <= minWidthBeforeOverflowIcon)])
     }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
       var hidden = index < 2 && !displayAllInMenu;
@@ -116,7 +119,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     totalSelected: totalSelected,
     onCancel: onCancelHandler,
     onSelectAll: onSelectAllHandler,
-    totalCount: rows && rows.length
+    totalCount: rows && rows.length,
+    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.createElement(TableBatchAction, {

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -9,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { VariableSizeList } from 'react-window';
 import { TableBody } from '@carbon/react';
 import { pkg } from '../../../settings';
@@ -40,19 +39,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;
   };
   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 = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
-  };
-
   useEffect(function () {
     handleResize();
   }, [handleResize]);
@@ -61,15 +56,30 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     listRef.current.resetAfterIndex(0);
   }
   var visibleRows = DatagridPagination && page || rows;
+  var testRef = useRef();
+
+  // Sync the scrollLeft position of the virtual body to the table header
+  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 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
-    onScroll: syncScroll
-  }), /*#__PURE__*/React.createElement(VariableSizeList, {
+  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, getTableBodyProps(), /*#__PURE__*/React.createElement(VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {
@@ -78,6 +88,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
     innerRef: innerListRef,
+    outerRef: testRef,
     ref: listRef,
     className: "".concat(blockClass, "__virtual-scrollbar"),
     style: {

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

@@ -66,10 +66,10 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     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 = getNodeTextContent(updatedDragCols[fromVisibleIndex].Header);

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

@@ -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(pkg.prefix, "--datagrid");
 export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -46,8 +47,43 @@ export var handleColumnResizingEvent = function handleColumnResizingEvent(dispat
     }
   });
 };
+export var handleToggleRowSelected = function handleToggleRowSelected(dispatch, rowData, isChecked) {
+  return dispatch({
+    type: TOGGLE_ROW_SELECTED,
+    payload: {
+      rowData: rowData,
+      isChecked: isChecked
+    }
+  });
+};
 export 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), {}, _defineProperty({}, rowData.index, rowData))
+          });
+        }
+        if (rowData && !isChecked) {
+          var newData = _objectSpread({}, newState.selectedRowData);
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref2) {
+            var _ref3 = _slicedToArray(_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), {}, {
@@ -56,27 +92,27 @@ export 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 = _slicedToArray(_ref3, 2),
-            _ = _ref4[0],
-            value = _ref4[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref6) {
+          var _ref7 = _slicedToArray(_ref6, 2),
+            _ = _ref7[0],
+            value = _ref7[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -91,10 +127,10 @@ export 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/es/components/Datagrid/Datagrid.docs-page.js

@@ -45,13 +45,13 @@ export var 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',
@@ -106,7 +106,7 @@ export var DocsPage = function DocsPage() {
       title: 'Selecting rows',
       description: "When building a Datagrid that requires selectable rows, use the `useSelectRows` hook.\n- Include `useSelectRows` hook\n- Add `onRowSelect` to the `useDatagrid` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event\n        ",
       source: {
-        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n    batchActionMenuButtonLabel: 'More',\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
       }
     }, {
       description: "The select all checkbox can be optionally hidden by settings the `hideSelectAll` property to `true` in the `useDatagrid` hook.",

package/es/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/es/components/Datagrid/useActionsColumn.js

@@ -12,15 +12,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { IconSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
-  }, []);
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,

package/es/components/Datagrid/useDatagrid.js

@@ -32,6 +32,9 @@ var useDatagrid = function useDatagrid(params) {
   }
   var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
   var clientEndPlugins = params.endPlugins || [];
+  var defaultColumn = {
+    minWidth: 50
+  };
   var tableId = useMemo(function () {
     return uniqueId('datagrid-table-id');
   }, []);
@@ -41,7 +44,8 @@ var useDatagrid = function useDatagrid(params) {
   var tableState = useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
   }, params), {}, {
-    stateReducer: stateReducer
+    stateReducer: stateReducer,
+    defaultColumn: defaultColumn
   })].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
   return tableState;
 };

package/es/components/Datagrid/useFlexResize.js

@@ -1,27 +1,37 @@
 import _toConsumableArray from "@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(_toConsumableArray(columns), [spacerColumn]);
+    // always move actions and spacer to the end
+    var actionsIdx = columns.findIndex(function (col) {
+      return col.isAction;
+    });
+    if (actionsIdx === -1) {
+      return [].concat(_toConsumableArray(columns), [spacer]);
+    }
+    var cols = _toConsumableArray(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/es/components/Datagrid/useInfiniteScroll.js

@@ -5,17 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import useParentDimensions from './useParentDimensions';
 import useResizeTable from './useResizeTable';
-import { pkg } from '../../settings';
 var useInfiniteScroll = function useInfiniteScroll(hooks) {
   useParentDimensions(hooks);
   useResizeTable(hooks);
-  useEffect(function () {
-    pkg.checkReportFeatureEnabled('Datagrid.useInfiniteScroll');
-  }, []);
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,
       tableHeight = instance.tableHeight,

package/es/components/Datagrid/useOnRowClick.js

@@ -1,9 +1,8 @@
-/*
- * 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.
  */
 
 import { pkg, carbon } from '../../settings';
@@ -43,7 +42,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
       var onKeyDown = function onKeyDown(event) {
         var key = event.key;
         if (key === 'Enter') {
-          onClick();
+          onClick(event);
         }
       };
       return [props, {

package/es/components/Datagrid/useSelectRows.js

@@ -20,6 +20,7 @@ import { TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
 import { pkg, carbon } from '../../settings';
+import { handleToggleRowSelected } from './Datagrid/addons/stateReducer';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var checkboxClass = "".concat(pkg.prefix, "--datagrid__checkbox-cell");
 var useSelectRows = function useSelectRows(hooks) {
@@ -77,7 +78,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 = useState(window.innerWidth),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
@@ -91,16 +93,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);
+    handleToggleRowSelected(dispatch, row, event.target.checked);
   };
   var selectDisabled = isFetching || row.getRowProps().disabled;
   var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),

package/es/components/Datagrid/useSortableColumns.js

@@ -28,9 +28,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;
   }
@@ -45,17 +44,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/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -48,7 +48,8 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -48,7 +48,8 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -48,7 +48,8 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -48,7 +48,8 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration, {
     size: size,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -48,7 +48,8 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration, {
     size: size,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    title: title
   }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,

package/es/components/EmptyStates/assets/ErrorIllustration.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var ErrorIllustration = function ErrorIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -209,5 +210,6 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
 };
 ErrorIllustration.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf(['light', 'dark']),
+  title: PropTypes.string
 };