@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -9,6 +8,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSel
 import { gridClasses } from '../../../constants/gridClasses';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -16,21 +16,41 @@ import { isNavigationKey } from '../../../utils/keyboardUtils';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 
 export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   var currentPage = useGridVisibleRows(apiRef, props);
+  /**
+   * @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`.
+   */
+
   var goToCell = React.useCallback(function (colIndex, rowIndex) {
+    var _visibleSortedRows$ro;
+
+    var closestColumnToUse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left';
+    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    var rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    var 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 ".concat(rowIndex, ", col ").concat(colIndex));
     apiRef.current.scrollToIndexes({
       colIndex: colIndex,
       rowIndex: rowIndex
     });
     var field = apiRef.current.getVisibleColumns()[colIndex].field;
-    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    var node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   var goToHeader = React.useCallback(function (colIndex, event) {
     logger.debug("Navigating to header col ".concat(colIndex));
@@ -85,7 +105,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -104,9 +124,9 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
         {
           // "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;
@@ -114,6 +134,18 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
 
       case ' ':
         {
+          var field = params.field;
+
+          if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          var colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
           }
@@ -286,10 +318,10 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     var cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', cellParams, event);
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { GridEvents } from '../../../models/events';
 import { gridVisibleTopLevelRowCountSelector } from '../filter';
 import { gridPageSelector, gridPageSizeSelector } from './gridPaginationSelector';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
@@ -49,7 +48,7 @@ export var useGridPage = function useGridPage(apiRef, props) {
     propModel: props.page,
     propOnChange: props.onPageChange,
     stateSelector: gridPageSelector,
-    changeEvent: GridEvents.pageChange
+    changeEvent: 'pageChange'
   });
   /**
    * API METHODS
@@ -120,8 +119,8 @@ export var useGridPage = function useGridPage(apiRef, props) {
     });
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
-  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
+  useGridApiEventHandler(apiRef, 'pageSizeChange', handlePageSizeChange);
+  useGridApiEventHandler(apiRef, 'pageChange', handlePageChange);
   /**
    * EFFECTS
    */

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
@@ -33,7 +32,7 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,
     stateSelector: gridPageSizeSelector,
-    changeEvent: GridEvents.pageSizeChange
+    changeEvent: 'pageSizeChange'
   });
   /**
    * API METHODS
@@ -106,7 +105,7 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
     var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleUpdateAutoPageSize);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   /**
    * EFFECTS
    */

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

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
-import { useGridSelector } from '../../utils/useGridSelector';
 export var preferencePanelStateInitializer = function preferencePanelStateInitializer(state, props) {
   var _props$initialState$p, _props$initialState;
 
@@ -21,7 +19,6 @@ export var preferencePanelStateInitializer = function preferencePanelStateInitia
 
 export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
   var logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   var hideTimeout = React.useRef();
   var immediateTimeout = React.useRef();
   /**
@@ -30,9 +27,10 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
 
   var hidePreferences = React.useCallback(function () {
     logger.debug('Hiding Preferences Panel');
+    var preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
 
     if (preferencePanelState.openedPanelValue) {
-      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+      apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
     }
@@ -45,7 +43,7 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger]); // 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
 
   var doNotHidePanel = React.useCallback(function () {
@@ -69,7 +67,7 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
         })
       });
     });
-    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+    apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
     apiRef.current.forceUpdate();

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

@@ -5,12 +5,18 @@ export var gridRowsStateSelector = function gridRowsStateSelector(state) {
 export var gridRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.totalRowCount;
 });
+export var gridRowsLoadingSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.loading;
+});
 export var gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.totalTopLevelRowCount;
 });
 export var gridRowsLookupSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.idRowsLookup;
 });
+export var gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.idToIdLookup;
+});
 export var gridRowTreeSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.tree;
 });

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

@@ -1,3 +1,5 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
@@ -10,4 +12,28 @@ export function checkGridRowIdIsValid(id, row) {
   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'));
   }
-}
+}
+export var getTreeNodeDescendants = function getTreeNodeDescendants(tree, parentId, skipAutoGeneratedRows) {
+  var _tree$parentId;
+
+  var children = (_tree$parentId = tree[parentId]) == null ? void 0 : _tree$parentId.children;
+
+  if (children == null) {
+    return [];
+  }
+
+  var validDescendants = [];
+
+  for (var i = 0; i < children.length; i += 1) {
+    var child = children[i];
+    var childNode = tree[child];
+
+    if (!skipAutoGeneratedRows || !childNode.isAutoGenerated) {
+      validDescendants.push(child);
+    }
+
+    validDescendants.push.apply(validDescendants, _toConsumableArray(getTreeNodeDescendants(tree, childNode.id, skipAutoGeneratedRows)));
+  }
+
+  return validDescendants;
+};

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

@@ -2,13 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { checkGridRowIdIsValid } from './gridRowsUtils';
+import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
+import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
+import { checkGridRowIdIsValid, getTreeNodeDescendants } from './gridRowsUtils';
 
 function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   var id = getRowId ? getRowId(rowModel) : rowModel.id;
@@ -16,8 +17,8 @@ function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   return id;
 }
 
-var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
-  var prevState = _ref.prevState,
+var convertRowsPropToState = function convertRowsPropToState(_ref) {
+  var prevState = _ref.prevCache,
       rows = _ref.rows,
       getRowId = _ref.getRowId;
   var value;
@@ -25,6 +26,7 @@ var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
   if (rows) {
     value = {
       idRowsLookup: {},
+      idToIdLookup: {},
       ids: []
     };
 
@@ -32,6 +34,7 @@ var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
       var row = rows[i];
       var id = getGridRowId(row, getRowId);
       value.idRowsLookup[id] = row;
+      value.idToIdLookup[id] = id;
       value.ids.push(id);
     }
   } else {
@@ -44,8 +47,8 @@ var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
   };
 };
 
-var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTree, apiRef, rowCountProp) {
-  var value = rowsCache.state.value;
+var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTree, apiRef, rowCountProp, loadingProp) {
+  var value = rowsCache.value;
   var rowCount = rowCountProp != null ? rowCountProp : 0;
   var groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
     previousTree: previousTree
@@ -54,31 +57,27 @@ var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTr
     return node.parent == null;
   }).length;
   return _extends({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
 };
 
 export var rowsStateInitializer = function rowsStateInitializer(state, props, apiRef) {
-  var rowsCache = {
-    state: convertGridRowsPropToState({
-      rows: props.rows,
-      getRowId: props.getRowId,
-      prevState: {
-        value: {
-          idRowsLookup: {},
-          ids: []
-        },
-        rowsBeforePartialUpdates: []
-      }
-    }),
-    timeout: null,
-    lastUpdateMs: Date.now()
-  };
+  apiRef.current.unstable_caches.rows = convertRowsPropToState({
+    rows: props.rows,
+    getRowId: props.getRowId,
+    prevCache: {
+      value: {
+        idRowsLookup: {},
+        idToIdLookup: {},
+        ids: []
+      },
+      rowsBeforePartialUpdates: []
+    }
+  });
   return _extends({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
-    rowsCache: rowsCache // TODO remove from state
-
+    rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, null, apiRef, props.rowCount, props.loading)
   });
 };
 export var useGridRows = function useGridRows(apiRef, props) {
@@ -88,9 +87,9 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }
 
   var logger = useGridLogger(apiRef, 'useGridRows');
-  var rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
-
   var currentPage = useGridVisibleRows(apiRef, props);
+  var lastUpdateMs = React.useRef(Date.now());
+  var timeout = React.useRef(null);
   var getRow = React.useCallback(function (id) {
     var _ref2;
 
@@ -103,52 +102,52 @@ export var useGridRows = function useGridRows(apiRef, props) {
       return acc;
     }, {});
   }, [currentPage.rows]);
-  var throttledRowsChange = React.useCallback(function (newState, throttle) {
+  var throttledRowsChange = React.useCallback(function (newCache, throttle) {
     var run = function run() {
-      rowsCache.current.timeout = null;
-      rowsCache.current.lastUpdateMs = Date.now();
+      timeout.current = null;
+      lastUpdateMs.current = Date.now();
       apiRef.current.setState(function (state) {
         return _extends({}, state, {
-          rows: getRowsStateFromCache(rowsCache.current, gridRowTreeSelector(apiRef), apiRef, props.rowCount)
+          rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, gridRowTreeSelector(apiRef), apiRef, props.rowCount, props.loading)
         });
       });
-      apiRef.current.publishEvent(GridEvents.rowsSet);
+      apiRef.current.publishEvent('rowsSet');
       apiRef.current.forceUpdate();
     };
 
-    if (rowsCache.current.timeout) {
-      clearTimeout(rowsCache.current.timeout);
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+      timeout.current = null;
     }
 
-    rowsCache.current.state = newState;
-    rowsCache.current.timeout = null;
+    apiRef.current.unstable_caches.rows = newCache;
 
     if (!throttle) {
       run();
       return;
     }
 
-    var throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+    var throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
 
     if (throttleRemainingTimeMs > 0) {
-      rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+      timeout.current = setTimeout(run, throttleRemainingTimeMs);
       return;
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
   /**
    * API METHODS
    */
 
   var setRows = React.useCallback(function (rows) {
     logger.debug("Updating all rows, new length ".concat(rows.length));
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows: rows,
-      prevState: rowsCache.current.state,
+      prevCache: apiRef.current.unstable_caches.rows,
       getRowId: props.getRowId
     }), true);
-  }, [logger, props.getRowId, throttledRowsChange]);
+  }, [apiRef, logger, props.getRowId, throttledRowsChange]);
   var updateRows = React.useCallback(function (updates) {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -168,13 +167,15 @@ export var useGridRows = function useGridRows(apiRef, props) {
     });
     var deletedRowIds = [];
     var newStateValue = {
-      idRowsLookup: _extends({}, rowsCache.current.state.value.idRowsLookup),
-      ids: _toConsumableArray(rowsCache.current.state.value.ids)
+      idRowsLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idRowsLookup),
+      idToIdLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idToIdLookup),
+      ids: _toConsumableArray(apiRef.current.unstable_caches.rows.value.ids)
     };
     uniqUpdates.forEach(function (partialRow, id) {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newStateValue.idRowsLookup[id];
+        delete newStateValue.idToIdLookup[id];
         deletedRowIds.push(id);
         return;
       }
@@ -183,6 +184,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
       if (!oldRow) {
         newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.idToIdLookup[id] = id;
         newStateValue.ids.push(id);
         return;
       }
@@ -196,12 +198,12 @@ export var useGridRows = function useGridRows(apiRef, props) {
       });
     }
 
