@mui/x-data-grid 8.0.0-alpha.2 → 8.0.0-alpha.4

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -47,27 +47,22 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   theme
 }) => ({
   display: 'flex',
-  padding: theme.spacing(1)
+  gap: theme.spacing(1.5)
 }));
 const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
-})(({
-  theme
-}) => ({
+})({
   flexShrink: 0,
-  justifyContent: 'flex-end',
-  marginRight: theme.spacing(0.5),
-  marginBottom: theme.spacing(0.2)
-}));
+  justifyContent: 'center'
+});
 const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
 })({
-  minWidth: 55,
-  marginRight: 5,
+  minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = (0, _styles.styled)('div', {
@@ -269,7 +264,6 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     ownerState: rootProps
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
-      variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
@@ -286,7 +280,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         })
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: [hasLogicOperatorColumn ? {
@@ -316,7 +311,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormColumnInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: (0, _clsx.default)(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
@@ -341,7 +337,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormOperatorInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
@@ -367,12 +364,15 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
+        variant: "outlined",
+        size: "small",
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,

package/node/constants/dataGridPropsDefaultValues.js

@@ -51,15 +51,14 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,
-  rowPositionsDebounceMs: 166,
   rows: [],
   rowSelection: true,
   rowSpacingType: 'margin',
+  rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false,
   virtualizeColumnsWithAutoRowHeight: false
 };

package/node/hooks/core/strategyProcessing/gridStrategyProcessingApi.js

@@ -2,4 +2,10 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.GridStrategyGroup = void 0;
+let GridStrategyGroup = exports.GridStrategyGroup = /*#__PURE__*/function (GridStrategyGroup) {
+  GridStrategyGroup["DataSource"] = "dataSource";
+  GridStrategyGroup["RowTree"] = "rowTree";
+  return GridStrategyGroup;
+}({});

package/node/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -9,13 +9,15 @@ exports.useGridStrategyProcessing = exports.GRID_STRATEGIES_PROCESSORS = exports
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var React = _interopRequireWildcard(require("react"));
+var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 const GRID_DEFAULT_STRATEGY = exports.GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = exports.GRID_STRATEGIES_PROCESSORS = {
-  rowTreeCreation: 'rowTree',
-  filtering: 'rowTree',
-  sorting: 'rowTree',
-  visibleRowsLookupCreation: 'rowTree'
+  dataSourceRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  rowTreeCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  filtering: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  sorting: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  visibleRowsLookupCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -52,10 +54,7 @@ const GRID_STRATEGIES_PROCESSORS = exports.GRID_STRATEGIES_PROCESSORS = {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/node/hooks/core/useGridStateInitialization.js

@@ -32,8 +32,8 @@ const useGridStateInitialization = apiRef => {
     const updatedControlStateIds = [];
     Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
-      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
-      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const oldSubState = controlState.stateSelector(apiRef.current.state, undefined, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
@@ -65,7 +65,7 @@ const useGridStateInitialization = apiRef => {
         hasPropChanged
       } = updatedControlStateIds[0];
       const controlState = controlStateMapRef.current[stateId];
-      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -500,7 +500,8 @@ const useGridColumnResize = (apiRef, props) => {
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {
         width: widthByField[column.field],
-        computedWidth: widthByField[column.field]
+        computedWidth: widthByField[column.field],
+        flex: 0
       }));
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);

package/node/hooks/features/editing/useGridCellEditing.js

@@ -450,7 +450,7 @@ const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -459,7 +459,7 @@ const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || _gridEditRowModel.GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
         if (params.mode === _gridEditRowModel.GridCellModes.Edit && prevMode === _gridEditRowModel.GridCellModes.View) {
           updateStateToStartCellEditMode((0, _extends2.default)({
             id: originalId,

package/node/hooks/features/editing/useGridRowEditing.js

@@ -579,7 +579,7 @@ const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -591,7 +591,7 @@ const useGridRowEditing = (apiRef, props) => {
         mode: _gridEditRowModel.GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || _gridEditRowModel.GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
       if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
         updateStateToStartRowEditMode((0, _extends2.default)({
           id: originalId

package/node/hooks/features/filter/useGridFilter.js

@@ -68,7 +68,7 @@ const useGridFilter = (apiRef, props) => {
   });
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
+      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, undefined, apiRef.current.instanceId);
       const filterState = apiRef.current.getFilterState(filterModel);
       const newState = (0, _extends2.default)({}, state, {
         filter: (0, _extends2.default)({}, state.filter, filterState)

package/node/hooks/features/overlays/useGridOverlays.js

@@ -13,6 +13,7 @@ var _useGridApiContext = require("../../utils/useGridApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _filter = require("../filter");
 var _rows = require("../rows");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _GridOverlays = require("../../../components/base/GridOverlays");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -24,7 +25,8 @@ const useGridOverlays = () => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
   const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = (0, _utils.useGridSelector)(apiRef, _rows.gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -322,11 +322,12 @@ const useGridRowSelection = (apiRef, props) => {
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !(0, _keyboardUtils.isKeyboardEvent)(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
-    const isSelected = apiRef.current.isRowSelected(id);
-    if (resetSelection) {
-      apiRef.current.selectRow(id, !isMultipleSelectionDisabled ? !isSelected : true, true);
+    const selectedRowsCount = apiRef.current.getSelectedRows().size;
+    if (canHaveMultipleSelection && selectedRowsCount > 1 && !hasCtrlKey) {
+      apiRef.current.selectRow(id, true, resetSelection);
     } else {
-      apiRef.current.selectRow(id, !isSelected, false);
+      const isSelected = apiRef.current.isRowSelected(id);
+      apiRef.current.selectRow(id, !isSelected, resetSelection);
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleRowClick = React.useCallback((params, event) => {

package/node/hooks/features/rows/gridRowsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupsToFetchSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupsToFetchSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridRowsStateSelector = state => state.rows;
 const gridRowCountSelector = exports.gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
@@ -12,7 +12,6 @@ const gridTopLevelRowCountSelector = exports.gridTopLevelRowCountSelector = (0,
 
 // TODO rows v6: Rename
 const gridRowsLookupSelector = exports.gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
-const gridRowsDataRowIdToIdLookupSelector = exports.gridRowsDataRowIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 const gridRowTreeSelector = exports.gridRowTreeSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.tree);
 const gridRowGroupsToFetchSelector = exports.gridRowGroupsToFetchSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupsToFetch);
 const gridRowGroupingNameSelector = exports.gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupingName);

package/node/hooks/features/rows/gridRowsUtils.js

@@ -55,12 +55,10 @@ const createRowsInternalCache = ({
     rows: []
   };
   const dataRowIdToModelLookup = {};
-  const dataRowIdToIdLookup = {};
   for (let i = 0; i < rows.length; i += 1) {
     const model = rows[i];
     const id = getRowIdFromRowModel(model, getRowId);
     dataRowIdToModelLookup[id] = model;
-    dataRowIdToIdLookup[id] = id;
     updates.rows.push(id);
   }
   return {
@@ -68,7 +66,6 @@ const createRowsInternalCache = ({
     loadingPropBeforePartialUpdates: loading,
     rowCountPropBeforePartialUpdates: rowCount,
     updates,
-    dataRowIdToIdLookup,
     dataRowIdToModelLookup
   };
 };
@@ -102,7 +99,6 @@ const getRowsStateFromCache = ({
     previousTree,
     previousTreeDepths,
     updates: cache.updates,
-    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
     previousGroupsToFetch
   });
@@ -111,7 +107,6 @@ const getRowsStateFromCache = ({
   const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
-    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIds: unProcessedDataRowIds,
     dataRowIdToModelLookup: cache.dataRowIdToModelLookup
   });
@@ -196,7 +191,6 @@ const updateCacheWithNewRows = ({
     groupKeys
   };
   const dataRowIdToModelLookup = (0, _extends2.default)({}, previousCache.dataRowIdToModelLookup);
-  const dataRowIdToIdLookup = (0, _extends2.default)({}, previousCache.dataRowIdToIdLookup);
   const alreadyAppliedActionsToRemove = {
     insert: {},
     modify: {},
@@ -229,7 +223,6 @@ const updateCacheWithNewRows = ({
       // Remove the data row from the lookups and add it to the "delete" update.
       partialUpdates.actions.remove.push(id);
       delete dataRowIdToModelLookup[id];
-      delete dataRowIdToIdLookup[id];
       return;
     }
     const oldRow = dataRowIdToModelLookup[id];
@@ -269,7 +262,6 @@ const updateCacheWithNewRows = ({
 
     // Update the data row lookups.
     dataRowIdToModelLookup[id] = partialRow;
-    dataRowIdToIdLookup[id] = id;
   });
   const actionTypeWithActionsToRemove = Object.keys(alreadyAppliedActionsToRemove);
   for (let i = 0; i < actionTypeWithActionsToRemove.length; i += 1) {
@@ -281,7 +273,6 @@ const updateCacheWithNewRows = ({
   }
   return {
     dataRowIdToModelLookup,
-    dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
     loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,

package/node/hooks/features/rows/index.js

@@ -8,7 +8,6 @@ var _exportNames = {
   gridRowsLoadingSelector: true,
   gridTopLevelRowCountSelector: true,
   gridRowsLookupSelector: true,
-  gridRowsDataRowIdToIdLookupSelector: true,
   gridRowTreeSelector: true,
   gridRowGroupingNameSelector: true,
   gridRowTreeDepthsSelector: true,
@@ -66,12 +65,6 @@ Object.defineProperty(exports, "gridRowTreeSelector", {
     return _gridRowsSelector.gridRowTreeSelector;
   }
 });
-Object.defineProperty(exports, "gridRowsDataRowIdToIdLookupSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector;
-  }
-});
 Object.defineProperty(exports, "gridRowsLoadingSelector", {
   enumerable: true,
   get: function () {

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

@@ -14,6 +14,7 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _useGridSelector = require("../../utils/useGridSelector");
+var _gridRowsSelector = require("./gridRowsSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 const EMPTY_STATE = {
@@ -43,7 +44,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;
@@ -137,7 +138,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.unstable_rowSpanning) {
+  if (props.rowSpanning) {
     const rowIds = state.rows.dataRowIds || [];
     const orderedFields = state.columns.orderedFields || [];
     const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
@@ -150,7 +151,7 @@ const rowSpanningStateInitializer = (state, props, apiRef) => {
     }
     const rangeToProcess = {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
     };
     const rows = rowIds.map(id => ({
       id,
@@ -182,10 +183,11 @@ const useGridRowSpanning = (apiRef, props) => {
   } = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const colDefs = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const processedRange = (0, _useLazyRef.default)(() => {
     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))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
     } : EMPTY_RANGE;
   });
   const lastRange = React.useRef(EMPTY_RANGE);
@@ -197,7 +199,7 @@ const useGridRowSpanning = (apiRef, props) => {
   // - The `paginationModel` is updated
   // - The rows are updated
   (resetState = true) => {
-    if (!props.unstable_rowSpanning) {
+    if (!props.rowSpanning) {
       if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
         apiRef.current.setState(state => (0, _extends2.default)({}, state, {
           rowSpanning: EMPTY_STATE
@@ -213,7 +215,7 @@ const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = (0, _gridRowSpanningUtils.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;
@@ -242,15 +244,21 @@ const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
+  }, [apiRef, props.rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
   const prevRenderContext = React.useRef(renderContext);
   const isFirstRender = React.useRef(true);
   const shouldResetState = React.useRef(false);
+  const previousTree = React.useRef(tree);
   React.useEffect(() => {
     const firstRender = isFirstRender.current;
     if (isFirstRender.current) {
       isFirstRender.current = false;
     }
+    if (tree !== previousTree.current) {
+      previousTree.current = tree;
+      updateRowSpanningState(true);
+      return;
+    }
     if (range && lastRange.current && (0, _gridRowSpanningUtils.isRowRangeUpdated)(range, lastRange.current)) {
       lastRange.current = range;
       shouldResetState.current = true;
@@ -264,6 +272,6 @@ const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

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

@@ -19,6 +19,7 @@ var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsUtils = require("./gridRowsUtils");
 var _pipeProcessing = require("../../core/pipeProcessing");
+var _strategyProcessing = require("../../core/strategyProcessing");
 const rowsStateInitializer = (state, props, apiRef) => {
   const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = (0, _gridRowsUtils.createRowsInternalCache)({
@@ -247,7 +248,7 @@ 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 = (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
+      const group = (0, _gridRowsSelector.gridRowTreeSelector)(state, undefined, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -281,7 +282,6 @@ const useGridRows = (apiRef, props) => {
     }
     const tree = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef));
     const dataRowIdToModelLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef));
-    const dataRowIdToIdLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef));
     const rootGroup = tree[_gridRowsUtils.GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
     const seenIds = new Set();
@@ -291,7 +291,6 @@ 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 = {
@@ -302,7 +301,6 @@ const useGridRows = (apiRef, props) => {
         groupingKey: null
       };
       dataRowIdToModelLookup[rowId] = rowModel;
-      dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
       seenIds.add(rowId);
     }
@@ -313,17 +311,17 @@ 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 => (0, _extends2.default)({}, state, {
       rows: (0, _extends2.default)({}, 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,
@@ -390,7 +388,7 @@ 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') !== (0, _gridRowsSelector.gridRowGroupingNameSelector)(apiRef)) {
+    if (apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.RowTree) !== (0, _gridRowsSelector.gridRowGroupingNameSelector)(apiRef)) {
       groupRows();
     }
   }, [apiRef, groupRows]);
@@ -403,11 +401,10 @@ const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId),
-        treeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(state, apiRef.current.instanceId),
-        dataRowIds: (0, _gridRowsSelector.gridDataRowIdsSelector)(state, apiRef.current.instanceId),
-        dataRowIdToModelLookup: (0, _gridRowsSelector.gridRowsLookupSelector)(state, apiRef.current.instanceId),
-        dataRowIdToIdLookup: (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(state, apiRef.current.instanceId)
+        tree: (0, _gridRowsSelector.gridRowTreeSelector)(state, undefined, apiRef.current.instanceId),
+        treeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(state, undefined, apiRef.current.instanceId),
+        dataRowIds: (0, _gridRowsSelector.gridDataRowIdsSelector)(state, undefined, apiRef.current.instanceId),
+        dataRowIdToModelLookup: (0, _gridRowsSelector.gridRowsLookupSelector)(state, undefined, apiRef.current.instanceId)
       });
       return (0, _extends2.default)({}, state, {
         rows: (0, _extends2.default)({}, state.rows, response, {
@@ -439,7 +436,8 @@ 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;
 
@@ -469,16 +467,16 @@ 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: (0, _gridRowsUtils.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]);
 };
 exports.useGridRows = useGridRows;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
+exports.gridSortedRowIndexLookupSelector = exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -61,4 +61,15 @@ const gridSortColumnLookupSelector = exports.gridSortColumnLookupSelector = (0,
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+const gridSortedRowIndexLookupSelector = exports.gridSortedRowIndexLookupSelector = (0, _createSelector.createSelectorMemoized)(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });