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

package/locales/plPL.js

@@ -21,15 +21,15 @@ const plPLGrid = {
   toolbarFiltersTooltipShow: 'Pokaż filtry',
   toolbarFiltersTooltipActive: count => `Liczba aktywnych filtrów: ${count}`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Wyszukaj…',
+  toolbarQuickFilterLabel: 'Szukaj',
+  toolbarQuickFilterDeleteIconLabel: 'Wyczyść',
   // Export selector toolbar button text
   toolbarExport: 'Eksportuj',
   toolbarExportLabel: 'Eksportuj',
   toolbarExportCSV: 'Pobierz jako plik CSV',
   toolbarExportPrint: 'Drukuj',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Znajdź kolumnę',
   columnsPanelTextFieldPlaceholder: 'Tytuł kolumny',
@@ -109,9 +109,9 @@ const plPLGrid = {
   // Master/detail
   // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Rozwiń',
-  collapseDetailPanel: 'Zwiń' // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-  // Aggregation
+  collapseDetailPanel: 'Zwiń',
+  // Row reordering text
+  rowReorderingHeaderName: 'Porządkowanie wierszy' // Aggregation
   // aggregationMenuItemHeader: 'Aggregation',
   // aggregationFunctionLabelSum: 'sum',
   // aggregationFunctionLabelAvg: 'avg',

package/models/api/gridCoreApi.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridEventPublisher, GridEventListener, GridEventsStr } from '../events';
+import { GridEventPublisher, GridEventListener, GridEvents } from '../events';
 import { EventManager, EventListenerOptions } from '../../utils/EventManager';
 import { GridApiCaches } from '../gridApiCaches';
 /**
@@ -58,7 +58,7 @@ export interface GridCoreApi {
      * @param {object} options Additional options for this listener.
      * @returns {function} A function to unsubscribe from this event.
      */
-    subscribeEvent: <E extends GridEventsStr>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void;
+    subscribeEvent: <E extends GridEvents>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void;
     /**
      * Emits an event.
      * @param {GridEvents} name The name of the event.

package/models/colDef/gridColDef.d.ts

@@ -60,18 +60,6 @@ export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> {
      * @default Infinity
      */
     maxWidth?: number;
-    /**
-     * If `true`, hide the column.
-     * @deprecated Use the `initialState` prop to hide columns:
-     * ```jsx
-     * // Hide `id` column, the other columns will remain visible
-     * <DataGrid initialState={{ columns: { columnVisibilityModel: { id: false } } }} />
-     * ```
-     * Or use `columnVisibilityModel` prop to fully control column visibility.
-     * @link https://mui.com/x/react-data-grid/column-visibility/
-     * @default false
-     */
-    hide?: boolean;
     /**
      * If `false`, removes the buttons for hiding this column.
      * @default true

package/models/events/gridEventListener.d.ts

@@ -1,8 +1,7 @@
 import { MuiBaseEvent, MuiEvent } from '../muiEvent';
 import { GridCallbackDetails } from '../api/gridCallbackDetails';
-import { GridEventsStr } from './gridEvents';
-import { GridEventLookup } from './gridEventLookup';
-export declare type GridEventListener<E extends GridEventsStr> = (params: GridEventLookup[E] extends {
+import { GridEventLookup, GridEvents } from './gridEventLookup';
+export declare type GridEventListener<E extends GridEvents> = (params: GridEventLookup[E] extends {
     params: any;
 } ? GridEventLookup[E]['params'] : undefined, event: GridEventLookup[E] extends {
     event: MuiBaseEvent;

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -359,15 +359,6 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: null;
         event: MouseEvent;
     };
-    /**
-     * Fired when a column visibility changes.
-     * It is not fired when the `columnVisibilityModel` is controlled or initialized.
-     * It is not fired when toggling all column's visibility at once.
-     * @deprecated Use `'columnVisibilityModelChange'` instead.
-     */
-    columnVisibilityChange: {
-        params: GridColumnVisibilityChangeParams;
-    };
     /**
      * Fired during the resizing of a column.
      */
@@ -574,3 +565,4 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridMenuParams;
     };
 }
+export declare type GridEvents = keyof GridEventLookup;

package/models/events/gridEventPublisher.d.ts

@@ -1,30 +1,29 @@
 import { MuiBaseEvent } from '../muiEvent';
