@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Datagrid/useDisableSelectRows.js

@@ -5,93 +5,85 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var nonselectablerowsList = function nonselectablerowsList(instance) {
-  var _instance$rows;
-  var nonselectablerows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
-    return instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row);
-  }).map(function (row) {
-    return row.id;
-  })) || [];
+const nonselectablerowsList = instance => {
+  const nonselectablerows = instance?.rows?.filter(row => instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)).map(row => row.id) || [];
   return nonselectablerows;
 };
-var useDisableSelectRows = function useDisableSelectRows(hooks) {
+const useDisableSelectRows = hooks => {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
-  var nonselectablerows = [];
-  var useInstance = function useInstance(instance) {
+  let nonselectablerows = [];
+  const useInstance = instance => {
     nonselectablerows = nonselectablerowsList(instance);
   };
   hooks.useInstance.push(useInstance);
-  var getRowProps = function getRowProps(props, _ref) {
-    var _instance$shouldDisab;
-    var row = _ref.row,
-      instance = _ref.instance;
+  const getRowProps = (props, _ref) => {
+    let {
+      row,
+      instance
+    } = _ref;
     return [props, {
-      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
-      nonselectablerows: nonselectablerows
+      disabled: instance?.shouldDisableSelectRow?.(row),
+      nonselectablerows
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
-var updateSelectAll = function updateSelectAll(hooks) {
-  var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$rows2, _instance$disableSele, _instance$state2;
-    var instance = _ref2.instance;
-    var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
-      return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    })) || [];
-    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
-      var _instance$state;
-      var id = _ref3.id;
-      return instance === null || instance === void 0 || (_instance$state = instance.state) === null || _instance$state === void 0 || (_instance$state = _instance$state.selectedRowIds) === null || _instance$state === void 0 ? void 0 : _instance$state[id];
+const updateSelectAll = hooks => {
+  const getToggleAllRowsSelectedProps = (props, _ref2) => {
+    let {
+      instance
+    } = _ref2;
+    const selectableRows = instance?.rows?.filter(row => !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row))) || [];
+    const isAllRowsSelected = selectableRows?.length > 0 && selectableRows.every(_ref3 => {
+      let {
+        id
+      } = _ref3;
+      return instance?.state?.selectedRowIds?.[id];
     });
     return [props, {
-      onChange: function onChange(e) {
-        selectableRows.forEach(function (row) {
-          var _toggleRowSelected, _ref4;
-          return row === null || row === void 0 || (_toggleRowSelected = (_ref4 = row).toggleRowSelected) === null || _toggleRowSelected === void 0 ? void 0 : _toggleRowSelected.call(_ref4, e.target.checked);
-        });
+      onChange: e => {
+        selectableRows.forEach(row => row?.toggleRowSelected?.(e.target.checked));
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
-      title: (instance === null || instance === void 0 || (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 || (_instance$disableSele = _instance$disableSele.labels) === null || _instance$disableSele === void 0 ? void 0 : _instance$disableSele.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && Object.keys((instance === null || instance === void 0 || (_instance$state2 = instance.state) === null || _instance$state2 === void 0 ? void 0 : _instance$state2.selectedRowIds) || {}).length)
+      disabled: instance?.disableSelectAll,
+      title: instance?.disableSelectRowsProps?.labels?.toggleAllRowsLabel || 'Toggle All Rows Selected',
+      indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance?.state?.selectedRowIds || {}).length)
     }];
   };
   hooks.getToggleAllRowsSelectedProps.push(getToggleAllRowsSelectedProps);
 };
-var updatePageSelectAll = function updatePageSelectAll(hooks) {
-  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref5) {
-    var _instance$page, _instance$disableSele2, _instance$page2;
-    var instance = _ref5.instance;
-    var selectableRows = (instance === null || instance === void 0 || (_instance$page = instance.page) === null || _instance$page === void 0 ? void 0 : _instance$page.filter(function (row) {
-      return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    })) || [];
-    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref6) {
-      var _instance$state3;
-      var id = _ref6.id;
-      return instance === null || instance === void 0 || (_instance$state3 = instance.state) === null || _instance$state3 === void 0 || (_instance$state3 = _instance$state3.selectedRowIds) === null || _instance$state3 === void 0 ? void 0 : _instance$state3[id];
+const updatePageSelectAll = hooks => {
+  const getToggleAllPageRowsSelectedProps = (props, _ref4) => {
+    let {
+      instance
+    } = _ref4;
+    const selectableRows = instance?.page?.filter(row => !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row))) || [];
+    const isAllRowsSelected = selectableRows?.length > 0 && selectableRows.every(_ref5 => {
+      let {
+        id
+      } = _ref5;
+      return instance?.state?.selectedRowIds?.[id];
     });
     return [props, {
-      onChange: function onChange(e) {
-        selectableRows.forEach(function (row) {
-          return row.toggleRowSelected(e.target.checked);
-        });
+      onChange: e => {
+        selectableRows.forEach(row => row.toggleRowSelected(e.target.checked));
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
-      title: (instance === null || instance === void 0 || (_instance$disableSele2 = instance.disableSelectRowsProps) === null || _instance$disableSele2 === void 0 || (_instance$disableSele2 = _instance$disableSele2.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && (instance === null || instance === void 0 || (_instance$page2 = instance.page) === null || _instance$page2 === void 0 ? void 0 : _instance$page2.some(function (_ref7) {
-        var _instance$state4;
-        var id = _ref7.id;
-        return instance === null || instance === void 0 || (_instance$state4 = instance.state) === null || _instance$state4 === void 0 || (_instance$state4 = _instance$state4.selectedRowIds) === null || _instance$state4 === void 0 ? void 0 : _instance$state4[id];
-      })))
+      disabled: instance?.disableSelectAll,
+      title: instance?.disableSelectRowsProps?.labels?.toggleAllRowsLabel || 'Toggle All Rows Selected',
+      indeterminate: Boolean(!isAllRowsSelected && instance?.page?.some(_ref6 => {
+        let {
+          id
+        } = _ref6;
+        return instance?.state?.selectedRowIds?.[id];
+      }))
     }];
   };
   hooks.getToggleAllPageRowsSelectedProps.push(getToggleAllPageRowsSelectedProps);

package/es/components/Datagrid/useEditableCell.js

@@ -7,7 +7,7 @@
 
 import useInlineEdit from './useInlineEdit.js';
 
-var useEditableCell = function useEditableCell(hooks) {
+const useEditableCell = hooks => {
   useInlineEdit(hooks);
 };
 

package/es/components/Datagrid/useExpandedRow.js

@@ -5,39 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState } from 'react';
 import DatagridExpandedRow from './Datagrid/DatagridExpandedRow.js';
 import useRowExpander from './useRowExpander.js';
 
-var useExpandedRow = function useExpandedRow(hooks) {
+const useExpandedRow = hooks => {
   useRowExpander(hooks);
-  var useInstance = function useInstance(instance) {
-    var _ref = instance,
-      rows = _ref.rows,
-      expandedContentHeight = _ref.expandedContentHeight,
-      ExpandedRowContentComponent = _ref.ExpandedRowContentComponent,
-      onRowExpand = _ref.onRowExpand;
-    var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedRowsHeight = _useState2[0],
-      setExpandedRowsHeight = _useState2[1];
-    var setExpandedRowHeight = function setExpandedRowHeight(rowIndex, height) {
-      return setExpandedRowsHeight(_objectSpread2(_objectSpread2({}, expandedRowsHeight), {}, _defineProperty({}, rowIndex, height)));
-    };
-    var rowsWithExpand = rows.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        canExpand: row.original && !row.original.notExpandable,
-        expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        RowExpansionRenderer: ExpandedRowContentComponent && DatagridExpandedRow(ExpandedRowContentComponent),
-        onClick: function onClick(row, event) {
-          return onRowExpand === null || onRowExpand === void 0 ? void 0 : onRowExpand(row, event);
-        }
-      });
+  const useInstance = instance => {
+    const {
+      rows,
+      expandedContentHeight,
+      ExpandedRowContentComponent,
+      onRowExpand
+    } = instance;
+    const [expandedRowsHeight, setExpandedRowsHeight] = useState({});
+    const setExpandedRowHeight = (rowIndex, height) => setExpandedRowsHeight({
+      ...expandedRowsHeight,
+      [rowIndex]: height
     });
+    const rowsWithExpand = rows.map(row => ({
+      ...row,
+      canExpand: row.original && !row.original.notExpandable,
+      expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
+      RowExpansionRenderer: ExpandedRowContentComponent && DatagridExpandedRow(ExpandedRowContentComponent),
+      onClick: (row, event) => onRowExpand?.(row, event)
+    }));
     Object.assign(instance, {
       rows: rowsWithExpand,
-      setExpandedRowHeight: setExpandedRowHeight,
+      setExpandedRowHeight,
       withExpandedRows: true
     });
   };

package/es/components/Datagrid/useFiltering.js

@@ -5,49 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, slicedToArray as _slicedToArray, typeof as _typeof, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo } from 'react';
-import { RADIO, DATE, NUMBER, CHECKBOX, MULTISELECT, BATCH } from './Datagrid/addons/Filtering/constants.js';
+import { RADIO, MULTISELECT, CHECKBOX, NUMBER, DATE, BATCH } from './Datagrid/addons/Filtering/constants.js';
 import FilterFlyout from './Datagrid/addons/Filtering/FilterFlyout.js';
 
 // This function was taken from https://github.com/TanStack/table/blob/v7/src/filterTypes.js
-var exactText = function exactText(rows, ids, filterValue) {
-  return rows.filter(function (row) {
-    return ids.some(function (id) {
-      var rowValue = row.values[id];
+const exactText = (rows, ids, filterValue) => {
+  return rows.filter(row => {
+    return ids.some(id => {
+      const rowValue = row.values[id];
       return rowValue !== undefined ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase() : true;
     });
   });
 };
-var handleMultiFilter = function handleMultiFilter(rows, id, value) {
+const handleMultiFilter = (rows, id, value) => {
   // gets all the items that are selected and returns their value
-  var selectedItems = value.filter(function (item) {
-    return item.selected;
-  }).map(function (item) {
-    return item.value;
-  });
+  const selectedItems = value.filter(item => item.selected).map(item => item.value);
 
   // if the user removed all checkboxes then display all rows
   if (selectedItems.length === 0) {
     return rows;
   }
-  return rows.filter(function (row) {
-    var rowValue = row.values[id];
+  return rows.filter(row => {
+    const rowValue = row.values[id];
     return selectedItems.includes(rowValue);
   });
 };
-var useFiltering = function useFiltering(hooks) {
+const useFiltering = hooks => {
   /* istanbul ignore next */
-  var filterTypes = useMemo(function () {
-    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-        startDate = _ref2[0],
-        endDate = _ref2[1];
-      return rows.filter(function (row) {
-        var rowValue = row.values[id];
-        var startDateObj = _typeof(startDate) === 'object' ? startDate : new Date(startDate);
-        var endDateObj = _typeof(endDate) === 'object' ? endDate : new Date(endDate);
-        var rowValueDateObj = _typeof(rowValue) === 'object' ? rowValue : new Date(rowValue);
+  const filterTypes = useMemo(() => ({
+    [DATE]: (rows, id, _ref) => {
+      let [startDate, endDate] = _ref;
+      return rows.filter(row => {
+        const rowValue = row.values[id];
+        const startDateObj = typeof startDate === 'object' ? startDate : new Date(startDate);
+        const endDateObj = typeof endDate === 'object' ? endDate : new Date(endDate);
+        const rowValueDateObj = typeof rowValue === 'object' ? rowValue : new Date(rowValue);
         if (rowValueDateObj.getTime() <= endDateObj.getTime() && rowValueDateObj.getTime() >= startDateObj.getTime()) {
           // In date range
           return true;
@@ -56,50 +49,52 @@ var useFiltering = function useFiltering(hooks) {
           return false;
         }
       });
-    }), NUMBER, function (rows, id, value) {
+    },
+    [NUMBER]: (rows, id, value) => {
       if (value === '') {
         return rows;
       }
-      var parsedValue = parseInt(value);
-      return rows.filter(function (row) {
-        var rowValue = row.values[id];
+      const parsedValue = parseInt(value);
+      return rows.filter(row => {
+        const rowValue = row.values[id];
         return rowValue === parsedValue;
       });
-    }), CHECKBOX, function (rows, id, value) {
-      return handleMultiFilter(rows, id, value);
-    }), MULTISELECT, function (rows, id, value) {
-      return handleMultiFilter(rows, id, value);
-    }), RADIO, function (rows, id, value) {
-      return exactText(rows, id, value);
-    });
-  }, []);
-  hooks.useInstance.push(function (instance) {
-    var _ref4 = instance,
-      filterProps = _ref4.filterProps,
-      setAllFilters = _ref4.setAllFilters,
-      setFilter = _ref4.setFilter,
-      headers = _ref4.headers,
-      data = _ref4.data,
-      state = _ref4.state;
-    var defaultProps = {
+    },
+    [CHECKBOX]: (rows, id, value) => handleMultiFilter(rows, id, value),
+    [MULTISELECT]: (rows, id, value) => handleMultiFilter(rows, id, value),
+    [RADIO]: (rows, id, value) => exactText(rows, id, value)
+  }), []);
+  hooks.useInstance.push(instance => {
+    const {
+      filterProps,
+      setAllFilters,
+      setFilter,
+      headers,
+      data,
+      state
+    } = instance;
+    const defaultProps = {
       variation: 'flyout',
       updateMethod: BATCH,
       panelIconDescription: 'Open filter panel',
       reactTableFiltersState: state.filters
     };
-    var getFilterFlyoutProps = function getFilterFlyoutProps() {
-      return _objectSpread2(_objectSpread2(_objectSpread2({}, defaultProps), filterProps), {}, {
-        setAllFilters: setAllFilters,
-        setFilter: setFilter,
-        headers: headers,
-        data: data
-      });
-    };
+    const getFilterFlyoutProps = () => ({
+      ...defaultProps,
+      ...filterProps,
+      setAllFilters,
+      setFilter,
+      headers,
+      data
+    });
     Object.assign(instance, {
-      filterProps: _objectSpread2(_objectSpread2({}, defaultProps), instance === null || instance === void 0 ? void 0 : instance.filterProps),
-      filterTypes: filterTypes,
-      getFilterFlyoutProps: getFilterFlyoutProps,
-      FilterFlyout: FilterFlyout
+      filterProps: {
+        ...defaultProps,
+        ...instance?.filterProps
+      },
+      filterTypes,
+      getFilterFlyoutProps,
+      FilterFlyout
     });
   });
 };

package/es/components/Datagrid/useFlexResize.js

@@ -5,52 +5,58 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useEffect } from 'react';
 
-var useFlexResize = function useFlexResize(hooks) {
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    spacerColumn = _useState2[0],
-    setSpacerColumn = _useState2[1];
-  var useInstance = function useInstance(instance) {
-    var enableSpacerColumn = instance.enableSpacerColumn;
-    useEffect(function () {
+/* eslint-disable no-unreachable */
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+const useFlexResize = hooks => {
+  const [spacerColumn, setSpacerColumn] = useState();
+  const useInstance = instance => {
+    const {
+      enableSpacerColumn
+    } = instance;
+    useEffect(() => {
       setSpacerColumn(enableSpacerColumn);
     }, [enableSpacerColumn]);
   };
-  var spacer = {
+  const spacer = {
     id: 'spacer',
     width: 0,
     disableSortBy: true,
     disableResizing: true
   };
-  hooks.visibleColumns.push(function (columns) {
+  hooks.visibleColumns.push(columns => {
     // always move actions to the end
-    var actionsIdx = columns.findIndex(function (col) {
-      return col.isAction;
-    });
+    const actionsIdx = columns.findIndex(col => col.isAction);
     if (!spacerColumn && actionsIdx === -1) {
-      var lastCol = columns.at(-1);
+      const lastCol = columns.at(-1);
       lastCol.isFlexCol = true;
-      return _toConsumableArray(columns);
+      return [...columns];
     } else if (spacerColumn & actionsIdx === -1) {
-      return [].concat(_toConsumableArray(columns), [spacer]);
+      return [...columns, spacer];
     }
-    var cols = _toConsumableArray(columns);
-    var actions = cols.splice(actionsIdx, 1)[0];
+    const cols = [...columns];
+    const actions = cols.splice(actionsIdx, 1)[0];
     if (spacerColumn) {
       cols.splice(columns.length, 0, spacer, actions);
     } else {
       cols.splice(columns.length, 0, actions);
       // the last non-action action column should flex remaining space
-      var _lastCol = columns.at(-2);
-      _lastCol.isFlexCol = true;
+      const lastCol = columns.at(-2);
+      lastCol.isFlexCol = true;
     }
     return cols;
   });
-  var changeProps = function changeProps(props, data) {
-    var column = data.column;
+  const changeProps = (props, data) => {
+    let {
+      column
+    } = data;
     if (!column && data.cell) {
       column = data.cell.column;
     }
@@ -67,12 +73,8 @@ var useFlexResize = function useFlexResize(hooks) {
       }
     }];
   };
-  hooks.getHeaderProps.push(function (props, data) {
-    return changeProps(props, data);
-  });
-  hooks.getCellProps.push(function (props, data) {
-    return changeProps(props, data);
-  });
+  hooks.getHeaderProps.push((props, data) => changeProps(props, data));
+  hooks.getCellProps.push((props, data) => changeProps(props, data));
   hooks.useInstance.push(useInstance);
 };
 

package/es/components/Datagrid/useFloatingScroll.js

@@ -9,64 +9,66 @@ import { useEffect } from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var useFloatingScroll = function useFloatingScroll(hooks) {
-  var useInstance = function useInstance(instance) {
-    var tableId = instance.tableId,
-      withVirtualScroll = instance.withVirtualScroll,
-      ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
-    useEffect(function () {
+const blockClass = `${pkg.prefix}--datagrid`;
+const useFloatingScroll = hooks => {
+  const useInstance = instance => {
+    const {
+      tableId,
+      withVirtualScroll,
+      ExpandedRowContentComponent
+    } = instance;
+    useEffect(() => {
       // Floating scroll doesn't work with expanded rows and virtual scroll
       if (withVirtualScroll || ExpandedRowContentComponent) {
         return;
       }
-      var datagrid = document.getElementById(tableId);
+      const datagrid = document.getElementById(tableId);
       // eslint-disable-next-line no-unused-expressions
-      datagrid === null || datagrid === void 0 || datagrid.classList.add("".concat(blockClass, "__sticky"));
+      datagrid?.classList.add(`${blockClass}__sticky`);
     }, [ExpandedRowContentComponent, tableId, withVirtualScroll]);
   };
-  var useAddStickyClass = function useAddStickyClass(instance) {
-    var withVirtualScroll = instance.withVirtualScroll,
-      ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
+  const useAddStickyClass = instance => {
+    const {
+      withVirtualScroll,
+      ExpandedRowContentComponent
+    } = instance;
     // Floating scroll doesn't work with expanded rows and virtual scroll
     if (withVirtualScroll || ExpandedRowContentComponent) {
       return;
     }
-    var addStickyClass = function addStickyClass(props) {
-      return [props, {
-        className: cx(props.className, "".concat(blockClass, "__sticky"))
-      }];
-    };
+    const addStickyClass = props => [props, {
+      className: cx(props.className, `${blockClass}__sticky`)
+    }];
     hooks.getTableProps.push(addStickyClass);
     hooks.getTableBodyProps.push(addStickyClass);
     hooks.getHeaderGroupProps.push(addStickyClass);
   };
-  var useAddScrollListener = function useAddScrollListener(instance) {
-    var withVirtualScroll = instance.withVirtualScroll,
-      ExpandedRowContentComponent = instance.ExpandedRowContentComponent,
-      tableId = instance.tableId;
+  const useAddScrollListener = instance => {
+    const {
+      withVirtualScroll,
+      ExpandedRowContentComponent,
+      tableId
+    } = instance;
     // Floating scroll doesn't work with expanded rows and virtual scroll
     if (withVirtualScroll || ExpandedRowContentComponent) {
       return;
     }
-    var memoHead;
-    var addOnScroll = function addOnScroll(props) {
-      return [props, {
-        onScroll: function onScroll(e) {
-          var simpleThead;
-          if (memoHead) {
-            simpleThead = memoHead;
-          } else {
-            var datagrid = document.getElementById(tableId);
-            simpleThead = datagrid === null || datagrid === void 0 ? void 0 : datagrid.querySelector(".".concat(blockClass, "__table-simple thead > div"));
-            memoHead = simpleThead;
-          }
-          if (simpleThead) {
-            simpleThead.scrollLeft = e.target.scrollLeft;
-          }
+    let memoHead;
+    const addOnScroll = props => [props, {
+      onScroll: e => {
+        let simpleThead;
+        if (memoHead) {
+          simpleThead = memoHead;
+        } else {
+          const datagrid = document.getElementById(tableId);
+          simpleThead = datagrid?.querySelector(`.${blockClass}__table-simple thead > div`);
+          memoHead = simpleThead;
         }
-      }];
-    };
+        if (simpleThead) {
+          simpleThead.scrollLeft = e.target.scrollLeft;
+        }
+      }
+    }];
     hooks.getTableBodyProps.push(addOnScroll);
   };
   hooks.useInstance.push(useAddStickyClass);

package/es/components/Datagrid/useFocusRowExpander.js

@@ -11,32 +11,33 @@ import { useEffect } from 'react';
 // We have to add this workaround because react-table is re-rendering the entire row
 // which removes the focus from the expander and interrupts the keyboard navigation
 // flow.
-var useFocusRowExpander = function useFocusRowExpander(_ref) {
-  var instance = _ref.instance,
-    _ref$lastExpandedRowI = _ref.lastExpandedRowIndex,
-    lastExpandedRowIndex = _ref$lastExpandedRowI === void 0 ? 0 : _ref$lastExpandedRowI,
-    blockClass = _ref.blockClass,
-    activeElement = _ref.activeElement;
-  useEffect(function () {
+const useFocusRowExpander = _ref => {
+  let {
+    instance,
+    lastExpandedRowIndex = 0,
+    blockClass,
+    activeElement
+  } = _ref;
+  useEffect(() => {
     // We need to return at this point so that the focus is not stolen from
     // other interactive elements in the Datagrid
-    if (!activeElement.classList.contains("".concat(blockClass, "__row-expander"))) {
+    if (!activeElement.classList.contains(`${blockClass}__row-expander`)) {
       return;
     }
-    var tableId = instance === null || instance === void 0 ? void 0 : instance.tableId;
-    var rowElements = document.querySelectorAll("#".concat(tableId, " tbody tr"));
-    var rowElementsArray = Array.from(rowElements);
-    var activeRow = rowElementsArray.filter(function (r) {
+    const tableId = instance?.tableId;
+    const rowElements = document.querySelectorAll(`#${tableId} tbody tr`);
+    const rowElementsArray = Array.from(rowElements);
+    const activeRow = rowElementsArray.filter(r => {
       if (r.getAttribute('data-nested-row-id') === lastExpandedRowIndex) {
         return r;
       }
       return null;
     });
     if (activeRow.length) {
-      var rowExpander = activeRow[0].querySelector(".".concat(blockClass, "__row-expander"));
-      rowExpander === null || rowExpander === void 0 || rowExpander.focus();
+      const rowExpander = activeRow[0].querySelector(`.${blockClass}__row-expander`);
+      rowExpander?.focus();
     }
-  }, [instance === null || instance === void 0 ? void 0 : instance.tableId, instance === null || instance === void 0 ? void 0 : instance.expandedRows, lastExpandedRowIndex, blockClass, activeElement]);
+  }, [instance?.tableId, instance?.expandedRows, lastExpandedRowIndex, blockClass, activeElement]);
 };
 
 export { useFocusRowExpander };