@mui/x-data-grid 7.18.0 → 7.19.0

package/node/components/menu/GridMenu.js

@@ -93,7 +93,7 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMenuRoot, (0, _extends2.default)({
     as: rootProps.slots.basePopper,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     open: open,
     anchorEl: target,

package/node/components/panel/GridPanel.js

@@ -92,7 +92,7 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
     ref: ref,
     placement: "bottom-start",
-    className: (0, _clsx.default)(className, classes.panel),
+    className: (0, _clsx.default)(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers

package/node/components/panel/GridPanelContent.js

@@ -45,7 +45,7 @@ function GridPanelContent(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContentRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelFooter.js

@@ -45,7 +45,7 @@ function GridPanelFooter(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelFooterRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelHeader.js

@@ -43,7 +43,7 @@ function GridPanelHeader(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelHeaderRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelWrapper.js

@@ -56,7 +56,7 @@ const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRe
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
       ref: ref,
       tabIndex: -1,
-      className: (0, _clsx.default)(className, classes.root),
+      className: (0, _clsx.default)(classes.root, className),
       ownerState: rootProps
     }, other))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -101,7 +101,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/node/components/virtualization/GridBottomContainer.js

@@ -12,6 +12,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = () => {
   const slots = {
@@ -26,8 +29,22 @@ const Element = (0, _system.styled)('div')({
 });
 function GridBottomContainer(props) {
   const classes = useUtilityClasses();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const scrollHeight = hasScrollX ? scrollbarSize : 0;
+  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
+  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
+  2 * scrollHeight, 0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
-    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--bottom']),
+    className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--bottom']),
+    style: {
+      transform: `translateY(${offset}px)`
+    },
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridMainContainer.js

@@ -24,7 +24,9 @@ const Element = (0, _system.styled)('div', {
 })({
   flexGrow: 1,
   position: 'relative',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
 });
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/node/components/virtualization/GridTopContainer.js

@@ -27,7 +27,7 @@ const Element = (0, _system.styled)('div')({
 function GridTopContainer(props) {
   const classes = useUtilityClasses();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
-    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--top']),
+    className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--top']),
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -28,9 +28,6 @@ const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
-  '& > div': {
-    display: 'inline-block'
-  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -62,9 +59,6 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   },
   bottom: '0px'
 });
-const Content = (0, _system.styled)('div')({
-  display: 'inline-block'
-});
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -134,7 +128,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: contentRef,
       className: classes.content
     })

package/node/components/virtualization/GridVirtualScroller.js

@@ -45,6 +45,7 @@ const Scroller = (0, _system.styled)('div', {
 })({
   position: 'relative',
   height: '100%',
+  flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
   '&::-webkit-scrollbar': {

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -51,10 +51,9 @@ function GridVirtualScrollerFiller({
     leftPinnedWidth,
     rightPinnedWidth
   } = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
-  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
-  const height = Math.max(scrollbarHeight, expandedHeight);
-  if (height === 0) {
+  const height = hasScrollX ? scrollbarSize : 0;
+  const needsLastRowBorder = viewportOuterSize.height - minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Filler, {

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

@@ -11,6 +11,7 @@ exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
 exports.hydrateColumnsWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _colDef = require("../../../colDef");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _utils = require("../../../utils/utils");
@@ -289,9 +290,9 @@ const createColumnsState = ({
         }
       }
     });
-    columnsState.lookup[field] = (0, _extends2.default)({}, existingState, newColumn, {
+    columnsState.lookup[field] = (0, _resolveProps.default)(existingState, (0, _extends2.default)({}, newColumn, {
       hasBeenResized
-    });
+    }));
   });
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
     Object.keys(columnsState.lookup).forEach(field => {

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

@@ -76,7 +76,7 @@ const useGridCellEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridCellModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }

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

@@ -118,7 +118,7 @@ const useGridRowEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridRowModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }

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 selectableDescendentsCount = 0;
+    let selectedDescendentsCount = 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) {
+        selectableDescendentsCount += 1;
+        if (rowSelectionLookup[id] !== undefined) {
+          selectedDescendentsCount += 1;
+        }
+      }
+    }
+    return {
+      isIndeterminate: selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount || selectedDescendentsCount === selectableDescendentsCount && rowSelectionLookup[groupId] === undefined,
+      isChecked: autoSelectParents ? selectedDescendentsCount > 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/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.