@mui/x-data-grid 8.0.0-alpha.8 → 8.0.0-beta.0

package/modern/hooks/features/rows/useGridRowSpanning.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridColDef } from '../../../models/colDef';
+import type { GridRowId } from '../../../models/gridRows';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { GridStateInitializer } from '../../utils/useGridInitializeState';
+export interface GridRowSpanningState {
+  spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
+  hiddenCells: Record<GridRowId, Record<GridColDef['field'], boolean>>;
+  /**
+   * For each hidden cell, it contains the row index corresponding to the cell that is
+   * the origin of the hidden cell. i.e. the cell which is spanned.
+   * Used by the virtualization to properly keep the spanned cells in view.
+   */
+  hiddenCellOriginMap: Record<number, Record<GridColDef['field'], number>>;
+}
+export type RowRange = {
+  firstRowIndex: number;
+  lastRowIndex: number;
+};
+/**
+ * @requires columnsStateInitializer (method) - should be initialized before
+ * @requires rowsStateInitializer (method) - should be initialized before
+ * @requires filterStateInitializer (method) - should be initialized before
+ */
+export declare const rowSpanningStateInitializer: GridStateInitializer;
+export declare const useGridRowSpanning: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowSpanning" | "pagination" | "paginationMode">) => void;

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

@@ -9,6 +9,8 @@ import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gr
 import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { runIf } from "../../../utils/utils.js";
+import { gridPageSizeSelector } from "../pagination/index.js";
+import { gridDataRowIdsSelector } from "./gridRowsSelector.js";
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -124,6 +126,24 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     processedRange
   };
 };
