@mui/x-data-grid 5.7.0 → 5.10.0

package/node/hooks/features/{keyboard → keyboardNavigation}/useGridKeyboardNavigation.js

@@ -23,34 +23,56 @@ var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectio
 
 var _gridClasses = require("../../../constants/gridClasses");
 
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
+
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+
+var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+
 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; }
 
 /**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
  * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
-  const goToCell = React.useCallback((colIndex, rowIndex) => {
+  /**
+   * @param {number} colIndex Index of the column to focus
+   * @param {number} rowIndex index of the row to focus
+   * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   */
+
+  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+    var _visibleSortedRows$ro;
+
+    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
+    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
+      if (closestColumnToUse === 'left') {
+        colIndex = nextCellColSpanInfo.leftVisibleCellIndex;
+      } else if (closestColumnToUse === 'right') {
+        colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
     logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
-    const node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -103,7 +125,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -122,16 +144,36 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
         }
 
-      case 'PageDown':
       case ' ':
+        {
+          const field = params.field;
+
+          if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          const colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
+          if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
+            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+          }
+
+          break;
+        }
+
+      case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
@@ -286,8 +328,22 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPage, goToCell, goToHeader]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.cellMode !== _gridEditRowModel.GridCellModes.Edit && (0, _keyboardUtils.isNavigationKey)(event.key)) {
+      apiRef.current.publishEvent(_events.GridEvents.cellNavigationKeyDown, cellParams, event);
+    }
+  }, [apiRef]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
 };
 
 exports.useGridKeyboardNavigation = useGridKeyboardNavigation;

package/node/hooks/features/pagination/useGridPage.js

@@ -19,7 +19,7 @@ var _filter = require("../filter");
 
 var _gridPaginationSelector = require("./gridPaginationSelector");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _warning = require("../../../utils/warning");
 
@@ -114,8 +114,8 @@ const useGridPage = (apiRef, props) => {
     apiRef.current.setState(mergeStateWithPage(page));
     return params;
   }, [apiRef]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -133,7 +133,12 @@ const useGridPage = (apiRef, props) => {
     apiRef.current.forceUpdate();
   };
 
+  const handlePageChange = () => apiRef.current.scrollToIndexes({
+    rowIndex: (0, _gridPaginationSelector.gridPageSelector)(apiRef) * (0, _gridPaginationSelector.gridPageSizeSelector)(apiRef)
+  });
+
   (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.pageSizeChange, handlePageSizeChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.pageChange, handlePageChange);
   /**
    * EFFECTS
    */

package/node/hooks/features/pagination/useGridPageSize.js

@@ -19,7 +19,7 @@ var _gridPaginationSelector = require("./gridPaginationSelector");
 
 var _density = require("../density");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 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); }
 
@@ -106,8 +106,8 @@ const useGridPageSize = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */

package/node/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -11,14 +11,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _events = require("../../../models/events");
+
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridLogger = require("../../utils/useGridLogger");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _gridPreferencePanelSelector = require("./gridPreferencePanelSelector");
 
+var _useGridSelector = require("../../utils/useGridSelector");
+
 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; }
@@ -41,6 +45,7 @@ exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 
 const useGridPreferencesPanel = apiRef => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
+  const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -49,13 +54,20 @@ const useGridPreferencesPanel = apiRef => {
 
   const hidePreferences = React.useCallback(() => {
     logger.debug('Hiding Preferences Panel');
+
+    if (preferencePanelState.openedPanelValue) {
+      apiRef.current.publishEvent(_events.GridEvents.preferencePanelClose, {
+        openedPanelValue: preferencePanelState.openedPanelValue
+      });
+    }
+
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       preferencePanel: {
         open: false
       }
     }));
     apiRef.current.forceUpdate();
-  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   const doNotHidePanel = React.useCallback(() => {
@@ -75,8 +87,11 @@ const useGridPreferencesPanel = apiRef => {
         openedPanelValue: newValue
       })
     }));
+    apiRef.current.publishEvent(_events.GridEvents.preferencePanelOpen, {
+      openedPanelValue: newValue
+    });
     apiRef.current.forceUpdate();
