@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.6

package/node/components/virtualization/GridVirtualScroller.js

@@ -67,8 +67,10 @@ function GridVirtualScroller(props) {
     getContentProps,
     getRenderZoneProps,
     getScrollbarVerticalProps,
-    getScrollbarHorizontalProps
+    getScrollbarHorizontalProps,
+    getRows
   } = virtualScroller;
+  const rows = getRows();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
@@ -83,19 +85,19 @@ function GridVirtualScroller(props) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
-          children: [virtualScroller.getRows(), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
+          children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
+      })), rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller
         })
       })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "vertical"
-    }, getScrollbarVerticalProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -13,6 +13,7 @@ var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _rows = require("../../hooks/features/rows");
 var _virtualization = require("../../hooks/features/virtualization");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -47,13 +48,17 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const offsets = (0, _useGridSelector.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
+  const offsetTop = (0, _useGridSelector.useGridSelector)(apiRef, () => {
+    const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
+    const rowsMeta = (0, _rows.gridRowsMetaSelector)(apiRef.current.state);
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     style: {
-      transform: `translate3d(0, ${offsets.top}px, 0)`
+      transform: `translate3d(0, ${offsetTop}px, 0)`
     }
   }, other));
 });

package/node/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -41,7 +41,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
 const useGridPipeProcessing = apiRef => {
-  const processorsCache = React.useRef({});
+  const cache = React.useRef({});
   const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
     if (isRunning.current || !groupCache) {
@@ -54,52 +54,54 @@ const useGridPipeProcessing = apiRef => {
     isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    const groupCache = processorsCache.current[group];
+    const groupCache = cache.current[group];
     const oldProcessor = groupCache.processors.get(id);
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
+      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values());
       runAppliers(groupCache);
     }
     return () => {
-      processorsCache.current[group].processors.set(id, null);
+      cache.current[group].processors.delete(id);
+      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values());
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    processorsCache.current[group].appliers[id] = applier;
+    cache.current[group].appliers[id] = applier;
     return () => {
-      const _appliers = processorsCache.current[group].appliers,
+      const _appliers = cache.current[group].appliers,
         otherAppliers = (0, _objectWithoutPropertiesLoose2.default)(_appliers, [id].map(_toPropertyKey2.default));
-      processorsCache.current[group].appliers = otherAppliers;
+      cache.current[group].appliers = otherAppliers;
     };
   }, []);
   const requestPipeProcessorsApplication = React.useCallback(group => {
-    const groupCache = processorsCache.current[group];
-    runAppliers(groupCache);
+    runAppliers(cache.current[group]);
   }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
-    if (!processorsCache.current[group]) {
+    if (!cache.current[group]) {
       return value;
     }
-    const preProcessors = Array.from(processorsCache.current[group].processors.values());
-    return preProcessors.reduce((acc, preProcessor) => {
-      if (!preProcessor) {
-        return acc;
-      }
-      return preProcessor(acc, context);
-    }, value);
+    const processors = cache.current[group].processorsAsArray;
+    let result = value;
+    for (let i = 0; i < processors.length; i += 1) {
+      result = processors[i](result, context);
+    }
+    return result;
   }, []);
   const preProcessingPrivateApi = {
     registerPipeProcessor,

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -16,6 +16,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
 var _dimensions = require("../dimensions");
 var _virtualization = require("../virtualization");
+var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
 var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
@@ -25,7 +26,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SpaceFiller = (0, _styles.styled)('div')({
   /* GridRootStyles conflict */
-  '&&': {
+  '&&&': {
     padding: 0,
     width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
   }
@@ -57,14 +58,16 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const theme = (0, _styles.useTheme)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
   const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const offsets = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
+  const columnPositions = (0, _utils2.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
-  const visiblePinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
+  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -96,8 +99,8 @@ const useGridColumnHeaders = props => {
   const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === _columns.GridPinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
-    const leftOffsetWidth = offsets.left - leftOverflow;
+    const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "presentation",

package/node/hooks/features/columns/gridColumnsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
+exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridCoreSelector = require("../../core/gridCoreSelector");
@@ -141,4 +141,11 @@ const gridFilterableColumnLookupSelector = exports.gridFilterableColumnLookupSel
     acc[col.field] = col;
   }
   return acc;
-}, {}));
+}, {}));
+
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+const gridHasColSpanSelector = exports.gridHasColSpanSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));

package/node/hooks/features/columns/useGridColumns.js

@@ -55,6 +55,7 @@ function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.updateRenderContext?.();
     apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
@@ -84,6 +85,7 @@ function useGridColumns(apiRef, props) {
           keepOnlyColumnsToUpsert: false
         })
       }));
