@mui/x-data-grid 5.8.0 → 5.11.0

package/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import { SxProps, Theme } from '@mui/material/styles';
+declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerRenderZone };

package/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -33,7 +33,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
-  DetailPanelCollapseIcon: GridRemoveIcon
+  DetailPanelCollapseIcon: GridRemoveIcon,
+  RowReorderIcon: GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/constants/gridClasses.d.ts

@@ -99,6 +99,10 @@ export interface GridClasses {
      * Styles applied to the column header's draggable container element.
      */
     columnHeaderDraggableContainer: string;
+    /**
+     * Styles applied to the row's draggable placeholder element inside the special row reorder cell.
+     */
+    rowReorderCellPlaceholder: string;
     /**
      * Styles applied to the column headers wrapper if a column is being dragged.
      */
@@ -323,6 +327,10 @@ export interface GridClasses {
      * Styles applied to the row element if the row is in edit mode.
      */
     'row--editing': string;
+    /**
+     * Styles applied to the floating special row reorder cell element when it is dragged.
+     */
+    'row--dragging': string;
     /**
      * Styles applied to the last visible row element on every page of the grid.
      */
@@ -336,6 +344,18 @@ export interface GridClasses {
      * Only works when pagination is disabled.
      */
     rowCount: string;
+    /**
+     * Styles applied to the row reorder cell container element.
+     */
+    rowReorderCellContainer: string;
+    /**
+     * Styles applied to the root element of the row reorder cell
+     */
+    rowReorderCell: string;
+    /**
+     * Styles applied to the root element of the row reorder cell when dragging is allowed
+     */
+    'rowReorderCell--draggable': string;
     /**
      * Styles applied to both scroll area elements.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/constants/gridDetailPanelToggleField.d.ts

@@ -0,0 +1 @@
+export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";

package/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,2 @@
+// Can't import from pro package - hence duplication
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/constants/localeTextConstants.js

@@ -18,11 +18,16 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipHide: 'Hide filters',
   toolbarFiltersTooltipShow: 'Show filters',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterLabel: 'Search',
+  toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
+  toolbarExportExcel: 'Download as Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Find column',
   columnsPanelTextFieldPlaceholder: 'Column title',
@@ -103,5 +108,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { GridCellIndexCoordinates, GridScrollParams } from '../../../models';
+import { GridCellIndexCoordinates, GridScrollParams, GridColDef } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
-import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry } from '../../../models/gridRows';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
 export declare type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
-    hydrateColumns: {
-        value: GridHydrateColumnsValue;
-    };
-    scrollToIndexes: {
-        value: Partial<GridScrollParams>;
-        context: Partial<GridCellIndexCoordinates>;
-    };
     columnMenu: {
         value: React.ReactNode[];
         context: GridColDef;
@@ -22,6 +14,20 @@ export interface GridPipeProcessingLookup {
     exportState: {
         value: GridInitialStateCommunity;
     };
+    hydrateColumns: {
+        value: GridHydrateColumnsValue;
+    };
+    exportMenu: {
+        value: {
+            component: React.ReactElement;
+            componentName: string;
+        }[];
+        context: any;
+    };
+    preferencePanel: {
+        value: React.ReactNode;
+        context: GridPreferencePanelsValue;
+    };
     restoreState: {
         value: GridRestoreStatePreProcessingValue;
         context: GridRestoreStatePreProcessingContext<GridInitialStateCommunity>;
@@ -30,9 +36,9 @@ export interface GridPipeProcessingLookup {
         value: Record<string, number>;
         context: GridRowEntry;
     };
-    preferencePanel: {
-        value: React.ReactNode;
-        context: GridPreferencePanelsValue;
+    scrollToIndexes: {
+        value: Partial<GridScrollParams>;
+        context: Partial<GridCellIndexCoordinates>;
     };
 }
 export declare type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
@@ -46,14 +52,14 @@ declare type GridPipeProcessorsApplierArgs<P extends GridPipeProcessorGroup, T e
 declare type GridPipeProcessorsApplier = <P extends GridPipeProcessorGroup>(...params: GridPipeProcessorsApplierArgs<P, GridPipeProcessingLookup[P]>) => GridPipeProcessingLookup[P]['value'];
 export interface GridPipeProcessingApi {
     /**
-     * Register a pre-processor and emit an event to notify the agents to re-apply the pre-processors.
+     * Register a processor and run all the appliers of the group.
      * @param {GridPipeProcessorGroup} group The group on which this processor should be applied.
-     * @param {number} id An unique and static identifier of the processor.
+     * @param {string} id An unique and static identifier of the processor.
      * @param {GridPipeProcessor} processor The processor to register.
      * @returns {() => void} A function to unregister the processor.
      * @ignore - do not document.
      */
-    unstable_registerPipeProcessor: <G extends GridPipeProcessorGroup>(processorName: GridPipeProcessorGroup, id: string, callback: GridPipeProcessor<G>) => () => void;
+    unstable_registerPipeProcessor: <G extends GridPipeProcessorGroup>(group: GridPipeProcessorGroup, id: string, callback: GridPipeProcessor<G>) => () => void;
     /**
      * Run all the processors registered for the given group.
      * @template T
@@ -64,5 +70,23 @@ export interface GridPipeProcessingApi {
      * @ignore - do not document.
      */
     unstable_applyPipeProcessors: GridPipeProcessorsApplier;
+    /**
+     * Register an applier.
+     * @param {GridPipeProcessorGroup} group The group of this applier
+     * @param {string} id An unique and static identifier of the applier.
+     * @param {() => void} applier The applier to register.
+     * @returns {() => void} A function to unregister the applier.
+     * @ignore - do not document.
+     */
+    unstable_registerPipeApplier: (group: GridPipeProcessorGroup, id: string, applier: () => void) => () => void;
+    /**
+     * Imperatively run all the appliers of a group.
+     * Most of the time, the applier should run because a processor is re-registered,
+     * but sometimes we want to re-apply the processing even if the processor deps have not changed.
+     * This may occur when the change requires a `isDeepEqual` check.
+     * @param {GridPipeProcessorGroup} group The group to apply.
+     * @ignore - do not document.
+     */
+    unstable_requestPipeProcessorsApplication: (group: GridPipeProcessorGroup) => void;
 }
 export {};

package/hooks/core/pipeProcessing/index.d.ts

@@ -1,3 +1,4 @@
 export * from './gridPipeProcessingApi';
 export * from './useGridPipeProcessing';
 export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';

package/hooks/core/pipeProcessing/index.js

@@ -1,3 +1,4 @@
 export * from './gridPipeProcessingApi';
 export * from './useGridPipeProcessing';
-export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';

package/hooks/core/pipeProcessing/useGridPipeProcessing.d.ts

@@ -13,7 +13,10 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterPipeProcessor` to register their processor.
- *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
  *
  * =====================================================================================================================
  *
@@ -21,7 +24,9 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
  *
  * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
  *
- * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
- *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
  */
 export declare const useGridPipeProcessing: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,9 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
+
 /**
  * Implement the Pipeline Pattern
  *
@@ -17,7 +16,10 @@ import { GridEvents } from '../../../models/events';
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterPipeProcessor` to register their processor.
- *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
  *
  * =====================================================================================================================
  *
@@ -25,35 +27,65 @@ import { GridEvents } from '../../../models/events';
  *
  * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
  *
- * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
- *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
  */
-
 export const useGridPipeProcessing = apiRef => {
   const processorsCache = React.useRef({});
+  const runAppliers = React.useCallback(groupCache => {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(callback => {
+      callback();
+    });
+  }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {};
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
     }
 
-    const groupProcessors = processorsCache.current[group];
-    const oldProcessor = groupProcessors[id];
+    const groupCache = processorsCache.current[group];
+    const oldProcessor = groupCache.processors[id];
 
     if (oldProcessor !== processor) {
-      processorsCache.current[group] = _extends({}, groupProcessors, {
-        [id]: processor
-      });
-      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
     }
 
     return () => {
-      const _ref = processorsCache.current[group],
-            otherProcessors = _objectWithoutPropertiesLoose(_ref, [id].map(_toPropertyKey));
+      const _processors = processorsCache.current[group].processors,
+            otherProcessors = _objectWithoutPropertiesLoose(_processors, [id].map(_toPropertyKey));
 
-      processorsCache.current[group] = otherProcessors;
-      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+      processorsCache.current[group].processors = otherProcessors;
     };
-  }, [apiRef]);
+  }, [runAppliers]);
+  const registerPipeApplier = React.useCallback((group, id, applier) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return () => {
+      const _appliers = processorsCache.current[group].appliers,
+            otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  const requestPipeProcessorsApplication = React.useCallback(group => {
+    const groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
 
@@ -61,13 +93,15 @@ export const useGridPipeProcessing = apiRef => {
       return value;
     }
 
-    const preProcessors = Object.values(processorsCache.current[group]);
+    const preProcessors = Object.values(processorsCache.current[group].processors);
     return preProcessors.reduce((acc, preProcessor) => {
       return preProcessor(acc, context);
     }, value);
   }, []);
   const preProcessingApi = {
     unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
     unstable_applyPipeProcessors: applyPipeProcessors
   };
   useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../../models/api/gridApiCommon';
+export declare const useGridRegisterPipeApplier: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
+  const cleanup = React.useRef();
+  const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
+  const registerPreProcessor = React.useCallback(() => {
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return () => {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
+};

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,7 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessor } from './gridPipeProcessingApi';
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -20,7 +20,7 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -30,12 +30,12 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
@@ -25,7 +24,7 @@ export const GRID_STRATEGIES_PROCESSORS = {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -35,12 +34,12 @@ export const GRID_STRATEGIES_PROCESSORS = {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *
@@ -74,7 +73,7 @@ export const useGridStrategyProcessing = apiRef => {
     }
 
     if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
-      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+      apiRef.current.publishEvent('activeStrategyProcessorChange', processorName);
     }
 
     return cleanup;
@@ -113,7 +112,7 @@ export const useGridStrategyProcessing = apiRef => {
       group: strategyGroup,
       isAvailable
     });
-    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   const strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/hooks/core/useGridApiInitialization.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
@@ -15,6 +14,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new EventManager(),
+      unstable_caches: {},
       state: {},
       instanceId: globalId
     };
@@ -43,7 +43,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     };
   }, [apiRef]);
   const showError = React.useCallback(args => {
-    apiRef.current.publishEvent(GridEvents.componentError, args);
+    apiRef.current.publishEvent('componentError', args);
   }, [apiRef]);
   useGridApiMethod(apiRef, {
     subscribeEvent,
@@ -53,7 +53,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
-      api.publishEvent(GridEvents.unmount);
+      api.publishEvent('unmount');
     };
   }, [apiRef]);
   return apiRef;

