@mui/x-data-grid 5.10.0 → 5.12.0

package/hooks/features/filter/gridFilterState.d.ts

@@ -1,4 +1,3 @@
-import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterModel } from '../../../models/gridFilterModel';
 import { GridRowId } from '../../../models/gridRows';
 export declare const getDefaultGridFilterModel: () => GridFilterModel;
@@ -32,7 +31,7 @@ export interface GridFilterInitialState {
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
  */
-export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (filterItem: GridFilterItem) => boolean) => boolean;
+export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => boolean;
 export interface GridFilteringMethodParams {
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
 }

package/hooks/features/filter/gridFilterState.js

@@ -1,5 +1,7 @@
 import { GridLinkOperator } from '../../../models/gridFilterItem';
 export const getDefaultGridFilterModel = () => ({
   items: [],
-  linkOperator: GridLinkOperator.And
+  linkOperator: GridLinkOperator.And,
+  quickFilterValues: [],
+  quickFilterLogicOperator: GridLinkOperator.And
 });

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import { GridFilterModel } from '../../../models';
+import { GridFilterItem, GridFilterModel } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridAggregatedFilterItemApplier } from './gridFilterState';
+/**
+ * Adds default values to the optional fields of a filter items.
+ * @param {GridFilterItem} item The raw filter item.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operatorValue.
+ * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
+ */
+export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItem;
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterModel;
 export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (state: GridStateCommunity) => GridStateCommunity;
 /**
@@ -11,4 +19,12 @@ export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, d
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
+export declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
+/**
+ * Generates a method to easily check if a row is matching the current quick filter.
+ * @param {any[]} values The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
+export declare const buildAggregatedQuickFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
 export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;

package/hooks/features/filter/gridFilterUtils.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
+import { gridColumnFieldsSelector } from '../columns';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -9,7 +10,7 @@ import { buildWarning } from '../../../utils/warning';
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operatorValue.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
-const cleanFilterItem = (item, apiRef) => {
+export const cleanFilterItem = (item, apiRef) => {
   const cleanItem = _extends({}, item);
 
   if (cleanItem.id == null) {
@@ -24,7 +25,6 @@ const cleanFilterItem = (item, apiRef) => {
 
   return cleanItem;
 };
-
 const filterModelDisableMultiColumnsFilteringWarning = buildWarning(['MUI: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
 const filterModelMissingItemIdWarning = buildWarning("MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.", 'error');
 const filterModelMissingItemOperatorWarning = buildWarning(['MUI: One of your filtering item have no `operatorValue` provided.', 'This property will become required on `@mui/x-data-grid@6.X`.']);
@@ -76,7 +76,7 @@ export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFil
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 
-export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
     items,
     linkOperator = GridLinkOperator.And
@@ -144,7 +144,7 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   }
 
   return (rowId, shouldApplyFilter) => {
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item)) : appliers; // Return `false` as soon as we have a failing filter
+    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers; // Return `false` as soon as we have a failing filter
 
     if (linkOperator === GridLinkOperator.And) {
       return filteredAppliers.every(applier => applier.fn(rowId));
@@ -153,4 +153,85 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
 
     return filteredAppliers.some(applier => applier.fn(rowId));
   };
+};
+/**
+ * Generates a method to easily check if a row is matching the current quick filter.
+ * @param {any[]} values The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
+
+export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+  const {
+    quickFilterValues = [],
+    quickFilterLogicOperator = GridLinkOperator.And
+  } = filterModel;
+
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+
+  const columnsFields = gridColumnFieldsSelector(apiRef);
+  const appliersPerColumnField = {};
+  columnsFields.forEach(field => {
+    const column = apiRef.current.getColumn(field);
+    const getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
+
+    if (!getApplyQuickFilterFn) {
+      return;
+    }
+
+    appliersPerColumnField[field] = quickFilterValues.map(value => getApplyQuickFilterFn(value, column, apiRef));
+  }); // If some value does not have an applier we ignore them
+
+  const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
+  return (rowId, shouldApplyFilter) => {
+    const usedCellParams = {};
+    Object.keys(appliersPerColumnField).forEach(columnField => {
+      if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
+        usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
+      }
+    }); // Return `false` as soon as we have a quick filter value that does not match any column
+
+    if (quickFilterLogicOperator === GridLinkOperator.And) {
+      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+        var _appliersPerColumnFie, _appliersPerColumnFie2;
+
+        if (appliersPerColumnField[field][index] == null) {
+          return false;
+        }
+
+        return (_appliersPerColumnFie = (_appliersPerColumnFie2 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie.call(_appliersPerColumnFie2, usedCellParams[field]);
+      }));
+    } // Return `true` as soon as we have have a quick filter value that match any column
+
+
+    return sanitizedQuickFilterValues.some((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      var _appliersPerColumnFie3, _appliersPerColumnFie4;
+
+      if (appliersPerColumnField[field][index] == null) {
+        return false;
+      }
+
+      return (_appliersPerColumnFie3 = (_appliersPerColumnFie4 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie3.call(_appliersPerColumnFie4, usedCellParams[field]);
+    }));
+  };
+};
+export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+
+  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
+    return null;
+  }
+
+  if (isRowMatchingFilterItems == null) {
+    return isRowMatchingQuickFilter;
+  }
+
+  if (isRowMatchingQuickFilter == null) {
+    return isRowMatchingFilterItems;
+  }
+
+  return (rowId, shouldApplyFilter) => isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
 };

package/hooks/features/filter/useGridFilter.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 { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -13,7 +12,8 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem } from './gridFilterUtils';
+import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
@@ -42,7 +42,7 @@ export const useGridFilter = (apiRef, props) => {
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
     stateSelector: gridFilterModelSelector,
-    changeEvent: GridEvents.filterModelChange
+    changeEvent: 'filterModelChange'
   });
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
@@ -55,7 +55,7 @@ export const useGridFilter = (apiRef, props) => {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.filteredRowsSet);
+    apiRef.current.publishEvent('filteredRowsSet');
   }, [props.filterMode, apiRef]);
   /**
    * API METHODS
@@ -104,13 +104,13 @@ export const useGridFilter = (apiRef, props) => {
       if (filterItemOnTarget) {
         newFilterItems = filterItemsWithValue;
       } else if (props.disableMultipleColumnsFiltering) {
-        newFilterItems = [{
+        newFilterItems = [cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       } else {
-        newFilterItems = [...filterItemsWithValue, {
+        newFilterItems = [...filterItemsWithValue, cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       }
 
       apiRef.current.setFilterModel(_extends({}, filterModel, {
@@ -135,6 +135,17 @@ export const useGridFilter = (apiRef, props) => {
       linkOperator
     }));
   }, [apiRef]);
+  const setQuickFilterValues = React.useCallback(values => {
+    const filterModel = gridFilterModelSelector(apiRef);
+
+    if (isDeepEqual(filterModel.quickFilterValues, values)) {
+      return;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      quickFilterValues: [...values]
+    }));
+  }, [apiRef]);
   const setFilterModel = React.useCallback(model => {
     const currentModel = gridFilterModelSelector(apiRef);
 
@@ -156,7 +167,8 @@ export const useGridFilter = (apiRef, props) => {
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
-    getVisibleRowModels
+    getVisibleRowModels,
+    setQuickFilterValues
   };
   useGridApiMethod(apiRef, filterApi, 'GridFilterApi');
   /**
@@ -251,10 +263,10 @@ export const useGridFilter = (apiRef, props) => {
   }, [apiRef]); // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
   // Otherwise, the state is not consistent during the render
 
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, updateFilteredRows);
-  useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

package/hooks/features/focus/useGridFocus.d.ts

@@ -8,4 +8,4 @@ export declare const focusStateInitializer: GridStateInitializer;
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridFocus: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;

package/hooks/features/focus/useGridFocus.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument } from '@mui/material/utils';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -30,14 +29,9 @@ export const useGridFocus = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
   const setCellFocus = React.useCallback((id, field) => {
-    // The row might have been deleted
-    if (!apiRef.current.getRow(id)) {
-      return;
-    }
-
     const focusedCell = gridFocusCellSelector(apiRef);
 
-    if ((focusedCell == null ? void 0 : focusedCell.id) === id && focusedCell.field === field) {
+    if ((focusedCell == null ? void 0 : focusedCell.id) === id && (focusedCell == null ? void 0 : focusedCell.field) === field) {
       return;
     }
 
@@ -60,14 +54,19 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.cellFocusIn, apiRef.current.getCellParams(id, field));
+    apiRef.current.forceUpdate(); // The row might have been deleted
+
+    if (!apiRef.current.getRow(id)) {
+      return;
+    }
+
+    apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
 
     if (cell) {
-      apiRef.current.publishEvent(GridEvents.cellFocusOut, apiRef.current.getCellParams(cell.id, cell.field), event);
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
     }
 
     apiRef.current.setState(state => {
@@ -196,7 +195,7 @@ export const useGridFocus = (apiRef, props) => {
     // Publishes an event to notify that the focus was lost
 
 
-    apiRef.current.publishEvent(GridEvents.cellFocusOut, apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+    apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
 
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
@@ -221,27 +220,23 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);
+  const handleRowSet = React.useCallback(() => {
+    const cell = gridFocusCellSelector(apiRef); // If the focused cell is in a row which does not exist anymore, then remove the focus
+
+    if (cell && !apiRef.current.getRow(cell.id)) {
+      apiRef.current.setState(state => _extends({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null
+        }
+      }));
+    }
+  }, [apiRef]);
   useGridApiMethod(apiRef, {
     setCellFocus,
     setColumnHeaderFocus,
     unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
   }, 'GridFocusApi');
-  React.useEffect(() => {
-    const cell = gridFocusCellSelector(apiRef);
-
-    if (cell) {
-      const updatedRow = apiRef.current.getRow(cell.id);
-
-      if (!updatedRow) {
-        apiRef.current.setState(state => _extends({}, state, {
-          focus: {
-            cell: null,
-            columnHeader: null
-          }
-        }));
-      }
-    }
-  }, [apiRef, props.rows]);
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.addEventListener('click', handleDocumentClick);
@@ -249,10 +244,11 @@ export const useGridFocus = (apiRef, props) => {
       doc.removeEventListener('click', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderBlur, handleBlur);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, handleCellDoubleClick);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseUp, handleCellMouseUp);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.cellModeChange, handleCellModeChange);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderFocus, handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
+  useGridApiEventHandler(apiRef, 'cellMouseUp', handleCellMouseUp);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
 };

package/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';
@@ -316,10 +315,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const 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/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';
@@ -45,7 +44,7 @@ export const useGridPage = (apiRef, props) => {
     propModel: props.page,
     propOnChange: props.onPageChange,
     stateSelector: gridPageSelector,
-    changeEvent: GridEvents.pageChange
+    changeEvent: 'pageChange'
   });
   /**
    * API METHODS
@@ -114,8 +113,8 @@ export const useGridPage = (apiRef, props) => {
     rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
   });
 
-  useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
-  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
+  useGridApiEventHandler(apiRef, 'pageSizeChange', handlePageSizeChange);
+  useGridApiEventHandler(apiRef, 'pageChange', handlePageChange);
   /**
    * EFFECTS
    */

