@carbon/ibm-products 2.43.2-canary.27 → 2.43.2-canary.270

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -15,11 +15,7 @@ var icons = require('@carbon/react/icons');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 var useFocusRowExpander = require('./useFocusRowExpander.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var stateReducer = require('./Datagrid/addons/stateReducer.js');
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(hooks) {
@@ -34,34 +30,84 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     blockClass: blockClass,
     activeElement: typeof document !== 'undefined' && document.activeElement
   });
-  var visibleColumns = function visibleColumns(columns) {
+  var visibleColumns = function visibleColumns(columns, state) {
+    var _ref = state.instance || {},
+      getAsyncSubRows = _ref.getAsyncSubRows,
+      dispatch = _ref.dispatch,
+      tableState = _ref.state;
+    var fetchingDynamicSubRows = !!tableState.dynamicRowSkeleton;
     var expanderColumn = {
       id: 'expander',
-      Cell: function Cell(_ref) {
-        var row = _ref.row;
+      Cell: function Cell(_ref2) {
+        var row = _ref2.row;
         var expanderButtonProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, row.getToggleRowExpandedProps()), {}, {
-          onClick: function onClick(event) {
-            // Prevents `onRowClick` from being called if `useOnRowClick` is included
-            event.stopPropagation();
-            row.toggleRowExpanded();
-            lastExpandedRowIndex.current = row.id;
-          }
+          disabled: getAsyncSubRows && fetchingDynamicSubRows,
+          onClick: function () {
+            var _onClick = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
+              return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    // Prevents `onRowClick` from being called if `useOnRowClick` is included
+                    event.stopPropagation();
+                    row.toggleRowExpanded();
+                    lastExpandedRowIndex.current = row.id;
+                    if (row.isExpanded) {
+                      _context.next = 15;
+                      break;
+                    }
+                    _context.prev = 4;
+                    stateReducer.handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'start',
+                      rowId: row.id,
+                      depth: row.depth,
+                      index: row.index
+                    });
+                    if (!getAsyncSubRows) {
+                      _context.next = 9;
+                      break;
+                    }
+                    _context.next = 9;
+                    return getAsyncSubRows === null || getAsyncSubRows === void 0 ? void 0 : getAsyncSubRows(row);
+                  case 9:
+                    stateReducer.handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'finish',
+                      rowId: row.id
+                    });
+                    _context.next = 15;
+                    break;
+                  case 12:
+                    _context.prev = 12;
+                    _context.t0 = _context["catch"](4);
+                    console.log({
+                      error: _context.t0
+                    });
+                  case 15:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[4, 12]]);
+            }));
+            function onClick(_x) {
+              return _onClick.apply(this, arguments);
+            }
+            return onClick;
+          }()
         });
-        var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
-          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
-          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
-          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
-          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+        var _ref3 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
+          _ref3$expanderButtonT = _ref3.expanderButtonTitleExpanded,
+          expanderButtonTitleExpanded = _ref3$expanderButtonT === void 0 ? 'Collapse row' : _ref3$expanderButtonT,
+          _ref3$expanderButtonT2 = _ref3.expanderButtonTitleCollapsed,
+          expanderButtonTitleCollapsed = _ref3$expanderButtonT2 === void 0 ? 'Expand row' : _ref3$expanderButtonT2;
         var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
-        return row.canExpand && /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        return row.canExpand || getAsyncSubRows ? /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
           type: "button",
           "aria-label": expanderTitle,
-          className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), /*#__PURE__*/React__default["default"].createElement(icons.ChevronRight, {
-          className: cx__default["default"]("".concat(blockClass, "__expander-icon"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
-        }));
+          className: cx("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
+        }, expanderButtonProps), /*#__PURE__*/React.createElement(icons.ChevronRight, {
+          className: cx("".concat(blockClass, "__expander-icon"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
+        })) : null;
       },
       width: 48,
       disableResizing: true,
@@ -75,4 +121,4 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
 };
 var useNestedRowExpander$1 = useNestedRowExpander;
 
-exports["default"] = useNestedRowExpander$1;
+exports.default = useNestedRowExpander$1;

package/lib/components/Datagrid/useNestedRows.js