+const getInitialRangeToProcess = (props, apiRef) => {
+  const rowCount = gridDataRowIdsSelector(apiRef).length;
+  if (props.pagination) {
+    const pageSize = gridPageSizeSelector(apiRef);
+    let paginationLastRowIndex = DEFAULT_ROWS_TO_PROCESS;
+    if (pageSize > 0) {
+      paginationLastRowIndex = pageSize - 1;
+    }
+    return {
+      firstRowIndex: 0,
+      lastRowIndex: Math.min(paginationLastRowIndex, rowCount)
+    };
+  }
+  return {
+    firstRowIndex: 0,
+    lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, rowCount)
+  };
+};
 
 /**
  * @requires columnsStateInitializer (method) - should be initialized before
@@ -146,10 +166,7 @@ export const rowSpanningStateInitializer = (state, props, apiRef) => {
       rowSpanning: EMPTY_STATE
     });
   }
-  const rangeToProcess = {
-    firstRowIndex: 0,
-    lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
-  };
+  const rangeToProcess = getInitialRangeToProcess(props, apiRef);
   const rows = rowIds.map(id => ({
     id,
     model: dataRowIdToModelLookup[id]
@@ -170,10 +187,7 @@ export const rowSpanningStateInitializer = (state, props, apiRef) => {
 };
 export const useGridRowSpanning = (apiRef, props) => {
   const processedRange = useLazyRef(() => {
-    return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
-    } : EMPTY_RANGE;
+    return apiRef.current.state.rowSpanning !== EMPTY_STATE ? getInitialRangeToProcess(props, apiRef) : EMPTY_RANGE;
   });
   const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
     const {

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

@@ -0,0 +1,6 @@
+import { RefObject } from '@mui/x-internals/types';
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'dataSource' | 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
+export declare const useGridRows: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading" | "dataSource">) => void;

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

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from "./gridRowsSelector.js";
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
+import { gridRowIdSelector } from "../../core/gridPropsSelectors.js";
 import { useTimeout } from "../../utils/useTimeout.js";
-import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { GridSignature } from "../../../constants/signature.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
 import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
@@ -13,7 +16,7 @@ import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache,
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
 import { GridStrategyGroup } from "../../core/strategyProcessing/index.js";
 export const rowsStateInitializer = (state, props, apiRef) => {
-  const isDataSourceAvailable = !!props.unstable_dataSource;
+  const isDataSourceAvailable = !!props.dataSource;
   apiRef.current.caches.rows = createRowsInternalCache({
     rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
@@ -40,7 +43,6 @@ export const useGridRows = (apiRef, props) => {
     }
   }
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const currentPage = getVisibleRows(apiRef);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = useTimeout();
@@ -49,7 +51,7 @@ export const useGridRows = (apiRef, props) => {
     if (model) {
       return model;
     }
-    const node = apiRef.current.getRowNode(id);
+    const node = gridRowNodeSelector(apiRef, id);
     if (node && isAutogeneratedRowNode(node)) {
       return {
         [GRID_ID_AUTOGENERATED]: id
@@ -57,22 +59,7 @@ export const useGridRows = (apiRef, props) => {
     }
     return null;
   }, [apiRef]);
-  const getRowIdProp = props.getRowId;
-  const getRowId = React.useCallback(row => {
-    if (GRID_ID_AUTOGENERATED in row) {
-      return row[GRID_ID_AUTOGENERATED];
-    }
-    if (getRowIdProp) {
-      return getRowIdProp(row);
-    }
-    return row.id;
-  }, [getRowIdProp]);
-  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
-    id
-  }, index) => {
-    acc[id] = index;
-    return acc;
-  }, {}), [currentPage.rows]);
+  const getRowId = React.useCallback(row => gridRowIdSelector(apiRef, row), [apiRef]);
   const throttledRowsChange = React.useCallback(({
     cache,
     throttle
@@ -90,7 +77,6 @@ export const useGridRows = (apiRef, props) => {
         })
       }));
       apiRef.current.publishEvent('rowsSet');
-      apiRef.current.forceUpdate();
     };
     timeout.clear();
     apiRef.current.caches.rows = cache;
@@ -171,9 +157,14 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => gridDataRowIdsSelector(apiRef), [apiRef]);
-  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => {
+    const {
+      rowIdToIndexMap
+    } = getVisibleRows(apiRef);
+    return rowIdToIndexMap.get(id);
+  }, [apiRef]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
-    const currentNode = apiRef.current.getRowNode(id);
+    const currentNode = gridRowNodeSelector(apiRef, id);
     if (!currentNode) {
       throw new Error(`MUI X: No row with id #${id} found.`);
     }
@@ -192,10 +183,9 @@ export const useGridRows = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.forceUpdate();
     apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
-  const getRowNode = React.useCallback(id => gridRowTreeSelector(apiRef)[id] ?? null, [apiRef]);
+  const getRowNode = React.useCallback(id => gridRowNodeSelector(apiRef, id) ?? null, [apiRef]);
   const getRowGroupChildren = React.useCallback(({
     skipAutoGeneratedRows = true,
     groupId,
@@ -223,12 +213,12 @@ export const useGridRows = (apiRef, props) => {
     }
     if (applyFiltering) {
       const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
-      children = children.filter(childId => filteredRowsLookup[childId] !== false);
+      children = isObjectEmpty(filteredRowsLookup) ? children : children.filter(childId => filteredRowsLookup[childId] !== false);
     }
     return children;
   }, [apiRef]);
   const setRowIndex = React.useCallback((rowId, targetIndex) => {
-    const node = apiRef.current.getRowNode(rowId);
+    const node = gridRowNodeSelector(apiRef, rowId);
     if (!node) {
       throw new Error(`MUI X: No row with id #${rowId} found.`);
     }
@@ -239,7 +229,7 @@ export const useGridRows = (apiRef, props) => {
       throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
-      const group = gridRowTreeSelector(state, undefined, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
+      const group = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -366,16 +356,16 @@ export const useGridRows = (apiRef, props) => {
       throttle: false
     });
   }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
-  const previousDataSource = useLazyRef(() => props.unstable_dataSource);
+  const previousDataSource = useLazyRef(() => props.dataSource);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
-    if (props.unstable_dataSource && props.unstable_dataSource !== previousDataSource.current) {
-      previousDataSource.current = props.unstable_dataSource;
+    if (props.dataSource && props.dataSource !== previousDataSource.current) {
+      previousDataSource.current = props.dataSource;
       return;
     }
     if (methodName === 'rowTreeCreation') {
       groupRows();
     }
-  }, [groupRows, previousDataSource, props.unstable_dataSource]);
+  }, [groupRows, previousDataSource, props.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.
@@ -392,10 +382,10 @@ export const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: gridRowTreeSelector(state, undefined, apiRef.current.instanceId),
-        treeDepths: gridRowTreeDepthsSelector(state, undefined, apiRef.current.instanceId),
-        dataRowIds: gridDataRowIdsSelector(state, undefined, apiRef.current.instanceId),
-        dataRowIdToModelLookup: gridRowsLookupSelector(state, undefined, apiRef.current.instanceId)
+        tree: gridRowTreeSelector(apiRef),
+        treeDepths: gridRowTreeDepthsSelector(apiRef),
+        dataRowIds: gridDataRowIdsSelector(apiRef),
+        dataRowIdToModelLookup: gridRowsLookupSelector(apiRef)
       });
       return _extends({}, state, {
         rows: _extends({}, state.rows, response, {
@@ -407,7 +397,6 @@ export const useGridRows = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('rowsSet');
-    apiRef.current.forceUpdate();
   }, [apiRef, props.rowCount]);
   useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   useGridApiMethod(apiRef, rowApi, 'public');
@@ -427,7 +416,7 @@ export const useGridRows = (apiRef, props) => {
       isRowCountPropUpdated = true;
       lastRowCount.current = props.rowCount;
     }
-    const currentRows = props.unstable_dataSource ? Array.from(apiRef.current.getRowModels().values()) : props.rows;
+    const currentRows = props.dataSource ? Array.from(apiRef.current.getRowModels().values()) : props.rows;
     const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
     const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
     const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
@@ -442,7 +431,6 @@ export const useGridRows = (apiRef, props) => {
           })
         }));
         apiRef.current.caches.rows.loadingPropBeforePartialUpdates = props.loading;
-        apiRef.current.forceUpdate();
       }
       if (!isNewRowCountAlreadyInState) {
         apiRef.current.setState(state => _extends({}, state, {
@@ -452,7 +440,6 @@ export const useGridRows = (apiRef, props) => {
           })
         }));
         apiRef.current.caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
-        apiRef.current.forceUpdate();
       }
       if (!isRowCountPropUpdated) {
         return;
@@ -468,5 +455,5 @@ export const useGridRows = (apiRef, props) => {
       }),
       throttle: false
     });
-  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.unstable_dataSource, logger, throttledRowsChange, apiRef]);
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.dataSource, logger, throttledRowsChange, apiRef]);
 };

package/modern/hooks/features/rows/useGridRowsMeta.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const rowsMetaStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridPageSize (method)
+ * @requires useGridPage (method)
+ */
+export declare const useGridRowsMeta: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "getRowHeight" | "getEstimatedRowHeight" | "getRowSpacing" | "pagination" | "paginationMode" | "rowHeight">) => void;

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

