@mui/x-data-grid 5.7.0 → 5.10.0

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/modern/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,2 @@
+// Can't import from pro package - hence duplication
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/modern/constants/localeTextConstants.js

@@ -103,5 +103,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };

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

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

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

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

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

@@ -0,0 +1,108 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+
+/**
+ * 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.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
+ *
+ * =====================================================================================================================
+ *
+ * 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.
+ *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
+ */
+export const useGridPipeProcessing = apiRef => {
+  const processorsCache = React.useRef({});
+  const runAppliers = React.useCallback(groupCache => {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(callback => {
+      callback();
+    });
+  }, []);
+  const registerPipeProcessor = React.useCallback((group, id, processor) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    const groupCache = processorsCache.current[group];
+    const oldProcessor = groupCache.processors[id];
+
+    if (oldProcessor !== processor) {
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
+    }
+
+    return () => {
+      const _processors = processorsCache.current[group].processors,
+            otherProcessors = _objectWithoutPropertiesLoose(_processors, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].processors = otherProcessors;
+    };
+  }, [runAppliers]);
+  const registerPipeApplier = React.useCallback((group, id, applier) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return () => {
+      const _appliers = processorsCache.current[group].appliers,
+            otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  const requestPipeProcessorsApplication = React.useCallback(group => {
+    const groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
+  const applyPipeProcessors = React.useCallback((...args) => {
+    const [group, value, context] = args;
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    const preProcessors = Object.values(processorsCache.current[group].processors);
+    return preProcessors.reduce((acc, preProcessor) => {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  const preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export const useGridRegisterPipeApplier = (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_registerPipeApplier(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return () => {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+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_registerPipeProcessor(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return () => {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
@@ -13,7 +15,15 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -37,18 +47,43 @@ export const useGridColumnHeaders = props => {
   const [renderContext, setRenderContext] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const prevScrollLeft = React.useRef(0);
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  const getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
+  }));
   const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender,
+      lastRowToRender,
+      apiRef,
+      visibleRows: currentPage.rows
+    });
     const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(() => {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
   const handleScroll = React.useCallback(({
     left,
     renderContext: nextRenderContext = null
-  }) => {
+  }, event) => {
     if (!innerRef.current) {
       return;
     } // Ignore vertical scroll.
@@ -59,15 +94,32 @@ export const useGridColumnHeaders = props => {
       return;
     }
 
-    prevScrollLeft.current = left;
+    prevScrollLeft.current = left; // We can only update the position when we guarantee that the render context has been
+    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+
+    let canUpdateInnerPosition = false;
 
     if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      setRenderContext(nextRenderContext);
+      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+      if (isUIEvent(event)) {
+        // To prevent flickering, the inner position can only be updated after the new context has
+        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+        // updating the position.
+        ReactDOM.flushSync(() => {
+          setRenderContext(nextRenderContext);
+        });
+        canUpdateInnerPosition = true;
+      } else {
+        setRenderContext(nextRenderContext);
+      }
+
       prevRenderContext.current = nextRenderContext;
+    } else {
+      canUpdateInnerPosition = true;
     } // Pass directly the render context to avoid waiting for the next render
 
 
-    if (nextRenderContext) {
+    if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
   }, [updateInnerPosition]);
@@ -93,7 +145,22 @@ export const useGridColumnHeaders = props => {
     }
 
     const columns = [];
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -113,11 +180,11 @@ 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
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -132,7 +199,6 @@ export const useGridColumnHeaders = props => {
     renderContext,
     getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition,
     getRootProps: (other = {}) => _extends({
       style: rootStyle
     }, other),

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -79,5 +79,6 @@ export const useGridColumnMenu = apiRef => {
    */
 
   useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
 };

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'];
@@ -206,9 +206,15 @@ export const applyInitialState = (columnsState, initialState) => {
 
   for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
     const field = columnsWithUpdatedDimensions[i];
-    newColumnLookup[field] = _extends({}, newColumnLookup[field], dimensions[field], {
+
+    const newColDef = _extends({}, newColumnLookup[field], {
       hasBeenResized: true
     });
+
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
   }
 
   const newColumnsState = {
@@ -243,7 +249,7 @@ export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
   initialState,
-  columnsTypes,
+  columnTypes,
   currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
   keepOnlyColumnsToUpsert = false
@@ -251,7 +257,7 @@ export const createColumnsState = ({
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -259,33 +265,69 @@ 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 hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
-    }
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized
+    });
   });
 
+  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 = {};
 
@@ -360,4 +402,47 @@ export const createColumnsState = ({
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState
-});
+});
+export function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+    const row = visibleRows[i];
+
+    if (row) {
+      const rowId = visibleRows[i].id;
+      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender({
+  firstColumnIndex,
+  minColumnIndex,
+  columnBuffer,
+  firstRowToRender,
+  lastRowToRender,
+  apiRef,
+  visibleRows
+}) {
+  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    lastRowToRender,
+    visibleRows
+  });
+  return firstColumnToRender;
+}