@mui/x-data-grid 5.6.1 → 5.7.0

package/modern/components/panel/GridPreferencesPanel.js

@@ -7,19 +7,17 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
   const apiRef = useGridApiContext();
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const isColumnsTabOpen = preferencePanelState.openedPanelValue === GridPreferencePanelsValue.columns;
-  const isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
-  return /*#__PURE__*/_jsxs(rootProps.components.Panel, _extends({
+  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     ref: ref,
     as: rootProps.components.BasePopper,
     open: columns.length > 0 && preferencePanelState.open
   }, rootProps.componentsProps?.panel, props, rootProps.componentsProps?.basePopper, {
-    children: [!rootProps.disableColumnSelector && isColumnsTabOpen && /*#__PURE__*/_jsx(rootProps.components.ColumnsPanel, _extends({}, rootProps.componentsProps?.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/_jsx(rootProps.components.FilterPanel, _extends({}, rootProps.componentsProps?.filterPanel))]
+    children: panelContent
   }));
 });

package/modern/hooks/core/preProcessing/useGridPreProcessing.js

@@ -4,6 +4,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { GridEvents } from '../../../models/events';
+/**
+ * TODO: Rename `useGridPipProcessing`
+ */
+
 export const useGridPreProcessing = apiRef => {
   const preProcessorsRef = React.useRef({});
   const registerPreProcessor = React.useCallback((group, id, callback) => {
@@ -14,7 +18,7 @@ export const useGridPreProcessing = apiRef => {
     const preProcessors = preProcessorsRef.current[group];
     const oldCallback = preProcessors[id];
 
-    if (!oldCallback || oldCallback !== callback) {
+    if (oldCallback !== callback) {
       preProcessorsRef.current[group] = _extends({}, preProcessors, {
         [id]: callback
       });

package/modern/hooks/core/preProcessing/useGridRegisterPreProcessor.js

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
+
+/**
+ * TODO: Rename `useGridRegisterPipeProcessor`
+ */
 export const useGridRegisterPreProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/modern/hooks/core/strategyProcessing/index.js

@@ -0,0 +1,3 @@
+export * from './gridStrategyProcessingApi';
+export * from './useGridRegisterStrategyProcessor';
+export * from './useGridStrategyProcessing';

package/modern/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
+  const registerPreProcessor = React.useCallback(() => {
+    apiRef.current.unstable_registerStrategyProcessor(strategyName, group, processor);
+  }, [apiRef, processor, group, strategyName]);
+  useFirstRender(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+  }, [registerPreProcessor]);
+};

package/modern/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -0,0 +1,112 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridEvents } from '../../../models/events';
+export const GRID_DEFAULT_STRATEGY = 'none';
+export const GRID_STRATEGIES_PROCESSORS = {
+  rowTreeCreation: 'rowTree',
+  filtering: 'rowTree',
+  sorting: 'rowTree'
+};
+
+/**
+ * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
+ *
+ * Some plugins contain custom logic that must only be run if the right strategy is active.
+ * For instance, the tree data plugin has:
+ * - custom row tree creation algorithm.
+ * - custom sorting algorithm.
+ * - custom filtering algorithm.
+ *
+ * These plugins must use:
+ * - `apiRef.current.unstable_registerStrategyProcessor` to register their processors.
+ * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
+ *
+ * Some hooks need to run the custom logic of the active strategy.
+ * For instance, the `useGridFiltering` wants to run:
+ * - the tree data filtering if the tree data is the current way of grouping rows.
+ * - the row grouping filtering if the row grouping is the current way of grouping rows.
+ * - the flat filtering if there is no grouping of the rows (equivalent to the "none" strategy).
+ *
+ * These hooks must use:
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run a processor.
+ * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ *    Warning: Be careful not to apply the processor several times.
+ *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    So listening to both would most likely run your logic twice.
+ * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes
+ *
+ * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ */
+export const useGridStrategyProcessing = apiRef => {
+  const availableStrategies = React.useRef(new Map());
+  const strategiesCache = React.useRef({});
+  const registerStrategyProcessor = React.useCallback((strategyName, processorName, processor) => {
+    const cleanup = () => {
+      const _ref = strategiesCache.current[processorName],
+            otherProcessors = _objectWithoutPropertiesLoose(_ref, [strategyName].map(_toPropertyKey));
+
+      strategiesCache.current[processorName] = otherProcessors;
+    };
+
+    if (!strategiesCache.current[processorName]) {
+      strategiesCache.current[processorName] = {};
+    }
+
+    const groupPreProcessors = strategiesCache.current[processorName];
+    const previousProcessor = groupPreProcessors[strategyName];
+    groupPreProcessors[strategyName] = processor;
+
+    if (!previousProcessor || previousProcessor === processor) {
+      return cleanup;
+    }
+
+    if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
+      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+    }
+
+    return cleanup;
+  }, [apiRef]);
+  const applyStrategyProcessor = React.useCallback((processorName, params) => {
+    const activeStrategy = apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName]);
+
+    if (activeStrategy == null) {
+      throw new Error("Can't apply a strategy processor before defining an active strategy");
+    }
+
+    const groupCache = strategiesCache.current[processorName];
+
+    if (!groupCache || !groupCache[activeStrategy]) {
+      throw new Error(`No processor found for processor "${processorName}" on strategy "${activeStrategy}"`);
+    }
+
+    const processor = groupCache[activeStrategy];
+    return processor(params);
+  }, [apiRef]);
+  const getActiveStrategy = React.useCallback(strategyGroup => {
+    const strategyEntries = Array.from(availableStrategies.current.entries());
+    const availableStrategyEntry = strategyEntries.find(([, strategy]) => {
+      if (strategy.group !== strategyGroup) {
+        return false;
+      }
+
+      return strategy.isAvailable();
+    });
+    return availableStrategyEntry?.[0] ?? GRID_DEFAULT_STRATEGY;
+  }, []);
+  const setStrategyAvailability = React.useCallback((strategyGroup, strategyName, isAvailable) => {
+    availableStrategies.current.set(strategyName, {
+      group: strategyGroup,
+      isAvailable
+    });
+    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+  }, [apiRef]);
+  const strategyProcessingApi = {
+    unstable_registerStrategyProcessor: registerStrategyProcessor,
+    unstable_applyStrategyProcessor: applyStrategyProcessor,
+    unstable_getActiveStrategy: getActiveStrategy,
+    unstable_setStrategyAvailability: setStrategyAvailability
+  };
+  useGridApiMethod(apiRef, strategyProcessingApi, 'GridStrategyProcessing');
+};

