@mui/x-data-grid 5.8.0 → 5.11.0

package/hooks/features/rows/gridRowsSelector.d.ts

@@ -1,8 +1,10 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridRowsStateSelector: (state: GridStateCommunity) => import("./gridRowsState").GridRowsState;
 export declare const gridRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridRowsLoadingSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean | undefined>;
 export declare const gridTopLevelRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<any>>;
+export declare const gridRowsIdToIdLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<string, import("../../..").GridRowId>>;
 export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
 export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;
 export declare const gridRowTreeDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/rows/gridRowsSelector.js

@@ -1,8 +1,10 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridRowsStateSelector = state => state.rows;
 export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
+export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
 export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
+export const gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);

package/hooks/features/rows/gridRowsState.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="node" />
 import { GridRowId, GridRowsLookup, GridRowsProp, GridRowTreeConfig } from '../../../models/gridRows';
 export interface GridRowTreeCreationParams {
     ids: GridRowId[];
     idRowsLookup: GridRowsLookup;
+    idToIdLookup: Record<string, GridRowId>;
     previousTree: GridRowTreeConfig | null;
 }
 export interface GridRowTreeCreationValue {
@@ -15,9 +15,10 @@ export interface GridRowTreeCreationValue {
     treeDepth: number;
     ids: GridRowId[];
     idRowsLookup: GridRowsLookup;
+    idToIdLookup: Record<string, GridRowId>;
 }
 export declare type GridRowInternalCacheValue = Omit<GridRowTreeCreationParams, 'previousTree'>;
-export interface GridRowsInternalCacheState {
+export interface GridRowsInternalCache {
     value: GridRowInternalCacheValue;
     /**
      * The rows as they were the last time all the rows have been updated at once
@@ -25,12 +26,11 @@ export interface GridRowsInternalCacheState {
      */
     rowsBeforePartialUpdates: GridRowsProp;
 }
-export interface GridRowsInternalCache {
-    state: GridRowsInternalCacheState;
-    timeout: NodeJS.Timeout | null;
-    lastUpdateMs: number;
-}
 export interface GridRowsState extends GridRowTreeCreationValue {
+    /**
+     * Matches the value of the `loading` prop.
+     */
+    loading?: boolean;
     /**
      * Amount of rows before applying the filtering.
      * It also counts the expanded and collapsed children rows.

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -1,4 +1,4 @@
-import { GridRowId, GridRowModel } from '../../../models';
+import { GridRowId, GridRowModel, GridRowTreeConfig } from '../../../models';
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
@@ -6,3 +6,4 @@ import { GridRowId, GridRowModel } from '../../../models';
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
+export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];

package/hooks/features/rows/gridRowsUtils.js

@@ -8,4 +8,28 @@ export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was p
   if (id == null) {
     throw new Error(['MUI: 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'));
   }
-}
+}
+export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+  var _tree$parentId;
+
+  const children = (_tree$parentId = tree[parentId]) == null ? void 0 : _tree$parentId.children;
+
+  if (children == null) {
+    return [];
+  }
+
+  const validDescendants = [];
+
+  for (let i = 0; i < children.length; i += 1) {
+    const child = children[i];
+    const childNode = tree[child];
+
+    if (!skipAutoGeneratedRows || !childNode.isAutoGenerated) {
+      validDescendants.push(child);
+    }
+
+    validDescendants.push(...getTreeNodeDescendants(tree, childNode.id, skipAutoGeneratedRows));
+  }
+
+  return validDescendants;
+};

package/hooks/features/rows/useGridRows.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'rows' | 'rowCount' | 'getRowId'>>;
-export declare const useGridRows: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'rowCount' | 'throttleRowsMs' | 'signature' | 'pagination' | 'paginationMode'>) => void;
+export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
+export declare const useGridRows: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'rowCount' | 'throttleRowsMs' | 'signature' | 'pagination' | 'paginationMode' | 'loading'>) => void;

package/hooks/features/rows/useGridRows.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { checkGridRowIdIsValid } from './gridRowsUtils';
+import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
+import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
+import { checkGridRowIdIsValid, getTreeNodeDescendants } from './gridRowsUtils';
 
 function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;
@@ -14,8 +15,8 @@ function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   return id;
 }
 
-const convertGridRowsPropToState = ({
-  prevState,
+const convertRowsPropToState = ({
+  prevCache: prevState,
   rows,
   getRowId
 }) => {
@@ -24,6 +25,7 @@ const convertGridRowsPropToState = ({
   if (rows) {
     value = {
       idRowsLookup: {},
+      idToIdLookup: {},
       ids: []
     };
 
@@ -31,6 +33,7 @@ const convertGridRowsPropToState = ({
       const row = rows[i];
       const id = getGridRowId(row, getRowId);
       value.idRowsLookup[id] = row;
+      value.idToIdLookup[id] = id;
       value.ids.push(id);
     }
   } else {
@@ -43,41 +46,37 @@ const convertGridRowsPropToState = ({
   };
 };
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
   const {
     value
-  } = rowsCache.state;
+  } = rowsCache;
   const rowCount = rowCountProp != null ? rowCountProp : 0;
   const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
     previousTree
   }));
   const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return _extends({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
 };
 
 export const rowsStateInitializer = (state, props, apiRef) => {
-  const rowsCache = {
-    state: convertGridRowsPropToState({
-      rows: props.rows,
-      getRowId: props.getRowId,
-      prevState: {
-        value: {
-          idRowsLookup: {},
-          ids: []
-        },
-        rowsBeforePartialUpdates: []
-      }
-    }),
-    timeout: null,
-    lastUpdateMs: Date.now()
-  };
+  apiRef.current.unstable_caches.rows = convertRowsPropToState({
+    rows: props.rows,
+    getRowId: props.getRowId,
+    prevCache: {
+      value: {
+        idRowsLookup: {},
+        idToIdLookup: {},
+        ids: []
+      },
+      rowsBeforePartialUpdates: []
+    }
+  });
   return _extends({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
-    rowsCache // TODO remove from state
-
+    rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, null, apiRef, props.rowCount, props.loading)
   });
 };
 export const useGridRows = (apiRef, props) => {
@@ -87,9 +86,9 @@ export const useGridRows = (apiRef, props) => {
   }
 
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
-
   const currentPage = useGridVisibleRows(apiRef, props);
+  const lastUpdateMs = React.useRef(Date.now());
+  const timeout = React.useRef(null);
   const getRow = React.useCallback(id => {
     var _ref;
 
@@ -101,50 +100,50 @@ export const useGridRows = (apiRef, props) => {
     acc[id] = index;
     return acc;
   }, {}), [currentPage.rows]);
-  const throttledRowsChange = React.useCallback((newState, throttle) => {
+  const throttledRowsChange = React.useCallback((newCache, throttle) => {
     const run = () => {
-      rowsCache.current.timeout = null;
-      rowsCache.current.lastUpdateMs = Date.now();
+      timeout.current = null;
+      lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => _extends({}, state, {
-        rows: getRowsStateFromCache(rowsCache.current, gridRowTreeSelector(apiRef), apiRef, props.rowCount)
+        rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, gridRowTreeSelector(apiRef), apiRef, props.rowCount, props.loading)
       }));
-      apiRef.current.publishEvent(GridEvents.rowsSet);
+      apiRef.current.publishEvent('rowsSet');
       apiRef.current.forceUpdate();
     };
 
-    if (rowsCache.current.timeout) {
-      clearTimeout(rowsCache.current.timeout);
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+      timeout.current = null;
     }
 
-    rowsCache.current.state = newState;
-    rowsCache.current.timeout = null;
+    apiRef.current.unstable_caches.rows = newCache;
 
     if (!throttle) {
       run();
       return;
     }
 
-    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
 
     if (throttleRemainingTimeMs > 0) {
-      rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+      timeout.current = setTimeout(run, throttleRemainingTimeMs);
       return;
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
   /**
    * API METHODS
    */
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows,
-      prevState: rowsCache.current.state,
+      prevCache: apiRef.current.unstable_caches.rows,
       getRowId: props.getRowId
     }), true);