package/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';
@@ -27,7 +26,7 @@ export const useGridPageSize = (apiRef, props) => {
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,
     stateSelector: gridPageSizeSelector,
-    changeEvent: GridEvents.pageSizeChange
+    changeEvent: 'pageSizeChange'
   });
   /**
    * API METHODS
@@ -100,7 +99,7 @@ export const useGridPageSize = (apiRef, props) => {
     const 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/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 const preferencePanelStateInitializer = (state, props) => {
   var _props$initialState$p, _props$initialState;
 
@@ -21,7 +19,6 @@ export const preferencePanelStateInitializer = (state, props) => {
 
 export const useGridPreferencesPanel = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -30,9 +27,10 @@ export const useGridPreferencesPanel = apiRef => {
 
   const hidePreferences = React.useCallback(() => {
     logger.debug('Hiding Preferences Panel');
+    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
 
     if (preferencePanelState.openedPanelValue) {
-      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+      apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
     }
@@ -43,7 +41,7 @@ export const 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
 
   const doNotHidePanel = React.useCallback(() => {
@@ -63,7 +61,7 @@ export const useGridPreferencesPanel = apiRef => {
         openedPanelValue: newValue
       })
     }));
-    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+    apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
     apiRef.current.forceUpdate();

package/hooks/features/rows/gridRowsSelector.d.ts

@@ -4,6 +4,7 @@ export declare const gridRowCountSelector: import("../../../utils/createSelector
 export declare const gridRowsLoadingSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean | undefined>;
 export declare const gridTopLevelRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<any>>;
+export declare const gridRowsIdToIdLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<string, import("../../..").GridRowId>>;
 export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
 export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;
 export declare const gridRowTreeDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/rows/gridRowsSelector.js

@@ -4,6 +4,7 @@ export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows =
 export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
 export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
+export const gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);

package/hooks/features/rows/gridRowsState.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="node" />
-import { GridRowId, GridRowsLookup, GridRowsProp, GridRowTreeConfig } from '../../../models/gridRows';
+import { GridRowId, GridRowsLookup, GridRowTreeConfig } from '../../../models/gridRows';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 export interface GridRowTreeCreationParams {
     ids: GridRowId[];
     idRowsLookup: GridRowsLookup;
+    idToIdLookup: Record<string, GridRowId>;
     previousTree: GridRowTreeConfig | null;
 }
 export interface GridRowTreeCreationValue {
@@ -15,20 +16,18 @@ export interface GridRowTreeCreationValue {
     treeDepth: number;
     ids: GridRowId[];
     idRowsLookup: GridRowsLookup;
+    idToIdLookup: Record<string, GridRowId>;
 }
-export declare type GridRowInternalCacheValue = Omit<GridRowTreeCreationParams, 'previousTree'>;
-export interface GridRowsInternalCacheState {
-    value: GridRowInternalCacheValue;
+export interface GridRowsInternalCache extends Omit<GridRowTreeCreationParams, 'previousTree'> {
     /**
      * The rows as they were the last time all the rows have been updated at once
      * It is used to avoid processing several time the same set of rows
      */