-  }, [doNotHidePanel, apiRef, logger]);
+  }, [logger, doNotHidePanel, apiRef]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, {
     showPreferences,
     hidePreferences: hidePreferencesDelayed
@@ -107,8 +122,8 @@ const useGridPreferencesPanel = apiRef => {
 
     return params;
   }, [apiRef]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EFFECTS
    */

package/node/hooks/features/rows/gridRowsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -12,6 +12,8 @@ const gridRowsStateSelector = state => state.rows;
 exports.gridRowsStateSelector = gridRowsStateSelector;
 const gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
 exports.gridRowCountSelector = gridRowCountSelector;
+const gridRowsLoadingSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.loading);
+exports.gridRowsLoadingSelector = gridRowsLoadingSelector;
 const gridTopLevelRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 exports.gridTopLevelRowCountSelector = gridTopLevelRowCountSelector;
 const gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.idRowsLookup);

package/node/hooks/features/rows/gridRowsUtils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
+
+/**
+ * A helper function to check if the id provided is valid.
+ * @param {GridRowId} id Id as [[GridRowId]].
+ * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
+ * @param {string} detailErrorMessage A custom error message to display for invalid IDs
+ */
+function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
+  if (id == null) {
+    throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+  }
+}

package/node/hooks/features/rows/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  checkGridRowIdIsValid: true
+};
+Object.defineProperty(exports, "checkGridRowIdIsValid", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.checkGridRowIdIsValid;
+  }
+});
 
 var _gridRowsMetaSelector = require("./gridRowsMetaSelector");
 
 Object.keys(_gridRowsMetaSelector).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridRowsMetaSelector[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -21,6 +31,7 @@ var _gridRowsMetaState = require("./gridRowsMetaState");
 
 Object.keys(_gridRowsMetaState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridRowsMetaState[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -34,6 +45,7 @@ var _gridRowsSelector = require("./gridRowsSelector");
 
 Object.keys(_gridRowsSelector).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridRowsSelector[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -41,4 +53,6 @@ Object.keys(_gridRowsSelector).forEach(function (key) {
       return _gridRowsSelector[key];
     }
   });
-});
+});
+
+var _gridRowsUtils = require("./gridRowsUtils");

package/node/hooks/features/rows/useGridRows.js

@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _events = require("../../../models/events");
 
-var _gridRows = require("../../../models/gridRows");
-
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -25,13 +23,15 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
+var _gridRowsUtils = require("./gridRowsUtils");
+
 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 getGridRowId(rowModel, getRowId, detailErrorMessage) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;
-  (0, _gridRows.checkGridRowIdIsValid)(id, rowModel, detailErrorMessage);
+  (0, _gridRowsUtils.checkGridRowIdIsValid)(id, rowModel, detailErrorMessage);
   return id;
 }
 
@@ -64,7 +64,7 @@ const convertGridRowsPropToState = ({
   };
 };
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
   const {
     value
   } = rowsCache.state;
@@ -74,6 +74,7 @@ const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) =>
   }));
   const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return (0, _extends2.default)({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
@@ -96,7 +97,7 @@ const rowsStateInitializer = (state, props, apiRef) => {
     lastUpdateMs: Date.now()
   };
   return (0, _extends2.default)({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
+    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount, props.loading),
     rowsCache // TODO remove from state
 
   });
@@ -115,9 +116,9 @@ const useGridRows = (apiRef, props) => {
 
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const getRow = React.useCallback(id => {
-    var _gridRowsLookupSelect;
+    var _ref;
 
-    return (_gridRowsLookupSelect = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id]) != null ? _gridRowsLookupSelect : null;
+    return (_ref = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id]) != null ? _ref : null;
   }, [apiRef]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id
@@ -130,7 +131,7 @@ const useGridRows = (apiRef, props) => {
       rowsCache.current.timeout = null;
       rowsCache.current.lastUpdateMs = Date.now();
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount)
+        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount, props.loading)
       }));
       apiRef.current.publishEvent(_events.GridEvents.rowsSet);
       apiRef.current.forceUpdate();
