@mui/x-data-grid 5.9.0 → 5.11.1

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

@@ -11,8 +11,6 @@ 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");
@@ -23,83 +21,31 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
-var _gridRowsUtils = require("./gridRowsUtils");
+var _gridSortingSelector = require("../sorting/gridSortingSelector");
 
-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); }
+var _gridFilterSelector = require("../filter/gridFilterSelector");
 
-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; }
+var _gridRowsUtils = require("./gridRowsUtils");
 
-function getGridRowId(rowModel, getRowId, detailErrorMessage) {
-  const id = getRowId ? getRowId(rowModel) : rowModel.id;
-  (0, _gridRowsUtils.checkGridRowIdIsValid)(id, rowModel, detailErrorMessage);
-  return id;
-}
-
-const convertGridRowsPropToState = ({
-  prevState,
-  rows,
-  getRowId
-}) => {
-  let value;
-
-  if (rows) {
-    value = {
-      idRowsLookup: {},
-      ids: []
-    };
+var _pipeProcessing = require("../../core/pipeProcessing");
 
-    for (let i = 0; i < rows.length; i += 1) {
-      const row = rows[i];
-      const id = getGridRowId(row, getRowId);
-      value.idRowsLookup[id] = row;
-      value.ids.push(id);
-    }
-  } else {
-    value = prevState.value;
-  }
-
-  return {
-    value,
-    rowsBeforePartialUpdates: rows != null ? rows : prevState.rowsBeforePartialUpdates
-  };
-};
+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); }
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
-  const {
-    value
-  } = rowsCache.state;
-  const rowCount = rowCountProp != null ? rowCountProp : 0;
-  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', (0, _extends2.default)({}, value, {
-    previousTree
-  }));
-  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)
-  });
-};
+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; }
 
 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 = (0, _gridRowsUtils.createRowsInternalCache)({
+    rows: props.rows,
+    getRowId: props.getRowId,
+    loading: props.loading
+  });
   return (0, _extends2.default)({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount, props.loading),
-    rowsCache // TODO remove from state
-
+    rows: (0, _gridRowsUtils.getRowsStateFromCache)({
+      apiRef,
+      previousTree: null,
+      rowCountProp: props.rowCount,
+      loadingProp: props.loading
+    })
   });
 };
 
@@ -112,9 +58,9 @@ const useGridRows = (apiRef, props) => {
   }
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
-
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const lastUpdateMs = React.useRef(Date.now());
+  const timeout = React.useRef(null);
   const getRow = React.useCallback(id => {
     var _ref;
 
@@ -126,33 +72,38 @@ 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 => (0, _extends2.default)({}, state, {
-        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount, props.loading)
+        rows: (0, _gridRowsUtils.getRowsStateFromCache)({
+          apiRef,
+          previousTree: (0, _gridRowsSelector.gridRowTreeSelector)(apiRef),
+          rowCountProp: props.rowCount,
+          loadingProp: props.loading
+        })
       }));
-      apiRef.current.publishEvent(_events.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;
     }
 
@@ -164,12 +115,12 @@ const useGridRows = (apiRef, props) => {
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange((0, _gridRowsUtils.createRowsInternalCache)({
       rows,
-      prevState: rowsCache.current.state,
-      getRowId: props.getRowId
+      getRowId: props.getRowId,
+      loading: props.loading
     }), true);
-  }, [logger, props.getRowId, throttledRowsChange]);
+  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.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.
@@ -179,7 +130,7 @@ const useGridRows = (apiRef, props) => {
 
     const uniqUpdates = new Map();
     updates.forEach(update => {
-      const id = getGridRowId(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+      const id = (0, _gridRowsUtils.getRowIdFromRowModel)(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
       if (uniqUpdates.has(id)) {
         uniqUpdates.set(id, (0, _extends2.default)({}, uniqUpdates.get(id), update));
@@ -188,14 +139,19 @@ const useGridRows = (apiRef, props) => {
       }
     });
     const deletedRowIds = [];
-    const newStateValue = {
-      idRowsLookup: (0, _extends2.default)({}, rowsCache.current.state.value.idRowsLookup),
-      ids: [...rowsCache.current.state.value.ids]
+    const prevCache = apiRef.current.unstable_caches.rows;
+    const newCache = {
+      rowsBeforePartialUpdates: prevCache.rowsBeforePartialUpdates,
+      loadingPropBeforePartialUpdates: prevCache.loadingPropBeforePartialUpdates,
+      idRowsLookup: (0, _extends2.default)({}, prevCache.idRowsLookup),
+      idToIdLookup: (0, _extends2.default)({}, prevCache.idToIdLookup),
+      ids: [...prevCache.ids]
     };
     uniqUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
-        delete newStateValue.idRowsLookup[id];
+        delete newCache.idRowsLookup[id];
+        delete newCache.idToIdLookup[id];
         deletedRowIds.push(id);
         return;
       }
@@ -203,23 +159,21 @@ const useGridRows = (apiRef, props) => {
       const oldRow = apiRef.current.getRow(id);
 
       if (!oldRow) {
-        newStateValue.idRowsLookup[id] = partialRow;
-        newStateValue.ids.push(id);
+        newCache.idRowsLookup[id] = partialRow;
+        newCache.idToIdLookup[id] = id;
+        newCache.ids.push(id);
         return;
       }
 
-      newStateValue.idRowsLookup[id] = (0, _extends2.default)({}, apiRef.current.getRow(id), partialRow);
+      newCache.idRowsLookup[id] = (0, _extends2.default)({}, apiRef.current.getRow(id), partialRow);
     });
 
     if (deletedRowIds.length > 0) {
-      newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
+      newCache.ids = newCache.ids.filter(id => !deletedRowIds.includes(id));
     }
 
-    const state = (0, _extends2.default)({}, rowsCache.current.state, {
-      value: newStateValue
-    });
-    throttledRowsChange(state, true);
-  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+    throttledRowsChange(newCache, true);
+  }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   const getRowModels = React.useCallback(() => {
     const allRows = (0, _gridRowsSelector.gridRowIdsSelector)(apiRef);
     const idRowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
@@ -248,23 +202,82 @@ const useGridRows = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(_events.GridEvents.rowExpansionChange, newNode);
+    apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
   const getRowNode = React.useCallback(id => {
     var _gridRowTreeSelector$;
 
     return (_gridRowTreeSelector$ = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  const getRowGroupChildren = React.useCallback(({
+    skipAutoGeneratedRows = true,
+    groupId,
+    applySorting,
+    applyFiltering
+  }) => {
+    const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
+    let children;
+
+    if (applySorting) {
+      const groupNode = tree[groupId];
+
+      if (!groupNode) {
+        return [];
+      }
+
+      const sortedRowIds = (0, _gridSortingSelector.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 = (0, _gridRowsUtils.getTreeNodeDescendants)(tree, groupId, skipAutoGeneratedRows);
+    }
+
+    if (applyFiltering) {
+      const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
+      children = children.filter(childId => filteredRowsLookup[childId] !== false);
+    }
+
+    return children;
+  }, [apiRef]);
+  const setRowIndex = React.useCallback((rowId, targetIndex) => {
+    const allRows = (0, _gridRowsSelector.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 => (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,
-    getRowIndexRelativeToVisibleRows
+    getRowIndexRelativeToVisibleRows,
+    getRowGroupChildren
   };
   /**
    * EVENTS
@@ -272,25 +285,25 @@ const useGridRows = (apiRef, props) => {
 
   const groupRows = React.useCallback(() => {
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
-    let rows;
+    let cache;
 
-    if (rowsCache.current.state.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;
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
+      // The `props.rows` did not change since the last row grouping
+      // We can use the current rows cache which contains the partial updates done recently.
+      cache = apiRef.current.unstable_caches.rows;
     } else {
       // The `props.rows` has changed since the last row grouping
       // We must use the new `props.rows` on the new grouping
       // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
-      rows = props.rows;
+      cache = (0, _gridRowsUtils.createRowsInternalCache)({
+        rows: props.rows,
+        getRowId: props.getRowId,
+        loading: props.loading
+      });
     }
 
-    throttledRowsChange(convertGridRowsPropToState({
-      rows,
-      getRowId: props.getRowId,
-      prevState: rowsCache.current.state
-    }), false);
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+    throttledRowsChange(cache, false);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -303,8 +316,20 @@ const useGridRows = (apiRef, props) => {
       groupRows();
     }
   }, [apiRef, groupRows]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
+  /**
+   * APPLIERS
+   */
+
+  const applyHydrateRowsProcessor = React.useCallback(() => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, apiRef.current.unstable_applyPipeProcessors('hydrateRows', state.rows.groupingResponseBeforeRowHydration))
+    }));
+    apiRef.current.publishEvent('rowsSet');
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'GridRowApi');
   /**
    * EFFECTS
@@ -312,9 +337,8 @@ 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`
@@ -325,20 +349,20 @@ 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 && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }
 
     logger.debug(`Updating all rows, new length ${props.rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange((0, _gridRowsUtils.createRowsInternalCache)({
       rows: props.rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      loading: props.loading
     }), false);
-  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
 };
 
 exports.useGridRows = useGridRows;

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

@@ -10,6 +10,7 @@ var _strategyProcessing = require("../../core/strategyProcessing");
 const flatRowTreeCreationMethod = ({
   ids,
   idRowsLookup,
+  idToIdLookup,
   previousTree
 }) => {
   const tree = {};
@@ -35,6 +36,7 @@ const flatRowTreeCreationMethod = ({
     tree,
     treeDepth: 1,
     idRowsLookup,
+    idToIdLookup,
     ids
   };
 };

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

@@ -36,7 +36,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;

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

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -87,7 +85,7 @@ const useGridSelection = (apiRef, props) => {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: _gridSelectionSelector.gridSelectionStateSelector,
-    changeEvent: _events.GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   const {
     checkboxSelection,
@@ -228,6 +226,10 @@ const useGridSelection = (apiRef, props) => {
    */
 
   const removeOutdatedSelection = React.useCallback(() => {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     const currentSelection = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -243,12 +245,12 @@ 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 && !(0, _keyboardUtils.isKeyboardEvent)(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -378,12 +380,12 @@ const useGridSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.sortedRowsSet, removeOutdatedSelection);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellClick, handleCellClick);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellMouseDown, preventSelectionOnShift);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', removeOutdatedSelection);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellClick', handleCellClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowSelectionCheckboxChange', handleRowSelectionCheckboxChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', preventSelectionOnShift);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
   /**
    * EFFECTS
    */

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

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _gridFeatureMode = require("../../../models/gridFeatureMode");
 
 var _keyboardUtils = require("../../../utils/keyboardUtils");
@@ -67,7 +65,7 @@ const useGridSorting = (apiRef, props) => {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: _gridSortingSelector.gridSortModelSelector,
-    changeEvent: _events.GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   const upsertSortModel = React.useCallback((field, sortItem) => {
     const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
@@ -132,7 +130,7 @@ const useGridSorting = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.publishEvent(_events.GridEvents.sortedRowsSet);
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
@@ -235,7 +233,7 @@ const useGridSorting = (apiRef, props) => {
   const handleColumnHeaderKeyDown = React.useCallback(({
     colDef
   }, event) => {
-    // CTRL + Enter opens the column menu
+    // Ctrl + Enter opens the column menu
     if ((0, _keyboardUtils.isEnterKey)(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(colDef, undefined, event.shiftKey);
     }
@@ -258,11 +256,11 @@ const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderClick, handleColumnHeaderClick);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, apiRef.current.applySorting);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnsChange, handleColumnsChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', apiRef.current.applySorting);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -34,8 +34,6 @@ var _gridEditRowsSelector = require("../editRows/gridEditRowsSelector");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
-var _events = require("../../../models/events");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _utils2 = require("../../../utils/utils");
@@ -155,7 +153,7 @@ const useGridVirtualScroller = props => {
       setContainerWidth(rootRef.current.clientWidth);
     }
   }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.resize, handleResize);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
@@ -215,7 +213,7 @@ const useGridVirtualScroller = props => {
       left,
       renderContext: initialRenderContext
     };
-    apiRef.current.publishEvent(_events.GridEvents.rowsScroll, params);
+    apiRef.current.publishEvent('rowsScroll', params);
   }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
 
   const handleScroll = event => {
@@ -238,7 +236,7 @@ const useGridVirtualScroller = props => {
     const bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
     const shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
 
-    apiRef.current.publishEvent(_events.GridEvents.rowsScroll, {
+    apiRef.current.publishEvent('rowsScroll', {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
@@ -253,6 +251,14 @@ const useGridVirtualScroller = props => {
     }
   };
 
+  const handleWheel = event => {
+    apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
+  };
+
+  const handleTouchMove = event => {
+    apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
+  };
+
   const getRows = (params = {
     renderContext
   }) => {
@@ -373,7 +379,7 @@ const useGridVirtualScroller = props => {
     return size;
   }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
   React.useEffect(() => {
-    apiRef.current.publishEvent(_events.GridEvents.virtualScrollerContentSizeChange);
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {
@@ -402,6 +408,8 @@ const useGridVirtualScroller = props => {
       return (0, _extends2.default)({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: (0, _extends2.default)({}, style, rootStyle)
       }, other);
     },