@mui/x-data-grid 5.7.0 → 5.10.0

package/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
@@ -253,7 +259,7 @@ export const createColumnsState = ({
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (isInsideStateInitializer || keepOnlyColumnsToUpsert) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -261,33 +267,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 = {};
 
@@ -362,4 +404,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;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridColumnSpanning: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export const useGridColumnSpanning = apiRef => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+    const sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
+    var _lookup$current$rowId;
+
+    return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
+  }, []); // Calculate `colSpan` for the cell.
+
+  const calculateCellColSpan = React.useCallback(params => {
+    const {
+      columnIndex,
+      rowId,
+      minFirstColumnIndex,
+      maxLastColumnIndex
+    } = params;
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    const columnsLength = visibleColumns.length;
+    const column = visibleColumns[columnIndex];
+    const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+
+    if (!colSpan || colSpan === 1) {
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: 1,
+          width: column.computedWidth
+        }
+      });
+      return {
+        colSpan: 1
+      };
+    }
+
+    let width = column.computedWidth;
+
+    for (let j = 1; j < colSpan; j += 1) {
+      const nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        const nextColumn = visibleColumns[nextColumnIndex];
+        width += nextColumn.computedWidth;
+        setCellColSpanInfo(rowId, columnIndex + j, {
+          spannedByColSpan: true,
+          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+          leftVisibleCellIndex: columnIndex
+        });
+      }
+
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan,
+          width
+        }
+      });
+    }
+
+    return {
+      colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+  const calculateColSpan = React.useCallback(({
+    rowId,
+    minFirstColumn,
+    maxLastColumn
+  }) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  const columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+  const handleColumnReorderChange = React.useCallback(() => {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+};

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' | 'checkboxSelection' | 'classes' | 'components' | 'componentsProps'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'classes' | 'components' | 'componentsProps'>): void;

package/hooks/features/columns/useGridColumns.js

@@ -5,7 +5,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsTypes = computeColumnTypes(props.columnTypes);
   const columnsState = createColumnsState({
     apiRef,
-    columnsTypes,
+    columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
     initialState: (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.columns,
     shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
@@ -37,13 +37,15 @@ export function useGridColumns(apiRef, props) {
   var _props$initialState4, _props$initialState4$, _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridColumns');
-  const columnsTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
+  const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
+  const previousColumnsProp = React.useRef(props.columns);
+  const previousColumnTypesProp = React.useRef(columnTypes);
   /**
    * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
    * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
    */
 
-  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel)).current;
+  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -80,7 +82,7 @@ export function useGridColumns(apiRef, props) {
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
-          columnsTypes,
+          columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
           shouldRegenColumnVisibilityModelFromColumns: false,
@@ -90,24 +92,24 @@ export function useGridColumns(apiRef, props) {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const updateColumns = React.useCallback(columns => {
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       shouldRegenColumnVisibilityModelFromColumns: true,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnsTypes]);
+  }, [apiRef, setGridColumnsState, columnTypes]);
   const updateColumn = React.useCallback(column => apiRef.current.updateColumns([column]), [apiRef]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       var _columnVisibilityMode;
 
       const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -135,7 +137,7 @@ export function useGridColumns(apiRef, props) {
       };
       apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
     }
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
     const allColumns = gridColumnFieldsSelector(apiRef);
     const oldIndexPosition = allColumns.findIndex(col => col === field);
@@ -196,7 +198,7 @@ export function useGridColumns(apiRef, props) {
   const stateExportPreProcessing = React.useCallback(prevState => {
     const columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel) {
+    if (isUsingColumnVisibilityModel.current) {
       const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
 
@@ -212,7 +214,13 @@ export function useGridColumns(apiRef, props) {
       if (colDef.hasBeenResized) {
         const colDefDimensions = {};
         COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
-          colDefDimensions[propertyName] = colDef[propertyName];
+          let propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
         });
         dimensions[colDef.field] = colDefDimensions;
       }
@@ -225,11 +233,11 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, isUsingColumnVisibilityModel]);
+  }, [apiRef]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
-    const columnVisibilityModelToImport = isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -238,10 +246,10 @@ export function useGridColumns(apiRef, props) {
 
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -252,7 +260,7 @@ export function useGridColumns(apiRef, props) {
     }
 
     return params;
-  }, [apiRef, isUsingColumnVisibilityModel, columnsTypes]);
+  }, [apiRef, columnTypes]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
       var _props$componentsProp;
@@ -263,29 +271,13 @@ export function useGridColumns(apiRef, props) {
 
     return initialValue;
   }, [props.components.ColumnsPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.columnsPanel]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   /**
    * EVENTS
    */
 
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'hydrateColumns') {
-      return;
-    }
-
-    logger.info(`Columns pre-processing have changed, regenerating the columns`);
-    const columnsState = createColumnsState({
-      apiRef,
-      columnsTypes,
-      columnsToUpsert: [],
-      initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
-      keepOnlyColumnsToUpsert: false
-    });
-    setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnsTypes, isUsingColumnVisibilityModel]);
   const prevInnerWidth = React.useRef(null);
 
   const handleGridSizeChange = viewportInnerSize => {
@@ -295,9 +287,25 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
   useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
   useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
+
+  const hydrateColumns = React.useCallback(() => {
+    logger.info(`Columns pipe processing have changed, regenerating the columns`);
+    const columnsState = createColumnsState({
+      apiRef,
+      columnTypes,
+      columnsToUpsert: [],
+      initialState: undefined,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */
@@ -312,17 +320,24 @@ export function useGridColumns(apiRef, props) {
     }
 
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
+
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+
     const columnsState = createColumnsState({
       apiRef,
-      columnsTypes,
+      columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
+      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });
+    previousColumnsProp.current = props.columns;
+    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnsTypes, isUsingColumnVisibilityModel]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

package/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -33,4 +33,9 @@ export interface GridDimensionsApi {
      * @ignore - do not document.
      */
     unstable_getViewportPageSize: () => number;
+    /**
+     * Forces a recalculation of all dimensions.
+     * @ignore - do not document.
+     */
+    unstable_updateGridDimensionsRef: () => void;
 }

package/hooks/features/dimensions/useGridDimensions.js

@@ -134,7 +134,8 @@ export function useGridDimensions(apiRef, props) {
   const dimensionsApi = {
     resize,
     getRootDimensions,
-    unstable_getViewportPageSize: getViewportPageSize
+    unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef
   };
   useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');
   const debounceResize = React.useMemo(() => debounce(resize, 60), [resize]);
@@ -145,12 +146,12 @@ export function useGridDimensions(apiRef, props) {
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
     if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
     if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
@@ -171,7 +172,7 @@ export function useGridDimensions(apiRef, props) {
     debounceResize();
   }, [props.autoHeight, debounceResize, logger, resize]);
   useEnhancedEffect(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.visibleRowsSet, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);

package/hooks/features/editRows/useGridCellEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop'>) => void;
+export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'onProcessRowUpdateError'>) => void;