@mui/x-data-grid 7.18.0 → 7.20.0

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

@@ -49,7 +49,7 @@ const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) =>
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
     if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      (0, _warning.warnOnce)(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     items = [model.items[0]];
   } else {

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
+var _useGridSelector = require("../../utils/useGridSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
 var _pagination = require("../pagination");
@@ -49,11 +50,12 @@ const rowSelectionStateInitializer = (state, props) => (0, _extends2.default)({}
 exports.rowSelectionStateInitializer = rowSelectionStateInitializer;
 const useGridRowSelection = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridSelection');
-  const runIfRowSelectionIsEnabled = callback => (...args) => {
+  const runIfRowSelectionIsEnabled = React.useCallback(callback => (...args) => {
     if (props.rowSelection) {
       callback(...args);
     }
-  };
+  }, [props.rowSelection]);
+  const applyAutoSelection = props.signature !== _useGridApiEventHandler.GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
   const propRowSelectionModel = React.useMemo(() => {
     return getSelectionModelPropValue(props.rowSelectionModel, (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state));
   }, [apiRef, props.rowSelectionModel]);
@@ -72,6 +74,8 @@ const useGridRowSelection = (apiRef, props) => {
   } = props;
   const canHaveMultipleSelection = (0, _utils.isMultipleRowSelectionEnabled)(props);
   const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
+  const isNestedData = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
@@ -96,7 +100,7 @@ const useGridRowSelection = (apiRef, props) => {
     }, !isSelected);
   }, [apiRef]);
 
-  /**
+  /*
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback(model => {
@@ -134,34 +138,80 @@ const useGridRowSelection = (apiRef, props) => {
     lastRowToggled.current = id;
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
-      apiRef.current.setRowSelectionModel(isSelected ? [id] : []);
+      const newSelection = [];
+      const addRow = rowId => {
+        newSelection.push(rowId);
+      };
+      if (isSelected) {
+        addRow(id);
+        if (applyAutoSelection) {
+          (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+        }
+      }
+      apiRef.current.setRowSelectionModel(newSelection);
     } else {
       logger.debug(`Toggling selection for row ${id}`);
       const selection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
-      const newSelection = selection.filter(el => el !== id);
+      const newSelection = new Set(selection);
+      newSelection.delete(id);
+      const addRow = rowId => {
+        newSelection.add(rowId);
+      };
+      const removeRow = rowId => {
+        newSelection.delete(rowId);
+      };
       if (isSelected) {
-        newSelection.push(id);
+        addRow(id);
+        if (applyAutoSelection) {
+          (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+        }
+      } else if (applyAutoSelection) {
+        (0, _utils.findRowsToDeselect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
       }
-      const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+      const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(Array.from(newSelection));
       }
     }
-  }, [apiRef, logger, canHaveMultipleSelection]);
+  }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
   const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
     logger.debug(`Setting selection for several rows`);
     const selectableIds = ids.filter(id => apiRef.current.isRowSelectable(id));
     let newSelection;
     if (resetSelection) {
-      newSelection = isSelected ? selectableIds : [];
+      if (isSelected) {
+        newSelection = selectableIds;
+        if (applyAutoSelection) {
+          const addRow = rowId => {
+            newSelection.push(rowId);
+          };
+          selectableIds.forEach(id => {
+            (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+          });
+        }
+      } else {
+        newSelection = [];
+      }
     } else {
       // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
       const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
+      const addRow = rowId => {
+        selectionLookup[rowId] = rowId;
+      };
+      const removeRow = rowId => {
+        delete selectionLookup[rowId];
+      };
       selectableIds.forEach(id => {
         if (isSelected) {
           selectionLookup[id] = id;
+          if (applyAutoSelection) {
+            (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+          }
         } else {
-          delete selectionLookup[id];
+          removeRow(id);
+          if (applyAutoSelection) {
+            (0, _utils.findRowsToDeselect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
+          }
         }
       });
       newSelection = Object.values(selectionLookup);
@@ -170,7 +220,7 @@ const useGridRowSelection = (apiRef, props) => {
     if (isSelectionValid) {
       apiRef.current.setRowSelectionModel(newSelection);
     }
-  }, [apiRef, logger, canHaveMultipleSelection]);
+  }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -202,29 +252,52 @@ const useGridRowSelection = (apiRef, props) => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPublicApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPrivateApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
 
-  /**
+  /*
    * EVENTS
    */
