@mui/x-data-grid 5.7.0 → 5.8.0

package/modern/components/columnHeaders/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
@@ -22,9 +23,11 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -47,7 +50,11 @@ export function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -77,4 +84,15 @@ export function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,6 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -142,9 +141,10 @@ function GridColumnHeaderItem(props) {
   const sortingOrder = column.sortingOrder ?? rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.componentsProps?.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder

package/modern/components/columnHeaders/index.js

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -121,7 +121,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -144,7 +144,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/containers/GridRoot.js

@@ -4,8 +4,7 @@ const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef } from '@mui/material/utils';
-import NoSsr from '@mui/material/NoSsr';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -28,21 +27,34 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(GridRootStyles, _extends({
-      ref: handleRef,
-      className: clsx(className, rootProps.classes?.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
-      role: "grid",
-      "aria-colcount": visibleColumns.length,
-      "aria-rowcount": totalRowCount,
-      "aria-multiselectable": !rootProps.disableMultipleSelection,
-      "aria-label": rootProps['aria-label'],
-      "aria-labelledby": rootProps['aria-labelledby']
-    }, other, {
-      children: children
-    }))
-  });
+  apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
+
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    setMountedState(true);
+  }, []);
+  useEnhancedEffect(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, rootProps.classes?.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
+    role: "grid",
+    "aria-colcount": visibleColumns.length,
+    "aria-rowcount": totalRowCount,
+    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-label": rootProps['aria-label'],
+    "aria-labelledby": rootProps['aria-labelledby']
+  }, other, {
+    children: children
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/components/menu/columnMenu/GridColumnMenu.js

@@ -30,7 +30,7 @@ const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(pro
     onClick: hideMenu,
     column: currentColumn
   })];
-  const preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, props, {

package/modern/components/panel/GridPreferencesPanel.js

@@ -12,7 +12,7 @@ export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridP
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
+  const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
   return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     ref: ref,
     as: rootProps.components.BasePopper,

package/modern/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -49,6 +49,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay,
   Footer: GridFooter,

package/modern/hooks/core/pipeProcessing/gridPipeProcessingApi.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export * from './gridPipeProcessingApi';
+export * from './useGridPipeProcessing';
+export * from './useGridRegisterPipeProcessor';

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -0,0 +1,74 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridEvents } from '../../../models/events';
+/**
+ * Implement the Pipeline Pattern
+ *
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic to enrich data provided by other plugins or components.
+ * For instance, the row grouping plugin needs to add / remove the grouping columns when the grid columns are updated.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterPipeProcessor` to register their processor.
+ *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to enrich its data must use:
+ *
+ * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
+ *
+ * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
+ *
+ */
+
+export const useGridPipeProcessing = apiRef => {
+  const processorsCache = React.useRef({});
+  const registerPipeProcessor = React.useCallback((group, id, processor) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {};
+    }
+
+    const groupProcessors = processorsCache.current[group];
+    const oldProcessor = groupProcessors[id];
+
+    if (oldProcessor !== processor) {
+      processorsCache.current[group] = _extends({}, groupProcessors, {
+        [id]: processor
+      });
+      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+    }
+
+    return () => {
+      const _ref = processorsCache.current[group],
+            otherProcessors = _objectWithoutPropertiesLoose(_ref, [id].map(_toPropertyKey));
+
+      processorsCache.current[group] = otherProcessors;
+      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+    };
+  }, [apiRef]);
+  const applyPipeProcessors = React.useCallback((...args) => {
+    const [group, value, context] = args;
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    const preProcessors = Object.values(processorsCache.current[group]);
+    return preProcessors.reduce((acc, preProcessor) => {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  const preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};

package/modern/hooks/core/{preProcessing/useGridRegisterPreProcessor.js → pipeProcessing/useGridRegisterPipeProcessor.js}

@@ -4,11 +4,11 @@ import { useFirstRender } from '../../utils/useFirstRender';
 /**
  * TODO: Rename `useGridRegisterPipeProcessor`
  */
-export const useGridRegisterPreProcessor = (apiRef, group, callback) => {
+export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
-    cleanup.current = apiRef.current.unstable_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(() => {
     registerPreProcessor();

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

@@ -13,31 +13,42 @@ export const GRID_STRATEGIES_PROCESSORS = {
 /**
  * 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.
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic that must only be applied if the right strategy is active.
+ * For instance, the row grouping plugin has a custom filtering algorithm.
+ * This algorithm must be applied by the filtering plugin if the row grouping is the current way of grouping rows,
+ * but not if the tree data is the current way of grouping rows.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterStrategyProcessor` to register their processor.
+ *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
  *
- * 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).
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to apply the custom logic of the current strategy must use:
+ *
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * 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
+ *
+ * - `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.
+ * For now, there is only one strategy group named `rowTree` which customize
+ * - row tree creation algorithm.
+ * - sorting algorithm.
+ * - filtering algorithm.
  */
 export const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/modern/hooks/core/useGridInitialization.js

@@ -2,7 +2,7 @@ import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridErrorHandler } from './useGridErrorHandler';
 import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPreProcessing } from './preProcessing';
+import { useGridPipeProcessing } from './pipeProcessing';
 import { useGridStrategyProcessing } from './strategyProcessing';
 import { useGridStateInitialization } from './useGridStateInitialization';
 /**
@@ -14,7 +14,7 @@ export const useGridInitialization = (inputApiRef, props) => {
   useGridLoggerFactory(apiRef, props);
   useGridErrorHandler(apiRef, props);
   useGridStateInitialization(apiRef, props);
-  useGridPreProcessing(apiRef);
+  useGridPipeProcessing(apiRef);
   useGridStrategyProcessing(apiRef);
   useGridLocaleText(apiRef, props);
   return apiRef;

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -113,7 +113,7 @@ export const useGridColumnHeaders = props => {
         column: column,
         colIndex: columnIndex,
         isResizing: resizeCol === column.field,
-        isLastColumn: columnIndex === columns.length - 1,
+        isLastColumn: columnIndex === visibleColumns.length - 1,
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
@@ -243,7 +243,7 @@ export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
   initialState,
-  columnsTypes,
+  columnTypes,
   currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
   keepOnlyColumnsToUpsert = false
@@ -251,7 +251,7 @@ export const createColumnsState = ({
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -259,33 +259,65 @@ export const createColumnsState = ({
   } else {
     const currentState = gridColumnsSelector(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: [...currentState.all],
-      lookup: _extends({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
+      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  let columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => _extends({}, acc, {
+      [key]: false
+    }), {});
+  }
+
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
-    columnsToUpsertLookup[newColumn.field] = true;
-
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    const {
+      field
+    } = newColumn;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      const mergedColumn = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = _extends({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    }
 
-      if (!mergedColumn.hasBeenResized && COLUMNS_DIMENSION_PROPERTIES.some(propertyName => newColumn[propertyName] !== undefined)) {
-        mergedColumn.hasBeenResized = true;
-      }
+    let hasValidDimension = false;
 
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
+    if (!existingState.hasBeenResized) {
+      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
     }
+
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+    });
   });
 
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   const columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
 
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   let columnVisibilityModel = {};