package/modern/hooks/core/useGridInitialization.js

@@ -3,7 +3,7 @@ import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridErrorHandler } from './useGridErrorHandler';
 import { useGridLocaleText } from './useGridLocaleText';
 import { useGridPreProcessing } from './preProcessing';
-import { useGridRowGroupsPreProcessing } from './rowGroupsPreProcessing';
+import { useGridStrategyProcessing } from './strategyProcessing';
 import { useGridStateInitialization } from './useGridStateInitialization';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -15,7 +15,7 @@ export const useGridInitialization = (inputApiRef, props) => {
   useGridErrorHandler(apiRef, props);
   useGridStateInitialization(apiRef, props);
   useGridPreProcessing(apiRef);
-  useGridRowGroupsPreProcessing(apiRef);
+  useGridStrategyProcessing(apiRef);
   useGridLocaleText(apiRef, props);
   return apiRef;
 };

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
+export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 export const computeColumnTypes = (customColumnTypes = {}) => {
   const mergedColumnTypes = _extends({}, getGridDefaultColumnTypes());
 
@@ -167,6 +168,55 @@ export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
   });
 };
 let 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 const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const 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);
+    }
+  }
+
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [...cleanOrderedFields, ...columnsState.all.filter(field => !orderedFieldsLookup[field])];
+
+  const newColumnLookup = _extends({}, columnsState.lookup);
+
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    newColumnLookup[field] = _extends({}, newColumnLookup[field], dimensions[field], {
+      hasBeenResized: true
+    });
+  }
+
+  const newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
@@ -192,14 +242,16 @@ export const getGridColDef = (columnTypes, type) => {
 export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
+  initialState,
   columnsTypes,
   currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
-  reset
+  keepOnlyColumnsToUpsert = false
 }) => {
+  const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -221,7 +273,13 @@ export const createColumnsState = ({
       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);
+      const mergedColumn = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+
+      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(propertyName => newColumn[propertyName] !== undefined)) {
+        mergedColumn.hasBeenResized = true;
+      }
+
+      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
     }
   });
 
@@ -232,46 +290,74 @@ export const createColumnsState = ({
   let columnVisibilityModel = {};
 
   if (shouldRegenColumnVisibilityModelFromColumns) {
-    if (reset) {
-      columnsStateWithPreProcessing.all.forEach(field => {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
-      });
-    } else {
-      const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
+    let hasModelChanged = false;
 
-      let hasModelChanged = false;
-      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;
-        }
-
-        const isVisibleBefore = currentColumnVisibilityModel[field] ?? true;
-        const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+    const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
 
-        if (isVisibleAfter !== isVisibleBefore) {
+    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;
-          newColumnVisibilityModel[field] = isVisibleAfter;
         }
       });
+    }
 
-      if (hasModelChanged) {
-        columnVisibilityModel = newColumnVisibilityModel;
-      } else {
-        columnVisibilityModel = currentColumnVisibilityModel;
+    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 = gridColumnsSelector(apiRef.current.state);
+          isVisibleBefore = !!currentState.lookup[field];
+        }
+      }
+
+      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
       }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
     }
   } else {
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
-  const columnsState = _extends({}, columnsStateWithPreProcessing, {
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+
+  const columnsState = _extends({}, columnsStateWithPortableColumns, {
     columnVisibilityModel
   });
 
   return hydrateColumnsWidth(columnsState, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
 };
-export const setColumnsState = columnsState => state => _extends({}, state, {
+export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState
 });

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

@@ -6,17 +6,20 @@ 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 { 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) => {
-  const shouldUseVisibleColumnModel = !!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel;
+  const isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel;
   const columnsTypes = computeColumnTypes(props.columnTypes);
   const columnsState = createColumnsState({
     apiRef,
     columnsTypes,
     columnsToUpsert: props.columns,
-    shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
+    initialState: props.initialState?.columns,
+    shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
     currentColumnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
-    reset: true
+    keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
     columns: columnsState
@@ -36,7 +39,7 @@ export function useGridColumns(apiRef, props) {
    * 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`
    */
 
-  const shouldUseVisibleColumnModel = React.useRef(!!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel).current;
+  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel).current;
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -46,7 +49,7 @@ export function useGridColumns(apiRef, props) {
   });
   const setGridColumnsState = React.useCallback(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]);
@@ -75,9 +78,10 @@ export function useGridColumns(apiRef, props) {
           apiRef,
           columnsTypes,
           columnsToUpsert: [],
+          initialState: undefined,
           shouldRegenColumnVisibilityModelFromColumns: false,
           currentColumnVisibilityModel: model,
-          reset: false
+          keepOnlyColumnsToUpsert: false
         })
       }));
       apiRef.current.forceUpdate();
@@ -88,8 +92,9 @@ export function useGridColumns(apiRef, props) {
       apiRef,
       columnsTypes,
       columnsToUpsert: columns,
+      initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
-      reset: false
+      keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState, columnsTypes]);
@@ -98,7 +103,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) {
       const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
       const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
 
@@ -124,7 +129,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef, isUsingColumnVisibilityModel]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
     const allColumns = gridColumnFieldsSelector(apiRef);
     const oldIndexPosition = allColumns.findIndex(col => col === field);
@@ -183,46 +188,74 @@ export function useGridColumns(apiRef, props) {
    */
 
   const stateExportPreProcessing = React.useCallback(prevState => {
-    if (!shouldUseVisibleColumnModel) {
-      return prevState;
+    const columnsStateToExport = {};
+
+    if (isUsingColumnVisibilityModel) {
+      const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+      const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+
+      if (hasHiddenColumns) {
+        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+      }
     }
 
-    const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-    const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+    columnsStateToExport.orderedFields = gridColumnFieldsSelector(apiRef);
+    const columns = gridColumnDefinitionsSelector(apiRef);
+    const dimensions = {};
+    columns.forEach(colDef => {
+      if (colDef.hasBeenResized) {
+        const colDefDimensions = {};
+        COLUMNS_DIMENSION_PROPERTIES.forEach(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, isUsingColumnVisibilityModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    if (!shouldUseVisibleColumnModel) {
+    const columnVisibilityModelToImport = isUsingColumnVisibilityModel ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
+    const initialState = context.stateToRestore.columns;
+
+    if (columnVisibilityModelToImport == null && initialState == null) {
       return params;
     }
 
-    const columnVisibilityModel = context.stateToRestore.columns?.columnVisibilityModel;
+    const columnsState = createColumnsState({
+      apiRef,
+      columnsTypes,
+      columnsToUpsert: [],
+      initialState,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      keepOnlyColumnsToUpsert: false
+    });
+    apiRef.current.setState(mergeColumnsState(columnsState));
 
-    if (columnVisibilityModel != null) {
-      const columnsState = createColumnsState({
-        apiRef,
-        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]);
+  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
+    if (value === GridPreferencePanelsValue.columns) {
+      const ColumnsPanel = props.components.ColumnsPanel;
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, props.componentsProps?.columnsPanel));
+    }
+
+    return initialValue;
+  }, [props.components.ColumnsPanel, props.componentsProps?.columnsPanel]);
   useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
@@ -237,11 +270,12 @@ export function useGridColumns(apiRef, props) {
       apiRef,
       columnsTypes,
       columnsToUpsert: [],
-      shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
-      reset: false
+      initialState: undefined,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, shouldUseVisibleColumnModel]);
+  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
   const prevInnerWidth = React.useRef(null);
 
   const handleGridSizeChange = viewportInnerSize => {
@@ -271,13 +305,14 @@ export function useGridColumns(apiRef, props) {
     const columnsState = createColumnsState({
       apiRef,
       columnsTypes,
+      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,
       columnsToUpsert: props.columns,
-      reset: true
+      keepOnlyColumnsToUpsert: true
     });
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, shouldUseVisibleColumnModel]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, isUsingColumnVisibilityModel]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);