-  const removeOutdatedSelection = React.useCallback(() => {
-    if (props.keepNonExistentRowsSelected) {
-      return;
-    }
+  const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
-    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
+    const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
 
     // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
     const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (!rowsLookup[id]) {
+      if (filteredRowsLookup[id] === false) {
+        if (props.keepNonExistentRowsSelected) {
+          return;
+        }
         delete selectionLookup[id];
         hasChanged = true;
+        return;
+      }
+      if (!props.rowSelectionPropagation?.parents) {
+        return;
+      }
+      const node = tree[id];
+      if (node.type === 'group') {
+        const isAutoGenerated = node.isAutoGenerated;
+        if (isAutoGenerated) {
+          delete selectionLookup[id];
+          hasChanged = true;
+          return;
+        }
+        // Keep previously selected tree data parents selected if all their children are filtered out
+        if (!node.children.every(childId => filteredRowsLookup[childId] === false)) {
+          delete selectionLookup[id];
+          hasChanged = true;
+        }
       }
     });
-    if (hasChanged) {
-      apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
+    if (hasChanged || isNestedData && !sortModelUpdated) {
+      const newSelection = Object.values(selectionLookup);
+      if (isNestedData) {
+        apiRef.current.selectRows(newSelection, true, true);
+      } else {
+        apiRef.current.setRowSelectionModel(newSelection);
+      }
     }
-  }, [apiRef, props.keepNonExistentRowsSelected]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, tree]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 
@@ -285,8 +358,7 @@ const useGridRowSelection = (apiRef, props) => {
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);
-    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
+    apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener
@@ -350,14 +422,15 @@ const useGridRowSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', runIfRowSelectionIsEnabled(preventSelectionOnShift));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfRowSelectionIsEnabled(handleCellKeyDown));
 
-  /**
+  /*
    * EFFECTS
    */
   React.useEffect(() => {
@@ -395,5 +468,8 @@ const useGridRowSelection = (apiRef, props) => {
       apiRef.current.setRowSelectionModel([]);
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
+  React.useEffect(() => {
+    runIfRowSelectionIsEnabled(removeOutdatedSelection);
+  }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
 };
 exports.useGridRowSelection = useGridRowSelection;

package/node/hooks/features/rowSelection/utils.js

@@ -3,12 +3,171 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.findRowsToSelect = exports.findRowsToDeselect = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
+exports.getCheckboxPropsSelector = getCheckboxPropsSelector;
 exports.isMultipleRowSelectionEnabled = isMultipleRowSelectionEnabled;
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+var _gridSortingSelector = require("../sorting/gridSortingSelector");
+var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _createSelector = require("../../../utils/createSelector");
+const ROW_SELECTION_PROPAGATION_DEFAULT = exports.ROW_SELECTION_PROPAGATION_DEFAULT = {
+  parents: false,
+  descendants: false
+};
+function getGridRowGroupSelectableDescendants(apiRef, groupId) {
+  const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
+  const sortedRowIds = (0, _gridSortingSelector.gridSortedRowIdsSelector)(apiRef);
+  const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
+  const groupNode = rowTree[groupId];
+  if (!groupNode || groupNode.type !== 'group') {
+    return [];
+  }
+  const descendants = [];
+  const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+  for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
+    const id = sortedRowIds[index];
+    if (filteredRowsLookup[id] !== false && apiRef.current.isRowSelectable(id)) {
+      descendants.push(id);
+    }
+  }
+  return descendants;
+}
+
+// TODO v8: Use `createSelectorV8`
+function getCheckboxPropsSelector(groupId, autoSelectParents) {
+  return (0, _createSelector.createSelector)(_gridRowsSelector.gridRowTreeSelector, _gridSortingSelector.gridSortedRowIdsSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.selectedIdsLookupSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionLookup) => {
+    const groupNode = rowTree[groupId];
+    if (!groupNode || groupNode.type !== 'group') {
+      return {
+        isIndeterminate: false,
+        isChecked: rowSelectionLookup[groupId] === groupId
+      };
+    }
+    if (rowSelectionLookup[groupId] === groupId) {
+      return {
+        isIndeterminate: false,
+        isChecked: true
+      };
+    }
+    let selectableDescendantsCount = 0;
+    let selectedDescendantsCount = 0;
+    const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+    for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
+      const id = sortedRowIds[index];
+      if (filteredRowsLookup[id] !== false) {
+        selectableDescendantsCount += 1;
+        if (rowSelectionLookup[id] !== undefined) {
+          selectedDescendantsCount += 1;
+        }
+      }
+    }
+    return {
+      isIndeterminate: selectedDescendantsCount > 0 && selectedDescendantsCount < selectableDescendantsCount || selectedDescendantsCount === selectableDescendantsCount && rowSelectionLookup[groupId] === undefined,
+      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionLookup[groupId] === groupId
+    };
+  });
+}
 function isMultipleRowSelectionEnabled(props) {
   if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
     return props.checkboxSelection && props.disableMultipleRowSelection !== true;
   }
   return !props.disableMultipleRowSelection;
-}
+}
+const getRowNodeParents = (tree, id) => {
+  const parents = [];
+  let parent = id;
+  while (parent != null && parent !== _gridRowsUtils.GRID_ROOT_GROUP_ID) {
+    const node = tree[parent];
+    if (!node) {
+      return parents;
+    }
+    parents.push(parent);
+    parent = node.parent;
+  }
+  return parents;
+};
+const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
+  const node = tree[id];
+  if (!node) {
+    return [];
+  }
+  const parent = node.parent;
+  if (parent == null) {
+    return [];
+  }
+  const parentNode = tree[parent];
+  return parentNode.children.filter(childId => childId !== id && filteredRows[childId]);
+};
+const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow) => {
+  const filteredRows = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
+  const selectedIdsLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
+  const selectedDescendants = new Set([]);
+  if (!autoSelectDescendants && !autoSelectParents) {
+    return;
+  }
+  if (autoSelectDescendants) {
+    const rowNode = tree[selectedRow];
+    if (rowNode?.type === 'group') {
+      const descendants = getGridRowGroupSelectableDescendants(apiRef, selectedRow);
+      descendants.forEach(rowId => {
+        addRow(rowId);
+        selectedDescendants.add(rowId);
+      });
+    }
+  }
+  if (autoSelectParents) {
+    const checkAllDescendantsSelected = rowId => {
+      if (selectedIdsLookup[rowId] !== rowId && !selectedDescendants.has(rowId)) {
+        return false;
+      }
+      const node = tree[rowId];
+      if (node?.type !== 'group') {
+        return true;
+      }
+      return node.children.every(checkAllDescendantsSelected);
+    };
+    const traverseParents = rowId => {
+      const siblings = getFilteredRowNodeSiblings(tree, filteredRows, rowId);
+      if (siblings.length === 0 || siblings.every(checkAllDescendantsSelected)) {
+        const rowNode = tree[rowId];
+        const parent = rowNode.parent;
+        if (parent != null && parent !== _gridRowsUtils.GRID_ROOT_GROUP_ID && apiRef.current.isRowSelectable(parent)) {
+          addRow(parent);
+          selectedDescendants.add(parent);
+          traverseParents(parent);
+        }
+      }
+    };
+    traverseParents(selectedRow);
+  }
+};
+exports.findRowsToSelect = findRowsToSelect;
+const findRowsToDeselect = (apiRef, tree, deselectedRow, autoSelectDescendants, autoSelectParents, removeRow) => {
+  const selectedIdsLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
+  if (!autoSelectParents && !autoSelectDescendants) {
+    return;
+  }
+  if (autoSelectParents) {
+    const allParents = getRowNodeParents(tree, deselectedRow);
+    allParents.forEach(parent => {
+      const isSelected = selectedIdsLookup[parent] === parent;
+      if (isSelected) {
+        removeRow(parent);
+      }
+    });
+  }
+  if (autoSelectDescendants) {
+    const rowNode = tree[deselectedRow];
+    if (rowNode?.type === 'group') {
+      const descendants = getGridRowGroupSelectableDescendants(apiRef, deselectedRow);
+      descendants.forEach(descendant => {
+        removeRow(descendant);
+      });
+    }
+  }
+};
+exports.findRowsToDeselect = findRowsToDeselect;

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