@@ -15,13 +15,9 @@ var settings = require('../../settings.js');
 var useNestedRowExpander = require('./useNestedRowExpander.js');
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
-  useNestedRowExpander["default"](hooks);
+  useNestedRowExpander.default(hooks);
   var useInstance = function useInstance(instance) {
     React.useEffect(function () {
       var _ref = instance,
@@ -64,7 +60,7 @@ var useNestedRows = function useNestedRows(hooks) {
     var getRowProps = function getRowProps(props, _ref3) {
       var row = _ref3.row;
       return [props, {
-        className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
+        className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
       }];
     };
     var getRowStyles = function getRowStyles(props, _ref4) {
@@ -104,4 +100,4 @@ var useNestedRows = function useNestedRows(hooks) {
 };
 var useNestedRows$1 = useNestedRows;
 
-exports["default"] = useNestedRows$1;
+exports.default = useNestedRows$1;

package/lib/components/Datagrid/useOnRowClick.js

@@ -67,4 +67,4 @@ var useOnRowClick = function useOnRowClick(hooks) {
 };
 var useOnRowClick$1 = useOnRowClick;
 
-exports["default"] = useOnRowClick$1;
+exports.default = useOnRowClick$1;

package/lib/components/Datagrid/useParentDimensions.js

@@ -61,4 +61,4 @@ var useParentDimensions = function useParentDimensions(hooks) {
 };
 var useParentDimensions$1 = useParentDimensions;
 
-exports["default"] = useParentDimensions$1;
+exports.default = useParentDimensions$1;

package/lib/components/Datagrid/useResizeTable.js

@@ -38,4 +38,4 @@ var useResizeTable = function useResizeTable(hooks) {
 };
 var useResizeTable$1 = useResizeTable;
 
-exports["default"] = useResizeTable$1;
+exports.default = useResizeTable$1;

package/lib/components/Datagrid/useRowExpander.js

@@ -16,11 +16,6 @@ var settings = require('../../settings.js');
 var cx = require('classnames');
 var useFocusRowExpander = require('./useFocusRowExpander.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
   var tempState = React.useRef();
@@ -55,15 +50,13 @@ var useRowExpander = function useRowExpander(hooks) {
           _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
           expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
         var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
-        return row.canExpand && /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        return row.canExpand && /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
           type: "button",
           "aria-label": expanderTitle,
-          className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, {
+          className: cx("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
+        }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React.createElement(icons.ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
-        }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDown, {
+        }) : /*#__PURE__*/React.createElement(icons.ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")
         }));
       },
@@ -79,4 +72,4 @@ var useRowExpander = function useRowExpander(hooks) {
 };
 var useRowExpander$1 = useRowExpander;
 
-exports["default"] = useRowExpander$1;
+exports.default = useRowExpander$1;

package/lib/components/Datagrid/useRowIsMouseOver.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { Hooks } from 'react-table';
 declare const useRowIsMouseOver: (hooks: Hooks) => void;
 export default useRowIsMouseOver;

package/lib/components/Datagrid/useRowIsMouseOver.js

@@ -13,10 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var debounce = require('lodash/debounce');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-
 var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
   var useInstance = function useInstance(instance) {
     var _useState = React.useState(),
@@ -53,9 +49,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
 var useDebounce = function useDebounce(fn, wait) {
   return (
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useCallback(debounce__default["default"](fn, wait), [])
+    React.useCallback(debounce(fn, wait), [])
   );
 };
 var useRowIsMouseOver$1 = useRowIsMouseOver;
 
-exports["default"] = useRowIsMouseOver$1;
+exports.default = useRowIsMouseOver$1;

package/lib/components/Datagrid/useRowRenderer.js

@@ -9,18 +9,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var DatagridRow = require('./Datagrid/DatagridRow.js');
 
 var useRowRenderer = function useRowRenderer(hooks) {
   var useInstance = function useInstance(instance) {
-    var rows = instance.rows;
+    var _newRows;
+    var rows = instance.rows,
+      state = instance.state;
+    var newRows = null;
+    if (state !== null && state !== void 0 && state.dynamicRowSkeleton) {
+      var _state$dynamicRowSkel;
+      var depthIndexArray = state === null || state === void 0 || (_state$dynamicRowSkel = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel === void 0 ? void 0 : _state$dynamicRowSkel.id.split('').filter(function (r) {
+        return r !== '.';
+      });
+      if (depthIndexArray.length > 1) {
+        var subRows;
+        var finalRow;
+        // This will find the subRow that requested to find dynamic rows
+        // and will apply the skeleton row after that row
+        depthIndexArray.map(function (depthIndex, index) {
+          if (index === 0) {
+            subRows = rows[depthIndex].subRows;
+            return;
+          }
+          if (depthIndexArray.length - 1 === index) {
+            finalRow = subRows.find(function (r) {
+              return r.index === parseInt(depthIndex);
+            });
+            subRows.splice(finalRow.index + 1, 0, state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton); // + 1 because we want to add the skeleton row after the row initiating the dynamic request
+            return;
+          }
+          var foundRow = subRows.find(function (r) {
+            return r.index === parseInt(depthIndex);
+          });
+          subRows = foundRow.subRows;
+        });
+      }
+      var rootRowIndexWithDynamicRow = rows.findIndex(function (r) {
+        var _state$dynamicRowSkel2;
+        return r.id === (state === null || state === void 0 || (_state$dynamicRowSkel2 = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel2 === void 0 ? void 0 : _state$dynamicRowSkel2.id);
+      });
+      if (rootRowIndexWithDynamicRow > -1) {
+        newRows = [].concat(_rollupPluginBabelHelpers.toConsumableArray(rows.slice(0, rootRowIndexWithDynamicRow + 1)), [// + 1 because we want to add the skeleton row after the row initiating the dynamic request
+        state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton], _rollupPluginBabelHelpers.toConsumableArray(rows.slice(rootRowIndexWithDynamicRow + 1)));
+      }
+    }
+    newRows = (_newRows = newRows) !== null && _newRows !== void 0 ? _newRows : rows;
     var addRowRenderer = function addRowRenderer(row) {
       return Object.assign(row, {
-        RowRenderer: DatagridRow["default"],
+        RowRenderer: DatagridRow.default,
         subRows: (row.subRows || []).map(addRowRenderer)
       });
     };
-    var rowsWithRenderer = rows.map(addRowRenderer);
+    var rowsWithRenderer = newRows.map(addRowRenderer);
     Object.assign(instance, {
       rows: rowsWithRenderer
     });
@@ -29,4 +71,4 @@ var useRowRenderer = function useRowRenderer(hooks) {
 };
 var useRowRenderer$1 = useRowRenderer;
 
-exports["default"] = useRowRenderer$1;
+exports.default = useRowRenderer$1;

package/lib/components/Datagrid/useRowSize.js

@@ -40,7 +40,7 @@ var useRowSize = function useRowSize(hooks) {
         },
         tableId: tableId
       }),
-      RowSizeDropdown: RowSizeDropdown["default"]
+      RowSizeDropdown: RowSizeDropdown.default
     });
   });
   var getTableProps = function getTableProps(props, _ref2) {
@@ -57,4 +57,4 @@ var useRowSize = function useRowSize(hooks) {
 };
 var useRowSize$1 = useRowSize;
 
-exports["default"] = useRowSize$1;
+exports.default = useRowSize$1;

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -17,11 +17,6 @@ var DatagridSelectAllWithToggle = require('./Datagrid/DatagridSelectAllWithToggl
 var settings = require('../../settings.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid__select-all");
 var useSelectAllToggle = function useSelectAllToggle(hooks) {
   useSelectAllWithToggleComponent(hooks);
@@ -71,7 +66,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: cx__default["default"]("".concat(blockClass, "-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+        className: cx("".concat(blockClass, "-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
       }];
     }
     return [props];
@@ -96,8 +91,8 @@ var Header = function Header(gridState) {
     withStickyColumn: withStickyColumn,
     columns: columns
   };
-  return /*#__PURE__*/React__default["default"].createElement(DatagridSelectAllWithToggle["default"], props);
+  return /*#__PURE__*/React.createElement(DatagridSelectAllWithToggle.default, props);
 };
 var useSelectAllToggle$1 = useSelectAllToggle;
 
-exports["default"] = useSelectAllToggle$1;
+exports.default = useSelectAllToggle$1;

package/lib/components/Datagrid/useSelectRows.js

@@ -18,11 +18,6 @@ var commonColumnIds = require('./common-column-ids.js');
 var settings = require('../../settings.js');
 var stateReducer = require('./Datagrid/addons/stateReducer.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["onChange", "title"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var checkboxClass = "".concat(settings.pkg.prefix, "--datagrid__checkbox-cell");
@@ -56,10 +51,10 @@ var useSelectRows = function useSelectRows(hooks) {
     return [].concat(_rollupPluginBabelHelpers.toConsumableArray(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), [{
       id: commonColumnIds.selectionColumnId,
       Header: function Header(gridState) {
-        return /*#__PURE__*/React__default["default"].createElement(DatagridSelectAll.SelectAll, gridState);
+        return /*#__PURE__*/React.createElement(DatagridSelectAll.SelectAll, gridState);
       },
       Cell: function Cell(gridState) {
-        return /*#__PURE__*/React__default["default"].createElement(SelectRow, gridState);
+        return /*#__PURE__*/React.createElement(SelectRow, gridState);
       }
     }], _rollupPluginBabelHelpers.toConsumableArray(newColOrder));
   });
@@ -70,7 +65,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
     var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
       checked = _row$getToggleRowSele.checked;
     return [props, {
-      className: cx__default["default"](["".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(settings.carbon.prefix, "--data-table--selected"), checked), "".concat(blockClass, "__active-row"), checked)])
+      className: cx(["".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(settings.carbon.prefix, "--data-table--selected"), checked), "".concat(blockClass, "__active-row"), checked)])
     }];
   };
   hooks.getRowProps.push(getRowProps);