-    rowsBeforePartialUpdates: GridRowsProp;
-}
-export interface GridRowsInternalCache {
-    state: GridRowsInternalCacheState;
-    timeout: NodeJS.Timeout | null;
-    lastUpdateMs: number;
+    rowsBeforePartialUpdates: DataGridProcessedProps['rows'];
+    /**
+     * The value of the `loading` prop since the last time that the rows state was updated.
+     */
+    loadingPropBeforePartialUpdates: DataGridProcessedProps['loading'];
 }
 export interface GridRowsState extends GridRowTreeCreationValue {
     /**
@@ -45,4 +44,10 @@ export interface GridRowsState extends GridRowTreeCreationValue {
      * It does not count the expanded children rows.
      */
     totalTopLevelRowCount: number;
+    /**
+     * Tree returned by the `rowTreeCreation` strategy processor.
+     * It is used to re-apply the `hydrateRows` pipe processor without having to recreate the tree.
+     */
+    groupingResponseBeforeRowHydration: GridRowTreeCreationValue;
 }
+export declare type GridHydrateRowsValue = GridRowTreeCreationValue;

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -1,4 +1,8 @@
-import { GridRowId, GridRowModel } from '../../../models';
+import * as React from 'react';
+import { GridRowId, GridRowIdGetter, GridRowModel, GridRowTreeConfig } from '../../../models';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridRowsInternalCache, GridRowsState } from './gridRowsState';
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
@@ -6,3 +10,12 @@ import { GridRowId, GridRowModel } from '../../../models';
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
+export declare const getRowIdFromRowModel: (rowModel: GridRowModel, getRowId?: GridRowIdGetter<any> | undefined, detailErrorMessage?: string | undefined) => GridRowId;
+export declare const createRowsInternalCache: ({ rows, getRowId, loading, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading'>) => GridRowsInternalCache;
+export declare const getRowsStateFromCache: ({ apiRef, previousTree, rowCountProp, loadingProp, }: {
+    apiRef: React.MutableRefObject<GridApiCommunity>;
+    previousTree: GridRowTreeConfig | null;
+    rowCountProp: number | undefined;
+    loadingProp: boolean | undefined;
+}) => GridRowsState;
+export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];