-  }, [logger, props.getRowId, throttledRowsChange]);
+  }, [apiRef, logger, props.getRowId, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -164,13 +163,15 @@ export const useGridRows = (apiRef, props) => {
     });
     const deletedRowIds = [];
     const newStateValue = {
-      idRowsLookup: _extends({}, rowsCache.current.state.value.idRowsLookup),
-      ids: [...rowsCache.current.state.value.ids]
+      idRowsLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idRowsLookup),
+      idToIdLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idToIdLookup),
+      ids: [...apiRef.current.unstable_caches.rows.value.ids]
     };
     uniqUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newStateValue.idRowsLookup[id];
+        delete newStateValue.idToIdLookup[id];
         deletedRowIds.push(id);
         return;
       }
@@ -179,6 +180,7 @@ export const useGridRows = (apiRef, props) => {
 
       if (!oldRow) {
         newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.idToIdLookup[id] = id;
         newStateValue.ids.push(id);
         return;
       }
@@ -190,12 +192,12 @@ export const useGridRows = (apiRef, props) => {
       newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
     }
 
-    const state = _extends({}, rowsCache.current.state, {
+    const state = _extends({}, apiRef.current.unstable_caches.rows, {
       value: newStateValue
     });
 
     throttledRowsChange(state, true);
-  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   const getRowModels = React.useCallback(() => {
     const allRows = gridRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
@@ -225,23 +227,82 @@ export const useGridRows = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
+    apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
   const getRowNode = React.useCallback(id => {
     var _gridRowTreeSelector$;
 
     return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  const getRowGroupChildren = React.useCallback(({
+    skipAutoGeneratedRows = true,
+    groupId,
+    applySorting,
+    applyFiltering
+  }) => {
+    const tree = gridRowTreeSelector(apiRef);
+    let children;
+
+    if (applySorting) {
+      const groupNode = tree[groupId];
+
+      if (!groupNode) {
+        return [];
+      }
+
+      const sortedRowIds = gridSortedRowIdsSelector(apiRef);
+      children = [];
+      const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+
+      for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
+        const id = sortedRowIds[index];
+        const node = tree[id];
+
+        if (!skipAutoGeneratedRows || !node.isAutoGenerated) {
+          children.push(id);
+        }
+      }
+    } else {
+      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows);
+    }
+
+    if (applyFiltering) {
+      const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+      children = children.filter(childId => filteredRowsLookup[childId] !== false);
+    }
+
+    return children;
+  }, [apiRef]);
+  const setRowIndex = React.useCallback((rowId, targetIndex) => {
+    const allRows = gridRowIdsSelector(apiRef);
+    const oldIndex = allRows.findIndex(row => row === rowId);
+
+    if (oldIndex === -1 || oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
+    const updatedRows = [...allRows];
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   const rowApi = {
     getRow,
     getRowModels,
     getRowsCount,
     getAllRowIds,
     setRows,
+    setRowIndex,
     updateRows,
     setRowChildrenExpansion,
     getRowNode,
-    getRowIndexRelativeToVisibleRows
+    getRowIndexRelativeToVisibleRows,
+    getRowGroupChildren
   };
   /**
    * EVENTS
@@ -251,7 +312,7 @@ export const useGridRows = (apiRef, props) => {
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
     let rows;
 
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       // The `props.rows` has not changed since the last row grouping
       // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
       rows = undefined;
@@ -262,12 +323,12 @@ export const useGridRows = (apiRef, props) => {
       rows = props.rows;
     }
 
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      prevCache: apiRef.current.unstable_caches.rows
     }), false);
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  }, [logger, apiRef, props.rows, props.getRowId, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -280,8 +341,8 @@ export const useGridRows = (apiRef, props) => {
       groupRows();
     }
   }, [apiRef, groupRows]);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
-  useGridApiEventHandler(apiRef, GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
   /**
    * EFFECTS
@@ -289,9 +350,8 @@ export const useGridRows = (apiRef, props) => {
 
   React.useEffect(() => {
     return () => {
-      if (rowsCache.current.timeout !== null) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        clearTimeout(rowsCache.current.timeout);
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
       }
     };
   }, []); // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
@@ -302,18 +362,18 @@ export const useGridRows = (apiRef, props) => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `GridEvents.rowGroupsPreProcessingChange` listener)
+    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
 
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       return;
     }
 
     logger.debug(`Updating all rows, new length ${props.rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows: props.rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      prevCache: apiRef.current.unstable_caches.rows
     }), false);
-  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange, apiRef]);
 };

package/hooks/features/rows/useGridRowsMeta.js

@@ -7,8 +7,7 @@ import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../dens
 import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
-import { GridEvents } from '../../../models/events/gridEvents';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsMetaStateInitializer = state => _extends({}, state, {
   rowsMeta: {
     currentPageTotalHeight: 0,
@@ -65,10 +64,11 @@ export const useGridRowsMeta = (apiRef, props) => {
         if (getRowSpacing) {
           var _spacing$top, _spacing$bottom;
 
-          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
           const spacing = getRowSpacing(_extends({}, row, {
-            isFirstVisible: index === 0,
-            isLastVisible: index === currentPage.rows.length - 1
+            isFirstVisible: indexRelativeToCurrentPage === 0,
+            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+            indexRelativeToCurrentPage
           }));
           initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
@@ -120,14 +120,7 @@ export const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlepipeProcessorRegister = React.useCallback(name => {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
+  useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

package/hooks/features/rows/useGridRowsPreProcessors.js

@@ -3,6 +3,7 @@ import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../c
 const flatRowTreeCreationMethod = ({
   ids,
   idRowsLookup,
+  idToIdLookup,
   previousTree
 }) => {
   const tree = {};
@@ -28,6 +29,7 @@ const flatRowTreeCreationMethod = ({
     tree,
     treeDepth: 1,
     idRowsLookup,
+    idToIdLookup,
     ids
   };
 };

package/hooks/features/scroll/useGridScroll.d.ts

@@ -6,5 +6,7 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridColumns (state) - can be after, async only
  * @requires useGridRows (state) - can be after, async only
  * @requires useGridRowsMeta (state) - can be after, async only
+ * @requires useGridFilter (state)
+ * @requires useGridColumnSpanning (method)
  */
 export declare const useGridScroll: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination'>) => void;

package/hooks/features/scroll/useGridScroll.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPaginationSelector';
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { useGridApiMethod } from '../../utils/useGridApiMethod'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 
 function scrollIntoView(dimensions) {
@@ -14,7 +16,12 @@ function scrollIntoView(dimensions) {
     offsetHeight,
     offsetTop
   } = dimensions;
-  const elementBottom = offsetTop + offsetHeight;
+  const elementBottom = offsetTop + offsetHeight; // 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 (elementBottom - clientHeight > scrollTop) {
     return elementBottom - clientHeight;
@@ -31,6 +38,8 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumns (state) - can be after, async only
  * @requires useGridRows (state) - can be after, async only
  * @requires useGridRowsMeta (state) - can be after, async only
+ * @requires useGridFilter (state)
+ * @requires useGridColumnSpanning (method)
  */
 
 
@@ -38,6 +47,7 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const windowRef = apiRef.current.windowRef;
+  const visibleSortedRows = useGridSelector(apiRef, gridVisibleSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = gridRowCountSelector(apiRef);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
@@ -52,10 +62,27 @@ export const useGridScroll = (apiRef, props) => {
 
     if (params.colIndex != null) {
       const columnPositions = gridColumnPositionsSelector(apiRef);
+      let cellWidth;
+
+      if (typeof params.rowIndex !== 'undefined') {
+        var _visibleSortedRows$pa;
+
+        const rowId = (_visibleSortedRows$pa = visibleSortedRows[params.rowIndex]) == null ? void 0 : _visibleSortedRows$pa.id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
+
+        if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+          cellWidth = cellColSpanInfo.cellProps.width;
+        }
+      }
+
+      if (typeof cellWidth === 'undefined') {
+        cellWidth = visibleColumns[params.colIndex].computedWidth;
+      }
+
       scrollCoordinates.left = scrollIntoView({
         clientHeight: windowRef.current.clientWidth,
         scrollTop: windowRef.current.scrollLeft,
-        offsetHeight: visibleColumns[params.colIndex].computedWidth,
+        offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
@@ -82,7 +109,7 @@ export const useGridScroll = (apiRef, props) => {
     }
 
     return false;
-  }, [logger, apiRef, windowRef, props.pagination]);
+  }, [logger, apiRef, windowRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (windowRef.current && params.left != null && colRef.current) {
       colRef.current.scrollLeft = params.left;

package/hooks/features/selection/useGridSelection.d.ts

@@ -9,4 +9,4 @@ export declare const selectionStateInitializer: GridStateInitializer<Pick<DataGr
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridSelection: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'selectionModel' | 'onSelectionModelChange' | 'disableMultipleSelection' | 'disableSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes'>) => void;
+export declare const useGridSelection: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'selectionModel' | 'onSelectionModelChange' | 'disableMultipleSelection' | 'disableSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes' | 'keepNonExistentRowsSelected'>) => void;