@@ -156,7 +157,7 @@ const useGridRows = (apiRef, props) => {
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
   /**
    * API METHODS
    */
@@ -254,12 +255,31 @@ const useGridRows = (apiRef, props) => {
 
     return (_gridRowTreeSelector$ = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  const setRowIndex = React.useCallback((rowId, targetIndex) => {
+    const allRows = (0, _gridRowsSelector.gridRowIdsSelector)(apiRef);
+    const oldIndex = allRows.findIndex(row => row === rowId);
+
+    if (oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
+    const updatedRows = [...allRows];
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   const rowApi = {
     getRow,
     getRowModels,
     getRowsCount,
     getAllRowIds,
     setRows,
+    setRowIndex,
     updateRows,
     setRowChildrenExpansion,
     getRowNode,

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -25,9 +25,7 @@ var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 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); }
 
@@ -92,16 +90,17 @@ const useGridRowsMeta = (apiRef, props) => {
         if (getRowSpacing) {
           var _spacing$top, _spacing$bottom;
 
-          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
           const spacing = getRowSpacing((0, _extends2.default)({}, row, {
-            isFirstVisible: index === 0,
-            isLastVisible: index === currentPage.rows.length - 1
+            isFirstVisible: indexRelativeToCurrentPage === 0,
+            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+            indexRelativeToCurrentPage
           }));
           initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
         }
 
-        const sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        const sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
         const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
         rowsHeightLookup.current[row.id] = {
           value: baseRowHeight,
@@ -147,14 +146,7 @@ const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

package/node/hooks/features/scroll/useGridScroll.js

@@ -11,6 +11,8 @@ var _useGridLogger = require("../../utils/useGridLogger");
 
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
+var _useGridSelector = require("../../utils/useGridSelector");
+
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -19,7 +21,7 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
-var _useGridNativeEventListener = require("../../utils/useGridNativeEventListener");
+var _gridFilterSelector = require("../filter/gridFilterSelector");
 
 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); }
 
@@ -51,6 +53,8 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumns (state) - can be after, async only
  * @requires useGridRows (state) - can be after, async only
  * @requires useGridRowsMeta (state) - can be after, async only
+ * @requires useGridFilter (state)
+ * @requires useGridColumnSpanning (method)
  */
 
 
@@ -58,11 +62,13 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const windowRef = apiRef.current.windowRef;
+  const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridVisibleSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
     const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const scrollToHeader = params.rowIndex == null;
 
-    if (totalRowCount === 0 || visibleColumns.length === 0) {
+    if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
     }
 
@@ -71,10 +77,27 @@ const useGridScroll = (apiRef, props) => {
 
     if (params.colIndex != null) {
       const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
+      let cellWidth;
+
+      if (typeof params.rowIndex !== 'undefined') {
+        var _visibleSortedRows$pa;
+
+        const rowId = (_visibleSortedRows$pa = visibleSortedRows[params.rowIndex]) == null ? void 0 : _visibleSortedRows$pa.id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
+
+        if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+          cellWidth = cellColSpanInfo.cellProps.width;
+        }
+      }
+
+      if (typeof cellWidth === 'undefined') {
+        cellWidth = visibleColumns[params.colIndex].computedWidth;
+      }
+
       scrollCoordinates.left = scrollIntoView({
         clientHeight: windowRef.current.clientWidth,
         scrollTop: windowRef.current.scrollLeft,
-        offsetHeight: visibleColumns[params.colIndex].computedWidth,
+        offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
@@ -93,7 +116,7 @@ const useGridScroll = (apiRef, props) => {
       });
     }
 
-    scrollCoordinates = apiRef.current.unstable_applyPreProcessors('scrollToIndexes', scrollCoordinates, params);
+    scrollCoordinates = apiRef.current.unstable_applyPipeProcessors('scrollToIndexes', scrollCoordinates, params);
 
     if (typeof scrollCoordinates.left !== undefined || typeof scrollCoordinates.top !== undefined) {
       apiRef.current.scroll(scrollCoordinates);
@@ -101,7 +124,7 @@ const useGridScroll = (apiRef, props) => {
     }
 
     return false;
-  }, [logger, apiRef, windowRef, props.pagination]);
+  }, [logger, apiRef, windowRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (windowRef.current && params.left != null && colRef.current) {
       colRef.current.scrollLeft = params.left;
@@ -135,15 +158,6 @@ const useGridScroll = (apiRef, props) => {
     getScrollPosition
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, scrollApi, 'GridScrollApi');
-  const preventScroll = React.useCallback(event => {
-    event.target.scrollLeft = 0;
-    event.target.scrollTop = 0;
-  }, []);
-  (0, _useGridNativeEventListener.useGridNativeEventListener)(apiRef, () => {
-    var _apiRef$current, _apiRef$current$rende, _apiRef$current$rende2;
-
-    return (_apiRef$current = apiRef.current) == null ? void 0 : (_apiRef$current$rende = _apiRef$current.renderingZoneRef) == null ? void 0 : (_apiRef$current$rende2 = _apiRef$current$rende.current) == null ? void 0 : _apiRef$current$rende2.parentElement;
-  }, 'scroll', preventScroll);
 };
 
 exports.useGridScroll = useGridScroll;