@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/Datagrid/useExpandedRow.js

@@ -9,39 +9,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var DatagridExpandedRow = require('./Datagrid/DatagridExpandedRow.js');
 var useRowExpander = require('./useRowExpander.js');
 
-var useExpandedRow = function useExpandedRow(hooks) {
+const useExpandedRow = hooks => {
   useRowExpander.default(hooks);
-  var useInstance = function useInstance(instance) {
-    var _ref = instance,
-      rows = _ref.rows,
-      expandedContentHeight = _ref.expandedContentHeight,
-      ExpandedRowContentComponent = _ref.ExpandedRowContentComponent,
-      onRowExpand = _ref.onRowExpand;
-    var _useState = React.useState({}),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      expandedRowsHeight = _useState2[0],
-      setExpandedRowsHeight = _useState2[1];
-    var setExpandedRowHeight = function setExpandedRowHeight(rowIndex, height) {
-      return setExpandedRowsHeight(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, expandedRowsHeight), {}, _rollupPluginBabelHelpers.defineProperty({}, rowIndex, height)));
-    };
-    var rowsWithExpand = rows.map(function (row) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, row), {}, {
-        canExpand: row.original && !row.original.notExpandable,
-        expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        RowExpansionRenderer: ExpandedRowContentComponent && DatagridExpandedRow.default(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] = React.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.default(ExpandedRowContentComponent),
+      onClick: (row, event) => onRowExpand?.(row, event)
+    }));
     Object.assign(instance, {
       rows: rowsWithExpand,
-      setExpandedRowHeight: setExpandedRowHeight,
+      setExpandedRowHeight,
       withExpandedRows: true
     });
   };

package/lib/components/Datagrid/useFiltering.js

@@ -9,49 +9,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var constants = require('./Datagrid/addons/Filtering/constants.js');
 var FilterFlyout = require('./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 = React.useMemo(function () {
-    return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, constants.DATE, function (rows, id, _ref) {
-      var _ref2 = _rollupPluginBabelHelpers.slicedToArray(_ref, 2),
-        startDate = _ref2[0],
-        endDate = _ref2[1];
-      return rows.filter(function (row) {
-        var rowValue = row.values[id];
-        var startDateObj = _rollupPluginBabelHelpers.typeof(startDate) === 'object' ? startDate : new Date(startDate);
-        var endDateObj = _rollupPluginBabelHelpers.typeof(endDate) === 'object' ? endDate : new Date(endDate);
-        var rowValueDateObj = _rollupPluginBabelHelpers.typeof(rowValue) === 'object' ? rowValue : new Date(rowValue);
+  const filterTypes = React.useMemo(() => ({
+    [constants.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;
@@ -60,49 +53,51 @@ var useFiltering = function useFiltering(hooks) {
           return false;
         }
       });
-    }), constants.NUMBER, function (rows, id, value) {
+    },
+    [constants.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;
       });
-    }), constants.CHECKBOX, function (rows, id, value) {
-      return handleMultiFilter(rows, id, value);
-    }), constants.MULTISELECT, function (rows, id, value) {
-      return handleMultiFilter(rows, id, value);
-    }), constants.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 = {
+    },
+    [constants.CHECKBOX]: (rows, id, value) => handleMultiFilter(rows, id, value),
+    [constants.MULTISELECT]: (rows, id, value) => handleMultiFilter(rows, id, value),
+    [constants.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: constants.BATCH,
       panelIconDescription: 'Open filter panel',
       reactTableFiltersState: state.filters
     };
-    var getFilterFlyoutProps = function getFilterFlyoutProps() {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultProps), filterProps), {}, {
-        setAllFilters: setAllFilters,
-        setFilter: setFilter,
-        headers: headers,
-        data: data
-      });
-    };
+    const getFilterFlyoutProps = () => ({
+      ...defaultProps,
+      ...filterProps,
+      setAllFilters,
+      setFilter,
+      headers,
+      data
+    });
     Object.assign(instance, {
-      filterProps: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultProps), instance === null || instance === void 0 ? void 0 : instance.filterProps),
-      filterTypes: filterTypes,
-      getFilterFlyoutProps: getFilterFlyoutProps,
+      filterProps: {
+        ...defaultProps,
+        ...instance?.filterProps
+      },
+      filterTypes,
+      getFilterFlyoutProps,
       FilterFlyout: FilterFlyout.default
     });
   });

package/lib/components/Datagrid/useFlexResize.js

@@ -9,52 +9,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
-var useFlexResize = function useFlexResize(hooks) {
-  var _useState = React.useState(),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    spacerColumn = _useState2[0],
-    setSpacerColumn = _useState2[1];
-  var useInstance = function useInstance(instance) {
-    var enableSpacerColumn = instance.enableSpacerColumn;
-    React.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] = React.useState();
+  const useInstance = instance => {
+    const {
+      enableSpacerColumn
+    } = instance;
+    React.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 _rollupPluginBabelHelpers.toConsumableArray(columns);
+      return [...columns];
     } else if (spacerColumn & actionsIdx === -1) {
-      return [].concat(_rollupPluginBabelHelpers.toConsumableArray(columns), [spacer]);
+      return [...columns, spacer];
     }
-    var cols = _rollupPluginBabelHelpers.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;
     }
@@ -71,12 +77,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/lib/components/Datagrid/useFloatingScroll.js

