@mui/x-data-grid 5.8.0 → 5.9.0

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

@@ -11,8 +11,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
 var _utils = require("@mui/material/utils");
 
+var _reselect = require("reselect");
+
 var _useGridApiContext = require("../../utils/useGridApiContext");
 
 var _useGridSelector = require("../../utils/useGridSelector");
@@ -37,12 +41,22 @@ var _events = require("../../../models/events");
 
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
 
+var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+
+var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
+
+var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -66,18 +80,43 @@ const useGridColumnHeaders = props => {
   const [renderContext, setRenderContext] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const prevScrollLeft = React.useRef(0);
+  const currentPage = (0, _useGridVisibleRows.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((0, _reselect.defaultMemoize)(_gridColumnsUtils.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] = (0, _useGridVirtualScroller.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) => {
     var _prevRenderContext$cu, _prevRenderContext$cu2;
 
     if (!innerRef.current) {
@@ -90,15 +129,32 @@ 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]);
@@ -124,7 +180,22 @@ const useGridColumnHeaders = props => {
     }
 
     const columns = [];
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const [firstRowToRender, lastRowToRender] = (0, _useGridVirtualScroller.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);
 
@@ -148,7 +219,7 @@ const useGridColumnHeaders = props => {
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -163,7 +234,6 @@ const useGridColumnHeaders = props => {
     renderContext,
     getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition,
     getRootProps: (other = {}) => (0, _extends2.default)({
       style: rootStyle
     }, other),

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

@@ -7,7 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.computeColumnTypes = exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
 exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
-exports.mergeColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = exports.createColumnsState = void 0;
+exports.createColumnsState = void 0;
+exports.getFirstColumnIndexToRender = getFirstColumnIndexToRender;
+exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
+exports.mergeColumnsState = exports.hydrateColumnsWidth = exports.getGridColDef = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -227,9 +230,13 @@ const applyInitialState = (columnsState, initialState) => {
 
   for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
     const field = columnsWithUpdatedDimensions[i];
-    newColumnLookup[field] = (0, _extends2.default)({}, newColumnLookup[field], dimensions[field], {
+    const newColDef = (0, _extends2.default)({}, newColumnLookup[field], {
       hasBeenResized: true
     });
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
   }
 
   const newColumnsState = {
@@ -323,16 +330,20 @@ const createColumnsState = ({
       columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
 
-    let hasValidDimension = false;
-
-    if (!existingState.hasBeenResized) {
-      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
-    }
+    let hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
     columnsStateWithoutColumnVisibilityModel.lookup[field] = (0, _extends2.default)({}, existingState, {
       hide: newColumn.hide == null ? false : newColumn.hide
     }, newColumn, {
-      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+      hasBeenResized
     });
   });
 
@@ -422,4 +433,49 @@ const mergeColumnsState = columnsState => state => (0, _extends2.default)({}, st
   columns: columnsState
 });
 
-exports.mergeColumnsState = mergeColumnsState;
+exports.mergeColumnsState = mergeColumnsState;
+
+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;
+}
+
+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/node/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnSpanning = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _gridEvents = require("../../../models/events/gridEvents");
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+const useGridColumnSpanning = apiRef => {
+  const lookup = _react.default.useRef({});
+
+  const setCellColSpanInfo = _react.default.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+    const sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+
+  const getCellColSpanInfo = _react.default.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.default.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.default.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
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+
+  const handleColumnReorderChange = _react.default.useCallback(() => {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.columnOrderChange, handleColumnReorderChange);
+};
+
+exports.useGridColumnSpanning = useGridColumnSpanning;

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

@@ -238,7 +238,13 @@ function useGridColumns(apiRef, props) {
         const colDefDimensions = {};
 
         _gridColumnsUtils.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;
@@ -297,12 +303,23 @@ function useGridColumns(apiRef, props) {
    * EVENTS
    */
 
-  const handlepipeProcessorRegister = React.useCallback(name => {
-    if (name !== 'hydrateColumns') {
-      return;
+  const prevInnerWidth = React.useRef(null);
+
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state), viewportInnerSize.width));
     }
+  };
+
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.viewportInnerSizeChange, handleGridSizeChange);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
 
-    logger.info(`Columns pre-processing have changed, regenerating the columns`);
+  const hydrateColumns = React.useCallback(() => {
+    logger.info(`Columns pipe processing have changed, regenerating the columns`);
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
       columnTypes,
@@ -313,18 +330,7 @@ function useGridColumns(apiRef, props) {
     });
     setGridColumnsState(columnsState);
   }, [apiRef, logger, setGridColumnsState, columnTypes]);
-  const prevInnerWidth = React.useRef(null);
-
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
-      setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state), viewportInnerSize.width));
-    }
-  };
-
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */

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