@@ -1,29 +1,37 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { ResizeObserver } from "../../../utils/ResizeObserver.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { eslintUseValue } from "../../../utils/utils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { gridDensityFactorSelector } from "../density/densitySelector.js";
-import { gridFilterModelSelector } from "../filter/gridFilterSelector.js";
 import { gridPaginationSelector } from "../pagination/gridPaginationSelector.js";
-import { gridSortModelSelector } from "../sorting/gridSortingSelector.js";
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
-import { gridPinnedRowsSelector } from "./gridRowsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
+import { gridPinnedRowsSelector, gridRowCountSelector } from "./gridRowsSelector.js";
+import { gridDimensionsSelector, gridRowHeightSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { getValidRowHeight, getRowHeightWarning } from "./gridRowsUtils.js";
+import { gridFocusedVirtualCellSelector } from "../virtualization/gridFocusedVirtualCellSelector.js";
 /* eslint-disable no-underscore-dangle */
 
 export const rowsMetaStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowsMeta = {
     heights: new Map()
   };
+  const baseRowHeight = gridRowHeightSelector(apiRef);
+  const dataRowCount = gridRowCountSelector(apiRef);
+  const pagination = gridPaginationSelector(apiRef);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
   return _extends({}, state, {
     rowsMeta: {
-      currentPageTotalHeight: 0,
-      positions: []
+      currentPageTotalHeight: rowCount * baseRowHeight,
+      positions: Array.from({
+        length: rowCount
+      }, (_, i) => i * baseRowHeight),
+      pinnedTopRowsTotalHeight: 0,
+      pinnedBottomRowsTotalHeight: 0
     }
   });
 };
