@mui/x-data-grid 7.17.0 → 7.19.0

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
+import { useGridSelector } from "../../utils/useGridSelector.js";
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
-import { gridExpandedSortedRowIdsSelector, gridFilterModelSelector } from "../filter/gridFilterSelector.js";
+import { gridExpandedSortedRowIdsSelector, gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
@@ -15,7 +16,7 @@ import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
-import { isMultipleRowSelectionEnabled } from "./utils.js";
+import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -40,11 +41,12 @@ export const rowSelectionStateInitializer = (state, props) => _extends({}, state
  */
 export const useGridRowSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
-  const runIfRowSelectionIsEnabled = callback => (...args) => {
+  const runIfRowSelectionIsEnabled = React.useCallback(callback => (...args) => {
     if (props.rowSelection) {
       callback(...args);
     }
-  };
+  }, [props.rowSelection]);
+  const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
   const propRowSelectionModel = React.useMemo(() => {
     return getSelectionModelPropValue(props.rowSelectionModel, gridRowSelectionStateSelector(apiRef.current.state));
   }, [apiRef, props.rowSelectionModel]);
@@ -63,6 +65,8 @@ export const useGridRowSelection = (apiRef, props) => {
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
   const visibleRows = useGridVisibleRows(apiRef, props);
+  const tree = useGridSelector(apiRef, gridRowTreeSelector);
+  const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
@@ -87,7 +91,7 @@ export const useGridRowSelection = (apiRef, props) => {
     }, !isSelected);
   }, [apiRef]);
 
-  /**
+  /*
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback(model => {
@@ -125,34 +129,80 @@ export const useGridRowSelection = (apiRef, props) => {
     lastRowToggled.current = id;
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
-      apiRef.current.setRowSelectionModel(isSelected ? [id] : []);
+      const newSelection = [];
+      const addRow = rowId => {
+        newSelection.push(rowId);
+      };
+      if (isSelected) {
+        addRow(id);
+        if (applyAutoSelection) {
+          findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+        }
+      }
+      apiRef.current.setRowSelectionModel(newSelection);
     } else {
       logger.debug(`Toggling selection for row ${id}`);
       const selection = gridRowSelectionStateSelector(apiRef.current.state);
-      const newSelection = selection.filter(el => el !== id);
+      const newSelection = new Set(selection);
+      newSelection.delete(id);
+      const addRow = rowId => {
+        newSelection.add(rowId);
+      };
+      const removeRow = rowId => {
+        newSelection.delete(rowId);
+      };
       if (isSelected) {
-        newSelection.push(id);
+        addRow(id);
+        if (applyAutoSelection) {
+          findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+        }
+      } else if (applyAutoSelection) {
+        findRowsToDeselect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
       }
-      const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+      const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(Array.from(newSelection));
       }
     }
-  }, [apiRef, logger, canHaveMultipleSelection]);
+  }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
   const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
     logger.debug(`Setting selection for several rows`);
     const selectableIds = ids.filter(id => apiRef.current.isRowSelectable(id));
     let newSelection;
     if (resetSelection) {
-      newSelection = isSelected ? selectableIds : [];
+      if (isSelected) {
+        newSelection = selectableIds;
+        if (applyAutoSelection) {
+          const addRow = rowId => {
+            newSelection.push(rowId);
+          };
+          selectableIds.forEach(id => {
+            findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+          });
+        }
+      } else {
+        newSelection = [];
+      }
     } else {
       // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
       const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+      const addRow = rowId => {
+        selectionLookup[rowId] = rowId;
+      };
+      const removeRow = rowId => {
+        delete selectionLookup[rowId];
+      };
       selectableIds.forEach(id => {
         if (isSelected) {
           selectionLookup[id] = id;
+          if (applyAutoSelection) {
+            findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+          }
         } else {
-          delete selectionLookup[id];
+          removeRow(id);
+          if (applyAutoSelection) {
+            findRowsToDeselect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
+          }
         }
       });
       newSelection = Object.values(selectionLookup);
@@ -161,7 +211,7 @@ export const useGridRowSelection = (apiRef, props) => {
     if (isSelectionValid) {
       apiRef.current.setRowSelectionModel(newSelection);
     }
-  }, [apiRef, logger, canHaveMultipleSelection]);
+  }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -193,29 +243,52 @@ export const useGridRowSelection = (apiRef, props) => {
   useGridApiMethod(apiRef, selectionPublicApi, 'public');
   useGridApiMethod(apiRef, selectionPrivateApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
 
-  /**
+  /*
    * EVENTS
    */
-  const removeOutdatedSelection = React.useCallback(() => {
-    if (props.keepNonExistentRowsSelected) {
-      return;
-    }
+  const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
-    const rowsLookup = gridRowsLookupSelector(apiRef);
+    const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
 
     // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (!rowsLookup[id]) {
+      if (filteredRowsLookup[id] === false) {
+        if (props.keepNonExistentRowsSelected) {
+          return;
+        }
         delete selectionLookup[id];
         hasChanged = true;
+        return;
+      }
+      if (!props.rowSelectionPropagation?.parents) {
+        return;
+      }
+      const node = tree[id];
+      if (node.type === 'group') {
+        const isAutoGenerated = node.isAutoGenerated;
+        if (isAutoGenerated) {
+          delete selectionLookup[id];
+          hasChanged = true;
+          return;
+        }
+        // Keep previously selected tree data parents selected if all their children are filtered out
+        if (!node.children.every(childId => filteredRowsLookup[childId] === false)) {
+          delete selectionLookup[id];
+          hasChanged = true;
+        }
       }
     });
-    if (hasChanged) {
-      apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
+    if (hasChanged || isNestedData && !sortModelUpdated) {
+      const newSelection = Object.values(selectionLookup);
+      if (isNestedData) {
+        apiRef.current.selectRows(newSelection, true, true);
+      } else {
+        apiRef.current.setRowSelectionModel(newSelection);
+      }
     }
-  }, [apiRef, props.keepNonExistentRowsSelected]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, tree]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 
@@ -276,8 +349,7 @@ export const useGridRowSelection = (apiRef, props) => {
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
-    const filterModel = gridFilterModelSelector(apiRef);
-    apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
+    apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener
@@ -341,14 +413,15 @@ export const useGridRowSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   useGridApiEventHandler(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));
   useGridApiEventHandler(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
   useGridApiEventHandler(apiRef, 'cellMouseDown', runIfRowSelectionIsEnabled(preventSelectionOnShift));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfRowSelectionIsEnabled(handleCellKeyDown));
 
-  /**
+  /*
    * EFFECTS
    */
   React.useEffect(() => {
@@ -386,4 +459,7 @@ export const useGridRowSelection = (apiRef, props) => {
       apiRef.current.setRowSelectionModel([]);
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
+  React.useEffect(() => {
+    runIfRowSelectionIsEnabled(removeOutdatedSelection);
+  }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
 };

package/hooks/features/rowSelection/utils.d.ts

@@ -1,2 +1,12 @@
+import type { GridRowId, GridRowTreeConfig } from '../../../models/gridRows';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { GridRowSelectionPropagation } from '../../../models/gridRowSelectionModel';
+export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
+export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, {
+    isIndeterminate: boolean;
+    isChecked: boolean;
+}>;
 export declare function isMultipleRowSelectionEnabled(props: Pick<DataGridProcessedProps, 'signature' | 'disableMultipleRowSelection' | 'checkboxSelection'>): boolean;
+export declare const findRowsToSelect: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void) => void;
+export declare const findRowsToDeselect: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, deselectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, removeRow: (rowId: GridRowId) => void) => void;

package/hooks/features/rowSelection/utils.js

@@ -1,8 +1,163 @@
 import { GridSignature } from "../../utils/useGridApiEventHandler.js";
+import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
+import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
+import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
+import { selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
+import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { createSelector } from "../../../utils/createSelector.js";
+export const ROW_SELECTION_PROPAGATION_DEFAULT = {
+  parents: false,
+  descendants: false
+};
+function getGridRowGroupSelectableDescendants(apiRef, groupId) {
+  const rowTree = gridRowTreeSelector(apiRef);
+  const sortedRowIds = gridSortedRowIdsSelector(apiRef);
+  const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  const groupNode = rowTree[groupId];
+  if (!groupNode || groupNode.type !== 'group') {
+    return [];
+  }
+  const descendants = [];
+  const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+  for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
+    const id = sortedRowIds[index];
+    if (filteredRowsLookup[id] !== false && apiRef.current.isRowSelectable(id)) {
+      descendants.push(id);
+    }
+  }
+  return descendants;
+}
+
+// TODO v8: Use `createSelectorV8`
+export function getCheckboxPropsSelector(groupId, autoSelectParents) {
+  return createSelector(gridRowTreeSelector, gridSortedRowIdsSelector, gridFilteredRowsLookupSelector, selectedIdsLookupSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionLookup) => {
+    const groupNode = rowTree[groupId];
+    if (!groupNode || groupNode.type !== 'group') {
+      return {
+        isIndeterminate: false,
+        isChecked: rowSelectionLookup[groupId] === groupId
+      };
+    }
+    if (rowSelectionLookup[groupId] === groupId) {
+      return {
+        isIndeterminate: false,
+        isChecked: true
+      };
+    }
+    let selectableDescendentsCount = 0;
+    let selectedDescendentsCount = 0;
+    const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+    for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
+      const id = sortedRowIds[index];
+      if (filteredRowsLookup[id] !== false) {
+        selectableDescendentsCount += 1;
+        if (rowSelectionLookup[id] !== undefined) {
+          selectedDescendentsCount += 1;
+        }
+      }
+    }
+    return {
+      isIndeterminate: selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount || selectedDescendentsCount === selectableDescendentsCount && rowSelectionLookup[groupId] === undefined,
+      isChecked: autoSelectParents ? selectedDescendentsCount > 0 : rowSelectionLookup[groupId] === groupId
+    };
+  });
+}
 export function isMultipleRowSelectionEnabled(props) {
   if (props.signature === GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
     return props.checkboxSelection && props.disableMultipleRowSelection !== true;
   }
   return !props.disableMultipleRowSelection;
-}
+}
+const getRowNodeParents = (tree, id) => {
+  const parents = [];
+  let parent = id;
+  while (parent != null && parent !== GRID_ROOT_GROUP_ID) {
+    const node = tree[parent];
+    if (!node) {
+      return parents;
+    }
+    parents.push(parent);
+    parent = node.parent;
+  }
+  return parents;
+};
+const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
+  const node = tree[id];
+  if (!node) {
+    return [];
+  }
+  const parent = node.parent;
+  if (parent == null) {
+    return [];
+  }
+  const parentNode = tree[parent];
+  return parentNode.children.filter(childId => childId !== id && filteredRows[childId]);
+};
+export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow) => {
+  const filteredRows = gridFilteredRowsLookupSelector(apiRef);
+  const selectedIdsLookup = selectedIdsLookupSelector(apiRef);
+  const selectedDescendants = new Set([]);
+  if (!autoSelectDescendants && !autoSelectParents) {
+    return;
+  }
+  if (autoSelectDescendants) {
+    const rowNode = tree[selectedRow];
+    if (rowNode?.type === 'group') {
+      const descendants = getGridRowGroupSelectableDescendants(apiRef, selectedRow);
+      descendants.forEach(rowId => {
+        addRow(rowId);
+        selectedDescendants.add(rowId);
+      });
+    }
+  }
+  if (autoSelectParents) {
+    const checkAllDescendantsSelected = rowId => {
+      if (selectedIdsLookup[rowId] !== rowId && !selectedDescendants.has(rowId)) {
+        return false;
+      }
+      const node = tree[rowId];
+      if (node?.type !== 'group') {
+        return true;
+      }
+      return node.children.every(checkAllDescendantsSelected);
+    };
+    const traverseParents = rowId => {
+      const siblings = getFilteredRowNodeSiblings(tree, filteredRows, rowId);
+      if (siblings.length === 0 || siblings.every(checkAllDescendantsSelected)) {
+        const rowNode = tree[rowId];
+        const parent = rowNode.parent;
+        if (parent != null && parent !== GRID_ROOT_GROUP_ID && apiRef.current.isRowSelectable(parent)) {
+          addRow(parent);
+          selectedDescendants.add(parent);
+          traverseParents(parent);
+        }
+      }
+    };
+    traverseParents(selectedRow);
+  }
+};
+export const findRowsToDeselect = (apiRef, tree, deselectedRow, autoSelectDescendants, autoSelectParents, removeRow) => {
+  const selectedIdsLookup = selectedIdsLookupSelector(apiRef);
+  if (!autoSelectParents && !autoSelectDescendants) {
+    return;
+  }
+  if (autoSelectParents) {
+    const allParents = getRowNodeParents(tree, deselectedRow);
+    allParents.forEach(parent => {
+      const isSelected = selectedIdsLookup[parent] === parent;
+      if (isSelected) {
+        removeRow(parent);
+      }
+    });
+  }
+  if (autoSelectDescendants) {
+    const rowNode = tree[deselectedRow];
+    if (rowNode?.type === 'group') {
+      const descendants = getGridRowGroupSelectableDescendants(apiRef, deselectedRow);
+      descendants.forEach(descendant => {
+        removeRow(descendant);
+      });
+    }
+  }
+};

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

@@ -0,0 +1,4 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridRowSpanningHiddenCellsSelector: import("../../..").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, Record<string, boolean>>>;
+export declare const gridRowSpanningSpannedCellsSelector: import("../../..").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, Record<string, number>>>;
+export declare const gridRowSpanningHiddenCellsOriginMapSelector: import("../../..").OutputSelector<GridStateCommunity, Record<number, Record<string, number>>>;

package/hooks/features/rows/gridRowSpanningSelectors.js

@@ -0,0 +1,5 @@
+import { createSelector } from "../../../utils/createSelector.js";
+const gridRowSpanningStateSelector = state => state.rowSpanning;
+export const gridRowSpanningHiddenCellsSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCells);
+export const gridRowSpanningSpannedCellsSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.spannedCells);
+export const gridRowSpanningHiddenCellsOriginMapSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCellOriginMap);

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { GridRenderContext } from '../../../models';
+import type { GridValidRowModel } from '../../../models/gridRows';
+import type { GridColDef } from '../../../models/colDef';
+import type { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { RowRange } from './useGridRowSpanning';
+export declare function getUnprocessedRange(testRange: RowRange, processedRange: RowRange): RowRange | null;
+export declare function isRowContextInitialized(renderContext: GridRenderContext): boolean;
+export declare function isRowRangeUpdated(range1: RowRange, range2: RowRange): boolean;
+export declare const getCellValue: (row: GridValidRowModel, colDef: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => any;

package/hooks/features/rows/gridRowSpanningUtils.js

@@ -0,0 +1,42 @@
+export function getUnprocessedRange(testRange, processedRange) {
+  if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
+    return null;
+  }
+  // Overflowing at the end
+  // Example: testRange={ firstRowIndex: 10, lastRowIndex: 20 }, processedRange={ firstRowIndex: 0, lastRowIndex: 15 }
+  // Unprocessed Range={ firstRowIndex: 16, lastRowIndex: 20 }
+  if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex > processedRange.lastRowIndex) {
+    return {
+      firstRowIndex: processedRange.lastRowIndex,
+      lastRowIndex: testRange.lastRowIndex
+    };
+  }
+  // Overflowing at the beginning
+  // Example: testRange={ firstRowIndex: 0, lastRowIndex: 20 }, processedRange={ firstRowIndex: 16, lastRowIndex: 30 }
+  // Unprocessed Range={ firstRowIndex: 0, lastRowIndex: 15 }
+  if (testRange.firstRowIndex < processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
+    return {
+      firstRowIndex: testRange.firstRowIndex,
+      lastRowIndex: processedRange.firstRowIndex - 1
+    };
+  }
+  // TODO: Should return two ranges handle overflowing at both ends ?
+  return testRange;
+}
+export function isRowContextInitialized(renderContext) {
+  return renderContext.firstRowIndex !== 0 || renderContext.lastRowIndex !== 0;
+}
+export function isRowRangeUpdated(range1, range2) {
+  return range1.firstRowIndex !== range2.firstRowIndex || range1.lastRowIndex !== range2.lastRowIndex;
+}
+export const getCellValue = (row, colDef, apiRef) => {
+  if (!row) {
+    return null;
+  }
+  let cellValue = row[colDef.field];
+  const valueGetter = colDef.rowSpanValueGetter ?? colDef.valueGetter;
+  if (valueGetter) {
+    cellValue = valueGetter(cellValue, row, colDef, apiRef);
+  }
+  return cellValue;
+};

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

@@ -1,25 +1,25 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-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("./gridRowsInterfaces").GridRowIdToModelLookup<import("../../..").GridValidRowModel>>;
-export declare const gridRowsDataRowIdToIdLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToIdLookup>;
-export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
-export declare const gridRowGroupsToFetchSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowId[] | undefined>;
-export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;
-export declare const gridRowTreeDepthsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridTreeDepths>;
-export declare const gridRowMaximumTreeDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const gridDataRowIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridRowsLoadingSelector: import("../../..").OutputSelector<GridStateCommunity, boolean | undefined>;
+export declare const gridTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToModelLookup<import("../../..").GridValidRowModel>>;
+export declare const gridRowsDataRowIdToIdLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToIdLookup>;
+export declare const gridRowTreeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
+export declare const gridRowGroupsToFetchSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[] | undefined>;
+export declare const gridRowGroupingNameSelector: import("../../..").OutputSelector<GridStateCommunity, string>;
+export declare const gridRowTreeDepthsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridTreeDepths>;
+export declare const gridRowMaximumTreeDepthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
+export declare const gridDataRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
 /**
  * @ignore - do not document.
  */
-export declare const gridAdditionalRowGroupsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+export declare const gridAdditionalRowGroupsSelector: import("../../..").OutputSelector<GridStateCommunity, {
     pinnedRows?: import("./gridRowsInterfaces").GridPinnedRowsState;
 } | undefined>;
 /**
  * @ignore - do not document.
  */
-export declare const gridPinnedRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+export declare const gridPinnedRowsSelector: import("../../..").OutputSelector<GridStateCommunity, {
     bottom: {
         id: import("../../..").GridRowId;
         model: import("../../..").GridValidRowModel;
@@ -32,4 +32,4 @@ export declare const gridPinnedRowsSelector: import("../../../utils/createSelect
 /**
  * @ignore - do not document.
  */
-export declare const gridPinnedRowsCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridPinnedRowsCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+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: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "unstable_rowSpanning" | "pagination" | "paginationMode">) => void;