@mui/x-data-grid 5.8.0 → 5.9.0

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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';
@@ -14,7 +16,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 var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
       _props$minColumnIndex = props.minColumnIndex,
@@ -51,15 +61,48 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
   var prevRenderContext = React.useRef(renderContext);
   var prevScrollLeft = React.useRef(0);
+  var currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(function () {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  var getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: function equalityCheck(a, b) {
+      return ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(function (key) {
+        return a[key] === b[key];
+      });
+    }
+  }));
   var updateInnerPosition = React.useCallback(function (nextRenderContext) {
-    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    var _getRenderableIndexes = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
+        firstRowToRender = _getRenderableIndexes2[0],
+        lastRowToRender = _getRenderableIndexes2[1];
+
+    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      apiRef: apiRef,
+      visibleRows: currentPage.rows
+    });
     var offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = "translate3d(".concat(-offset, "px, 0px, 0px)");
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
-  var handleScroll = React.useCallback(function (_ref) {
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(function () {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
+  var handleScroll = React.useCallback(function (_ref, event) {
     var _prevRenderContext$cu, _prevRenderContext$cu2;
 
     var left = _ref.left,
@@ -76,15 +119,32 @@ export var useGridColumnHeaders = function 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.
+
+    var 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(function () {
+          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]);
@@ -122,7 +182,27 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     }
 
     var columns = [];
-    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+
+    var _getRenderableIndexes3 = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
+        firstRowToRender = _getRenderableIndexes4[0],
+        lastRowToRender = _getRenderableIndexes4[1];
+
+    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef: apiRef,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     var lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -146,7 +226,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -161,7 +241,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     renderContext: renderContext,
     getColumns: getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition: updateInnerPosition,
     getRootProps: function getRootProps() {
       var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return _extends({

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

@@ -213,11 +213,25 @@ export var applyInitialState = function applyInitialState(columnsState, initialS
 
   var newColumnLookup = _extends({}, columnsState.lookup);
 
-  for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
-    var _field2 = columnsWithUpdatedDimensions[_i];
-    newColumnLookup[_field2] = _extends({}, newColumnLookup[_field2], dimensions[_field2], {
+  var _loop = function _loop(_i) {
+    var field = columnsWithUpdatedDimensions[_i];
+
+    var newColDef = _extends({}, newColumnLookup[field], {
       hasBeenResized: true
     });
+
+    Object.entries(dimensions[field]).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
+
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  };
+
+  for (var _i = 0; _i < columnsWithUpdatedDimensions.length; _i += 1) {
+    _loop(_i);
   }
 
   var newColumnsState = {
@@ -248,18 +262,18 @@ export var getGridColDef = function getGridColDef(columnTypes, type) {
 
   return columnTypes[type];
 };
-export var createColumnsState = function createColumnsState(_ref5) {
+export var createColumnsState = function createColumnsState(_ref7) {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
-  var apiRef = _ref5.apiRef,
-      columnsToUpsert = _ref5.columnsToUpsert,
-      initialState = _ref5.initialState,
-      columnTypes = _ref5.columnTypes,
-      _ref5$currentColumnVi = _ref5.currentColumnVisibilityModel,
-      currentColumnVisibilityModel = _ref5$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref5$currentColumnVi,
-      shouldRegenColumnVisibilityModelFromColumns = _ref5.shouldRegenColumnVisibilityModelFromColumns,
-      _ref5$keepOnlyColumns = _ref5.keepOnlyColumnsToUpsert,
-      keepOnlyColumnsToUpsert = _ref5$keepOnlyColumns === void 0 ? false : _ref5$keepOnlyColumns;
+  var apiRef = _ref7.apiRef,
+      columnsToUpsert = _ref7.columnsToUpsert,
+      initialState = _ref7.initialState,
+      columnTypes = _ref7.columnTypes,
+      _ref7$currentColumnVi = _ref7.currentColumnVisibilityModel,
+      currentColumnVisibilityModel = _ref7$currentColumnVi === void 0 ? gridColumnVisibilityModelSelector(apiRef) : _ref7$currentColumnVi,
+      shouldRegenColumnVisibilityModelFromColumns = _ref7.shouldRegenColumnVisibilityModelFromColumns,
+      _ref7$keepOnlyColumns = _ref7.keepOnlyColumnsToUpsert,
+      keepOnlyColumnsToUpsert = _ref7$keepOnlyColumns === void 0 ? false : _ref7$keepOnlyColumns;
   var isInsideStateInitializer = !apiRef.current.state.columns;
   var columnsStateWithoutColumnVisibilityModel;
 
@@ -304,18 +318,20 @@ export var createColumnsState = function createColumnsState(_ref5) {
       columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
 
-    var hasValidDimension = false;
-
-    if (!existingState.hasBeenResized) {
-      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(function (key) {
-        return newColumn[key] !== undefined;
-      });
-    }
+    var hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(function (key) {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
     columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
       hide: newColumn.hide == null ? false : newColumn.hide
     }, newColumn, {
-      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+      hasBeenResized: hasBeenResized
     });
   });
 
@@ -409,4 +425,45 @@ export var mergeColumnsState = function mergeColumnsState(columnsState) {
       columns: columnsState
     });
   };
-};
+};
+export function getFirstNonSpannedColumnToRender(_ref8) {
+  var firstColumnToRender = _ref8.firstColumnToRender,
+      apiRef = _ref8.apiRef,
+      firstRowToRender = _ref8.firstRowToRender,
+      lastRowToRender = _ref8.lastRowToRender,
+      visibleRows = _ref8.visibleRows;
+  var firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (var i = firstRowToRender; i < lastRowToRender; i += 1) {
+    var row = visibleRows[i];
+
+    if (row) {
+      var rowId = visibleRows[i].id;
+      var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender(_ref9) {
+  var firstColumnIndex = _ref9.firstColumnIndex,
+      minColumnIndex = _ref9.minColumnIndex,
+      columnBuffer = _ref9.columnBuffer,
+      firstRowToRender = _ref9.firstRowToRender,
+      lastRowToRender = _ref9.lastRowToRender,
+      apiRef = _ref9.apiRef,
+      visibleRows = _ref9.visibleRows;
+  var initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  var firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef: apiRef,
+    firstRowToRender: firstRowToRender,
+    lastRowToRender: lastRowToRender,
+    visibleRows: visibleRows
+  });
+  return firstColumnToRender;
+}

package/legacy/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,107 @@
+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 var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
+  var lookup = React.useRef({});
+  var setCellColSpanInfo = React.useCallback(function (rowId, columnIndex, cellColSpanInfo) {
+    var sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  var getCellColSpanInfo = React.useCallback(function (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.
+
+  var calculateCellColSpan = React.useCallback(function (params) {
+    var columnIndex = params.columnIndex,
+        rowId = params.rowId,
+        minFirstColumnIndex = params.minFirstColumnIndex,
+        maxLastColumnIndex = params.maxLastColumnIndex;
+    var visibleColumns = apiRef.current.getVisibleColumns();
+    var columnsLength = visibleColumns.length;
+    var column = visibleColumns[columnIndex];
+    var 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
+      };
+    }
+
+    var width = column.computedWidth;
+
+    for (var j = 1; j < colSpan; j += 1) {
+      var nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        var 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: colSpan,
+          width: width
+        }
+      });
+    }
+
+    return {
+      colSpan: colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+  var calculateColSpan = React.useCallback(function (_ref) {
+    var rowId = _ref.rowId,
+        minFirstColumn = _ref.minFirstColumn,
+        maxLastColumn = _ref.maxLastColumn;
+
+    for (var i = minFirstColumn; i < maxLastColumn; i += 1) {
+      var cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId: rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  var columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+  var handleColumnReorderChange = React.useCallback(function () {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+};

package/legacy/hooks/features/columns/useGridColumns.js

@@ -7,7 +7,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 { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+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";
@@ -237,7 +237,13 @@ export function useGridColumns(apiRef, props) {
       if (colDef.hasBeenResized) {
         var colDefDimensions = {};
         COLUMNS_DIMENSION_PROPERTIES.forEach(function (propertyName) {
-          colDefDimensions[propertyName] = colDef[propertyName];
+          var propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
         });
         dimensions[colDef.field] = colDefDimensions;
       }
@@ -295,12 +301,23 @@ export function useGridColumns(apiRef, props) {
    * EVENTS
    */
 
-  var handlepipeProcessorRegister = React.useCallback(function (name) {
-    if (name !== 'hydrateColumns') {
-      return;
+  var prevInnerWidth = React.useRef(null);
+
+  var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setGridColumnsState(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
     }
+  };
+
+  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
 
-    logger.info("Columns pre-processing have changed, regenerating the columns");
+  var hydrateColumns = React.useCallback(function () {
+    logger.info("Columns pipe processing have changed, regenerating the columns");
     var columnsState = createColumnsState({
       apiRef: apiRef,
       columnTypes: columnTypes,
@@ -311,18 +328,7 @@ export function useGridColumns(apiRef, props) {
     });
     setGridColumnsState(columnsState);
   }, [apiRef, logger, setGridColumnsState, columnTypes]);
-  var prevInnerWidth = React.useRef(null);
-
-  var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
-      setGridColumnsState(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
-    }
-  };
-
-  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -150,12 +150,12 @@ export function useGridDimensions(apiRef, props) {
     var 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;
     }
 
@@ -178,7 +178,7 @@ export function useGridDimensions(apiRef, props) {
   useEnhancedEffect(function () {
     return 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/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -217,10 +217,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     }
 
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
-    var row = apiRef.current.getRow(id);
-    var column = apiRef.current.getColumn(field);
     var _editingState$id$fiel = editingState[id][field],
-        value = _editingState$id$fiel.value,
         error = _editingState$id$fiel.error,
         isProcessingProps = _editingState$id$fiel.isProcessingProps;
 
@@ -228,10 +225,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return;
     }
 
-    var rowUpdate = column.valueSetter ? column.valueSetter({
-      value: value,
-      row: row
-    }) : _extends({}, row, _defineProperty({}, field, value));
+    var rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
@@ -243,6 +237,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       };
 
       try {
+        var row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
           apiRef.current.updateRows([finalRowUpdate]);
           updateFocusedCellIfNeeded();
@@ -334,11 +329,22 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return _ref.apply(this, arguments);
     };
   }(), [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  var getRowWithUpdatedValuesFromCellEditing = React.useCallback(function (id, field) {
+    var column = apiRef.current.getColumn(field);
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var value = editingState[id][field].value;
+    var row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value: value,
+      row: row
+    }) : _extends({}, row, _defineProperty({}, field, value));
+  }, [apiRef]);
   var editingApi = {
     getCellMode: getCellMode,
     startCellEditMode: startCellEditMode,
     stopCellEditMode: stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

package/legacy/hooks/features/editRows/useGridEditing.new.js

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridCellEditing } from './useGridCellEditing.new';
-import { GridCellModes } from '../../../models/gridEditRowModel';
+import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
 export var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
@@ -119,7 +119,7 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+                setEditCellValueToCall = props.editMode === GridEditModes.Row ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
                 // By the time this callback runs the user may have cancelled the editing
 
                 if (!(apiRef.current.getCellMode(id, field) === GridCellModes.Edit)) {
@@ -143,10 +143,14 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
       })));
     });
   }, [apiRef, props.editMode]);
+  var getRowWithUpdatedValues = React.useCallback(function (id, field) {
+    return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   var editingSharedApi = {
     isCellEditable: isCellEditable,
     setEditCellValue: setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -1,6 +1,6 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -335,24 +335,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       return;
     }
 
-    var rowUpdate = _extends({}, row);
-
-    Object.entries(editingState[id]).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          field = _ref2[0],
-          fieldProps = _ref2[1];
-
-      var column = apiRef.current.getColumn(field);
-
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
-      } else {
-        rowUpdate[field] = fieldProps.value;
-      }
-    });
+    var rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
@@ -442,10 +425,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         promises.push(promise);
       }
 
-      Object.entries(editingState[id]).forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            thisField = _ref4[0],
-            fieldProps = _ref4[1];
+      Object.entries(editingState[id]).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            thisField = _ref2[0],
+            fieldProps = _ref2[1];
 
         if (thisField === field) {
           return;
@@ -498,11 +481,36 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  var getRowWithUpdatedValuesFromRowEditing = React.useCallback(function (id) {
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var row = apiRef.current.getRow(id);
+
+    var rowUpdate = _extends({}, row);
+
+    Object.entries(editingState[id]).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          field = _ref4[0],
+          fieldProps = _ref4[1];
+
+      var column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   var editingApi = {
     getRowMode: getRowMode,
     startRowEditMode: startRowEditMode,
     stopRowEditMode: stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };