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

package/CHANGELOG.md

@@ -3,6 +3,181 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.0
+
+_Sep 22, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add a `localeText` prop to all pickers to customize the translations (#6212) @flaviendelangle
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6219) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.0` / `@mui/x-data-grid-pro@v6.0.0-alpha.0` / `@mui/x-data-grid-premium@v6.0.0-alpha.0`
+
+#### Breaking changes
+
+- The deprecated `hide` column property has been removed in favor of the `columnVisibilityModel` prop and initial state.
+
+  ```diff
+  <DataGrid
+    columns={[
+      field: 'id,
+  -   hide: true,
+    ]}
+  +  initialState={{
+  +    columns: {
+  +      columnVisibilityModel: { id: false },
+  +    }
+  +  }}
+  />
+  ```
+
+  You can find more information about this new API on our [documentation](https://next.mui.com/x/react-data-grid/column-visibility/).
+
+- The `GridEvents` enum is now a TypeScript type.
+
+  ```diff
+  - apiRef.current.subscribeEvent(GridEvents.rowClick', handleRowClick)
+  + apiRef.current.subscribeEvent('rowClick', handleRowClick)
+  ```
+
+#### Changes
+
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Fix scroll anchoring with master details (#6054) @oliviertassinari
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+- [DataGrid] Remove the `GridEvents` enum (#6003) @flaviendelangle
+- [DataGrid] Remove the deprecated `hide` column property (#5999) @flaviendelangle
+
+### `@mui/x-date-pickers@v6.0.0-alpha.0` / `@mui/x-date-pickers-pro@v6.0.0-alpha.0`
+
+#### Breaking changes
+
+- All the deprecated props that allowed you to set the text displayed in the pickers have been removed.
+
+  You can now use the `localText` prop available on all picker components:
+
+  | Removed prop                 | Property in the new `localText` prop                                              |
+  |------------------------------|-----------------------------------------------------------------------------------|
+  | `endText`                    | `end`                                                                             |
+  | `getClockLabelText`          | `clockLabelText`                                                                  |
+  | `getHoursClockNumberText`    | `hoursClockNumberText`                                                            |
+  | `getMinutesClockNumberText`  | `minutesClockNumberText`                                                          |
+  | `getSecondsClockNumberText`  | `secondsClockNumberText`                                                          |
+  | `getViewSwitchingButtonText` | `calendarViewSwitchingButtonAriaLabel`                                            |
+  | `leftArrowButtonText`        | `openPreviousView` (or `previousMonth` when the button changes the visible month) |
+  | `rightArrowButtonText`       | `openNextView` (or `nextMonth` when the button changes the visible month)         |
+  | `startText`                  | `start`                                                                           |
+
+  For instance if you want to replace the `startText` / `endText`
+
+  ```diff
+  <DateRangePicker
+  -  startText="From"
+  -  endText="To"
+  +  localeText={{
+  +    start: 'From',
+  +    end: 'To',
+  +  }}
+  />
+  ```
+
+You can find more information about the new api, including how to set those translations on all your components at once in the [documentation](https://next.mui.com/x/react-date-pickers/localization/)
+
+- The component slots `LeftArrowButton` and `RightArrowButton` have been renamed `PreviousIconButton` and `NextIconButton` to better describe there usage:
+
+  ```diff
+  <DatePicker 
+    components={{
+  -   LeftArrowButton: CustomButton,  
+  +   PreviousIconButton: CustomButton,
+
+  -   RightArrowButton: CustomButton,
+  +   NextIconButton: CustomButton,
+    }}
+
+    componentsProps={{
+  -   leftArrowButton: {},  
+  +   previousIconButton: {},
+
+  -   rightArrowButton: {},
+  +   nextIconButton: {},
+    }}
+  />
+  ```
+
+- The `date` prop has been renamed `value` on  `MonthPicker` / `YearPicker`, `ClockPicker` and `CalendarPicker`.
+
+  ```diff
+  - <MonthPicker date={dayjs()} onChange={handleMonthChange} />
+  + <MonthPicker value={dayjs()} onChange={handleMonthChange} />
+
+  - <YearPicker date={dayjs()} onChange={handleYearChange} />
+  + <YearPicker value={dayjs()} onChange={handleYearChange} />
+
+  - <ClockPicker date={dayjs()} onChange={handleTimeChange} />
+  + <ClockPicker value={dayjs()} onChange={handleTimeChange} />
+
+  - <CalendarPicker date={dayjs()} onChange={handleDateChange} />
+  + <CalendarPicker value={dayjs()} onChange={handleDateChange} />
+  ```
+
+#### Changes
+
+- [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6146) @flaviendelangle
+- [DateRangePicker] Switch to new month when changing the value from the outside (#6166) @flaviendelangle
+- [pickers] Add a `localeText` prop to all pickers to customize the translations (#6212) @flaviendelangle
+- [pickers] Add Finnish (fi-FI) locale to the pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Allow nested `LocalizationProvider` (#6011) @flaviendelangle
+- [pickers] Clean slots on `PickersArrowSwitcher` component (#5890) @flaviendelangle
+- [pickers] Fix invalid date error when decreasing `DateField` day (#6071) @alexfauquette
+- [pickers] Fix mobile section selection (#6207) @oliviertassinari
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [pickers] Improve error message when no adapter context is found (#6211) @flaviendelangle
+- [pickers] Remove `valueStr` from the field state (#6142) @flaviendelangle
+- [pickers] Remove remaining deprecated locale props (#6233) @flaviendelangle
+- [pickers] Rename the `date` prop `value` on `MonthPicker` / `YearPicker`, `ClockPicker` and `CalendarPicker` (#6128) @flaviendelangle
+- [pickers] Rename the `onClose` prop of  `PickersPopper` `onDismiss` to simplify typing (#6155) @flaviendelangle
+- [pickers] Support the `sx` prop on all public component with a root HTML elements (#5944) @flaviendelangle
+- [pickers] Unify `PickersMonth` and `PickersYear` behaviors (#6034) @flaviendelangle
+- [pickers] Use `shouldDisableMonth` and `shouldDisableYear` for date validation (#6066) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
+
+### Docs
+
+- [docs] Add automatic vale check (#5429) @alexfauquette
+- [docs] Add Pro logo in "column ordering" link (#6127) @alexfauquette
+- [docs] Fix 301 link (#6239) @oliviertassinari
+- [docs] Fix broken link (#6163) @alexfauquette
+- [docs] Fix broken links (#6101) @alexfauquette
+- [docs] Fix demonstration date to avoid hydration errors (#6032) @alexfauquette
+- [docs] Fix hidden popper in restore state example (#6191) @heyfirst
+- [docs] Fix invalid links causing 404 & 301 errors (#6105) @oliviertassinari
+- [docs] Fix npm repository url in the pickers `package.json` (#6172) @oliviertassinari
+- [docs] Fix typo in linked issue (#6162) @flaviendelangle
+- [docs] Import `generateUtilityClass` from `@mui/utils` (#6216) @michaldudak
+- [docs] Improve Upgrade plan docs (#6018) @oliviertassinari
+- [docs] Link the OpenSSF Best Practices card (#6171) @oliviertassinari
+
+### Core
+
+- [core] Add `v5.17.3` changelog to next branch (#6250) @flaviendelangle
+- [core] Add link to the security page on the `README` (#6073) @oliviertassinari
+- [core] Fix scroll restoration in the docs (#5938) @oliviertassinari
+- [core] Remove the Storybook (#6099) @flaviendelangle
+- [core] Tag release as `next` in NPM (#6256) @m4theushw
+- [core] Update monorepo (#6180) @flaviendelangle
+- [core] Use the `next` branch for Prettier (#6097) @flaviendelangle
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+- [test] Fix logic to skip column pinning tests (#6133) @m4theushw
+- [test] Hide the date on the print regression test (#6120) @flaviendelangle
+- [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
+- [website] Improve security header @oliviertassinari
+
 ## v5.17.4
 
 _Sep 22, 2022_
@@ -135,7 +310,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
 
 _Sep 2, 2022_
 
-🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
 
 If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
 
@@ -1440,7 +1615,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Stop checkbox ripple on blur (#3835) @m4theushw
 - [DataGrid] Stop calling `onRowClick` when clicking in cells with interactive elements (#3929) @m4theushw
 - [DataGrid] Use only `headerName` when available to search column (#3959) @pkratz
-- [DataGrid] Use the bundling scripts as the packages published by the [https://github.com/mui/material-ui](material-ui) repository (#3965) @flaviendelangle
+- [DataGrid] Use the bundling scripts as the packages published by the [material-ui](https://github.com/mui/material-ui) repository (#3965) @flaviendelangle
 - [DataGridPro] Add `unstable_setRowHeight` method to `apiRef` (#3751) @cherniavskii
 - [DataGridPro] Always export the `pageSize` and `page` when it has been initialized or is being controlled (#3908) @flaviendelangle
 - [DataGridPro] Disable export for detail panel column (#4057) @gustavhagland
@@ -4085,7 +4260,7 @@ Big thanks to the 7 contributors who made this release possible. Here are some h
 
 - 💄 Release the cell editing feature (#1287) @dtassone
 
-  This is the first release of the Cell editing feature. You can find the documentation [following this link](https://mui.com/x/react-data-grid/editing/#cell-editing). We have spent the last three months working on it.
+  This is the first release of the Cell editing feature. You can find the documentation [following this link](https://mui.com/x/react-data-grid/editing/). We have spent the last three months working on it.
 
   ![cell edit](https://user-images.githubusercontent.com/3165635/115632215-87994700-a307-11eb-91d9-9f5537df0911.gif)
 
@@ -4695,7 +4870,7 @@ _Dec 9, 2020_
 
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
-- 🔍 Add a new data grid [density selector](https://mui.com/x/react-data-grid/rendering/#density) feature (#606) @DanailH.
+- 🔍 Add a new data grid [density selector](https://mui.com/x/react-data-grid/accessibility/#density) feature (#606) @DanailH.
 - 💄 A first iteration on the data grid's toolbar.
 - 🧪 Continue the iteration on the data grid filtering feature, soon to be released @dtassone.
 

package/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/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/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/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/components/cell/GridEditBooleanCell.js

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

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

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

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

@@ -174,7 +174,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/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/components/panel/GridColumnsPanel.js

@@ -99,25 +99,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/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -15,9 +15,6 @@ export interface GridColumnsState {
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
-export interface GridColumnsInternalCache {
-    isUsingColumnVisibilityModel: boolean;
-}
 export declare type GridColumnDimensions = {
     [key in GridColumnDimensionProperties]?: number;
 };
@@ -29,5 +26,5 @@ export interface GridColumnsInitialState {
 export declare type GridColumnsRawState = Omit<GridColumnsState, 'lookup'> & {
     lookup: GridColumnRawLookup;
 };
-export declare type GridHydrateColumnsValue = Omit<GridColumnsRawState, 'columnVisibilityModel'>;
+export declare type GridHydrateColumnsValue = GridColumnsRawState;
 export declare type GridColumnVisibilityModel = Record<GridRowId, boolean>;

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -39,17 +39,16 @@ export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, viewpo
  * Apply the order and the dimensions of the initial state.
  * The columns not registered in `orderedFields` will be placed after the imported columns.
  */
-export declare const applyInitialState: (columnsState: Omit<GridColumnsRawState, 'columnVisibilityModel'>, initialState: GridColumnsInitialState | undefined) => Omit<GridColumnsRawState, "columnVisibilityModel">;
+export declare const applyInitialState: (columnsState: GridColumnsRawState, initialState: GridColumnsInitialState | undefined) => GridColumnsRawState;
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
 export declare const getGridColDef: (columnTypes: GridColumnTypesRecord, type: GridColType | undefined) => import("../../../models").GridColTypeDef<any, any>;
-export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnTypes, currentColumnVisibilityModel, shouldRegenColumnVisibilityModelFromColumns, keepOnlyColumnsToUpsert, }: {
+export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnTypes, columnVisibilityModel, keepOnlyColumnsToUpsert, }: {
     columnsToUpsert: GridColDef[];
     initialState: GridColumnsInitialState | undefined;
     columnTypes: GridColumnTypesRecord;
-    currentColumnVisibilityModel?: GridColumnVisibilityModel | undefined;
-    shouldRegenColumnVisibilityModelFromColumns: boolean;
+    columnVisibilityModel?: GridColumnVisibilityModel | undefined;
     keepOnlyColumnsToUpsert: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
 }) => GridColumnsState;

package/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,33 +251,34 @@ export const createColumnsState = ({
   columnsToUpsert,
   initialState,
   columnTypes,
-  currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
-  shouldRegenColumnVisibilityModelFromColumns,
+  columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
   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
     }), {});
   }
@@ -288,7 +290,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
@@ -297,9 +299,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;
@@ -312,95 +314,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$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState

package/hooks/features/columns/useGridColumns.d.ts

@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'components' | 'componentsProps'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'components' | 'componentsProps'>): void;