@mui/x-data-grid 5.17.5 → 6.0.0-alpha.1

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -239,10 +239,10 @@ const applyInitialState = (columnsState, initialState) => {
     newColumnLookup[field] = newColDef;
   }
 
-  const newColumnsState = {
+  const newColumnsState = (0, _extends2.default)({}, columnsState, {
     all: newOrderedFields,
     lookup: newColumnLookup
-  };
+  });
   return newColumnsState;
 };
 /**
@@ -278,33 +278,34 @@ const createColumnsState = ({
   columnsToUpsert,
   initialState,
   columnTypes,
-  currentColumnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
-  shouldRegenColumnVisibilityModelFromColumns,
+  columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
   const isInsideStateInitializer = !apiRef.current.state.columns;
-  let columnsStateWithoutColumnVisibilityModel;
+  let columnsState;
 
   if (isInsideStateInitializer) {
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: [],
-      lookup: {}
+      lookup: {},
+      columnVisibilityModel
     };
   } else {
     const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
-      lookup: (0, _extends2.default)({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
-
+      lookup: (0, _extends2.default)({}, currentState.lookup),
+      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      columnVisibilityModel
     };
   }
 
   let columnsToKeep = {};
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
+    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
       [key]: false
     }), {});
   }
@@ -316,7 +317,7 @@ const createColumnsState = ({
     } = newColumn;
     columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
-    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+    let existingState = columnsState.lookup[field];
 
     if (existingState == null) {
       // New Column
@@ -325,9 +326,9 @@ const createColumnsState = ({
         field,
         hasBeenResized: false
       });
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     } else if (keepOnlyColumnsToUpsert) {
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     }
 
     let hasBeenResized = existingState.hasBeenResized;
@@ -340,91 +341,22 @@ const createColumnsState = ({
         }
       }
     });
-    columnsStateWithoutColumnVisibilityModel.lookup[field] = (0, _extends2.default)({}, existingState, {
-      hide: newColumn.hide == null ? false : newColumn.hide
-    }, newColumn, {
+    columnsState.lookup[field] = (0, _extends2.default)({}, existingState, newColumn, {
       hasBeenResized
     });
   });
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+    Object.keys(columnsState.lookup).forEach(field => {
       if (!columnsToKeep[field]) {
-        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
-      }
-    });
-  }
-
-  const columnsLookupBeforePreProcessing = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup);
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
-
-  let columnVisibilityModel = {};
-
-  if (shouldRegenColumnVisibilityModelFromColumns) {
-    let hasModelChanged = false;
-    const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
-
-    if (isInsideStateInitializer) {
-      columnsStateWithPreProcessing.all.forEach(field => {
-        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
-      });
-    } else if (keepOnlyColumnsToUpsert) {
-      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
-      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
-      // cleanup because a given column may have been removed from the `columns` prop but it still
-      // exists in the state.
-      Object.keys(newColumnVisibilityModel).forEach(field => {
-        if (!columnsStateWithPreProcessing.lookup[field]) {
-          delete newColumnVisibilityModel[field];
-          hasModelChanged = true;
-        }
-      });
-    }
-
-    columnsStateWithPreProcessing.all.forEach(field => {
-      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
-      // Then we don't want to update the visibility status of the column in the model.
-      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
-        return;
-      } // We always assume that a column not in the model is visible by default. However, there's an
-      // edge case where the column is not in the model but it also doesn't exist in the `columns`
-      // prop, meaning that the column is being added. In that case, we assume that the column was
-      // not visible before for it be added to the model.
-
-
-      let isVisibleBefore = currentColumnVisibilityModel[field];
-
-      if (isVisibleBefore === undefined) {
-        if (isInsideStateInitializer) {
-          isVisibleBefore = true;
-        } else {
-          const currentState = (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state);
-          isVisibleBefore = !!currentState.lookup[field];
-        }
-      }
-
-      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
-
-      if (isVisibleAfter !== isVisibleBefore) {
-        hasModelChanged = true;
-        newColumnVisibilityModel[field] = isVisibleAfter;
+        delete columnsState.lookup[field];
       }
     });
-
-    if (hasModelChanged || isInsideStateInitializer) {
-      columnVisibilityModel = newColumnVisibilityModel;
-    } else {
-      columnVisibilityModel = currentColumnVisibilityModel;
-    }
-  } else {
-    columnVisibilityModel = currentColumnVisibilityModel;
   }
 
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  const columnsState = (0, _extends2.default)({}, columnsStateWithPortableColumns, {
-    columnVisibilityModel
-  });
-  return hydrateColumnsWidth(columnsState, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
 
 exports.createColumnsState = createColumnsState;

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

@@ -33,20 +33,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const columnsStateInitializer = (state, props, apiRef) => {
-  var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
+  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
 
-  const isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
-  apiRef.current.unstable_caches.columns = {
-    isUsingColumnVisibilityModel
-  };
   const columnsTypes = (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes);
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
     columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
-    initialState: (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.columns,
-    shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
-    currentColumnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.columns) == null ? void 0 : _props$initialState3$.columnVisibilityModel) != null ? _ref : {},
+    initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
+    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.columns) == null ? void 0 : _props$initialState2$.columnVisibilityModel) != null ? _ref : {},
     keepOnlyColumnsToUpsert: true
   });
   return (0, _extends2.default)({}, state, {
@@ -63,7 +58,7 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 
 function useGridColumns(apiRef, props) {
-  var _props$initialState5, _props$componentsProp2;
+  var _props$initialState4, _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
   const columnTypes = React.useMemo(() => (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes), [props.columnTypes]);
@@ -108,8 +103,7 @@ function useGridColumns(apiRef, props) {
           columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
-          shouldRegenColumnVisibilityModelFromColumns: false,
-          currentColumnVisibilityModel: model,
+          columnVisibilityModel: model,
           keepOnlyColumnsToUpsert: false
         })
       }));
@@ -122,40 +116,22 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: true,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState, columnTypes]);
   const updateColumn = React.useCallback(column => apiRef.current.updateColumns([column]), [apiRef]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
-    // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
-    // `updateColumns` take care of updating the model itself if needs be.
-    // TODO v6: stop using the `hide` field even when the model is not defined
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      var _columnVisibilityMode;
-
-      const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
-      const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
-
-      if (isVisible !== isCurrentlyVisible) {
-        const newModel = (0, _extends2.default)({}, columnVisibilityModel, {
-          [field]: isVisible
-        });
-        apiRef.current.setColumnVisibilityModel(newModel);
-      }
-    } else {
-      const column = apiRef.current.getColumn(field);
-      const newColumn = (0, _extends2.default)({}, column, {
-        hide: !isVisible
+    var _columnVisibilityMode;
+
+    const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
+
+    if (isVisible !== isCurrentlyVisible) {
+      const newModel = (0, _extends2.default)({}, columnVisibilityModel, {
+        [field]: isVisible
       });
-      apiRef.current.updateColumns([newColumn]);
-      const params = {
-        field,
-        colDef: newColumn,
-        isVisible
-      };
-      apiRef.current.publishEvent('columnVisibilityChange', params);
+      apiRef.current.setColumnVisibilityModel(newModel);
     }
   }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
@@ -215,22 +191,19 @@ function useGridColumns(apiRef, props) {
    */
 
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    const columnsStateToExport = {};
-
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      var _props$initialState$c2, _props$initialState4, _props$initialState4$;
-
-      const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
-      const 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;
+    var _props$initialState$c, _props$initialState3, _props$initialState3$;
 
-      if (shouldExportColumnVisibilityModel) {
-        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
-      }
+    const columnsStateToExport = {};
+    const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const 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$c = (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.columns) == null ? void 0 : _props$initialState3$.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 || // Always export if the model is not empty
+    Object.keys(columnVisibilityModelToExport).length > 0;
+
+    if (shouldExportColumnVisibilityModel) {
+      columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
     }
 
     columnsStateToExport.orderedFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
@@ -261,11 +234,11 @@ function useGridColumns(apiRef, props) {
     return (0, _extends2.default)({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, props.columnVisibilityModel, (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.columns]);
+  }, [apiRef, props.columnVisibilityModel, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
-    const columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -277,8 +250,7 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
-      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      columnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
     apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
@@ -316,7 +288,6 @@ function useGridColumns(apiRef, props) {
   };
 
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
   /**
    * APPLIERS
    */
@@ -328,7 +299,6 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -358,7 +328,6 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });

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

@@ -468,7 +468,7 @@ const useGridCellEditing = (apiRef, props) => {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
     prevCellModesModel.current = (0, _utils2.deepClone)(cellModesModel); // Do a deep-clone because the attributes might be changed later

package/node/hooks/features/editRows/useGridEditing.new.js

@@ -21,6 +21,8 @@ var _useGridRowEditing = require("./useGridRowEditing.new");
 
 var _gridEditRowsSelector = require("./gridEditRowsSelector");
 
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -39,7 +41,7 @@ const useGridEditing = (apiRef, props) => {
     isCellEditable: isCellEditableProp
   } = props;
   const isCellEditable = React.useCallback(params => {
-    if (params.rowNode.isAutoGenerated) {
+    if ((0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
       return false;
     }
 
@@ -55,7 +57,7 @@ const useGridEditing = (apiRef, props) => {
       return isCellEditableProp(params);
     }
 
-    if (params.rowNode.isPinned) {
+    if (params.rowNode.type === 'pinnedRow') {
       return false;
     }
 

package/node/hooks/features/editRows/useGridEditing.old.js

@@ -26,6 +26,8 @@ var _useGridCellEditing = require("./useGridCellEditing.old");
 
 var _useGridRowEditing = require("./useGridRowEditing.old");
 
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -56,7 +58,7 @@ function useGridEditing(apiRef, props) {
     stateSelector: _gridEditRowsSelector.gridEditRowsStateSelector,
     changeEvent: 'editRowsModelChange'
   });
-  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isCellEditable = React.useCallback(params => !(0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode) && params.rowNode.type !== 'pinnedRow' && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
 
   const maybeDebounce = (id, field, debounceMs, callback) => {

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

@@ -609,7 +609,7 @@ const useGridRowEditing = (apiRef, props) => {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const copyOfPrevRowModesModel = prevRowModesModel.current;
     prevRowModesModel.current = (0, _utils2.deepClone)(rowModesModel); // Do a deep-clone because the attributes might be changed later

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

@@ -39,6 +39,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function raf() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      resolve();
+    });
+  });
+}
+
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -56,6 +64,7 @@ const useGridPrintExport = (apiRef, props) => {
   // the new state needs to be in place before the grid can be sized correctly
 
   const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
+    // TODO remove unused Promise
     if (!fields && !allColumns) {
       resolve();
       return;
@@ -75,12 +84,10 @@ const useGridPrintExport = (apiRef, props) => {
     });
     apiRef.current.setColumnVisibilityModel(newColumnVisibilityModel);
     resolve();
-  }), [apiRef]);
+  }), [apiRef]); // TODO move outside of this scope and remove React.useCallback
+
   const buildPrintWindow = React.useCallback(title => {
     const iframeEl = document.createElement('iframe');
-    iframeEl.id = 'grid-print-window'; // Without this 'onload' event won't fire in some browsers
-
-    iframeEl.src = window.location.href;
     iframeEl.style.position = 'absolute';
     iframeEl.style.width = '0px';
     iframeEl.style.height = '0px';
@@ -88,17 +95,14 @@ const useGridPrintExport = (apiRef, props) => {
     return iframeEl;
   }, []);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
-    var _printWindow$contentW, _querySelector, _querySelector2;
+    var _querySelector, _querySelector2;
 
     const normalizeOptions = (0, _extends2.default)({
       copyStyles: true,
       hideToolbar: false,
       hideFooter: false
-    }, options); // Some agents, such as IE11 and Enzyme (as of 2 Jun 2020) continuously call the
-    // `onload` callback. This ensures that it is only called once.
-
-    printWindow.onload = null;
-    const printDoc = printWindow.contentDocument || ((_printWindow$contentW = printWindow.contentWindow) == null ? void 0 : _printWindow$contentW.document);
+    }, options);
+    const printDoc = printWindow.contentDocument;
 
     if (!printDoc) {
       return;
@@ -138,10 +142,12 @@ const useGridPrintExport = (apiRef, props) => {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // Remove all loaded elements from the current host
+    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
+    // prevents us to do it
 
-    printDoc.body.innerHTML = '';
-    printDoc.body.appendChild(gridClone);
+    const container = document.createElement('div');
+    container.appendChild(gridClone);
+    printDoc.body.innerHTML = container.innerHTML;
     const defaultPageStyle = typeof normalizeOptions.pageStyle === 'function' ? normalizeOptions.pageStyle() : normalizeOptions.pageStyle;
 
     if (typeof defaultPageStyle === 'string') {
@@ -235,17 +241,25 @@ const useGridPrintExport = (apiRef, props) => {
 
     await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns);
     apiRef.current.unstable_disableVirtualization();
+    await raf(); // wait for the state changes to take action
+
     const printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
-    doc.current.body.appendChild(printWindow);
 
     if (process.env.NODE_ENV === 'test') {
-      // In test env, run the all pipeline without waiting for loading
+      doc.current.body.appendChild(printWindow); // In test env, run the all pipeline without waiting for loading
+
       handlePrintWindowLoad(printWindow, options);
       handlePrintWindowAfterPrint(printWindow);
     } else {
-      printWindow.onload = () => handlePrintWindowLoad(printWindow, options);
+      printWindow.onload = () => {
+        handlePrintWindowLoad(printWindow, options);
+
+        printWindow.contentWindow.onafterprint = () => {
+          handlePrintWindowAfterPrint(printWindow);
+        };
+      };
 
-      printWindow.contentWindow.onafterprint = () => handlePrintWindowAfterPrint(printWindow);
+      doc.current.body.appendChild(printWindow);
     }
   }, [props, logger, apiRef, buildPrintWindow, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint]);
   const printExportApi = {

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

@@ -35,11 +35,7 @@ const defaultGetRowsToExport = ({
   const filteredSortedRowIds = (0, _filter.gridFilteredSortedRowIdsSelector)(apiRef);
   const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
-  const bodyRows = filteredSortedRowIds.filter(id => {
-    var _rowTree$id$position;
-
-    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
-  });
+  const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
   const topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
   const bottomPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];

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

@@ -100,7 +100,7 @@ const gridVisibleRowsSelector = gridVisibleSortedRowIdsSelector;
  */
 
 exports.gridVisibleRowsSelector = gridVisibleRowsSelector;
-const gridVisibleSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelector)(gridVisibleSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+const gridVisibleSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelector)(gridVisibleSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }

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

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _gridFeatureMode = require("../../../models/gridFeatureMode");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -80,7 +78,7 @@ const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : (0, _gridFilterState.getDefaultGridFilterModel)()
@@ -289,8 +287,9 @@ const useGridFilter = (apiRef, props) => {
     return initialValue;
   }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client && params.isRowMatchingFilters) {
-      const rowIds = (0, _rows.gridRowIdsSelector)(apiRef);
+    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
+      const tree = (0, _rows.gridRowTreeSelector)(apiRef);
+      const rowIds = tree[_rows.GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
 
       for (let i = 0; i < rowIds.length; i += 1) {
@@ -312,7 +311,7 @@ const useGridFilter = (apiRef, props) => {
 
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` since no row is collapsed.
+        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
         visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };

package/node/hooks/features/pagination/gridPaginationSelector.js

@@ -44,7 +44,7 @@ const gridPageCountSelector = (0, _createSelector.createSelector)(gridPagination
  */
 
 exports.gridPageCountSelector = gridPageCountSelector;
-const gridPaginationRowRangeSelector = (0, _createSelector.createSelector)(gridPaginationSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowTreeDepthSelector, _gridFilterSelector.gridVisibleSortedRowEntriesSelector, _gridFilterSelector.gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = (0, _createSelector.createSelector)(gridPaginationSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridVisibleSortedRowEntriesSelector, _gridFilterSelector.gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(pagination.pageSize * pagination.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + pagination.pageSize - 1, visibleTopLevelRowCount - 1); // The range contains no element