[DataGrid] Do not apply filters on rowExpansionChange

packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

@@ -60,6 +60,8 @@ import {
   columnGroupsStateInitializer,
   useGridLazyLoader,
   useGridLazyLoaderPreProcessors,
+  useGridVisibleRowsState,
+  visibleRowsStateInitializer,
   headerFilteringStateInitializer,
   useGridHeaderFiltering,
 } from '@mui/x-data-grid-pro/internals';
@@ -121,6 +123,7 @@ export const useDataGridPremiumComponent = (
   useGridInitializeState(columnsStateInitializer, privateApiRef, props);
   useGridInitializeState(rowPinningStateInitializer, privateApiRef, props);
   useGridInitializeState(rowsStateInitializer, privateApiRef, props);
+  useGridInitializeState(visibleRowsStateInitializer, privateApiRef, props);
   useGridInitializeState(editingStateInitializer, privateApiRef, props);
   useGridInitializeState(focusStateInitializer, privateApiRef, props);
   useGridInitializeState(sortingStateInitializer, privateApiRef, props);
@@ -145,6 +148,7 @@ export const useDataGridPremiumComponent = (
   useGridRowPinning(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
+  useGridVisibleRowsState(privateApiRef);
   useGridParamsApi(privateApiRef);
   useGridDetailPanel(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);

packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts

@@ -83,7 +83,6 @@ export const filterRowTreeFromGroupingColumns = (
   params: FilterRowTreeFromTreeDataParams,
 ): Omit<GridFilterState, 'filterModel'> => {
   const { rowTree, isRowMatchingFilters, filterModel } = params;
-  const visibleRowsLookup: Record<GridRowId, boolean> = {};
   const filteredRowsLookup: Record<GridRowId, boolean> = {};
   const filteredDescendantCountLookup: Record<GridRowId, number> = {};
 
@@ -138,15 +137,8 @@ export const filterRowTreeFromGroupingColumns = (
       }
     }
 
-    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
     filteredRowsLookup[node.id] = isPassingFiltering;
 
-    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] =
-        isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
-    }
-
     if (!isPassingFiltering) {
       return 0;
     }
@@ -169,7 +161,6 @@ export const filterRowTreeFromGroupingColumns = (
   }
 
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup,
   };

packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts

@@ -17,6 +17,7 @@ import {
   createRowTree,
   updateRowTree,
   RowTreeBuilderGroupingCriterion,
+  getVisibleRowsLookup,
 } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import {
@@ -224,6 +225,12 @@ export const useGridRowGroupingPreProcessors = (
     [apiRef],
   );
 
+  const getVisibleRows = React.useCallback<GridStrategyProcessor<'visibleRows'>>((params) => {
+    return {
+      lookup: getVisibleRowsLookup(params),
+    };
+  }, []);
+
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
   useGridRegisterStrategyProcessor(
     apiRef,
@@ -233,6 +240,7 @@ export const useGridRowGroupingPreProcessors = (
   );
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'visibleRows', getVisibleRows);
 
   /**
    * 1ST RENDER

packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx

@@ -2459,6 +2459,39 @@ describe('<DataGridPremium /> - Row Grouping', () => {
         expect(getColumnValues(1)).to.deep.equal(['', 'Cat 1 (1)', '', 'Cat 2 (2)', '', '']);
       });
     });
+
+    it('should not apply filters when the row is expanded', () => {
+      render(
+        <Test
+          initialState={{
+            rowGrouping: { model: ['category1'] },
+          }}
+        />,
+      );
+
+      const onFilteredRowsSet = spy();
+      apiRef.current.subscribeEvent('filteredRowsSet', onFilteredRowsSet);
+
+      fireEvent.click(getCell(0, 0).querySelector('button')!);
+      expect(onFilteredRowsSet.callCount).to.equal(0);
+    });
+
+    it('should not apply filters when the row is collapsed', () => {
+      render(
+        <Test
+          initialState={{
+            rowGrouping: { model: ['category1'] },
+          }}
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+
+      const onFilteredRowsSet = spy();
+      apiRef.current.subscribeEvent('filteredRowsSet', onFilteredRowsSet);
+
+      fireEvent.click(getCell(0, 0).querySelector('button')!);
+      expect(onFilteredRowsSet.callCount).to.equal(0);
+    });
   });
 
   describe('apiRef: addRowGroupingCriteria', () => {

packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx

@@ -40,6 +40,8 @@ import {
   rowSelectionStateInitializer,
   useGridColumnGrouping,
   columnGroupsStateInitializer,
+  useGridVisibleRowsState,
+  visibleRowsStateInitializer,
   headerFilteringStateInitializer,
   useGridHeaderFiltering,
 } from '@mui/x-data-grid/internals';
@@ -107,6 +109,7 @@ export const useDataGridProComponent = (
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(visibleRowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
@@ -128,6 +131,7 @@ export const useDataGridProComponent = (
   useGridRowPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
+  useGridVisibleRowsState(apiRef);
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);

packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts

@@ -30,7 +30,6 @@ export const filterRowTreeFromTreeData = (
   params: FilterRowTreeFromTreeDataParams,
 ): Omit<GridFilterState, 'filterModel'> => {
   const { rowTree, disableChildrenFiltering, isRowMatchingFilters } = params;
-  const visibleRowsLookup: Record<GridRowId, boolean> = {};
   const filteredRowsLookup: Record<GridRowId, boolean> = {};
   const filteredDescendantCountLookup: Record<GridRowId, number> = {};
 
@@ -86,15 +85,8 @@ export const filterRowTreeFromTreeData = (
       }
     }
 
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
 
-    // TODO: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] =
-        shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
-    }
-
     if (!shouldPassFilters) {
       return 0;
     }
@@ -117,7 +109,6 @@ export const filterRowTreeFromTreeData = (
   }
 
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup,
   };

packages/grid/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx

@@ -33,6 +33,7 @@ import {
 } from '../../../utils/tree/models';
 import { sortRowTree } from '../../../utils/tree/sortRowTree';
 import { updateRowTree } from '../../../utils/tree/updateRowTree';
+import { getVisibleRowsLookup } from '../../../utils/tree/utils';
 
 export const useGridTreeDataPreProcessors = (
   privateApiRef: React.MutableRefObject<GridPrivateApiPro>,
@@ -203,6 +204,12 @@ export const useGridTreeDataPreProcessors = (
     [privateApiRef, props.disableChildrenSorting],
   );
 
+  const getVisibleRows = React.useCallback<GridStrategyProcessor<'visibleRows'>>((params) => {
+    return {
+      lookup: getVisibleRowsLookup(params),
+    };
+  }, []);
+
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
   useGridRegisterStrategyProcessor(
     privateApiRef,
@@ -212,6 +219,12 @@ export const useGridTreeDataPreProcessors = (
   );
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(
+    privateApiRef,
+    TREE_DATA_STRATEGY,
+    'visibleRows',
+    getVisibleRows,
+  );
 
   /**
    * 1ST RENDER

packages/grid/x-data-grid-pro/src/internals/index.ts

@@ -51,5 +51,5 @@ export type {
 export { createRowTree } from '../utils/tree/createRowTree';
 export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
-export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';
+export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';
 export type { RowTreeBuilderGroupingCriterion } from '../utils/tree/models';

packages/grid/x-data-grid-pro/src/utils/tree/utils.ts

@@ -1,10 +1,12 @@
 import {
   GRID_ROOT_GROUP_ID,
   GridChildrenFromPathLookup,
+  GridFilterState,
   GridGroupNode,
   GridLeafNode,
   GridRowId,
   GridRowTreeConfig,
+  GridRowsState,
   GridTreeNode,
 } from '@mui/x-data-grid';
 import {
@@ -235,3 +237,45 @@ export const createUpdatedGroupsManager = (): GridRowTreeUpdatedGroupsManager =>
     this.value[groupId][action] = true;
   },
 });
+
+export const getVisibleRowsLookup = ({
+  tree,
+  filteredRowsLookup,
+}: {
+  tree: GridRowsState['tree'];
+  filteredRowsLookup: GridFilterState['filteredRowsLookup'];
+}) => {
+  if (!filteredRowsLookup) {
+    return {};
+  }
+
+  const visibleRowsLookup: Record<GridRowId, boolean> = {};
+
+  const handleTreeNode = (node: GridTreeNode, areAncestorsExpanded: boolean) => {
+    const isPassingFiltering = filteredRowsLookup[node.id];
+
+    if (node.type === 'group') {
+      node.children.forEach((childId) => {
+        const childNode = tree[childId];
+        handleTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded);
+      });
+    }
+
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+
+    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
+    if (node.type === 'group' && node.footerId != null) {
+      visibleRowsLookup[node.footerId] =
+        isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+  };
+
+  const nodes = Object.values(tree);
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (node.depth === 0) {
+      handleTreeNode(node, true);
+    }
+  }
+  return visibleRowsLookup;
+};

packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx

@@ -36,6 +36,10 @@ import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
+import {
+  useGridVisibleRowsState,
+  visibleRowsStateInitializer,
+} from '../hooks/features/rows/useGridVisibleRowsState';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 import {
@@ -64,6 +68,7 @@ export const useDataGridComponent = (
   useGridInitializeState(rowSelectionStateInitializer, privateApiRef, props);
   useGridInitializeState(columnsStateInitializer, privateApiRef, props);
   useGridInitializeState(rowsStateInitializer, privateApiRef, props);
+  useGridInitializeState(visibleRowsStateInitializer, privateApiRef, props);
   useGridInitializeState(editingStateInitializer, privateApiRef, props);
   useGridInitializeState(focusStateInitializer, privateApiRef, props);
   useGridInitializeState(sortingStateInitializer, privateApiRef, props);
@@ -79,6 +84,7 @@ export const useDataGridComponent = (
   useGridRowSelection(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
+  useGridVisibleRowsState(privateApiRef);
   useGridParamsApi(privateApiRef);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);

packages/grid/x-data-grid/src/hooks/core/strategyProcessing/gridStrategyProcessingApi.ts

@@ -1,15 +1,18 @@
 import {
   GridRowTreeCreationParams,
   GridRowTreeCreationValue,
+  GridRowsState,
 } from '../../features/rows/gridRowsInterfaces';
 import {
   GridFilteringMethodParams,
   GridFilteringMethodValue,
+  GridFilterState,
 } from '../../features/filter/gridFilterState';
 import {
   GridSortingMethodParams,
   GridSortingMethodValue,
 } from '../../features/sorting/gridSortingState';
+import type { GridVisibleRowsMethodValue } from '../../features/rows/gridVisibleRowsInterfaces';
 
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 
@@ -32,6 +35,14 @@ export interface GridStrategyProcessingLookup {
     params: GridSortingMethodParams;
     value: GridSortingMethodValue;
   };
+  visibleRows: {
+    group: 'rowTree';
+    params: {
+      tree: GridRowsState['tree'];
+      filteredRowsLookup: GridFilterState['filteredRowsLookup'];
+    };
+    value: GridVisibleRowsMethodValue;
+  };
 }
 
 export type GridStrategyProcessor<P extends GridStrategyProcessorName> = (

packages/grid/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts

@@ -17,6 +17,7 @@ export const GRID_STRATEGIES_PROCESSORS: {
   rowTreeCreation: 'rowTree',
   filtering: 'rowTree',
   sorting: 'rowTree',
+  visibleRows: 'rowTree',
 };
 
 type UntypedStrategyProcessors = {

packages/grid/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts

@@ -4,6 +4,7 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { gridSortedRowEntriesSelector } from '../sorting/gridSortingSelector';
 import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridVisibleRowsLookupSelector } from '../rows/gridVisibleRowsSelector';
 
 /**
  * @category Filtering
@@ -28,15 +29,6 @@ export const gridQuickFilterValuesSelector = createSelector(
   (filterModel) => filterModel.quickFilterValues,
 );
 
-/**
- * @category Filtering
- * @ignore - do not document.
- */
-export const gridVisibleRowsLookupSelector = createSelector(
-  gridFilterStateSelector,
-  (filterState) => filterState.visibleRowsLookup,
-);
-
 /**
  * @category Filtering
  * @ignore - do not document.

packages/grid/x-data-grid/src/hooks/features/filter/gridFilterState.ts

@@ -22,12 +22,6 @@ export interface GridFilterState {
    * This is the equivalent of the `visibleRowsLookup` if all the groups were expanded.
    */
   filteredRowsLookup: Record<GridRowId, boolean>;
-  /**
-   * Visibility status for each row.
-   * A row is visible if it is passing the filters AND if its parents are expanded.
-   * If a row is not registered in this lookup, it is visible.
-   */
-  visibleRowsLookup: Record<GridRowId, boolean>;
   /**
    * Amount of descendants that are passing the filters.
    * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).