@mui/x-data-grid 5.10.0 → 5.11.0

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 {
@@ -45,7 +48,7 @@ var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
 };
 
 var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTree, apiRef, rowCountProp, loadingProp) {
-  var value = rowsCache.state.value;
+  var value = rowsCache.value;
   var rowCount = rowCountProp != null ? rowCountProp : 0;
   var groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
     previousTree: previousTree
@@ -61,25 +64,20 @@ var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTr
 };
 
 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, props.loading),
-    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) {
@@ -89,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;
 
@@ -104,35 +102,35 @@ 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, props.loading)
+          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;
     }
 
@@ -144,12 +142,12 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
   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.
@@ -169,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;
       }
@@ -184,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;
       }
@@ -197,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);
@@ -238,20 +239,63 @@ 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 === targetIndex) {
+    if (oldIndex === -1 || oldIndex === targetIndex) {
       return;
     }
 
@@ -279,7 +323,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
     updateRows: updateRows,
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,
-    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows
+    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows,
+    getRowGroupChildren: getRowGroupChildren
   };
   /**
    * EVENTS
@@ -289,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;
@@ -300,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();
@@ -318,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
@@ -327,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`
@@ -340,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]);
 };

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

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

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

@@ -15,7 +15,12 @@ function scrollIntoView(dimensions) {
       scrollTop = dimensions.scrollTop,
       offsetHeight = dimensions.offsetHeight,
       offsetTop = dimensions.offsetTop;
-  var elementBottom = offsetTop + offsetHeight;
+  var 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/legacy/hooks/features/selection/useGridSelection.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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';
@@ -57,7 +56,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: gridSelectionStateSelector,
-    changeEvent: GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   var checkboxSelection = props.checkboxSelection,
       disableMultipleSelection = props.disableMultipleSelection,
@@ -223,6 +222,10 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
    */
 
   var removeOutdatedSelection = React.useCallback(function () {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     var currentSelection = gridSelectionStateSelector(apiRef.current.state);
     var rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -239,12 +242,12 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     if (hasChanged) {
       apiRef.current.setSelectionModel(Object.values(selectionLookup));
     }
-  }, [apiRef]);
+  }, [apiRef, props.keepNonExistentRowsSelected]);
   var handleSingleRowSelection = React.useCallback(function (id, event) {
     var 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
 
     var isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
     var resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -376,12 +379,12 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  useGridApiEventHandler(apiRef, GridEvents.sortedRowsSet, 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/legacy/hooks/features/sorting/useGridSorting.js

@@ -1,7 +1,6 @@
 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 { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -37,7 +36,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: gridSortModelSelector,
-    changeEvent: GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   var upsertSortModel = React.useCallback(function (field, sortItem) {
     var sortModel = gridSortModelSelector(apiRef);
@@ -107,7 +106,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
         })
       });
     });
