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

package/hooks/features/rows/useGridRowSpanning.js

@@ -3,11 +3,14 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
-import { useGridSelector } from "../../utils/useGridSelector.js";
-import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
 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: {},
@@ -35,7 +38,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     if (skippedFields.has(colDef.field)) {
       return;
     }
-    for (let index = rangeToProcess.firstRowIndex; index <= rangeToProcess.lastRowIndex; index += 1) {
+    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
       const row = visibleRows[index];
       if (hiddenCells[row.id]?.[colDef.field]) {
         continue;
@@ -52,8 +55,8 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       const backwardsHiddenCells = [];
       if (index === rangeToProcess.firstRowIndex) {
         let prevIndex = index - 1;
-        const prevRowEntry = visibleRows[prevIndex];
-        while (prevIndex >= range.firstRowIndex && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
+        let prevRowEntry = visibleRows[prevIndex];
+        while (prevIndex >= range.firstRowIndex && prevRowEntry && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
           const currentRow = visibleRows[prevIndex + 1];
           if (hiddenCells[currentRow.id]) {
             hiddenCells[currentRow.id][colDef.field] = true;
@@ -67,6 +70,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
           spannedRowId = prevRowEntry.id;
           spannedRowIndex = prevIndex;
           prevIndex -= 1;
+          prevRowEntry = visibleRows[prevIndex];
         }
       }
       backwardsHiddenCells.forEach(hiddenCellIndex => {
@@ -122,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
@@ -129,73 +151,52 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 export const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.unstable_rowSpanning) {
-    const rowIds = state.rows.dataRowIds || [];
-    const orderedFields = state.columns.orderedFields || [];
-    const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
-    const columnsLookup = state.columns.lookup;
-    const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
-    if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
-      return _extends({}, state, {
-        rowSpanning: EMPTY_STATE
-      });
-    }
-    const rangeToProcess = {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 0))
-    };
-    const rows = rowIds.map(id => ({
-      id,
-      model: dataRowIdToModelLookup[id]
-    }));
-    const colDefs = orderedFields.map(field => columnsLookup[field]);
-    const {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
+  if (!props.rowSpanning) {
     return _extends({}, state, {
-      rowSpanning: {
-        spannedCells,
-        hiddenCells,
-        hiddenCellOriginMap
-      }
+      rowSpanning: EMPTY_STATE
     });
   }
+  const rowIds = state.rows.dataRowIds || [];
+  const orderedFields = state.columns.orderedFields || [];
+  const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
+  const columnsLookup = state.columns.lookup;
+  const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
+  if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
+    return _extends({}, state, {
+      rowSpanning: EMPTY_STATE
+    });
+  }
+  const rangeToProcess = getInitialRangeToProcess(props, apiRef);
+  const rows = rowIds.map(id => ({
+    id,
+    model: dataRowIdToModelLookup[id]
+  }));
+  const colDefs = orderedFields.map(field => columnsLookup[field]);
+  const {
+    spannedCells,
+    hiddenCells,
+    hiddenCellOriginMap
+  } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
   return _extends({}, state, {
-    rowSpanning: EMPTY_STATE
+    rowSpanning: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    }
   });
 };
 export const useGridRowSpanning = (apiRef, props) => {
-  const {
-    range,
-    rows: visibleRows
-  } = useGridVisibleRows(apiRef, props);
-  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
-  const colDefs = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const processedRange = useLazyRef(() => {
-    return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(apiRef.current.state.rows.dataRowIds.length - 1, 0))
-    } : EMPTY_RANGE;
+    return apiRef.current.state.rowSpanning !== EMPTY_STATE ? getInitialRangeToProcess(props, apiRef) : EMPTY_RANGE;
   });
-  const lastRange = React.useRef(EMPTY_RANGE);
-  const updateRowSpanningState = React.useCallback(
-  // A reset needs to occur when:
-  // - The `unstable_rowSpanning` prop is updated (feature flag)
-  // - The filtering is applied
-  // - The sorting is applied
-  // - The `paginationModel` is updated
-  // - The rows are updated
-  (resetState = true) => {
-    if (!props.unstable_rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => _extends({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
-      }
-      return;
-    }
+  const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
+    const {
+      range,
+      rows: visibleRows
+    } = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
     if (range === null || !isRowContextInitialized(renderContext)) {
       return;
     }
@@ -204,11 +205,12 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;
     }
+    const colDefs = gridVisibleColumnDefinitionsSelector(apiRef);
     const {
       spannedCells,
       hiddenCells,
@@ -221,7 +223,8 @@ export const useGridRowSpanning = (apiRef, props) => {
     const currentSpannedCellsCount = Object.keys(apiRef.current.state.rowSpanning.spannedCells).length;
     const currentHiddenCellsCount = Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length;
     const shouldUpdateState = resetState || newSpannedCellsCount !== currentSpannedCellsCount || newHiddenCellsCount !== currentHiddenCellsCount;
-    if (!shouldUpdateState) {
+    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
+    if (!shouldUpdateState || hasNoSpannedCells) {
       return;
     }
     apiRef.current.setState(state => {
@@ -233,27 +236,35 @@ export const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
-  const prevRenderContext = React.useRef(renderContext);
-  const isFirstRender = React.useRef(true);
-  const shouldResetState = React.useRef(false);
-  React.useEffect(() => {
-    const firstRender = isFirstRender.current;
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-    if (range && lastRange.current && isRowRangeUpdated(range, lastRange.current)) {
-      lastRange.current = range;
-      shouldResetState.current = true;
+  }, [apiRef, processedRange, props.pagination, props.paginationMode]);
+
+  // Reset events trigger a full re-computation of the row spanning state:
+  // - The `unstable_rowSpanning` prop is updated (feature flag)
+  // - The filtering is applied
+  // - The sorting is applied
+  // - The `paginationModel` is updated
+  // - The rows are updated
+  const resetRowSpanningState = React.useCallback(() => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    if (!isRowContextInitialized(renderContext)) {
+      return;
     }
-    if (!firstRender && prevRenderContext.current !== renderContext) {
-      if (isRowRangeUpdated(prevRenderContext.current, renderContext)) {
-        updateRowSpanningState(shouldResetState.current);
-        shouldResetState.current = false;
+    updateRowSpanningState(renderContext, true);
+  }, [apiRef, updateRowSpanningState]);
+  useGridApiEventHandler(apiRef, 'renderedRowsIntervalChange', runIf(props.rowSpanning, updateRowSpanningState));
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridApiEventHandler(apiRef, 'paginationModelChange', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridApiEventHandler(apiRef, 'columnsChange', runIf(props.rowSpanning, resetRowSpanningState));
+  React.useEffect(() => {
+    if (!props.rowSpanning) {
+      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rowSpanning: EMPTY_STATE
+        }));
       }
-      prevRenderContext.current = renderContext;
-      return;
+    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
+      resetRowSpanningState();
     }
-    updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [apiRef, resetRowSpanningState, props.rowSpanning]);
 };

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

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

package/hooks/features/rows/useGridRows.js

@@ -3,14 +3,15 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from "./gridRowsSelector.js";
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from "./gridRowsSelector.js";
 import { useTimeout } from "../../utils/useTimeout.js";
 import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
 import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
 import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutogeneratedRowNode, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from "./gridRowsUtils.js";
 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;
   apiRef.current.caches.rows = createRowsInternalCache({
@@ -39,7 +40,6 @@ export const useGridRows = (apiRef, props) => {
     }
   }
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const currentPage = useGridVisibleRows(apiRef, props);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = useTimeout();
@@ -66,12 +66,6 @@ export const useGridRows = (apiRef, props) => {
     }
     return row.id;
   }, [getRowIdProp]);
-  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
-    id
-  }, index) => {
-    acc[id] = index;
-    return acc;
-  }, {}), [currentPage.rows]);
   const throttledRowsChange = React.useCallback(({
     cache,
     throttle
@@ -170,7 +164,12 @@ 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);
     if (!currentNode) {
@@ -238,7 +237,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, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
+      const group = gridRowTreeSelector(state, undefined, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -272,7 +271,6 @@ export const useGridRows = (apiRef, props) => {
     }
     const tree = _extends({}, gridRowTreeSelector(apiRef));
     const dataRowIdToModelLookup = _extends({}, gridRowsLookupSelector(apiRef));
-    const dataRowIdToIdLookup = _extends({}, gridRowsDataRowIdToIdLookupSelector(apiRef));
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const seenIds = new Set();
@@ -282,7 +280,6 @@ export const useGridRows = (apiRef, props) => {
       const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
       if (!seenIds.has(removedRowId)) {
         delete dataRowIdToModelLookup[removedRowId];
-        delete dataRowIdToIdLookup[removedRowId];
         delete tree[removedRowId];
       }
       const rowTreeNodeConfig = {
@@ -293,7 +290,6 @@ export const useGridRows = (apiRef, props) => {
         groupingKey: null
       };
       dataRowIdToModelLookup[rowId] = rowModel;
-      dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
       seenIds.add(rowId);
     }
@@ -304,17 +300,17 @@ export const useGridRows = (apiRef, props) => {
     // Removes potential remaining skeleton rows from the dataRowIds.
     const dataRowIds = rootGroupChildren.filter(childId => tree[childId]?.type === 'leaf');
     apiRef.current.caches.rows.dataRowIdToModelLookup = dataRowIdToModelLookup;
-    apiRef.current.caches.rows.dataRowIdToIdLookup = dataRowIdToIdLookup;
     apiRef.current.setState(state => _extends({}, state, {
       rows: _extends({}, state.rows, {
+        loading: props.loading,
+        totalRowCount: Math.max(props.rowCount || 0, rootGroupChildren.length),
         dataRowIdToModelLookup,
-        dataRowIdToIdLookup,
         dataRowIds,
         tree
       })
     }));
     apiRef.current.publishEvent('rowsSet');
-  }, [apiRef, props.signature, props.getRowId]);
+  }, [apiRef, props.signature, props.getRowId, props.loading, props.rowCount]);
   const rowApi = {
     getRow,
     setLoading,
@@ -381,7 +377,7 @@ export const useGridRows = (apiRef, props) => {
   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.
-    if (apiRef.current.getActiveStrategy('rowTree') !== gridRowGroupingNameSelector(apiRef)) {
+    if (apiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) !== gridRowGroupingNameSelector(apiRef)) {
       groupRows();
     }
   }, [apiRef, groupRows]);
@@ -394,11 +390,10 @@ export const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: gridRowTreeSelector(state, apiRef.current.instanceId),
-        treeDepths: gridRowTreeDepthsSelector(state, apiRef.current.instanceId),
-        dataRowIds: gridDataRowIdsSelector(state, apiRef.current.instanceId),
-        dataRowIdToModelLookup: gridRowsLookupSelector(state, apiRef.current.instanceId),
-        dataRowIdToIdLookup: gridRowsDataRowIdToIdLookupSelector(state, apiRef.current.instanceId)
+        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)
       });
       return _extends({}, state, {
         rows: _extends({}, state.rows, response, {
@@ -430,7 +425,8 @@ export const useGridRows = (apiRef, props) => {
       isRowCountPropUpdated = true;
       lastRowCount.current = props.rowCount;
     }
-    const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === props.rows;
+    const currentRows = props.unstable_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;
 
@@ -460,15 +456,15 @@ export const useGridRows = (apiRef, props) => {
         return;
       }
     }
-    logger.debug(`Updating all rows, new length ${props.rows?.length}`);
+    logger.debug(`Updating all rows, new length ${currentRows?.length}`);
     throttledRowsChange({
       cache: createRowsInternalCache({
-        rows: props.rows,
+        rows: currentRows,
         getRowId: props.getRowId,
         loading: props.loading,
         rowCount: props.rowCount
       }),
       throttle: false
     });
-  }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.unstable_dataSource, logger, throttledRowsChange, apiRef]);
 };

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

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

package/hooks/features/rows/useGridRowsMeta.js

@@ -1,6 +1,7 @@
 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";
@@ -110,7 +111,7 @@ 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);
@@ -181,7 +182,7 @@ 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]);
   const rowsMetaApi = {

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

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

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
@@ -9,4 +9,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFilter (state)
  * @requires useGridColumnSpanning (method)
  */
-export declare const useGridScroll: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "unstable_listView">) => void;
+export declare const useGridScroll: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "unstable_listView">) => void;

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

@@ -1,21 +1,21 @@
 import { GridSortDirection, GridSortModel } from '../../../models/gridSortModel';
 import type { GridStateCommunity } from '../../../models/gridStateCommunity';
-import type { GridValidRowModel, GridRowEntry } from '../../../models/gridRows';
+import type { GridValidRowModel, GridRowEntry, GridRowId } from '../../../models/gridRows';
 /**
  * Get the id of the rows after the sorting process.
  * @category Sorting
  */
-export declare const gridSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+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, GridRowEntry<GridValidRowModel>[]>;
+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, GridSortModel>;
+export declare const gridSortModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridSortingState").GridSortingState, GridSortModel>;
 export type GridSortColumnLookup = Record<string, {
     sortDirection: GridSortDirection;
     sortIndex?: number;
@@ -24,4 +24,9 @@ export type GridSortColumnLookup = Record<string, {
  * @category Sorting
  * @ignore - do not document.
  */
-export declare const gridSortColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridSortColumnLookup>;
+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/hooks/features/sorting/gridSortingSelector.js

@@ -55,4 +55,15 @@ export const gridSortColumnLookupSelector = createSelectorMemoized(gridSortModel
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export const gridSortedRowIndexLookupSelector = createSelectorMemoized(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridSortingModelApplier } from './gridSortingState';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
@@ -8,10 +8,10 @@ export declare const mergeStateWithSortModel: (sortModel: GridSortModel, disable
 /**
  * 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.MutableRefObject<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 declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridSortingModelApplier | null;
+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;

package/hooks/features/sorting/gridSortingUtils.js

@@ -19,7 +19,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.MutableRefObject<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) => {
@@ -72,7 +72,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.MutableRefObject<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/hooks/features/sorting/index.d.ts

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

package/hooks/features/sorting/index.js

@@ -1,2 +1,2 @@
-export * from "./gridSortingSelector.js";
+export { gridSortedRowIdsSelector, gridSortedRowEntriesSelector, gridSortModelSelector, gridSortColumnLookupSelector } from "./gridSortingSelector.js";
 export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from "./gridSortingUtils.js";

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

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

package/hooks/features/sorting/useGridSorting.js

@@ -88,7 +88,7 @@ export const useGridSorting = (apiRef, props) => {
           })
         });
       }
-      const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
+      const sortModel = gridSortModelSelector(state, undefined, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList

package/hooks/features/statePersistence/useGridStatePersistence.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridStatePersistence: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridStatePersistence: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/virtualization/gridFocusedVirtualCellSelector.d.ts

@@ -0,0 +1,6 @@
+export declare const gridFocusedVirtualCellSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("../../..").GridCellCoordinates | null, {
+    rowIndex: number;
+    columnIndex: number;
+    id?: import("../../..").GridRowId | undefined;
+    field?: string | undefined;
+} | null>;