package/hooks/core/useGridErrorHandler.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiEventHandler } from '../utils/useGridApiEventHandler';
 export function useGridErrorHandler(apiRef, props) {
   const handleError = React.useCallback(args => {
@@ -12,5 +11,5 @@ export function useGridErrorHandler(apiRef, props) {
   React.useEffect(() => {
     handleError(props.error);
   }, [handleError, props.error]);
-  useGridApiEventHandler(apiRef, GridEvents.componentError, handleError);
+  useGridApiEventHandler(apiRef, 'componentError', handleError);
 }

package/hooks/core/useGridStateInitialization.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["stateId"];
 import * as React from 'react';
 import { GridSignature } from '../utils/useGridApiEventHandler';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 export const useGridStateInitialization = (apiRef, props) => {
@@ -66,7 +65,7 @@ export const useGridStateInitialization = (apiRef, props) => {
       apiRef.current.state = newState;
 
       if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent(GridEvents.stateChange, newState);
+        apiRef.current.publishEvent('stateChange', newState);
       }
     }
 

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -12,7 +12,6 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         maxLastColumn?: number | undefined;
     } | undefined, other?: {}) => JSX.Element[] | null;
     isDragging: boolean;
-    updateInnerPosition: (nextRenderContext: GridRenderContext) => void;
     getRootProps: (other?: {}) => {
         style: {
             minHeight: number;