@@ -38,7 +38,7 @@ const buildRootGroup = () => ({
 exports.buildRootGroup = buildRootGroup;
 function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
-    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The Data Grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {

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

@@ -211,7 +211,7 @@ const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = (0, _gridRowSpanningUtils.getUnprocessedRange)({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: renderContext.lastRowIndex - 1
+      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRows = exports.rowsStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridRowsSelector = require("./gridRowsSelector");
@@ -376,11 +377,16 @@ const useGridRows = (apiRef, props) => {
       throttle: false
     });
   }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
+  const previousDataSource = (0, _useLazyRef.default)(() => props.unstable_dataSource);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (props.unstable_dataSource && props.unstable_dataSource !== previousDataSource.current) {
+      previousDataSource.current = props.unstable_dataSource;
+      return;
+    }
     if (methodName === 'rowTreeCreation') {
       groupRows();
     }
-  }, [groupRows]);
+  }, [groupRows, previousDataSource, props.unstable_dataSource]);
   const handleStrategyActivityChange = React.useCallback(() => {
     // `rowTreeCreation` is the only processor ran when `strategyAvailabilityChange` is fired.
     // All the other processors listen to `rowsSet` which will be published by the `groupRows` method below.

package/node/hooks/features/scroll/useGridScroll.js

@@ -20,22 +20,22 @@ var _dimensions = require("../dimensions");
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 function scrollIntoView(dimensions) {
   const {
-    clientHeight,
-    scrollTop,
-    offsetHeight,
-    offsetTop
+    containerSize,
+    scrollPosition,
+    elementSize,
+    elementOffset
   } = dimensions;
-  const elementBottom = offsetTop + offsetHeight;
+  const elementEnd = elementOffset + elementSize;
   // Always scroll to top when cell is higher than viewport to avoid scroll jump
   // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
-  if (offsetHeight > clientHeight) {
-    return offsetTop;
+  if (elementSize > containerSize) {
+    return elementOffset;
   }
-  if (elementBottom - clientHeight > scrollTop) {
-    return elementBottom - clientHeight;
+  if (elementEnd - containerSize > scrollPosition) {
+    return elementEnd - containerSize;
   }
-  if (offsetTop < scrollTop) {
-    return offsetTop;
+  if (elementOffset < scrollPosition) {
+    return elementOffset;
   }
   return undefined;
 }
@@ -53,6 +53,8 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
+  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
+  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
@@ -79,10 +81,10 @@ const useGridScroll = (apiRef, props) => {
       }
       // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
-        clientHeight: dimensions.viewportInnerSize.width,
-        scrollTop: Math.abs(virtualScrollerRef.current.scrollLeft),
-        offsetHeight: cellWidth,
-        offsetTop: columnPositions[params.colIndex]
+        containerSize: dimensions.viewportOuterSize.width,
+        scrollPosition: Math.abs(virtualScrollerRef.current.scrollLeft),
+        elementSize: cellWidth,
+        elementOffset: columnPositions[params.colIndex]
       });
     }
     if (params.rowIndex !== undefined) {
@@ -92,10 +94,10 @@ const useGridScroll = (apiRef, props) => {
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: dimensions.viewportInnerSize.height,
-        scrollTop: virtualScrollerRef.current.scrollTop,
-        offsetHeight: targetOffsetHeight,
-        offsetTop: rowsMeta.positions[elementIndex]
+        containerSize: dimensions.viewportInnerSize.height,
+        scrollPosition: virtualScrollerRef.current.scrollTop,
+        elementSize: targetOffsetHeight,
+        elementOffset: rowsMeta.positions[elementIndex]
       });
     }
     scrollCoordinates = apiRef.current.unstable_applyPipeProcessors('scrollToIndexes', scrollCoordinates, params);
@@ -106,18 +108,20 @@ const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
+      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
+      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

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

@@ -10,7 +10,7 @@ var _warning = require("@mui/x-internals/warning");
 const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      (0, _warning.warnOnce)(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     return [model[0]];
   }

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

@@ -84,8 +84,8 @@ const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const scrollbarVerticalRef = React.useRef(null);
-  const scrollbarHorizontalRef = React.useRef(null);
+  const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
+  const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);

package/node/hooks/utils/useGridApiContext.js

@@ -10,7 +10,7 @@ var _GridApiContext = require("../../components/GridApiContext");
 function useGridApiContext() {
   const apiRef = React.useContext(_GridApiContext.GridApiContext);
   if (apiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return apiRef;
 }

package/node/hooks/utils/useGridApiEventHandler.js

@@ -13,7 +13,7 @@ var _TimerBasedCleanupTracking = require("../../utils/cleanupTracking/TimerBased
 var _FinalizationRegistryBasedCleanupTracking = require("../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking");
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 var GridSignature = exports.GridSignature = /*#__PURE__*/function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";

package/node/hooks/utils/useGridConfiguration.js

@@ -10,7 +10,7 @@ var _GridConfigurationContext = require("../../components/GridConfigurationConte
 const useGridConfiguration = () => {
   const configuration = React.useContext(_GridConfigurationContext.GridConfigurationContext);
   if (configuration === undefined) {
-    throw new Error(['MUI X: Could not find the data grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return configuration;
 };

package/node/hooks/utils/useGridPrivateApiContext.js

@@ -14,7 +14,7 @@ if (process.env.NODE_ENV !== 'production') {
 function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return privateApiRef;
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.18.0
+ * @mui/x-data-grid v7.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the