@@ -168,12 +168,12 @@ 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;
     }
 
@@ -194,7 +194,7 @@ function useGridDimensions(apiRef, props) {
     debounceResize();
   }, [props.autoHeight, debounceResize, logger, resize]);
   (0, _utils.unstable_useEnhancedEffect)(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.visibleRowsSet, updateGridDimensionsRef);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.sortedRowsSet, updateGridDimensionsRef);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.pageChange, updateGridDimensionsRef);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.pageSizeChange, updateGridDimensionsRef);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.columnsChange, updateGridDimensionsRef);

package/node/hooks/features/editRows/useGridCellEditing.new.js

@@ -243,10 +243,7 @@ const useGridCellEditing = (apiRef, props) => {
     }
 
     const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
-    const column = apiRef.current.getColumn(field);
     const {
-      value,
       error,
       isProcessingProps
     } = editingState[id][field];
@@ -255,12 +252,7 @@ const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
-    const rowUpdate = column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : (0, _extends2.default)({}, row, {
-      [field]: value
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
@@ -272,6 +264,7 @@ const useGridCellEditing = (apiRef, props) => {
       };
 
       try {
+        const row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           updateFocusedCellIfNeeded();
@@ -339,11 +332,26 @@ const useGridCellEditing = (apiRef, props) => {
     editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
     return !editingState[id][field].error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
+    const column = apiRef.current.getColumn(field);
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const {
+      value
+    } = editingState[id][field];
+    const row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value,
+      row
+    }) : (0, _extends2.default)({}, row, {
+      [field]: value
+    });
+  }, [apiRef]);
   const editingApi = {
     getCellMode,
     startCellEditMode,
     stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'EditingApi');
 };

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

@@ -121,7 +121,7 @@ const useGridEditing = (apiRef, props) => {
     } = params;
     return new Promise(resolve => {
       maybeDebounce(id, field, debounceMs, async () => {
-        const setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+        const setEditCellValueToCall = props.editMode === _gridEditRowModel.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) === _gridEditRowModel.GridCellModes.Edit) {
@@ -131,10 +131,14 @@ const useGridEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, props.editMode]);
+  const getRowWithUpdatedValues = React.useCallback((id, field) => {
+    return props.editMode === _gridEditRowModel.GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingSharedApi, 'EditingApi');
 };

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

@@ -355,19 +355,7 @@ const useGridRowEditing = (apiRef, props) => {
       return;
     }
 
-    let rowUpdate = (0, _extends2.default)({}, row);
-    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
-      const column = apiRef.current.getColumn(field);
-
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
-      } else {
-        rowUpdate[field] = fieldProps.value;
-      }
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
@@ -504,11 +492,30 @@ const useGridRowEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+    let rowUpdate = (0, _extends2.default)({}, row);
+    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
+      const column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   const editingApi = {
     getRowMode,
     startRowEditMode,
     stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'EditingApi');
 };

package/node/hooks/features/filter/useGridFilter.js

@@ -77,11 +77,7 @@ const useGridFilter = (apiRef, props) => {
     stateSelector: _gridFilterSelector.gridFilterModelSelector,
     changeEvent: _events.GridEvents.filterModelChange
   });
-  /**
-   * API METHODS
-   */
-
-  const applyFilters = React.useCallback(() => {
+  const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
@@ -92,9 +88,16 @@ const useGridFilter = (apiRef, props) => {
         filter: (0, _extends2.default)({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(_events.GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent(_events.GridEvents.filteredRowsSet);
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const applyFilters = React.useCallback(() => {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     const items = [...filterModel.items];
@@ -278,8 +281,10 @@ const useGridFilter = (apiRef, props) => {
     if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
+  }, [apiRef]); // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
+  // Otherwise, the state is not consistent during the render
+
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, updateFilteredRows);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnsChange, handleColumnsChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);