@mui/x-data-grid 5.17.4 → 6.0.0-alpha.0

package/hooks/features/columns/useGridColumns.js

@@ -3,26 +3,21 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export 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 = computeColumnTypes(props.columnTypes);
   const columnsState = 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 _extends({}, state, {
@@ -36,7 +31,7 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$initialState5, _props$componentsProp2;
+  var _props$initialState4, _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridColumns');
   const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
@@ -81,8 +76,7 @@ export function useGridColumns(apiRef, props) {
           columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
-          shouldRegenColumnVisibilityModelFromColumns: false,
-          currentColumnVisibilityModel: model,
+          columnVisibilityModel: model,
           keepOnlyColumnsToUpsert: false
         })
       }));
@@ -95,43 +89,23 @@ export 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 = gridColumnVisibilityModelSelector(apiRef);
-      const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
-
-      if (isVisible !== isCurrentlyVisible) {
-        const newModel = _extends({}, columnVisibilityModel, {
-          [field]: isVisible
-        });
+    var _columnVisibilityMode;
 
-        apiRef.current.setColumnVisibilityModel(newModel);
-      }
-    } else {
-      const column = apiRef.current.getColumn(field);
+    const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+    const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
 
-      const newColumn = _extends({}, column, {
-        hide: !isVisible
+    if (isVisible !== isCurrentlyVisible) {
+      const newModel = _extends({}, 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) => {
@@ -193,22 +167,19 @@ export function useGridColumns(apiRef, props) {
    */
 
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    const columnsStateToExport = {};
+    var _props$initialState$c, _props$initialState3, _props$initialState3$;
 
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      var _props$initialState$c2, _props$initialState4, _props$initialState4$;
-
-      const columnVisibilityModelToExport = 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;
-
-      if (shouldExportColumnVisibilityModel) {
-        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
-      }
+    const columnsStateToExport = {};
+    const columnVisibilityModelToExport = 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 = gridColumnFieldsSelector(apiRef);
@@ -237,11 +208,11 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, 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) {
@@ -253,8 +224,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
-      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      columnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
     apiRef.current.setState(mergeColumnsState(columnsState));
@@ -292,7 +262,6 @@ export function useGridColumns(apiRef, props) {
   };
 
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
   /**
    * APPLIERS
    */
@@ -304,7 +273,6 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -334,7 +302,6 @@ export 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/hooks/features/selection/useGridSelection.js

@@ -365,7 +365,7 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    if (event.key.toLowerCase() === 'a' && (event.ctrlKey || event.metaKey)) {
+    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridEventListener, GridEventsStr } from '../../models/events';
+import { GridEventListener, GridEvents } from '../../models/events';
 import { CleanupTracking } from '../../utils/cleanupTracking/CleanupTracking';
 import { EventListenerOptions } from '../../utils/EventManager';
 import type { GridApiCommon } from '../../models';
@@ -17,5 +17,5 @@ interface RegistryContainer {
 export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
 export declare const unstable_resetCleanupTracking: () => void;
 export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions) => void;
-export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEventsStr>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
+export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
 export { GridSignature };

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.4
+/** @license MUI v6.0.0-alpha.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/DataGrid/DataGrid.js

@@ -477,16 +477,6 @@ DataGridRaw.propTypes = {
    */
   onColumnOrderChange: PropTypes.func,
 
-  /**
-   * Callback fired when a column visibility changes.
-   * Only works when no `columnVisibilityModel` is provided and if we change the visibility of a single column at a time.
-   * @param {GridColumnVisibilityChangeParams} params With all properties from [[GridColumnVisibilityChangeParams]].
-   * @param {MuiEvent<{}>} event The event object.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use `onColumnVisibilityModelChange` instead.
-   */
-  onColumnVisibilityChange: PropTypes.func,
-
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
@@ -723,7 +713,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.array.isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/legacy/colDef/gridStringColDef.js

@@ -9,7 +9,6 @@ export var GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
   maxWidth: Infinity,
-  hide: false,
   hideable: true,
   sortable: true,
   resizable: true,

package/legacy/components/cell/GridActionsCell.js

@@ -297,7 +297,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridBooleanCell.js

@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditBooleanCell.js

@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditDateCell.js

@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditInputCell.js

@@ -219,7 +219,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object,
+  row: PropTypes.any,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -309,7 +309,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -177,7 +177,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/containers/GridRootStyles.js

@@ -26,7 +26,8 @@ export var GridRootStyles = styled('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    overflowAnchor: 'none'
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
     height: 'auto'
   }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {

package/legacy/components/panel/GridColumnsPanel.js

@@ -112,29 +112,15 @@ function GridColumnsPanel(props) {
   };
 
   var toggleAllColumns = React.useCallback(function (isVisible) {
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      if (isVisible) {
-        return apiRef.current.setColumnVisibilityModel({});
-      }
-
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(function (col) {
-        return col.hideable !== false;
-      }).map(function (col) {
-        return [col.field, false];
-      })));
-    } // TODO v6: Remove
-
-
-    return apiRef.current.updateColumns(columns.map(function (col) {
-      if (col.hideable !== false) {
-        return {
-          field: col.field,
-          hide: !isVisible
-        };
-      }
-
-      return col;
-    }));
+    if (isVisible) {
+      return apiRef.current.setColumnVisibilityModel({});
+    }
+
+    return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(function (col) {
+      return col.hideable !== false;
+    }).map(function (col) {
+      return [col.field, false];
+    })));
   }, [apiRef, columns]);
   var handleSearchValueChange = React.useCallback(function (event) {
     setSearchValue(event.target.value);

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

@@ -234,10 +234,11 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
     _loop(_i);
   }
 
-  var newColumnsState = {
+  var newColumnsState = _extends({}, columnsState, {
     all: newOrderedFields,
     lookup: newColumnLookup
-  };
+  });
+
   return newColumnsState;
 };
 /**
@@ -269,32 +270,33 @@ export var createColumnsState = function createColumnsState(_ref7) {
       columnsToUpsert = _ref7.columnsToUpsert,
       initialState = _ref7.initialState,
       columnTypes = _ref7.columnTypes,
-      _ref7$currentColumnVi = _ref7.currentColumnVisibilityModel,
-      currentColumnVisibilityModel = _ref7$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref7$currentColumnVi,
-      shouldRegenColumnVisibilityModelFromColumns = _ref7.shouldRegenColumnVisibilityModelFromColumns,
+      _ref7$columnVisibilit = _ref7.columnVisibilityModel,
+      columnVisibilityModel = _ref7$columnVisibilit === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref7$columnVisibilit,
       _ref7$keepOnlyColumns = _ref7.keepOnlyColumnsToUpsert,
       keepOnlyColumnsToUpsert = _ref7$keepOnlyColumns === void 0 ? false : _ref7$keepOnlyColumns;
   var isInsideStateInitializer = !apiRef.current.state.columns;
-  var columnsStateWithoutColumnVisibilityModel;
+  var columnsState;
 
   if (isInsideStateInitializer) {
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: [],
-      lookup: {}
+      lookup: {},
+      columnVisibilityModel: columnVisibilityModel
     };
   } else {
     var currentState = gridColumnsSelector(apiRef.current.state);
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: keepOnlyColumnsToUpsert ? [] : _toConsumableArray(currentState.all),
-      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
-
+      lookup: _extends({}, currentState.lookup),
+      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      columnVisibilityModel: columnVisibilityModel
     };
   }
 
   var columnsToKeep = {};
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce(function (acc, key) {
+    columnsToKeep = Object.keys(columnsState.lookup).reduce(function (acc, key) {
       return _extends({}, acc, _defineProperty({}, key, false));
     }, {});
   }
@@ -304,7 +306,7 @@ export var createColumnsState = function createColumnsState(_ref7) {
     var field = newColumn.field;
     columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
-    var existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+    var existingState = columnsState.lookup[field];
 
     if (existingState == null) {
       // New Column
@@ -313,9 +315,9 @@ export var createColumnsState = function createColumnsState(_ref7) {
         field: field,
         hasBeenResized: false
       });
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     } else if (keepOnlyColumnsToUpsert) {
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     }
 
     var hasBeenResized = existingState.hasBeenResized;
@@ -328,96 +330,22 @@ export var createColumnsState = function createColumnsState(_ref7) {
         }
       }
     });
-    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
-      hide: newColumn.hide == null ? false : newColumn.hide
-    }, newColumn, {
+    columnsState.lookup[field] = _extends({}, existingState, newColumn, {
       hasBeenResized: hasBeenResized
     });
   });
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(function (field) {
+    Object.keys(columnsState.lookup).forEach(function (field) {
       if (!columnsToKeep[field]) {
-        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
-      }
-    });
-  }
-
-  var columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
-
-  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
-
-  var columnVisibilityModel = {};
-
-  if (shouldRegenColumnVisibilityModelFromColumns) {
-    var hasModelChanged = false;
-
-    var newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
-
-    if (isInsideStateInitializer) {
-      columnsStateWithPreProcessing.all.forEach(function (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(function (field) {
-        if (!columnsStateWithPreProcessing.lookup[field]) {
-          delete newColumnVisibilityModel[field];
-          hasModelChanged = true;
-        }
-      });
-    }
-
-    columnsStateWithPreProcessing.all.forEach(function (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.
-
-
-      var isVisibleBefore = currentColumnVisibilityModel[field];
-
-      if (isVisibleBefore === undefined) {
-        if (isInsideStateInitializer) {
-          isVisibleBefore = true;
-        } else {
-          var _currentState = gridColumnsSelector(apiRef.current.state);
-
-          isVisibleBefore = !!_currentState.lookup[field];
-        }
-      }
-
-      var 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;
   }
 
+  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   var columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-
-  var columnsState = _extends({}, columnsStateWithPortableColumns, {
-    columnVisibilityModel: 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);
 };
 export var mergeColumnsState = function mergeColumnsState(columnsState) {
   return function (state) {