@mui/x-data-grid 5.6.0 → 5.8.0

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

@@ -1,11 +1,12 @@
 import { createSelector } from '../../../utils/createSelector';
-
+import { wrapWithWarningOnCall } from '../../../utils/warning';
 /**
  * @category Columns
  * @deprecated Use the selector returning exactly the value you are looking for.
  * @ignore - do not document.
  * TODO v6: Rename `gridColumnsStateSelector`
  */
+
 export var gridColumnsSelector = function gridColumnsSelector(state) {
   return state.columns;
 };
@@ -124,58 +125,58 @@ export var gridFilterableColumnLookupSelector = createSelector(gridColumnDefinit
  * @ignore - do not document.
  */
 
-export var allGridColumnsFieldsSelector = gridColumnFieldsSelector;
+export var allGridColumnsFieldsSelector = wrapWithWarningOnCall(gridColumnFieldsSelector, ['MUI: The method allGridColumnsFieldsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnFieldsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export var allGridColumnsSelector = gridColumnDefinitionsSelector;
+export var allGridColumnsSelector = wrapWithWarningOnCall(gridColumnDefinitionsSelector, ['MUI: The method allGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnDefinitionsSelector instead']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export var visibleGridColumnsSelector = gridVisibleColumnDefinitionsSelector;
+export var visibleGridColumnsSelector = wrapWithWarningOnCall(gridVisibleColumnDefinitionsSelector, ['MUI: The method visibleGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridVisibleColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export var filterableGridColumnsSelector = gridFilterableColumnDefinitionsSelector;
+export var filterableGridColumnsSelector = wrapWithWarningOnCall(gridFilterableColumnDefinitionsSelector, ['MUI: The method filterableGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
  * @ignore - do not document.
  */
 
-export var filterableGridColumnsIdsSelector = createSelector(gridFilterableColumnDefinitionsSelector, function (columns) {
+export var filterableGridColumnsIdsSelector = wrapWithWarningOnCall(createSelector(gridFilterableColumnDefinitionsSelector, function (columns) {
   return columns.map(function (col) {
     return col.field;
   });
-});
+}), ['MUI: The method filterableGridColumnsIdsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead.', 'The return format is now a lookup, if you want to get the same output as before, use the following code:', '', 'const lookup = gridFilterableColumnLookupSelector(apiRef);', 'const fields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);']);
 /**
  * Get the amount of visible columns.
  * @category Visible Columns
- * @deprecated Use the length of `gridVisibleColumnDefinitionsSelector` instead.
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export var visibleGridColumnsLengthSelector = createSelector(gridVisibleColumnDefinitionsSelector, function (visibleColumns) {
+export var visibleGridColumnsLengthSelector = wrapWithWarningOnCall(createSelector(gridVisibleColumnDefinitionsSelector, function (visibleColumns) {
   return visibleColumns.length;
-});
+}), ['MUI: The method visibleGridColumnsLengthSelector is deprecated and will be removed in the next major version.', 'Use the length of the array returned by gridVisibleColumnDefinitionsSelector instead.']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
  * @ignore - do not document.
  */
 
-export var gridColumnsMetaSelector = createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, function (positions, totalWidth) {
+export var gridColumnsMetaSelector = wrapWithWarningOnCall(createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, function (positions, totalWidth) {
   return {
     totalWidth: totalWidth,
     positions: positions
   };
-});
+}), ['MUI: The method gridColumnsMetaSelector is deprecated and will be removed in the next major version.', 'Use gridColumnsTotalWidthSelector or gridColumnPositionsSelector instead']);

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

@@ -1,22 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
+export var COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 export var computeColumnTypes = function computeColumnTypes() {
   var customColumnTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var allColumnTypes = _extends({}, getGridDefaultColumnTypes(), customColumnTypes);
+  var mergedColumnTypes = _extends({}, getGridDefaultColumnTypes());
 
-  var mergedColumnTypes = {};
-  Object.entries(allColumnTypes).forEach(function (_ref) {
+  Object.entries(customColumnTypes).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         colType = _ref2[0],
         colTypeDef = _ref2[1];
 
-    colTypeDef = _extends({}, allColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
-    mergedColumnTypes[colType] = colTypeDef;
+    if (mergedColumnTypes[colType]) {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colType], colTypeDef);
+    } else {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+    }
   });
   return mergedColumnTypes;
 };
@@ -171,6 +175,57 @@ export var hydrateColumnsWidth = function hydrateColumnsWidth(rawState, viewport
   });
 };
 var columnTypeWarnedOnce = false;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+
+export var applyInitialState = function applyInitialState(columnsState, initialState) {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  var _initialState$ordered = initialState.orderedFields,
+      orderedFields = _initialState$ordered === void 0 ? [] : _initialState$ordered,
+      _initialState$dimensi = initialState.dimensions,
+      dimensions = _initialState$dimensi === void 0 ? {} : _initialState$dimensi;
+  var columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  var orderedFieldsLookup = {};
+  var cleanOrderedFields = [];
+
+  for (var i = 0; i < orderedFields.length; i += 1) {
+    var _field = orderedFields[i]; // Ignores the fields in the initialState that matches no field on the current column state
+
+    if (columnsState.lookup[_field]) {
+      orderedFieldsLookup[_field] = true;
+      cleanOrderedFields.push(_field);
+    }
+  }
+
+  var newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [].concat(cleanOrderedFields, _toConsumableArray(columnsState.all.filter(function (field) {
+    return !orderedFieldsLookup[field];
+  })));
+
+  var newColumnLookup = _extends({}, columnsState.lookup);
+
+  for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
+    var _field2 = columnsWithUpdatedDimensions[_i];
+    newColumnLookup[_field2] = _extends({}, newColumnLookup[_field2], dimensions[_field2], {
+      hasBeenResized: true
+    });
+  }
+
+  var newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
@@ -198,14 +253,17 @@ export var createColumnsState = function createColumnsState(_ref5) {
 
   var apiRef = _ref5.apiRef,
       columnsToUpsert = _ref5.columnsToUpsert,
-      columnsTypes = _ref5.columnsTypes,
+      initialState = _ref5.initialState,
+      columnTypes = _ref5.columnTypes,
       _ref5$currentColumnVi = _ref5.currentColumnVisibilityModel,
       currentColumnVisibilityModel = _ref5$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref5$currentColumnVi,
       shouldRegenColumnVisibilityModelFromColumns = _ref5.shouldRegenColumnVisibilityModelFromColumns,
-      reset = _ref5.reset;
+      _ref5$keepOnlyColumns = _ref5.keepOnlyColumnsToUpsert,
+      keepOnlyColumnsToUpsert = _ref5$keepOnlyColumns === void 0 ? false : _ref5$keepOnlyColumns;
+  var isInsideStateInitializer = !apiRef.current.state.columns;
   var columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -213,74 +271,139 @@ export var createColumnsState = function createColumnsState(_ref5) {
   } else {
     var currentState = gridColumnsSelector(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: _toConsumableArray(currentState.all),
-      lookup: _extends({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : _toConsumableArray(currentState.all),
+      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  var columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce(function (acc, key) {
+      return _extends({}, acc, _defineProperty({}, key, false));
+    }, {});
+  }
+
   var columnsToUpsertLookup = {};
   columnsToUpsert.forEach(function (newColumn) {
-    columnsToUpsertLookup[newColumn.field] = true;
+    var field = newColumn.field;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    var existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
 
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = _extends({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field: field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
+
+    var hasValidDimension = false;
+
+    if (!existingState.hasBeenResized) {
+      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(function (key) {
+        return newColumn[key] !== undefined;
+      });
+    }
+
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+    });
   });
 
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(function (field) {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   var columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
 
-  var columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  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) {
-    if (reset) {
+    var hasModelChanged = false;
+
+    var newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+
+    if (isInsideStateInitializer) {
       columnsStateWithPreProcessing.all.forEach(function (field) {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
       });
-    } else {
-      var newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+    } 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;
+        }
+      });
+    }
 
-      var hasModelChanged = false;
-      columnsStateWithPreProcessing.all.forEach(function (field) {
-        var _currentColumnVisibil;
+    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.
 
-        // 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;
-        }
 
-        var isVisibleBefore = (_currentColumnVisibil = currentColumnVisibilityModel[field]) != null ? _currentColumnVisibil : true;
-        var isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+      var isVisibleBefore = currentColumnVisibilityModel[field];
 
-        if (isVisibleAfter !== isVisibleBefore) {
-          hasModelChanged = true;
-          newColumnVisibilityModel[field] = isVisibleAfter;
+      if (isVisibleBefore === undefined) {
+        if (isInsideStateInitializer) {
+          isVisibleBefore = true;
+        } else {
+          var _currentState = gridColumnsSelector(apiRef.current.state);
+
+          isVisibleBefore = !!_currentState.lookup[field];
         }
-      });
+      }
 
-      if (hasModelChanged) {
-        columnVisibilityModel = newColumnVisibilityModel;
-      } else {
-        columnVisibilityModel = currentColumnVisibilityModel;
+      var isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
       }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
     }
   } else {
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
-  var columnsState = _extends({}, columnsStateWithPreProcessing, {
+  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);
 };
-export var setColumnsState = function setColumnsState(columnsState) {
+export var mergeColumnsState = function mergeColumnsState(columnsState) {
   return function (state) {
     return _extends({}, state, {
       columns: columnsState

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

@@ -7,20 +7,23 @@ 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 { useGridRegisterPreProcessor } from '../../core/preProcessing';
-import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, setColumnsState } from './gridColumnsUtils';
+import { useGridRegisterPipeProcessor } 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 var columnsStateInitializer = function columnsStateInitializer(state, props, apiRef) {
-  var _props$initialState, _props$initialState$c, _ref, _props$columnVisibili, _props$initialState2, _props$initialState2$;
+  var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
 
-  var shouldUseVisibleColumnModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  var isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
   var columnsTypes = computeColumnTypes(props.columnTypes);
   var columnsState = createColumnsState({
     apiRef: apiRef,
-    columnsTypes: columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
-    shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
-    currentColumnVisibilityModel: (_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 : {},
-    reset: true
+    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 : {},
+    keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
     columns: columnsState
@@ -33,18 +36,20 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$initialState3, _props$initialState3$;
+  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridColumns');
-  var columnsTypes = React.useMemo(function () {
+  var columnTypes = React.useMemo(function () {
     return computeColumnTypes(props.columnTypes);
   }, [props.columnTypes]);
+  var previousColumnsProp = React.useRef(props.columns);
+  var previousColumnTypesProp = React.useRef(columnTypes);
   /**
    * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
    * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
    */
 
-  var shouldUseVisibleColumnModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState3 = props.initialState) != null && (_props$initialState3$ = _props$initialState3.columns) != null && _props$initialState3$.columnVisibilityModel)).current;
+  var isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -54,7 +59,7 @@ export function useGridColumns(apiRef, props) {
   });
   var setGridColumnsState = React.useCallback(function (columnsState) {
     logger.debug('Updating columns state.');
-    apiRef.current.setState(setColumnsState(columnsState));
+    apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.forceUpdate();
     apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
   }, [logger, apiRef]);
@@ -93,27 +98,29 @@ export function useGridColumns(apiRef, props) {
         return _extends({}, state, {
           columns: createColumnsState({
             apiRef: apiRef,
-            columnsTypes: columnsTypes,
+            columnTypes: columnTypes,
             columnsToUpsert: [],
+            initialState: undefined,
             shouldRegenColumnVisibilityModelFromColumns: false,
             currentColumnVisibilityModel: model,
-            reset: false
+            keepOnlyColumnsToUpsert: false
           })
         });
       });
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   var updateColumns = React.useCallback(function (columns) {
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       columnsToUpsert: columns,
+      initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
-      reset: false
+      keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnsTypes]);
+  }, [apiRef, setGridColumnsState, columnTypes]);
   var updateColumn = React.useCallback(function (column) {
     return apiRef.current.updateColumns([column]);
   }, [apiRef]);
@@ -121,7 +128,7 @@ export function useGridColumns(apiRef, props) {
     // 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 (shouldUseVisibleColumnModel) {
+    if (isUsingColumnVisibilityModel.current) {
       var _columnVisibilityMode;
 
       var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -147,7 +154,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef]);
   var setColumnIndex = React.useCallback(function (field, targetIndexPosition) {
     var allColumns = gridColumnFieldsSelector(apiRef);
     var oldIndexPosition = allColumns.findIndex(function (col) {
@@ -210,55 +217,85 @@ export function useGridColumns(apiRef, props) {
    */
 
   var stateExportPreProcessing = React.useCallback(function (prevState) {
-    if (!shouldUseVisibleColumnModel) {
-      return prevState;
+    var columnsStateToExport = {};
+
+    if (isUsingColumnVisibilityModel.current) {
+      var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+      var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
+        return value === false;
+      });
+
+      if (hasHiddenColumns) {
+        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+      }
     }
 
-    var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-    var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
-      return value === false;
+    columnsStateToExport.orderedFields = gridColumnFieldsSelector(apiRef);
+    var columns = gridColumnDefinitionsSelector(apiRef);
+    var dimensions = {};
+    columns.forEach(function (colDef) {
+      if (colDef.hasBeenResized) {
+        var colDefDimensions = {};
+        COLUMNS_DIMENSION_PROPERTIES.forEach(function (propertyName) {
+          colDefDimensions[propertyName] = colDef[propertyName];
+        });
+        dimensions[colDef.field] = colDefDimensions;
+      }
     });
 
-    if (!hasHiddenColumns) {
-      return prevState;
+    if (Object.keys(dimensions).length > 0) {
+      columnsStateToExport.dimensions = dimensions;
     }
 
     return _extends({}, prevState, {
-      columns: {
-        columnVisibilityModel: columnVisibilityModelToExport
-      }
+      columns: columnsStateToExport
     });
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 
-    if (!shouldUseVisibleColumnModel) {
+    var columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    var initialState = context.stateToRestore.columns;
+
+    if (columnVisibilityModelToImport == null && initialState == null) {
       return params;
     }
 
-    var columnVisibilityModel = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
+    var columnsState = createColumnsState({
+      apiRef: apiRef,
+      columnTypes: columnTypes,
+      columnsToUpsert: [],
+      initialState: initialState,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      keepOnlyColumnsToUpsert: false
+    });
+    apiRef.current.setState(mergeColumnsState(columnsState));
 
-    if (columnVisibilityModel != null) {
-      var columnsState = createColumnsState({
-        apiRef: apiRef,
-        columnsTypes: columnsTypes,
-        columnsToUpsert: [],
-        shouldRegenColumnVisibilityModelFromColumns: false,
-        currentColumnVisibilityModel: columnVisibilityModel,
-        reset: false
-      });
-      apiRef.current.setState(setColumnsState(columnsState));
+    if (initialState != null) {
+      apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
     }
 
     return params;
-  }, [apiRef, shouldUseVisibleColumnModel, columnsTypes]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  }, [apiRef, columnTypes]);
+  var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
+    if (value === GridPreferencePanelsValue.columns) {
+      var _props$componentsProp;
+
+      var ColumnsPanel = props.components.ColumnsPanel;
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.columnsPanel));
+    }
+
+    return initialValue;
+  }, [props.components.ColumnsPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.columnsPanel]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
 
-  var handlePreProcessorRegister = React.useCallback(function (name) {
+  var handlepipeProcessorRegister = React.useCallback(function (name) {
     if (name !== 'hydrateColumns') {
       return;
     }
@@ -266,13 +303,14 @@ export function useGridColumns(apiRef, props) {
     logger.info("Columns pre-processing have changed, regenerating the columns");
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: columnTypes,
       columnsToUpsert: [],
-      shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
-      reset: false
+      initialState: undefined,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, shouldUseVisibleColumnModel]);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
   var prevInnerWidth = React.useRef(null);
 
   var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
@@ -282,7 +320,7 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
   /**
@@ -299,16 +337,24 @@ export function useGridColumns(apiRef, props) {
     }
 
     logger.info("GridColumns have changed, new length ".concat(props.columns.length));
+
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+
     var columnsState = createColumnsState({
       apiRef: apiRef,
-      columnsTypes: columnsTypes,
+      columnTypes: 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: !shouldUseVisibleColumnModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       columnsToUpsert: props.columns,
-      reset: true
+      keepOnlyColumnsToUpsert: true
     });
+    previousColumnsProp.current = props.columns;
+    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, shouldUseVisibleColumnModel]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
   React.useEffect(function () {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);