-    apiRef.current.publishEvent(GridEvents.sortedRowsSet);
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   var setSortModel = React.useCallback(function (model) {
@@ -219,7 +218,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
   var handleColumnHeaderKeyDown = React.useCallback(function (_ref3, event) {
     var colDef = _ref3.colDef;
 
-    // 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);
     }
@@ -244,11 +243,11 @@ export var useGridSorting = function 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
    */

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

@@ -13,7 +13,6 @@ import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
@@ -128,7 +127,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       setContainerWidth(rootRef.current.clientWidth);
     }
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
+  useGridApiEventHandler(apiRef, 'resize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
     var _getRenderableIndexes = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
@@ -194,7 +193,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       left: left,
       renderContext: initialRenderContext
     };
-    apiRef.current.publishEvent(GridEvents.rowsScroll, params);
+    apiRef.current.publishEvent('rowsScroll', params);
   }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
 
   var handleScroll = function handleScroll(event) {
@@ -216,7 +215,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
     var 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(GridEvents.rowsScroll, {
+    apiRef.current.publishEvent('rowsScroll', {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
@@ -232,11 +231,11 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   };
 
   var handleWheel = function handleWheel(event) {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerWheel, {}, event);
+    apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
   };
 
   var handleTouchMove = function handleTouchMove(event) {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerTouchMove, {}, event);
+    apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   };
 
   var getRows = function getRows() {
@@ -369,7 +368,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     return size;
   }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
   React.useEffect(function () {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerContentSizeChange);
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {

package/legacy/hooks/utils/useGridApiEventHandler.js

@@ -9,22 +9,27 @@ import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTra
  * Signal to the underlying logic what version of the public component API
  * of the data grid is exposed.
  */
-var GridSignature; // We use class to make it easier to detect in heap snapshots by name
+var GridSignature;
 
 (function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";
   GridSignature["DataGridPro"] = "DataGridPro";
 })(GridSignature || (GridSignature = {}));
 
+// We use class to make it easier to detect in heap snapshots by name
 var ObjectToBeRetainedByReact = /*#__PURE__*/_createClass(function ObjectToBeRetainedByReact() {
   _classCallCheck(this, ObjectToBeRetainedByReact);
 }); // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
 // Check https://github.com/facebook/react/issues/15317 to get more information
 
 
-export function createUseGridApiEventHandler(registry) {
+export function createUseGridApiEventHandler(registryContainer) {
   var cleanupTokensCounter = 0;
   return function useGridApiEventHandler(apiRef, eventName, handler, options) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+    }
+
     var _React$useState = React.useState(new ObjectToBeRetainedByReact()),
         _React$useState2 = _slicedToArray(_React$useState, 1),
         objectRetainedByReact = _React$useState2[0];
@@ -48,7 +53,7 @@ export function createUseGridApiEventHandler(registry) {
       cleanupTokenRef.current = {
         cleanupToken: cleanupTokensCounter
       };
-      registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
+      registryContainer.registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
       function () {
         var _subscription$current;
 
@@ -61,7 +66,7 @@ export function createUseGridApiEventHandler(registry) {
       subscription.current = null;
 
       if (cleanupTokenRef.current) {
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
     }
@@ -79,10 +84,10 @@ export function createUseGridApiEventHandler(registry) {
         subscription.current = apiRef.current.subscribeEvent(eventName, _enhancedHandler, options);
       }
 
-      if (cleanupTokenRef.current && registry) {
+      if (cleanupTokenRef.current && registryContainer.registry) {
         // If the effect was called, it means that this render was committed
         // so we can trust the cleanup function to remove the listener.
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
 
@@ -95,12 +100,18 @@ export function createUseGridApiEventHandler(registry) {
     }, [apiRef, eventName, options]);
   };
 }
-var registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking(); // eslint-disable-next-line @typescript-eslint/naming-convention
+var registryContainer = {
+  registry: null
+}; // TODO: move to @mui/x-data-grid/internals
+// eslint-disable-next-line @typescript-eslint/naming-convention
 
 export var unstable_resetCleanupTracking = function unstable_resetCleanupTracking() {
-  return registry.reset();
+  var _registryContainer$re;
+
+  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  registryContainer.registry = null;
 };
-export var useGridApiEventHandler = createUseGridApiEventHandler(registry);
+export var useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
 var optionsSubscriberOptions = {
   isFirst: true
 };

package/legacy/hooks/utils/useGridNativeEventListener.js

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { isFunction } from '../../utils/utils';
 import { useGridLogger } from './useGridLogger';
 export var useGridNativeEventListener = function useGridNativeEventListener(apiRef, ref, eventName, handler, options) {
@@ -38,7 +37,7 @@ export var useGridNativeEventListener = function useGridNativeEventListener(apiR
         boundElem.removeEventListener(eventName, wrapHandler, options);
       };
 
-      apiRef.current.subscribeEvent(GridEvents.unmount, unsubscribe);
+      apiRef.current.subscribeEvent('unmount', unsubscribe);
     }
   }, [ref, wrapHandler, eventName, added, logger, options, apiRef]);
 };

package/legacy/hooks/utils/useGridSelector.js

@@ -1,7 +1,7 @@
 import { buildWarning } from '../../utils/warning';
 
 function isOutputSelector(selector) {
-  return selector.cache;
+  return selector.acceptsApiRef;
 }
 
 var stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);