-    var state = _extends({}, rowsCache.current.state, {
+    var state = _extends({}, apiRef.current.unstable_caches.rows, {
       value: newStateValue
     });
 
     throttledRowsChange(state, true);
-  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   var getRowModels = React.useCallback(function () {
     var allRows = gridRowIdsSelector(apiRef);
     var idRowsLookup = gridRowsLookupSelector(apiRef);
@@ -237,23 +239,92 @@ export var useGridRows = function useGridRows(apiRef, props) {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
+    apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
   var getRowNode = React.useCallback(function (id) {
     var _gridRowTreeSelector$;
 
     return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  var getRowGroupChildren = React.useCallback(function (_ref4) {
+    var _ref4$skipAutoGenerat = _ref4.skipAutoGeneratedRows,
+        skipAutoGeneratedRows = _ref4$skipAutoGenerat === void 0 ? true : _ref4$skipAutoGenerat,
+        groupId = _ref4.groupId,
+        applySorting = _ref4.applySorting,
+        applyFiltering = _ref4.applyFiltering;
+    var tree = gridRowTreeSelector(apiRef);
+    var children;
+
+    if (applySorting) {
+      var groupNode = tree[groupId];
+
+      if (!groupNode) {
+        return [];
+      }
+
+      var sortedRowIds = gridSortedRowIdsSelector(apiRef);
+      children = [];
+      var startIndex = sortedRowIds.findIndex(function (id) {
+        return id === groupId;
+      }) + 1;
+
+      for (var index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
+        var id = sortedRowIds[index];
+        var node = tree[id];
+
+        if (!skipAutoGeneratedRows || !node.isAutoGenerated) {
+          children.push(id);
+        }
+      }
+    } else {
+      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows);
+    }
+
+    if (applyFiltering) {
+      var filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+      children = children.filter(function (childId) {
+        return filteredRowsLookup[childId] !== false;
+      });
+    }
+
+    return children;
+  }, [apiRef]);
+  var setRowIndex = React.useCallback(function (rowId, targetIndex) {
+    var allRows = gridRowIdsSelector(apiRef);
+    var oldIndex = allRows.findIndex(function (row) {
+      return row === rowId;
+    });
+
+    if (oldIndex === -1 || oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug("Moving row ".concat(rowId, " to index ").concat(targetIndex));
+
+    var updatedRows = _toConsumableArray(allRows);
+
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          ids: updatedRows
+        })
+      });
+    });
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   var rowApi = {
     getRow: getRow,
     getRowModels: getRowModels,
     getRowsCount: getRowsCount,
     getAllRowIds: getAllRowIds,
     setRows: setRows,
+    setRowIndex: setRowIndex,
     updateRows: updateRows,
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,
-    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows
+    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows,
+    getRowGroupChildren: getRowGroupChildren
   };
   /**
    * EVENTS
@@ -263,7 +334,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
     logger.info("Row grouping pre-processing have changed, regenerating the row tree");
     var rows;
 
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       // The `props.rows` has not changed since the last row grouping
       // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
       rows = undefined;
@@ -274,12 +345,12 @@ export var useGridRows = function useGridRows(apiRef, props) {
       rows = props.rows;
     }
 
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows: rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      prevCache: apiRef.current.unstable_caches.rows
     }), false);
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  }, [logger, apiRef, props.rows, props.getRowId, throttledRowsChange]);
   var handleStrategyProcessorChange = React.useCallback(function (methodName) {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -292,8 +363,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
       groupRows();
     }
   }, [apiRef, groupRows]);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
-  useGridApiEventHandler(apiRef, GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
   /**
    * EFFECTS
@@ -301,9 +372,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
   React.useEffect(function () {
     return function () {
-      if (rowsCache.current.timeout !== null) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        clearTimeout(rowsCache.current.timeout);
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
       }
     };
   }, []); // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
@@ -314,18 +384,18 @@ export var useGridRows = function useGridRows(apiRef, props) {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `GridEvents.rowGroupsPreProcessingChange` listener)
+    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
 
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       return;
     }
 
     logger.debug("Updating all rows, new length ".concat(props.rows.length));
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows: props.rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      prevCache: apiRef.current.unstable_caches.rows
     }), false);
-  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange, apiRef]);
 };