@@ -13,64 +13,66 @@ var React = require('react');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var useFloatingScroll = function useFloatingScroll(hooks) {
-  var useInstance = function useInstance(instance) {
-    var tableId = instance.tableId,
-      withVirtualScroll = instance.withVirtualScroll,
-      ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
-    React.useEffect(function () {
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const useFloatingScroll = hooks => {
+  const useInstance = instance => {
+    const {
+      tableId,
+      withVirtualScroll,
+      ExpandedRowContentComponent
+    } = instance;
+    React.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/lib/components/Datagrid/useFocusRowExpander.js

@@ -13,32 +13,33 @@ var React = require('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;
-  React.useEffect(function () {
+const useFocusRowExpander = _ref => {
+  let {
+    instance,
+    lastExpandedRowIndex = 0,
+    blockClass,
+    activeElement
+  } = _ref;
+  React.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]);
 };
 
 exports.useFocusRowExpander = useFocusRowExpander;

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -14,30 +14,32 @@ var debounce = require('../../global/js/utils/debounce.js');
 var useParentDimensions = require('./useParentDimensions.js');
 var useResizeTable = require('./useResizeTable.js');
 
-var useInfiniteScroll = function useInfiniteScroll(hooks) {
+const useInfiniteScroll = hooks => {
   useParentDimensions.default(hooks);
   useResizeTable.default(hooks);
-  var useInstance = function useInstance(instance) {
-    var _tableElement;
-    var _ref = instance,
-      isFetching = _ref.isFetching,
-      tableHeight = _ref.tableHeight,
-      innerListRef = _ref.innerListRef,
-      fetchMoreData = _ref.fetchMoreData,
-      tableId = _ref.tableId,
-      loadMoreThreshold = _ref.loadMoreThreshold;
-    var tableElement;
+  const useInstance = instance => {
+    const {
+      isFetching,
+      tableHeight,
+      innerListRef,
+      fetchMoreData,
+      tableId,
+      loadMoreThreshold
+    } = instance;
+    let tableElement;
     if (typeof document !== 'undefined') {
-      tableElement = document.querySelector("#".concat(tableId));
+      tableElement = document.querySelector(`#${tableId}`);
     }
-    var totalTableHeight = tableHeight || ((_tableElement = tableElement) === null || _tableElement === void 0 ? void 0 : _tableElement.clientHeight);
-    var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
-    var emptyFetchData = function emptyFetchData() {};
+    const totalTableHeight = tableHeight || tableElement?.clientHeight;
+    const loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
+    const emptyFetchData = () => {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var fetchMore = React.useCallback(debounce.debounce(fetchMoreData || emptyFetchData, 3000), [fetchMoreData]);
-    var onScroll = function onScroll(_ref2) {
-      var scrollDirection = _ref2.scrollDirection,
-        scrollOffset = _ref2.scrollOffset;
+    const fetchMore = React.useCallback(debounce.debounce(fetchMoreData || emptyFetchData, 3000), [fetchMoreData]);
+    const onScroll = _ref => {
+      let {
+        scrollDirection,
+        scrollOffset
+      } = _ref;
       if (innerListRef && innerListRef.current) {
         if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThresholdValue) {
           if (fetchMoreData) {
@@ -47,7 +49,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
       }
     };
     Object.assign(instance, {
-      onScroll: onScroll,
+      onScroll,
       withVirtualScroll: true
     });
   };

package/lib/components/Datagrid/useInitialColumnSort.js

@@ -7,38 +7,39 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var useSortableColumns = require('./useSortableColumns.js');
 
-var useInitialColumnSort = function useInitialColumnSort(instance) {
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    hasInitialSort = _useState2[0],
-    setHasInitialSort = _useState2[1];
-  React.useEffect(function () {
-    var initialState = instance.initialState,
-      headers = instance.headers,
-      onSort = instance.onSort,
-      isTableSortable = instance.isTableSortable;
-    var sortableColumn = initialState.sortableColumn;
-    var foundSortedCol = headers.some(function (h) {
-      return h.isSorted;
-    });
+const useInitialColumnSort = instance => {
+  const [hasInitialSort, setHasInitialSort] = React.useState(false);
+  React.useEffect(() => {
+    const {
+      initialState,
+      headers,
+      onSort,
+      isTableSortable
+    } = instance;
+    const {
+      sortableColumn
+    } = initialState;
+    const foundSortedCol = headers.some(h => h.isSorted);
     if (foundSortedCol || hasInitialSort || !isTableSortable) {
       return;
     }
     if (sortableColumn) {
-      var columnId = sortableColumn.id,
-        order = sortableColumn.order;
+      const {
+        id: columnId,
+        order
+      } = sortableColumn;
       // prevents edge case where initial sort state of none actually starts out as ascending
       if (order !== 'ASC' && order !== 'DESC') {
         return;
       }
-      var _getNewSortOrder = useSortableColumns.getNewSortOrder(order),
-        newSortDesc = _getNewSortOrder.newSortDesc,
-        newOrder = _getNewSortOrder.newOrder;
-      onSort === null || onSort === void 0 || onSort(columnId, newOrder);
+      const {
+        newSortDesc,
+        newOrder
+      } = useSortableColumns.getNewSortOrder(order);
+      onSort?.(columnId, newOrder);
       instance.toggleSortBy(columnId, newSortDesc, false);
       setHasInitialSort(true);
     }