@@ -90,11 +85,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -103,24 +99,45 @@ var SelectRow = function SelectRow(datagridState) {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
-  var onSelectHandler = function onSelectHandler(event) {
-    event.stopPropagation(); // avoid triggering onRowClick
-    if (radio) {
-      toggleAllRowsSelected(false);
-      if (onRadioSelect) {
-        onRadioSelect(row);
-      }
-    }
-    onChange(event);
-    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
-    stateReducer.handleToggleRowSelected({
-      dispatch: dispatch,
-      rowData: row,
-      isChecked: event.target.checked,
-      getRowId: getRowId,
-      selectAll: null
-    });
-  };
+  var onSelectHandler = /*#__PURE__*/function () {
+    var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
+      var _document$activeEleme, _document, _document2;
+      var activeElement;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            event.stopPropagation(); // avoid triggering onRowClick
+            if (radio) {
+              toggleAllRowsSelected(false);
+              if (onRadioSelect) {
+                onRadioSelect(row);
+              }
+            }
+            onChange(event);
+            onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, event);
+            stateReducer.handleToggleRowSelected({
+              dispatch: dispatch,
+              rowData: row,
+              isChecked: event.target.checked,
+              getRowId: getRowId,
+              selectAll: null
+            });
+            // focus the radio / checkbox if lost
+            activeElement = (_document$activeEleme = (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 ? void 0 : _document.id) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : '';
+            _context.next = 8;
+            return undefined;
+          case 8:
+            (_document2 = document) === null || _document2 === void 0 || (_document2 = _document2.getElementById(activeElement)) === null || _document2 === void 0 || _document2.focus();
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSelectHandler(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   var selectDisabled = isFetching || row.getRowProps().disabled;
   var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
     onChange = _row$getToggleRowSele2.onChange,
@@ -131,18 +148,18 @@ var SelectRow = function SelectRow(datagridState) {
   var rowId = "".concat(tableId, "-").concat(row.id, "-").concat(row.index);
   var key = cellProps.key,
     _cellProps = cellProps._cellProps;
-  return /*#__PURE__*/React__default["default"].createElement(react.TableSelectRow, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(react.TableSelectRow, _rollupPluginBabelHelpers.extends({
     key: key
   }, _cellProps, selectProps, {
     radio: radio,
     onSelect: onSelectHandler,
     id: rowId,
     name: "".concat(rowId, "-name"),
-    className: cx__default["default"]([checkboxClass, cellProps.className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && Number(windowSize) > 671)]),
+    className: cx([checkboxClass, cellProps.className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && Number(windowSize) > 671)]),
     ariaLabel: title,
     disabled: selectDisabled
   }));
 };
 var useSelectRows$1 = useSelectRows;
 
-exports["default"] = useSelectRows$1;
+exports.default = useSelectRows$1;

package/lib/components/Datagrid/useSkeletonRows.js

@@ -46,4 +46,4 @@ var useSkeletons = function useSkeletons(hooks) {
 };
 var useSkeletonRows = useSkeletons;
 
-exports["default"] = useSkeletonRows;
+exports.default = useSkeletonRows;

package/lib/components/Datagrid/useSortableColumns.d.ts

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
-export declare const getNewSortOrder: (sortOrder?: boolean | string) => {
-    newSortDesc: boolean;
-    newOrder: string;
-};
+interface Order {
+    newOrder: 'ASC' | 'DESC' | 'NONE';
+    newSortDesc: undefined | boolean;
+}
+export declare const getNewSortOrder: (currentOrder?: boolean | string) => Order;
 declare const useSortableColumns: (hooks: Hooks) => void;
 export default useSortableColumns;