@mui/x-data-grid 5.6.1 → 5.7.0

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

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.computeColumnTypes = void 0;
+exports.computeColumnTypes = exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
-exports.setColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
+exports.mergeColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,6 +17,9 @@ var _gridColumnsSelector = require("./gridColumnsSelector");
 
 var _utils = require("../../../utils/utils");
 
+const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+exports.COLUMNS_DIMENSION_PROPERTIES = COLUMNS_DIMENSION_PROPERTIES;
+
 const computeColumnTypes = (customColumnTypes = {}) => {
   const mergedColumnTypes = (0, _extends2.default)({}, (0, _models.getGridDefaultColumnTypes)());
   Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
@@ -187,10 +190,61 @@ const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
 
 exports.hydrateColumnsWidth = hydrateColumnsWidth;
 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.
+ */
+
+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 = (0, _extends2.default)({}, columnsState.lookup);
+
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    newColumnLookup[field] = (0, _extends2.default)({}, 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.
  */
 
+
+exports.applyInitialState = applyInitialState;
+
 const getGridColDef = (columnTypes, type) => {
   if (!type) {
     return columnTypes[_models.DEFAULT_GRID_COL_TYPE_KEY];
@@ -215,16 +269,18 @@ exports.getGridColDef = getGridColDef;
 const createColumnsState = ({
   apiRef,
   columnsToUpsert,
+  initialState,
   columnsTypes,
   currentColumnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
-  reset
+  keepOnlyColumnsToUpsert = false
 }) => {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
+  const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -246,7 +302,13 @@ const createColumnsState = ({
       columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
       columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
     } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      const mergedColumn = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+
+      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(propertyName => newColumn[propertyName] !== undefined)) {
+        mergedColumn.hasBeenResized = true;
+      }
+
+      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
     }
   });
   const columnsLookupBeforePreProcessing = (0, _extends2.default)({}, columnsStateWithoutColumnVisibilityModel.lookup);
@@ -255,42 +317,67 @@ const createColumnsState = ({
   let columnVisibilityModel = {};
 
   if (shouldRegenColumnVisibilityModelFromColumns) {
-    if (reset) {
+    let hasModelChanged = false;
+    const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
+
+    if (isInsideStateInitializer) {
       columnsStateWithPreProcessing.all.forEach(field => {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
       });
-    } else {
-      const newColumnVisibilityModel = (0, _extends2.default)({}, currentColumnVisibilityModel);
-      let hasModelChanged = false;
-      columnsStateWithPreProcessing.all.forEach(field => {
-        var _currentColumnVisibil;
-
-        // 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 = (_currentColumnVisibil = currentColumnVisibilityModel[field]) != null ? _currentColumnVisibil : true;
-        const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
-
-        if (isVisibleAfter !== isVisibleBefore) {
+    } 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 = (0, _gridColumnsSelector.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 = (0, _extends2.default)({}, columnsStateWithPreProcessing, {
+  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);
@@ -298,8 +385,8 @@ const createColumnsState = ({
 
 exports.createColumnsState = createColumnsState;
 
-const setColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
+const mergeColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
   columns: columnsState
 });
 
-exports.setColumnsState = setColumnsState;
+exports.mergeColumnsState = mergeColumnsState;

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

@@ -26,22 +26,27 @@ var _preProcessing = require("../../core/preProcessing");
 
 var _gridColumnsUtils = require("./gridColumnsUtils");
 
+var _preferencesPanel = require("../preferencesPanel");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
 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; }
 
 const 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$;
 
-  const shouldUseVisibleColumnModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  const isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
   const columnsTypes = (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes);
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
     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 (0, _extends2.default)({}, state, {
     columns: columnsState
@@ -57,7 +62,7 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 
 function useGridColumns(apiRef, props) {
-  var _props$initialState3, _props$initialState3$;
+  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
   const columnsTypes = React.useMemo(() => (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes), [props.columnTypes]);
@@ -66,7 +71,7 @@ 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$initialState3 = props.initialState) != null && (_props$initialState3$ = _props$initialState3.columns) != null && _props$initialState3$.columnVisibilityModel)).current;
+  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel)).current;
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -76,7 +81,7 @@ function useGridColumns(apiRef, props) {
   });
   const setGridColumnsState = React.useCallback(columnsState => {
     logger.debug('Updating columns state.');
-    apiRef.current.setState((0, _gridColumnsUtils.setColumnsState)(columnsState));
+    apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
     apiRef.current.forceUpdate();
     apiRef.current.publishEvent(_events.GridEvents.columnsChange, columnsState.all);
   }, [logger, apiRef]);
@@ -105,9 +110,10 @@ function useGridColumns(apiRef, props) {
           apiRef,
           columnsTypes,
           columnsToUpsert: [],
+          initialState: undefined,
           shouldRegenColumnVisibilityModelFromColumns: false,
           currentColumnVisibilityModel: model,
-          reset: false
+          keepOnlyColumnsToUpsert: false
         })
       }));
       apiRef.current.forceUpdate();
@@ -118,8 +124,9 @@ function useGridColumns(apiRef, props) {
       apiRef,
       columnsTypes,
       columnsToUpsert: columns,
+      initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
-      reset: false
+      keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState, columnsTypes]);
@@ -128,7 +135,7 @@ 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) {
       var _columnVisibilityMode;
 
       const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
@@ -153,7 +160,7 @@ function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(_events.GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef, isUsingColumnVisibilityModel]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
     const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const oldIndexPosition = allColumns.findIndex(col => col === field);
@@ -210,48 +217,80 @@ function useGridColumns(apiRef, props) {
    */
 
   const stateExportPreProcessing = React.useCallback(prevState => {
-    if (!shouldUseVisibleColumnModel) {
-      return prevState;
+    const columnsStateToExport = {};
+
+    if (isUsingColumnVisibilityModel) {
+      const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+      const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+
+      if (hasHiddenColumns) {
+        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+      }
     }
 
-    const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
-    const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+    columnsStateToExport.orderedFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
+    const columns = (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
+    const dimensions = {};
+    columns.forEach(colDef => {
+      if (colDef.hasBeenResized) {
+        const colDefDimensions = {};
 
-    if (!hasHiddenColumns) {
-      return prevState;
+        _gridColumnsUtils.COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
+          colDefDimensions[propertyName] = colDef[propertyName];
+        });
+
+        dimensions[colDef.field] = colDefDimensions;
+      }
+    });
+
+    if (Object.keys(dimensions).length > 0) {
+      columnsStateToExport.dimensions = dimensions;
     }
 
     return (0, _extends2.default)({}, prevState, {
-      columns: {
-        columnVisibilityModel: columnVisibilityModelToExport
-      }
+      columns: columnsStateToExport
     });
-  }, [apiRef, shouldUseVisibleColumnModel]);
+  }, [apiRef, isUsingColumnVisibilityModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
-    if (!shouldUseVisibleColumnModel) {
+    const columnVisibilityModelToImport = isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    const initialState = context.stateToRestore.columns;
+
+    if (columnVisibilityModelToImport == null && initialState == null) {
       return params;
     }
 
-    const columnVisibilityModel = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnsTypes,
+      columnsToUpsert: [],
+      initialState,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      keepOnlyColumnsToUpsert: false
+    });
+    apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
 
-    if (columnVisibilityModel != null) {
-      const columnsState = (0, _gridColumnsUtils.createColumnsState)({
-        apiRef,
-        columnsTypes,
-        columnsToUpsert: [],
-        shouldRegenColumnVisibilityModelFromColumns: false,
-        currentColumnVisibilityModel: columnVisibilityModel,
-        reset: false
-      });
-      apiRef.current.setState((0, _gridColumnsUtils.setColumnsState)(columnsState));
+    if (initialState != null) {
+      apiRef.current.publishEvent(_events.GridEvents.columnsChange, columnsState.all);
     }
 
     return params;
-  }, [apiRef, shouldUseVisibleColumnModel, columnsTypes]);
+  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
+    if (value === _preferencesPanel.GridPreferencePanelsValue.columns) {
+      var _props$componentsProp;
+
+      const ColumnsPanel = props.components.ColumnsPanel;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnsPanel, (0, _extends2.default)({}, (_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]);
   (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
@@ -266,11 +305,12 @@ 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 => {
@@ -300,13 +340,14 @@ function useGridColumns(apiRef, props) {
     const columnsState = (0, _gridColumnsUtils.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);