@mui/x-data-grid 5.8.0 → 5.11.0

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

@@ -1,12 +1,13 @@
 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) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;
@@ -14,8 +15,8 @@ function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   return id;
 }
 
-const convertGridRowsPropToState = ({
-  prevState,
+const convertRowsPropToState = ({
+  prevCache: prevState,
   rows,
   getRowId
 }) => {
@@ -24,6 +25,7 @@ const convertGridRowsPropToState = ({
   if (rows) {
     value = {
       idRowsLookup: {},
+      idToIdLookup: {},
       ids: []
     };
 
@@ -31,6 +33,7 @@ const convertGridRowsPropToState = ({
       const row = rows[i];
       const id = getGridRowId(row, getRowId);
       value.idRowsLookup[id] = row;
+      value.idToIdLookup[id] = id;
       value.ids.push(id);
     }
   } else {
@@ -43,41 +46,37 @@ const convertGridRowsPropToState = ({
   };
 };
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
   const {
     value
-  } = rowsCache.state;
+  } = rowsCache;
   const rowCount = rowCountProp ?? 0;
   const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
     previousTree
   }));
   const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return _extends({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
 };
 
 export const rowsStateInitializer = (state, props, apiRef) => {
-  const 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 // TODO remove from state
-
+    rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, null, apiRef, props.rowCount, props.loading)
   });
 };
 export const useGridRows = (apiRef, props) => {
@@ -87,9 +86,9 @@ export const useGridRows = (apiRef, props) => {
   }
 
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
-
   const currentPage = useGridVisibleRows(apiRef, props);
+  const lastUpdateMs = React.useRef(Date.now());
+  const timeout = React.useRef(null);
   const getRow = React.useCallback(id => gridRowsLookupSelector(apiRef)[id] ?? null, [apiRef]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id
@@ -97,50 +96,50 @@ export const useGridRows = (apiRef, props) => {
     acc[id] = index;
     return acc;
   }, {}), [currentPage.rows]);
-  const throttledRowsChange = React.useCallback((newState, throttle) => {
+  const throttledRowsChange = React.useCallback((newCache, throttle) => {
     const run = () => {
-      rowsCache.current.timeout = null;
-      rowsCache.current.lastUpdateMs = Date.now();
+      timeout.current = null;
+      lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => _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;
     }
 
-    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+    const 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
    */
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows,
-      prevState: rowsCache.current.state,
+      prevCache: apiRef.current.unstable_caches.rows,
       getRowId: props.getRowId
     }), true);
-  }, [logger, props.getRowId, throttledRowsChange]);
+  }, [apiRef, logger, props.getRowId, throttledRowsChange]);
   const updateRows = React.useCallback(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.
@@ -160,13 +159,15 @@ export const useGridRows = (apiRef, props) => {
     });
     const deletedRowIds = [];
     const newStateValue = {
-      idRowsLookup: _extends({}, rowsCache.current.state.value.idRowsLookup),
-      ids: [...rowsCache.current.state.value.ids]
+      idRowsLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idRowsLookup),
+      idToIdLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idToIdLookup),
+      ids: [...apiRef.current.unstable_caches.rows.value.ids]
     };
     uniqUpdates.forEach((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;
       }
@@ -175,6 +176,7 @@ export const useGridRows = (apiRef, props) => {
 
       if (!oldRow) {
         newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.idToIdLookup[id] = id;
         newStateValue.ids.push(id);
         return;
       }
@@ -186,12 +188,12 @@ export const useGridRows = (apiRef, props) => {
       newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
     }
 
-    const state = _extends({}, rowsCache.current.state, {
+    const state = _extends({}, apiRef.current.unstable_caches.rows, {
       value: newStateValue
     });
 
     throttledRowsChange(state, true);
-  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   const getRowModels = React.useCallback(() => {
     const allRows = gridRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
@@ -221,19 +223,78 @@ export const useGridRows = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
+    apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
   const getRowNode = React.useCallback(id => gridRowTreeSelector(apiRef)[id] ?? null, [apiRef]);
+  const getRowGroupChildren = React.useCallback(({
+    skipAutoGeneratedRows = true,
+    groupId,
+    applySorting,
+    applyFiltering
+  }) => {
+    const tree = gridRowTreeSelector(apiRef);
+    let children;
+
+    if (applySorting) {
+      const groupNode = tree[groupId];
+
+      if (!groupNode) {
+        return [];
+      }
+
+      const sortedRowIds = gridSortedRowIdsSelector(apiRef);
+      children = [];
+      const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+
+      for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
+        const id = sortedRowIds[index];
+        const node = tree[id];
+
+        if (!skipAutoGeneratedRows || !node.isAutoGenerated) {
+          children.push(id);
+        }
+      }
+    } else {
+      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows);
+    }
+
+    if (applyFiltering) {
+      const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+      children = children.filter(childId => filteredRowsLookup[childId] !== false);
+    }
+
+    return children;
+  }, [apiRef]);
+  const setRowIndex = React.useCallback((rowId, targetIndex) => {
+    const allRows = gridRowIdsSelector(apiRef);
+    const oldIndex = allRows.findIndex(row => row === rowId);
+
+    if (oldIndex === -1 || 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 => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   const rowApi = {
     getRow,
     getRowModels,
     getRowsCount,
     getAllRowIds,
     setRows,
+    setRowIndex,
     updateRows,
     setRowChildrenExpansion,
     getRowNode,
-    getRowIndexRelativeToVisibleRows
+    getRowIndexRelativeToVisibleRows,
+    getRowGroupChildren
   };
   /**
    * EVENTS
@@ -243,7 +304,7 @@ export const useGridRows = (apiRef, props) => {
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
     let 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;
@@ -254,12 +315,12 @@ export const useGridRows = (apiRef, props) => {
       rows = props.rows;
     }
 
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       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]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -272,8 +333,8 @@ export const 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
@@ -281,9 +342,8 @@ export const useGridRows = (apiRef, props) => {
 
   React.useEffect(() => {
     return () => {
-      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`
@@ -294,18 +354,18 @@ export const 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 ${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]);
 };

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

@@ -7,8 +7,7 @@ import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../dens
 import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
-import { GridEvents } from '../../../models/events/gridEvents';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsMetaStateInitializer = state => _extends({}, state, {
   rowsMeta: {
     currentPageTotalHeight: 0,
@@ -61,10 +60,11 @@ export const useGridRowsMeta = (apiRef, props) => {
         };
 
         if (getRowSpacing) {
-          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
           const spacing = getRowSpacing(_extends({}, row, {
-            isFirstVisible: index === 0,
-            isLastVisible: index === currentPage.rows.length - 1
+            isFirstVisible: indexRelativeToCurrentPage === 0,
+            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+            indexRelativeToCurrentPage
           }));
           initialHeights.spacingTop = spacing.top ?? 0;
           initialHeights.spacingBottom = spacing.bottom ?? 0;
@@ -108,14 +108,7 @@ export const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlepipeProcessorRegister = React.useCallback(name => {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
+  useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

package/modern/hooks/features/rows/useGridRowsPreProcessors.js

@@ -3,6 +3,7 @@ import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../c
 const flatRowTreeCreationMethod = ({
   ids,
   idRowsLookup,
+  idToIdLookup,
   previousTree
 }) => {
   const tree = {};
@@ -28,6 +29,7 @@ const flatRowTreeCreationMethod = ({
     tree,
     treeDepth: 1,
     idRowsLookup,
+    idToIdLookup,
     ids
   };
 };

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPaginationSelector';
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { useGridApiMethod } from '../../utils/useGridApiMethod'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 
 function scrollIntoView(dimensions) {
@@ -14,7 +16,12 @@ function scrollIntoView(dimensions) {
     offsetHeight,
     offsetTop
   } = dimensions;
-  const elementBottom = offsetTop + offsetHeight;
+  const elementBottom = offsetTop + offsetHeight; // Always scroll to top when cell is higher than viewport to avoid scroll jump
+  // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
+
+  if (offsetHeight > clientHeight) {
+    return offsetTop;
+  }
 
   if (elementBottom - clientHeight > scrollTop) {
     return elementBottom - clientHeight;
@@ -31,6 +38,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)
  */
 
 
@@ -38,6 +47,7 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const windowRef = apiRef.current.windowRef;
+  const visibleSortedRows = useGridSelector(apiRef, gridVisibleSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = gridRowCountSelector(apiRef);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
@@ -52,10 +62,25 @@ export const useGridScroll = (apiRef, props) => {
 
     if (params.colIndex != null) {
       const columnPositions = gridColumnPositionsSelector(apiRef);
+      let cellWidth;
+
+      if (typeof params.rowIndex !== 'undefined') {
+        const rowId = visibleSortedRows[params.rowIndex]?.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]
       });
     }
@@ -82,7 +107,7 @@ export 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;

package/modern/hooks/features/selection/useGridSelection.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -13,6 +12,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../..
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
 import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
@@ -51,7 +51,7 @@ export const useGridSelection = (apiRef, props) => {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: gridSelectionStateSelector,
-    changeEvent: GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   const {
     checkboxSelection,
@@ -191,6 +191,10 @@ export const useGridSelection = (apiRef, props) => {
    */
 
   const removeOutdatedSelection = React.useCallback(() => {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     const currentSelection = gridSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -207,12 +211,12 @@ export const useGridSelection = (apiRef, props) => {
     if (hasChanged) {
       apiRef.current.setSelectionModel(Object.values(selectionLookup));
     }
-  }, [apiRef]);
+  }, [apiRef, props.keepNonExistentRowsSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey; // multiple selection is only allowed if:
     // - it is a checkboxSelection
     // - it is a keyboard selection
-    // - CTRL is pressed
+    // - Ctrl is pressed
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -234,7 +238,7 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    if (params.field === '__detail_panel_toggle__') {
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }
@@ -340,12 +344,12 @@ export const useGridSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
-  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
-  useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventSelectionOnShift);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', removeOutdatedSelection);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', handleRowSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'cellMouseDown', preventSelectionOnShift);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   /**
    * EFFECTS
    */

package/modern/hooks/features/sorting/useGridSorting.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -34,7 +33,7 @@ export const useGridSorting = (apiRef, props) => {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: gridSortModelSelector,
-    changeEvent: GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   const upsertSortModel = React.useCallback((field, sortItem) => {
     const sortModel = gridSortModelSelector(apiRef);
@@ -74,17 +73,16 @@ export const useGridSorting = (apiRef, props) => {
    */
 
   const applySorting = React.useCallback(() => {
-    if (props.sortingMode === GridFeatureModeConstant.server) {
-      logger.debug('Skipping sorting rows as sortingMode = server');
-      apiRef.current.setState(state => _extends({}, state, {
-        sorting: _extends({}, state.sorting, {
-          sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
-        })
-      }));
-      return;
-    }
-
     apiRef.current.setState(state => {
+      if (props.sortingMode === GridFeatureModeConstant.server) {
+        logger.debug('Skipping sorting rows as sortingMode = server');
+        return _extends({}, state, {
+          sorting: _extends({}, state.sorting, {
+            sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
+          })
+        });
+      }
+
       const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
@@ -96,6 +94,7 @@ export const useGridSorting = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
@@ -196,7 +195,7 @@ export const useGridSorting = (apiRef, props) => {
   const handleColumnHeaderKeyDown = React.useCallback(({
     colDef
   }, event) => {
-    // CTRL + Enter opens the column menu
+    // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(colDef, undefined, event.shiftKey);
     }
@@ -219,11 +218,11 @@ export const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderClick, handleColumnHeaderClick);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'rowsSet', apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */