@mui/x-data-grid 5.12.3 → 5.14.0

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/legacy/constants/localeTextConstants.js

@@ -123,5 +123,12 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   // Used core components translation keys
   MuiTablePagination: {},
   // Row reordering text
-  rowReorderingHeaderName: 'Row reordering'
+  rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'avg',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'size'
 };

package/legacy/hooks/features/columns/useGridColumnSpanning.js

@@ -27,10 +27,10 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
     var columnIndex = params.columnIndex,
         rowId = params.rowId,
         minFirstColumnIndex = params.minFirstColumnIndex,
-        maxLastColumnIndex = params.maxLastColumnIndex;
-    var visibleColumns = apiRef.current.getVisibleColumns();
-    var columnsLength = visibleColumns.length;
-    var column = visibleColumns[columnIndex];
+        maxLastColumnIndex = params.maxLastColumnIndex,
+        columns = params.columns;
+    var columnsLength = columns.length;
+    var column = columns[columnIndex];
     var colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
 
     if (!colSpan || colSpan === 1) {
@@ -52,7 +52,7 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
       var nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
 
       if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-        var nextColumn = visibleColumns[nextColumnIndex];
+        var nextColumn = columns[nextColumnIndex];
         width += nextColumn.computedWidth;
         setCellColSpanInfo(rowId, columnIndex + j, {
           spannedByColSpan: true,
@@ -78,14 +78,16 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
   var calculateColSpan = React.useCallback(function (_ref) {
     var rowId = _ref.rowId,
         minFirstColumn = _ref.minFirstColumn,
-        maxLastColumn = _ref.maxLastColumn;
+        maxLastColumn = _ref.maxLastColumn,
+        columns = _ref.columns;
 
     for (var i = minFirstColumn; i < maxLastColumn; i += 1) {
       var cellProps = calculateCellColSpan({
         columnIndex: i,
         rowId: rowId,
         minFirstColumnIndex: minFirstColumn,
-        maxLastColumnIndex: maxLastColumn
+        maxLastColumnIndex: maxLastColumn,
+        columns: columns
       });
 
       if (cellProps.colSpan > 1) {

package/legacy/hooks/features/columns/useGridColumns.js

@@ -38,7 +38,7 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$componentsProp2;
+  var _props$initialState5, _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridColumns');
   var columnTypes = React.useMemo(function () {
@@ -213,16 +213,21 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
     var columnsStateToExport = {};
 
     if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-      var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
-        return value === false;
-      });
+      var _props$initialState$c2, _props$initialState4, _props$initialState4$;
 
-      if (hasHiddenColumns) {
+      var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+      var shouldExportColumnVisibilityModel = // Always export if the `exportOnlyDirtyModels` property is activated
+      !context.exportOnlyDirtyModels || // Always export if the model is controlled
+      props.columnVisibilityModel != null || // Always export if the model has been initialized
+      // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
+      Object.keys((_props$initialState$c2 = (_props$initialState4 = props.initialState) == null ? void 0 : (_props$initialState4$ = _props$initialState4.columns) == null ? void 0 : _props$initialState4$.columnVisibilityModel) != null ? _props$initialState$c2 : {}).length > 0 || // Always export if the model is not empty
+      Object.keys(columnVisibilityModelToExport).length > 0;
+
+      if (shouldExportColumnVisibilityModel) {
         columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
       }
     }
@@ -253,7 +258,7 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.columnVisibilityModel, (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.columns]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 

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

@@ -70,21 +70,33 @@ export function useGridDimensions(apiRef, props) {
       rootElement.removeChild(scrollDiv);
     }
 
-    var viewportOuterSize = {
-      width: rootDimensionsRef.current.width,
-      height: props.autoHeight ? rowsMeta.currentPageTotalHeight : rootDimensionsRef.current.height - headerHeight
-    };
-
-    var _hasScroll = hasScroll({
-      content: {
-        width: Math.round(columnsTotalWidth),
-        height: rowsMeta.currentPageTotalHeight
-      },
-      container: viewportOuterSize,
-      scrollBarSize: scrollBarSize
-    }),
-        hasScrollX = _hasScroll.hasScrollX,
-        hasScrollY = _hasScroll.hasScrollY;
+    var viewportOuterSize;
+    var hasScrollX;
+    var hasScrollY;
+
+    if (props.autoHeight) {
+      hasScrollY = false;
+      hasScrollX = Math.round(columnsTotalWidth) > rootDimensionsRef.current.width;
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
+      };
+    } else {
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rootDimensionsRef.current.height - headerHeight
+      };
+      var scrollInformation = hasScroll({
+        content: {
+          width: Math.round(columnsTotalWidth),
+          height: rowsMeta.currentPageTotalHeight
+        },
+        container: viewportOuterSize,
+        scrollBarSize: scrollBarSize
+      });
+      hasScrollY = scrollInformation.hasScrollY;
+      hasScrollX = scrollInformation.hasScrollX;
+    }
 
     var viewportInnerSize = {
       width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),

package/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -78,6 +78,12 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   }, [apiRef]);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     if (params.cellMode === GridCellModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       var reason;
 
       if (event.key === 'Escape') {
@@ -100,7 +106,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       var _reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 

package/legacy/hooks/features/editRows/useGridCellEditing.old.js

@@ -189,16 +189,24 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              if (!(event.which === 229)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
               id = params.id, field = params.field, cellMode = params.cellMode, isEditable = params.isEditable;
 
               if (isEditable) {
-                _context.next = 3;
+                _context.next = 5;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 3:
+            case 5:
               isEditMode = cellMode === GridCellModes.Edit;
               isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
@@ -220,7 +228,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
               }
 
               if (!(isEditMode && isCellEditCommitKeys(event.key))) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
 
@@ -228,25 +236,25 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
                 id: id,
                 field: field
               };
-              _context.next = 11;
+              _context.next = 13;
               return apiRef.current.commitCellChange(commitParams, event);
 
-            case 11:
+            case 13:
               isValid = _context.sent;
 
               if (isValid) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 14:
+            case 16:
               if (isEditMode && isCellExitEditModeKeys(event.key)) {
                 apiRef.current.publishEvent('cellEditStop', params, event);
               }
 
-            case 15:
+            case 17:
             case "end":
               return _context.stop();
           }

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -116,6 +116,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   }, []);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     if (params.cellMode === GridRowModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       var reason;
 
       if (event.key === 'Escape') {
@@ -156,7 +162,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       var _reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 

package/legacy/hooks/features/editRows/useGridRowEditing.old.js

@@ -241,62 +241,70 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
+              if (!(event.which === 229)) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 2:
               cellMode = params.cellMode, isEditable = params.isEditable;
 
               if (isEditable) {
-                _context3.next = 3;
+                _context3.next = 5;
                 break;
               }
 
               return _context3.abrupt("return");
 
-            case 3:
+            case 5:
               isEditMode = cellMode === GridCellModes.Edit;
               rowParams = apiRef.current.getRowParams(params.id);
 
               if (!isEditMode) {
-                _context3.next = 18;
+                _context3.next = 20;
                 break;
               }
 
               if (!(event.key === 'Enter')) {
-                _context3.next = 15;
+                _context3.next = 17;
                 break;
               }
 
-              _context3.next = 9;
+              _context3.next = 11;
               return apiRef.current.commitRowChange(params.id);
 
-            case 9:
+            case 11:
               isValid = _context3.sent;
 
               if (!(!isValid && (_props$experimentalFe3 = props.experimentalFeatures) != null && _props$experimentalFe3.preventCommitWhileValidating)) {
-                _context3.next = 12;
+                _context3.next = 14;
                 break;
               }
 
               return _context3.abrupt("return");
 
-            case 12:
+            case 14:
               apiRef.current.publishEvent('rowEditStop', rowParams, event);
-              _context3.next = 16;
+              _context3.next = 18;
               break;
 
-            case 15:
+            case 17:
               if (event.key === 'Escape') {
                 apiRef.current.publishEvent('rowEditStop', rowParams, event);
               }
 
-            case 16:
-              _context3.next = 19;
+            case 18:
+              _context3.next = 21;
               break;
 
-            case 18:
+            case 20:
               if (event.key === 'Enter') {
                 apiRef.current.publishEvent('rowEditStart', rowParams, event);
               }
 
-            case 19:
+            case 21:
             case "end":
               return _context3.stop();
           }

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

@@ -1,5 +1,6 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
 import { gridFilteredSortedRowIdsSelector } from '../filter';
+import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 export var getColumnsToExport = function getColumnsToExport(_ref) {
   var apiRef = _ref.apiRef,
       options = _ref.options;
@@ -23,13 +24,19 @@ export var getColumnsToExport = function getColumnsToExport(_ref) {
 export var defaultGetRowsToExport = function defaultGetRowsToExport(_ref2) {
   var apiRef = _ref2.apiRef;
   var filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  var rowTree = gridRowTreeSelector(apiRef);
   var selectedRows = apiRef.current.getSelectedRows();
+  var bodyRows = filteredSortedRowIds.filter(function (id) {
+    var _rowTree$id$position;
+
+    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
+  });
 
   if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(function (id) {
+    return bodyRows.filter(function (id) {
       return selectedRows.has(id);
     });
   }
 
-  return filteredSortedRowIds;
+  return bodyRows;
 };

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
+import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -89,6 +90,7 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
   var items = filterModel.items,
       _filterModel$linkOper = filterModel.linkOperator,
       linkOperator = _filterModel$linkOper === void 0 ? GridLinkOperator.And : _filterModel$linkOper;
+  var tree = gridRowTreeSelector(apiRef);
 
   var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem) {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -158,6 +160,10 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
   }
 
   return function (rowId, shouldApplyFilter) {
+    if (tree[rowId].position === 'footer') {
+      return true;
+    }
+
     var filteredAppliers = shouldApplyFilter ? appliers.filter(function (applier) {
       return shouldApplyFilter(applier.item.columnField);
     }) : appliers; // Return `false` as soon as we have a failing filter

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

@@ -35,7 +35,7 @@ export var filterStateInitializer = function filterStateInitializer(state, props
  */
 
 export var useGridFilter = function useGridFilter(apiRef, props) {
-  var _props$componentsProp2;
+  var _props$initialState3, _props$initialState3$, _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.unstable_registerControlState({
@@ -125,7 +125,25 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     if (targetColumnField) {
       var filterModel = gridFilterModelSelector(apiRef);
       var filterItemsWithValue = filterModel.items.filter(function (item) {
-        return item.value !== undefined;
+        var _column$filterOperato;
+
+        if (item.value !== undefined) {
+          return true;
+        }
+
+        var column = apiRef.current.getColumn(item.columnField);
+        var filterOperator = (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.find(function (operator) {
+          return operator.value === item.operatorValue;
+        });
+        var requiresFilterValue = typeof (filterOperator == null ? void 0 : filterOperator.requiresFilterValue) === 'undefined' ? true : filterOperator == null ? void 0 : filterOperator.requiresFilterValue; // Operators like `isEmpty` don't have and don't require `item.value`.
+        // So we don't want to remove them from the filter model if `item.value === undefined`.
+        // See https://github.com/mui/mui-x/issues/5402
+
+        if (requiresFilterValue) {
+          return false;
+        }
+
+        return true;
       });
       var newFilterItems;
       var filterItemOnTarget = filterItemsWithValue.find(function (item) {
@@ -209,10 +227,17 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
+    var _props$initialState2, _props$initialState2$;
+
     var filterModelToExport = gridFilterModelSelector(apiRef);
+    var shouldExportFilterModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.filterModel != null || // Always export if the model has been initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.filter) == null ? void 0 : _props$initialState2$.filterModel) != null || // Export if the model is not equal to the default value
+    !isDeepEqual(filterModelToExport, getDefaultGridFilterModel());
 
-    if (filterModelToExport.items.length === 0 && filterModelToExport.linkOperator === getDefaultGridFilterModel().linkOperator) {
+    if (!shouldExportFilterModel) {
       return prevState;
     }
 
@@ -221,7 +246,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef]);
+  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.filter) == null ? void 0 : _props$initialState3$.filterModel]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 

package/legacy/hooks/features/pagination/useGridPage.js

@@ -67,13 +67,14 @@ export var useGridPage = function useGridPage(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
     var _props$initialState, _props$initialState$p;
 
     var pageToExport = gridPageSelector(apiRef);
-    var shouldExportPage = // Always export if the page is controlled
+    var shouldExportPage = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page is controlled
     props.page != null || // Always export if the page has been initialized
-    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page is not equal to the default value
     pageToExport !== 0;
 
     if (!shouldExportPage) {

package/legacy/hooks/features/pagination/useGridPageSize.js

@@ -55,13 +55,14 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
     var _props$initialState, _props$initialState$p;
 
     var pageSizeToExport = gridPageSizeSelector(apiRef);
-    var shouldExportPageSize = // Always export if the page size is controlled
+    var shouldExportPageSize = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page size is controlled
     props.pageSize != null || // Always export if the page size has been initialized
-    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size is not equal to the default value
     pageSizeToExport !== defaultPageSize(props.autoPageSize);
 
     if (!shouldExportPageSize) {

package/legacy/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -17,7 +17,9 @@ export var preferencePanelStateInitializer = function preferencePanelStateInitia
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
 
-export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
+export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef, props) {
+  var _props$initialState3;
+
   var logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
   var hideTimeout = React.useRef();
   var immediateTimeout = React.useRef();
@@ -80,17 +82,23 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
+    var _props$initialState2;
+
     var preferencePanelToExport = gridPreferencePanelStateSelector(apiRef.current.state);
+    var shouldExportPreferencePanel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the panel was initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.preferencePanel) != null || // Always export if the panel is opened
+    preferencePanelToExport.open;
 
-    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+    if (!shouldExportPreferencePanel) {
       return prevState;
     }
 
     return _extends({}, prevState, {
       preferencePanel: preferencePanelToExport
     });
-  }, [apiRef]);
+  }, [apiRef, (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.preferencePanel]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var preferencePanel = context.stateToRestore.preferencePanel;
 

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

@@ -102,7 +102,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   var updateRows = React.useCallback(function (updates) {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
-      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 

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

@@ -10,7 +10,7 @@ var flatRowTreeCreationMethod = function flatRowTreeCreationMethod(_ref) {
   for (var i = 0; i < ids.length; i += 1) {
     var rowId = ids[i];
 
-    if (previousTree && previousTree[rowId]) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {