@mui/x-data-grid 5.15.3 → 5.17.1

package/legacy/hooks/features/density/useGridDensity.js

@@ -1,20 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { GridDensityTypes } from '../../../models/gridDensity';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
 import { isDeepEqual } from '../../../utils/utils';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridVisibleColumnDefinitionsSelector } from '../columns';
+import { unwrapGroupingColumnModel } from '../columnGrouping/useGridColumnGrouping';
 export var COMPACT_DENSITY_FACTOR = 0.7;
 export var COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight and rowHeight in state
 
-var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight) {
+var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth) {
   switch (newDensity) {
     case GridDensityTypes.Compact:
       return {
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMPACT_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMPACT_DENSITY_FACTOR),
+        headerGroupingMaxDepth: newMaxDepth,
         factor: COMPACT_DENSITY_FACTOR
       };
 
@@ -23,6 +28,7 @@ var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHead
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMFORTABLE_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMFORTABLE_DENSITY_FACTOR),
+        headerGroupingMaxDepth: newMaxDepth,
         factor: COMFORTABLE_DENSITY_FACTOR
       };
 
@@ -31,25 +37,57 @@ var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHead
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
+        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
 export var densityStateInitializer = function densityStateInitializer(state, props) {
+  // TODO: think about improving this initialization. Could it be done in the useColumn initializer?
+  // TODO: manage to remove ts-ignore
+  var maxDepth;
+
+  if (props.columnGroupingModel == null || Object.keys(props.columnGroupingModel).length === 0) {
+    maxDepth = 0;
+  } else {
+    var unwrappedGroupingColumnModel = unwrapGroupingColumnModel(props.columnGroupingModel);
+    var columnsState = state.columns;
+    var visibleColumns = columnsState.all.filter(function (field) {
+      return columnsState.columnVisibilityModel[field] !== false;
+    });
+
+    if (visibleColumns.length === 0) {
+      maxDepth = 0;
+    } else {
+      maxDepth = Math.max.apply(Math, _toConsumableArray(visibleColumns.map(function (field) {
+        var _unwrappedGroupingCol, _unwrappedGroupingCol2;
+
+        return (_unwrappedGroupingCol = (_unwrappedGroupingCol2 = unwrappedGroupingColumnModel[field]) == null ? void 0 : _unwrappedGroupingCol2.length) != null ? _unwrappedGroupingCol : 0;
+      })));
+    }
+  }
+
   return _extends({}, state, {
-    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
+    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
   });
 };
 export var useGridDensity = function useGridDensity(apiRef, props) {
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var maxDepth = visibleColumns.length > 0 ? Math.max.apply(Math, _toConsumableArray(visibleColumns.map(function (column) {
+    var _column$groupPath$len, _column$groupPath;
+
+    return (_column$groupPath$len = (_column$groupPath = column.groupPath) == null ? void 0 : _column$groupPath.length) != null ? _column$groupPath$len : 0;
+  }))) : 0;
   var logger = useGridLogger(apiRef, 'useDensity');
   var setDensity = React.useCallback(function (newDensity) {
     var newHeaderHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.headerHeight;
     var newRowHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : props.rowHeight;
+    var newMaxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : maxDepth;
     logger.debug("Set grid density to ".concat(newDensity));
     apiRef.current.setState(function (state) {
       var currentDensityState = gridDensitySelector(state);
-      var newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
+      var newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
 
       if (isDeepEqual(currentDensityState, newDensityState)) {
         return state;
@@ -60,10 +98,10 @@ export var useGridDensity = function useGridDensity(apiRef, props) {
       });
     });
     apiRef.current.forceUpdate();
-  }, [logger, apiRef, props.headerHeight, props.rowHeight]);
+  }, [logger, apiRef, props.headerHeight, props.rowHeight, maxDepth]);
   React.useEffect(function () {
-    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight);
-  }, [apiRef, props.density, props.rowHeight, props.headerHeight]);
+    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight, maxDepth);
+  }, [apiRef, props.density, props.rowHeight, props.headerHeight, maxDepth]);
   var densityApi = {
     setDensity: setDensity
   };

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -4,7 +4,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector } from '../columns';
-import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
+import { gridDensityTotalHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -41,7 +41,7 @@ export function useGridDimensions(apiRef, props) {
   var rootDimensionsRef = React.useRef(null);
   var fullDimensionsRef = React.useRef(null);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  var headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   var updateGridDimensionsRef = React.useCallback(function () {
     var _apiRef$current$rootE;
 
@@ -86,7 +86,7 @@ export function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - headerHeight
+        height: rootDimensionsRef.current.height - totalHeaderHeight
       };
       var scrollInformation = hasScroll({
         content: {
@@ -120,7 +120,7 @@ export function useGridDimensions(apiRef, props) {
     if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
-  }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
+  }, [apiRef, props.scrollbarSize, props.autoHeight, totalHeaderHeight, rowsMeta.currentPageTotalHeight]);
   var resize = React.useCallback(function () {
     updateGridDimensionsRef();
     apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -7,7 +7,7 @@ import { ownerDocument } from '@mui/material/utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridVisibleRowCountSelector } from '../filter/gridFilterSelector';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -86,7 +86,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
       return;
     }
 
-    var headerHeight = gridDensityHeaderHeightSelector(apiRef);
+    var totalHeaderHeight = gridDensityTotalHeaderHeightSelector(apiRef);
     var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     var gridRootElement = apiRef.current.rootElementRef.current;
     var gridClone = gridRootElement.cloneNode(true);
@@ -120,7 +120,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = "".concat(rowsMeta.currentPageTotalHeight + headerHeight + gridToolbarElementHeight + gridFooterElementHeight, "px"); // Remove all loaded elements from the current host
+    gridClone.style.height = "".concat(rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight, "px"); // Remove all loaded elements from the current host
 
     printDoc.body.innerHTML = '';
     printDoc.body.appendChild(gridClone);

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -79,76 +79,78 @@ export var mergeStateWithFilterModel = function mergeStateWithFilterModel(filter
     });
   };
 };
-/**
- * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
 
-export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
-  var items = filterModel.items;
-
-  var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem) {
-    if (!filterItem.columnField || !filterItem.operatorValue) {
-      return null;
-    }
+var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, apiRef) {
+  if (!filterItem.columnField || !filterItem.operatorValue) {
+    return null;
+  }
 
-    var column = apiRef.current.getColumn(filterItem.columnField);
+  var column = apiRef.current.getColumn(filterItem.columnField);
 
-    if (!column) {
-      return null;
-    }
+  if (!column) {
+    return null;
+  }
 
-    var parsedValue;
+  var parsedValue;
 
-    if (column.valueParser) {
-      var _filterItem$value;
+  if (column.valueParser) {
+    var _filterItem$value;
 
-      var parser = column.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
-        return parser(x);
-      }) : parser(filterItem.value);
-    } else {
-      parsedValue = filterItem.value;
-    }
+    var parser = column.valueParser;
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
+      return parser(x);
+    }) : parser(filterItem.value);
+  } else {
+    parsedValue = filterItem.value;
+  }
 
-    var newFilterItem = _extends({}, filterItem, {
-      value: parsedValue
-    });
+  var newFilterItem = _extends({}, filterItem, {
+    value: parsedValue
+  });
 
-    var filterOperators = column.filterOperators;
+  var filterOperators = column.filterOperators;
 
-    if (!(filterOperators != null && filterOperators.length)) {
-      throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
-    }
+  if (!(filterOperators != null && filterOperators.length)) {
+    throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
+  }
 
-    var filterOperator = filterOperators.find(function (operator) {
-      return operator.value === newFilterItem.operatorValue;
-    });
+  var filterOperator = filterOperators.find(function (operator) {
+    return operator.value === newFilterItem.operatorValue;
+  });
 
-    if (!filterOperator) {
-      throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operatorValue, "'."));
-    }
+  if (!filterOperator) {
+    throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operatorValue, "'."));
+  }
 
-    var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
+  var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
 
-    if (typeof applyFilterOnRow !== 'function') {
-      return null;
-    }
+  if (typeof applyFilterOnRow !== 'function') {
+    return null;
+  }
 
-    var fn = function fn(rowId) {
-      var cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
-      return applyFilterOnRow(cellParams);
-    };
+  var fn = function fn(rowId) {
+    var cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
+    return applyFilterOnRow(cellParams);
+  };
 
-    return {
-      fn: fn,
-      item: newFilterItem
-    };
+  return {
+    fn: fn,
+    item: newFilterItem
   };
+};
+/**
+ * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
+
 
-  var appliers = items.map(getFilterCallbackFromItem).filter(function (callback) {
+export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
+  var items = filterModel.items;
+  var appliers = items.map(function (item) {
+    return getFilterCallbackFromItem(item, apiRef);
+  }).filter(function (callback) {
     return !!callback;
   });
 
@@ -242,9 +244,12 @@ export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(
     };
   };
 };
-export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel) {
+export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel, apiRef) {
   var _filterModel$quickFil2, _filterModel$linkOper;
 
+  var cleanedFilterItems = filterModel.items.filter(function (item) {
+    return getFilterCallbackFromItem(item, apiRef) !== null;
+  });
   var cleanedAllFilterItemResults = allFilterItemResults.filter(function (result) {
     return result != null;
   });
@@ -264,13 +269,13 @@ export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQ
     };
 
     if (linkOperator === GridLinkOperator.And) {
-      var passesAllFilters = filterModel.items.every(filterItemPredicate);
+      var passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
 
       if (!passesAllFilters) {
         return false;
       }
     } else {
-      var passesSomeFilters = filterModel.items.some(filterItemPredicate);
+      var passesSomeFilters = cleanedFilterItems.some(filterItemPredicate);
 
       if (!passesSomeFilters) {
         return false;

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

@@ -288,7 +288,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
               passingFilterItems = _params$isRowMatching.passingFilterItems,
               passingQuickFilterValues = _params$isRowMatching.passingQuickFilterValues;
 
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
         }
 
         filteredRowsLookup[rowId] = isRowPassing;

package/legacy/hooks/features/focus/useGridFocus.js

@@ -134,8 +134,18 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
     }
 
     rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     var rowToFocus = currentPage.rows[rowIndexToFocus];
+    var colSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowToFocus.id, columnIndexToFocus);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      if (direction === 'left' || direction === 'below') {
+        columnIndexToFocus = colSpanInfo.leftVisibleCellIndex;
+      } else if (direction === 'right') {
+        columnIndexToFocus = colSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     var columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
   }, [apiRef, props.pagination, props.paginationMode]);
@@ -172,7 +182,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
       });
     });
   }, [logger, apiRef]);
-  var handleCellMouseUp = React.useCallback(function (params) {
+  var handleCellMouseDown = React.useCallback(function (params) {
     lastClickedCell.current = params;
   }, []);
   var handleDocumentClick = React.useCallback(function (event) {
@@ -259,7 +269,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
-  useGridApiEventHandler(apiRef, 'cellMouseUp', handleCellMouseUp);
+  useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
   useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);

package/legacy/hooks/features/index.js

@@ -1,6 +1,7 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './columnMenu';
 export * from './columns';
+export * from './columnGrouping';
 export * from './density';
 export * from './editRows';
 export * from './filter';

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -37,6 +37,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
    * @param {number} colIndex Index of the column to focus
    * @param {number} rowIndex index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   * TODO replace with apiRef.current.unstable_moveFocusToRelativeCell()
    */
 
   var goToCell = React.useCallback(function (colIndex, rowId) {
@@ -98,6 +99,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowDown':
       case 'Enter':
         {
+          // TODO v6: Remove Enter case because `cellNavigationKeyDown` is not fired by the new editing API
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));

package/legacy/hooks/features/rows/useGridParamsApi.js

@@ -109,7 +109,7 @@ export function useGridParamsApi(apiRef) {
       formattedValue: value
     };
 
-    if (colDef.valueFormatter) {
+    if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
         id: id,
         field: params.field,

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

@@ -1,10 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector, gridRowsIdToIdLookupSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
@@ -109,14 +110,14 @@ export var useGridRows = function useGridRows(apiRef, props) {
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
-    var uniqUpdates = new Map();
+    var uniqueUpdates = new Map();
     updates.forEach(function (update) {
       var id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
-      if (uniqUpdates.has(id)) {
-        uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
+      if (uniqueUpdates.has(id)) {
+        uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
       } else {
-        uniqUpdates.set(id, update);
+        uniqueUpdates.set(id, update);
       }
     });
     var deletedRowIds = [];
@@ -128,7 +129,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: _toConsumableArray(prevCache.ids)
     };
-    uniqUpdates.forEach(function (partialRow, id) {
+    uniqueUpdates.forEach(function (partialRow, id) {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newCache.idRowsLookup[id];
@@ -264,8 +265,71 @@ export var useGridRows = function useGridRows(apiRef, props) {
         })
       });
     });
-    apiRef.current.applySorting();
+    apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
+  var replaceRows = React.useCallback(function (firstRowToRender, newRows) {
+    if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
+      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+
+    if (newRows.length === 0) {
+      return;
+    }
+
+    var allRows = gridRowIdsSelector(apiRef);
+
+    var updatedRows = _toConsumableArray(allRows);
+
+    var idRowsLookup = gridRowsLookupSelector(apiRef);
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    var tree = gridRowTreeSelector(apiRef);
+
+    var updatedIdRowsLookup = _extends({}, idRowsLookup);
+
+    var updatedIdToIdLookup = _extends({}, idToIdLookup);
+
+    var updatedTree = _extends({}, tree);
+
+    var newRowEntries = newRows.map(function (newRowModel) {
+      var rowId = getRowIdFromRowModel(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      return {
+        id: rowId,
+        model: newRowModel
+      };
+    });
+    newRowEntries.forEach(function (row, index) {
+      var _updatedRows$splice = updatedRows.splice(firstRowToRender + index, 1, row.id),
+          _updatedRows$splice2 = _slicedToArray(_updatedRows$splice, 1),
+          replacedRowId = _updatedRows$splice2[0];
+
+      delete updatedIdRowsLookup[replacedRowId];
+      delete updatedIdToIdLookup[replacedRowId];
+      delete updatedTree[replacedRowId];
+    });
+    newRowEntries.forEach(function (row) {
+      var rowTreeNodeConfig = {
+        id: row.id,
+        parent: null,
+        depth: 0,
+        groupingKey: null,
+        groupingField: null
+      };
+      updatedIdRowsLookup[row.id] = row.model;
+      updatedIdToIdLookup[row.id] = row.id;
+      updatedTree[row.id] = rowTreeNodeConfig;
+    });
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          idRowsLookup: updatedIdRowsLookup,
+          idToIdLookup: updatedIdToIdLookup,
+          tree: updatedTree,
+          ids: updatedRows
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId]);
   var rowApi = {
     getRow: getRow,
     getRowModels: getRowModels,
@@ -277,7 +341,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,
     getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows,
-    getRowGroupChildren: getRowGroupChildren
+    getRowGroupChildren: getRowGroupChildren,
+    unstable_replaceRows: replaceRows
   };
   /**
    * EVENTS