@@ -43,12 +51,9 @@ export const useGridRowsMeta = (apiRef, props) => {
   const hasRowWithAutoHeight = React.useRef(false);
   const isHeightMetaValid = React.useRef(false);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const paginationState = useGridSelector(apiRef, gridPaginationSelector);
-  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const rowHeight = useGridSelector(apiRef, () => gridDimensionsSelector(apiRef.current.state).rowHeight);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
   const getRowHeightEntry = rowId => {
     let entry = heightCache.get(rowId);
     if (entry === undefined) {
@@ -67,7 +72,7 @@ export const useGridRowsMeta = (apiRef, props) => {
   const processHeightEntry = React.useCallback(row => {
     // HACK: rowHeight trails behind the most up-to-date value just enough to
     // mess the initial rowsMeta hydration :/
-    const baseRowHeight = gridDimensionsSelector(apiRef.current.state).rowHeight;
+    const baseRowHeight = gridDimensionsSelector(apiRef).rowHeight;
     eslintUseValue(rowHeight);
     const entry = apiRef.current.getRowHeightEntry(row.id);
     if (!getRowHeightProp) {
@@ -110,11 +115,17 @@ export const useGridRowsMeta = (apiRef, props) => {
     }
     apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row);
     return entry;
-  }, [apiRef, currentPage.rows.length, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
+  }, [apiRef, currentPage.rows, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    pinnedRows.top.forEach(processHeightEntry);
-    pinnedRows.bottom.forEach(processHeightEntry);
+    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
+    const pinnedBottomRowsTotalHeight = pinnedRows.bottom.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
@@ -126,14 +137,21 @@ export const useGridRowsMeta = (apiRef, props) => {
       // No row has height=auto, so all rows are already measured
       lastMeasuredRowIndex.current = Infinity;
     }
+    const didHeightsChange = pinnedTopRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedTopRowsTotalHeight || pinnedBottomRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedBottomRowsTotalHeight || currentPageTotalHeight !== apiRef.current.state.rowsMeta.currentPageTotalHeight;
+    const rowsMeta = {
+      currentPageTotalHeight,
+      positions,
+      pinnedTopRowsTotalHeight,
+      pinnedBottomRowsTotalHeight
+    };
     apiRef.current.setState(state => {
       return _extends({}, state, {
-        rowsMeta: {
-          currentPageTotalHeight,
-          positions
-        }
+        rowsMeta
       });
     });
+    if (didHeightsChange) {
+      apiRef.current.updateDimensions();
+    }
     isHeightMetaValid.current = true;
   }, [apiRef, pinnedRows, currentPage.rows, processHeightEntry]);
   const getRowHeight = rowId => {
@@ -166,6 +184,13 @@ export const useGridRowsMeta = (apiRef, props) => {
       const entry = entries[i];
       const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
       const rowId = entry.target.__mui_id;
+      const focusedVirtualRowId = gridFocusedVirtualCellSelector(apiRef)?.id;
+      if (focusedVirtualRowId === rowId && height === 0) {
+        // Focused virtual row has 0 height.
+        // We don't want to store it to avoid scroll jumping.
+        // https://github.com/mui/mui-x/issues/14726
+        return;
+      }
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     }
     if (!isHeightMetaValid.current) {
@@ -181,9 +206,9 @@ export const useGridRowsMeta = (apiRef, props) => {
 
   // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     hydrateRowsMeta();
-  }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
+  }, [hydrateRowsMeta]);
   const rowsMetaApi = {
     unstable_getRowHeight: getRowHeight,
     unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,

package/modern/hooks/features/rows/useGridRowsPreProcessors.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+export declare const useGridRowsPreProcessors: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

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

@@ -0,0 +1,12 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+/**
+ * @requires useGridPagination (state) - can be after, async only
+ * @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: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "unstable_listView">) => void;

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

@@ -50,9 +50,9 @@ export const useGridScroll = (apiRef, props) => {
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
-    const dimensions = gridDimensionsSelector(apiRef.current.state);
+    const dimensions = gridDimensionsSelector(apiRef);
     const totalRowCount = gridRowCountSelector(apiRef);
-    const visibleColumns = props.unstable_listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = props.unstable_listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -81,7 +81,7 @@ export const useGridScroll = (apiRef, props) => {
       });
     }
     if (params.rowIndex !== undefined) {
-      const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+      const rowsMeta = gridRowsMetaSelector(apiRef);
       const page = gridPageSelector(apiRef);
       const pageSize = gridPageSizeSelector(apiRef);
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;

package/modern/hooks/features/sorting/gridSortingSelector.d.ts

@@ -0,0 +1,32 @@
+import { GridSortDirection, GridSortModel } from "../../../models/gridSortModel.js";
+import type { GridValidRowModel, GridRowEntry, GridRowId } from '../../../models/gridRows';
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * Get the id of the rows after the sorting process.
+ * @category Sorting
+ */
+export declare const gridSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridSortingState").GridSortingState, GridRowId[]>;
+/**
+ * Get the id and the model of the rows after the sorting process.
+ * @category Sorting
+ */
+export declare const gridSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig, GridRowEntry<GridValidRowModel>[]>;
+/**
+ * Get the current sorting model.
+ * @category Sorting
+ */
+export declare const gridSortModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridSortingState").GridSortingState, GridSortModel>;
+export type GridSortColumnLookup = Record<string, {
+  sortDirection: GridSortDirection;
+  sortIndex?: number;
+}>;
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export declare const gridSortColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridSortModel, GridSortColumnLookup>;
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export declare const gridSortedRowIndexLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridRowId[], Record<GridRowId, number>>;

package/modern/hooks/features/sorting/gridSortingSelector.js

@@ -1,11 +1,11 @@
-import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { createRootSelector, createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridRowTreeSelector, gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { GRID_ID_AUTOGENERATED, isAutogeneratedRowNode } from "../rows/gridRowsUtils.js";
 /**
  * @category Sorting
  * @ignore - do not document.
  */
-const gridSortingStateSelector = state => state.sorting;
+const gridSortingStateSelector = createRootSelector(state => state.sorting);
 
 /**
  * Get the id of the rows after the sorting process.
@@ -24,15 +24,16 @@ export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRow
       id,
       model
     });
-  }
-  const rowNode = rowTree[id];
-  if (rowNode && isAutogeneratedRowNode(rowNode)) {
-    acc.push({
-      id,
-      model: {
-        [GRID_ID_AUTOGENERATED]: id
-      }
-    });
+  } else {
+    const rowNode = rowTree[id];
+    if (rowNode && isAutogeneratedRowNode(rowNode)) {
+      acc.push({
+        id,
+        model: {
+          [GRID_ID_AUTOGENERATED]: id
+        }
+      });
+    }
   }
   return acc;
 }, []));

package/modern/hooks/features/sorting/gridSortingState.d.ts

@@ -0,0 +1,14 @@
+import { GridRowId, GridTreeNode } from "../../../models/gridRows.js";
+import { GridSortModel } from "../../../models/gridSortModel.js";
+export interface GridSortingState {
+  sortedRows: GridRowId[];
+  sortModel: GridSortModel;
+}
+export interface GridSortingInitialState {
+  sortModel?: GridSortModel;
+}
+export type GridSortingModelApplier = (rowList: GridTreeNode[]) => GridRowId[];
+export interface GridSortingMethodParams {
+  sortRowList: GridSortingModelApplier | null;
+}
+export type GridSortingMethodValue = GridRowId[];

package/modern/hooks/features/sorting/gridSortingUtils.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridSortingModelApplier } from "./gridSortingState.js";
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridComparatorFn, GridSortDirection, GridSortModel } from "../../../models/gridSortModel.js";
+export declare const sanitizeSortModel: (model: GridSortModel, disableMultipleColumnsSorting: boolean) => GridSortModel;
+export declare const mergeStateWithSortModel: (sortModel: GridSortModel, disableMultipleColumnsSorting: boolean) => (state: GridStateCommunity) => GridStateCommunity;
+/**
+ * Generates a method to easily sort a list of rows according to the current sort model.
+ * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
+ */
+export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
+export declare const getNextGridSortDirection: (sortingOrder: readonly GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
+export declare const gridStringOrNumberComparator: GridComparatorFn;
+export declare const gridNumberComparator: GridComparatorFn;
+export declare const gridDateComparator: GridComparatorFn;

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { warnOnce } from '@mui/x-internals/warning';
+import { gridRowNodeSelector } from "../rows/gridRowsSelector.js";
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {
@@ -19,7 +20,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -39,7 +40,7 @@ const parseSortItem = (sortItem, apiRef) => {
   const getSortCellParams = id => ({
     id,
     field: column.field,
-    rowNode: apiRef.current.getRowNode(id),
+    rowNode: gridRowNodeSelector(apiRef, id),
     value: apiRef.current.getCellValue(id, column.field),
     api: apiRef.current
   });
@@ -72,7 +73,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 export const buildAggregatedSortingApplier = (sortModel, apiRef) => {

package/modern/hooks/features/sorting/index.d.ts

@@ -0,0 +1,4 @@
+export { gridSortedRowIdsSelector, gridSortedRowEntriesSelector, gridSortModelSelector, gridSortColumnLookupSelector } from "./gridSortingSelector.js";
+export type { GridSortColumnLookup } from './gridSortingSelector';
+export type { GridSortingState, GridSortingInitialState } from './gridSortingState';
+export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from "./gridSortingUtils.js";

package/modern/hooks/features/sorting/useGridSorting.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'sortModel' | 'initialState' | 'disableMultipleColumnsSorting'>>;
+/**
+ * @requires useGridRows (event)
+ * @requires useGridColumns (event)
+ */
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting">) => void;