+      apiRef.current.updateRenderContext?.();
       apiRef.current.forceUpdate();
     }
   }, [apiRef]);

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -238,6 +238,7 @@ function useGridDimensions(apiRef, props) {
     set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
     set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
     set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+    set('--height', `${dimensions.rowHeight}px`);
   }, [root, dimensions]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {

package/node/hooks/features/editing/useGridRowEditing.js

@@ -30,7 +30,7 @@ const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef(null);
+  const focusTimeout = React.useRef();
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
@@ -85,7 +85,6 @@ const useGridRowEditing = (apiRef, props) => {
     // focus we check if the next cell that received focus is from a different row.
     nextFocusedCell.current = null;
     focusTimeout.current = setTimeout(() => {
-      focusTimeout.current = null;
       if (nextFocusedCell.current?.id !== params.id) {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {

package/node/hooks/features/filter/useGridFilter.js

@@ -115,7 +115,7 @@ const useGridFilter = (apiRef, props) => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     const existingItems = [...filterModel.items];
     items.forEach(item => {
-      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+      const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
       if (itemIndex === -1) {
         existingItems.push(item);
       } else {
@@ -123,7 +123,7 @@ const useGridFilter = (apiRef, props) => {
       }
     });
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items
+      items: existingItems
     }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {

package/node/hooks/features/rows/useGridParamsApi.js

@@ -41,12 +41,13 @@ function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    const value = apiRef.current.getCellValue(id, field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
+    const rawValue = row[field];
+    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
     const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
     const params = {
@@ -70,19 +71,14 @@ function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (!colDef || !colDef.valueGetter) {
-      const rowModel = apiRef.current.getRow(id);
-      if (!rowModel) {
-        throw new MissingRowIdError(`No row with id #${id} found`);
-      }
-      return rowModel[field];
-    }
     const row = apiRef.current.getRow(id);
     if (!row) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, row, colDef, apiRef);
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
   }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
     const field = colDef.field;

package/node/hooks/features/rows/useGridRows.js

@@ -270,13 +270,16 @@ const useGridRows = (apiRef, props) => {
     const dataRowIdToIdLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef));
     const rootGroup = tree[_gridRowsUtils.GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
+    const seenIds = new Set();
     for (let i = 0; i < newRows.length; i += 1) {
       const rowModel = newRows[i];
       const rowId = (0, _gridRowsUtils.getRowIdFromRowModel)(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
-      const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
-      delete dataRowIdToModelLookup[replacedRowId];
-      delete dataRowIdToIdLookup[replacedRowId];
-      delete tree[replacedRowId];
+      const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
+      if (!seenIds.has(removedRowId)) {
+        delete dataRowIdToModelLookup[removedRowId];
+        delete dataRowIdToIdLookup[removedRowId];
+        delete tree[removedRowId];
+      }
       const rowTreeNodeConfig = {
         id: rowId,
         depth: 0,
@@ -287,6 +290,7 @@ const useGridRows = (apiRef, props) => {
       dataRowIdToModelLookup[rowId] = rowModel;
       dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
+      seenIds.add(rowId);
     }
     tree[_gridRowsUtils.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
       children: rootGroupChildren

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -115,14 +115,9 @@ const useGridRowsMeta = (apiRef, props) => {
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
       }
-      const initialHeights = {};
-      /* eslint-disable-next-line no-restricted-syntax */
-      for (const key in sizes) {
-        if (/^base[A-Z]/.test(key)) {
-          initialHeights[key] = sizes[key];
-        }
-      }
-      initialHeights.baseCenter = baseRowHeight;
+      const initialHeights = {
+        baseCenter: baseRowHeight
+      };
       if (getRowSpacing) {
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
         const spacing = getRowSpacing((0, _extends2.default)({}, row, {
@@ -140,19 +135,16 @@ const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
-      let maximumBaseSize = 0;
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
       /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
-        if (/^base[A-Z]/.test(key)) {
-          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
-        } else {
+        if (key !== 'baseCenter') {
           otherSizes += value;
         }
       }
-      return acc + maximumBaseSize + otherSizes;
+      return acc + processedSizes.baseCenter + otherSizes;
     }, 0);
     pinnedRows?.top?.forEach(row => {
       calculateRowProcessedSizes(row);

package/node/hooks/features/sorting/gridSortingUtils.js

@@ -37,7 +37,15 @@ const parseSortItem = (sortItem, apiRef) => {
   if (!column || sortItem.sort === null) {
     return null;
   }
-  const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  let comparator;
+  if (column.getSortComparator) {
+    comparator = column.getSortComparator(sortItem.sort);
+  } else {
+    comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  }
+  if (!comparator) {
+    return null;
+  }
   const getSortCellParams = id => ({
     id,
     field: column.field,

package/node/hooks/features/sorting/useGridSorting.js

@@ -50,7 +50,7 @@ const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if (!sortItem) {
+      if (sortItem?.sort == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -126,7 +126,7 @@ const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = !sortItem ? [] : [sortItem];
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }

package/node/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = exports.gridOffsetsSelector = void 0;
+exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 /**
  * Get the columns state
@@ -31,13 +31,6 @@ const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumn
  */
 const gridRenderContextSelector = exports.gridRenderContextSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.renderContext);
 
-/**
- * Get the offsets
- * @category Virtualization
- * @ignore - do not document.
- */
-const gridOffsetsSelector = exports.gridOffsetsSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.offsets);
-
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.