-import { GridEventLookup } from './gridEventLookup';
-import { GridEventsStr } from './gridEvents';
-declare type PublisherArgsNoEvent<E extends GridEventsStr, T extends {
+import { GridEventLookup, GridEvents } from './gridEventLookup';
+declare type PublisherArgsNoEvent<E extends GridEvents, T extends {
     params: any;
 }> = [E, T['params']];
-declare type PublisherArgsRequiredEvent<E extends GridEventsStr, T extends {
+declare type PublisherArgsRequiredEvent<E extends GridEvents, T extends {
     params: any;
     event: MuiBaseEvent;
 }> = [E, T['params'], T['event']];
-declare type PublisherArgsOptionalEvent<E extends GridEventsStr, T extends {
+declare type PublisherArgsOptionalEvent<E extends GridEvents, T extends {
     params: any;
     event: MuiBaseEvent;
 }> = PublisherArgsRequiredEvent<E, T> | PublisherArgsNoEvent<E, T>;
-declare type PublisherArgsEvent<E extends GridEventsStr, T extends {
+declare type PublisherArgsEvent<E extends GridEvents, T extends {
     params: any;
     event: MuiBaseEvent;
 }> = {} extends T['event'] ? PublisherArgsOptionalEvent<E, T> : PublisherArgsRequiredEvent<E, T>;
-declare type PublisherArgsParams<E extends GridEventsStr, T extends {
+declare type PublisherArgsParams<E extends GridEvents, T extends {
     params: any;
 }> = [E, T['params']];
-declare type PublisherArgsNoParams<E extends GridEventsStr> = [E];
-declare type GridEventPublisherArg<E extends GridEventsStr, T> = T extends {
+declare type PublisherArgsNoParams<E extends GridEvents> = [E];
+declare type GridEventPublisherArg<E extends GridEvents, T> = T extends {
     params: any;
     event: MuiBaseEvent;
 } ? PublisherArgsEvent<E, T> : T extends {
     params: any;
 } ? PublisherArgsParams<E, T> : PublisherArgsNoParams<E>;
-export declare type GridEventPublisher = <E extends GridEventsStr>(...params: GridEventPublisherArg<E, GridEventLookup[E]>) => void;
+export declare type GridEventPublisher = <E extends GridEvents>(...params: GridEventPublisherArg<E, GridEventLookup[E]>) => void;
 export {};

package/models/events/index.d.ts

@@ -1,4 +1,3 @@
 export * from './gridEventListener';
 export * from './gridEventPublisher';
 export * from './gridEventLookup';
-export * from './gridEvents';

package/models/events/index.js

@@ -1,4 +1,3 @@
 export * from './gridEventListener';
 export * from './gridEventPublisher';
-export * from './gridEventLookup';
-export * from './gridEvents';
+export * from './gridEventLookup';

package/models/gridApiCaches.d.ts

@@ -1,6 +1,4 @@
 import { GridRowsInternalCache } from '../hooks/features/rows/gridRowsState';
-import { GridColumnsInternalCache } from '../hooks/features/columns/gridColumnsInterfaces';
 export interface GridApiCaches {
     rows: GridRowsInternalCache;
-    columns: GridColumnsInternalCache;
 }

package/models/params/gridEditCellParams.d.ts

@@ -49,7 +49,7 @@ declare enum GridCellEditStartReasons {
 /**
  * Params passed to the `cellEditStart` event.
  */
-export interface GridCellEditStartParams<V = any, R extends GridValidRowModel = GridValidRowModel, F = V> extends GridCellParams<V, R, F> {
+export interface GridCellEditStartParams<V = any, R extends GridValidRowModel = any, F = V> extends GridCellParams<V, R, F> {
     /**
      * The reason for this event to be triggered.
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.
@@ -66,7 +66,7 @@ declare enum GridCellEditStopReasons {
 /**
  * Params passed to the `cellEditStop event.
  */
-export interface GridCellEditStopParams<V = any, R extends GridValidRowModel = GridValidRowModel, F = V> extends GridCellParams<V, R, F> {
+export interface GridCellEditStopParams<V = any, R extends GridValidRowModel = any, F = V> extends GridCellParams<V, R, F> {
     /**
      * The reason for this event to be triggered.
      * Only available if `props.experimentalFeatures.newEditingApi: true`.

package/models/params/index.d.ts

@@ -1,7 +1,6 @@
 export * from './gridColumnHeaderParams';
 export * from './gridColumnOrderChangeParams';
 export * from './gridColumnResizeParams';
-export * from './gridColumnVisibilityChangeParams';
 export * from './gridEditCellParams';
 export * from './gridRowParams';
 export * from './gridScrollParams';

package/models/params/index.js

@@ -1,7 +1,6 @@
 export * from './gridColumnHeaderParams';
 export * from './gridColumnOrderChangeParams';
 export * from './gridColumnResizeParams';
-export * from './gridColumnVisibilityChangeParams';
 export * from './gridEditCellParams';
 export * from './gridRowParams';
 export * from './gridScrollParams';

package/models/props/DataGridProps.d.ts

@@ -520,15 +520,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onColumnOrderChange?: GridEventListener<'columnOrderChange'>;
-    /**
-     * 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?: GridEventListener<'columnVisibilityChange'>;
     /**
      * Callback fired when a row is clicked.
      * Not called if the target clicked is an interactive element added by the built-in columns.

package/modern/DataGrid/DataGrid.js

@@ -475,16 +475,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.
@@ -721,7 +711,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/modern/colDef/gridStringColDef.js

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

package/modern/components/cell/GridActionsCell.js

@@ -261,7 +261,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/modern/components/cell/GridBooleanCell.js

@@ -110,7 +110,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/modern/components/cell/GridEditBooleanCell.js

@@ -147,7 +147,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/modern/components/cell/GridEditDateCell.js

@@ -201,7 +201,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/modern/components/cell/GridEditInputCell.js

@@ -175,7 +175,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/modern/components/cell/GridEditSingleSelectCell.js

@@ -246,7 +246,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/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -170,7 +170,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/modern/components/containers/GridRootStyles.js

@@ -125,6 +125,8 @@ export const GridRootStyles = styled('div', {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    overflowAnchor: 'none',
+    // Keep the same scrolling position
     [`&.${gridClasses.autoHeight}`]: {
       height: 'auto',
       [`& .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {

package/modern/components/panel/GridColumnsPanel.js

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

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

@@ -217,10 +217,11 @@ export const applyInitialState = (columnsState, initialState) => {
     newColumnLookup[field] = newColDef;
   }
 
-  const newColumnsState = {
+  const newColumnsState = _extends({}, columnsState, {
     all: newOrderedFields,
     lookup: newColumnLookup
-  };
+  });
+
   return newColumnsState;
 };
 /**
@@ -250,31 +251,32 @@ export const createColumnsState = ({
   columnsToUpsert,
   initialState,
   columnTypes,
-  currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
-  shouldRegenColumnVisibilityModelFromColumns,
+  columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
   const isInsideStateInitializer = !apiRef.current.state.columns;
-  let columnsStateWithoutColumnVisibilityModel;
+  let columnsState;
 
   if (isInsideStateInitializer) {
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: [],
-      lookup: {}
+      lookup: {},
+      columnVisibilityModel
     };
   } else {
     const currentState = gridColumnsSelector(apiRef.current.state);
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: keepOnlyColumnsToUpsert ? [] : [...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
     };
   }
 
   let columnsToKeep = {};
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => _extends({}, acc, {
+    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => _extends({}, acc, {
       [key]: false
     }), {});
   }
@@ -286,7 +288,7 @@ export const createColumnsState = ({
     } = newColumn;
     columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
-    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+    let existingState = columnsState.lookup[field];
 
     if (existingState == null) {
       // New Column
@@ -295,9 +297,9 @@ export const createColumnsState = ({
         field,
         hasBeenResized: false
       });
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     } else if (keepOnlyColumnsToUpsert) {
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     }
 
     let hasBeenResized = existingState.hasBeenResized;
@@ -310,95 +312,22 @@ export const createColumnsState = ({
         }
       }
     });
-    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
-      hide: newColumn.hide == null ? false : newColumn.hide
-    }, newColumn, {
+    columnsState.lookup[field] = _extends({}, existingState, newColumn, {
       hasBeenResized
     });
   });
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+    Object.keys(columnsState.lookup).forEach(field => {
       if (!columnsToKeep[field]) {
-        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+        delete columnsState.lookup[field];
       }
     });
   }
 
-  const columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
-
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
-
-  let columnVisibilityModel = {};
-
-  if (shouldRegenColumnVisibilityModelFromColumns) {
-    let hasModelChanged = false;
-
-    const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
-
-    if (isInsideStateInitializer) {
-      columnsStateWithPreProcessing.all.forEach(field => {
-        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
-      });
-    } else if (keepOnlyColumnsToUpsert) {
-      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
-      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
-      // cleanup because a given column may have been removed from the `columns` prop but it still
-      // exists in the state.
-      Object.keys(newColumnVisibilityModel).forEach(field => {
-        if (!columnsStateWithPreProcessing.lookup[field]) {
-          delete newColumnVisibilityModel[field];
-          hasModelChanged = true;
-        }
-      });
-    }
-
-    columnsStateWithPreProcessing.all.forEach(field => {
-      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
-      // Then we don't want to update the visibility status of the column in the model.
-      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
-        return;
-      } // We always assume that a column not in the model is visible by default. However, there's an
-      // edge case where the column is not in the model but it also doesn't exist in the `columns`
-      // prop, meaning that the column is being added. In that case, we assume that the column was
-      // not visible before for it be added to the model.
-
-
-      let isVisibleBefore = currentColumnVisibilityModel[field];
-
-      if (isVisibleBefore === undefined) {
-        if (isInsideStateInitializer) {
-          isVisibleBefore = true;
-        } else {
-          const currentState = 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 columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-
-  const columnsState = _extends({}, columnsStateWithPortableColumns, {
-    columnVisibilityModel
-  });
-
-  return hydrateColumnsWidth(columnsState, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState