@mui/x-data-grid 5.8.0 → 5.11.0

package/modern/components/toolbar/GridToolbar.js

@@ -1,26 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "csvOptions", "printOptions"];
+const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
 import { GridToolbarContainer } from '../containers/GridToolbarContainer';
 import { GridToolbarColumnsButton } from './GridToolbarColumnsButton';
 import { GridToolbarDensitySelector } from './GridToolbarDensitySelector';
 import { GridToolbarFilterButton } from './GridToolbarFilterButton';
 import { GridToolbarExport } from './GridToolbarExport';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+  // TODO v6: think about where export option should be passed.
+  // from componentProps={{ toolbarExport: { ...exportOption} }} seems to be more appropriate
   const {
     csvOptions,
-    printOptions
+    printOptions,
+    excelOptions,
+    showQuickFilter = false,
+    quickFilterProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const rootProps = useGridRootProps();
 
-  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector) {
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
 
@@ -29,8 +36,14 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
   }, other, {
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
-      printOptions: printOptions
-    })]
+      printOptions: printOptions // TODO: remove the reference to excelOptions in community package
+      ,
+      excelOptions: excelOptions
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        flex: 1
+      }
+    }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
@@ -38,7 +51,17 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  csvOptions: PropTypes.object,
-  printOptions: PropTypes.object
+
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: PropTypes.object,
+
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridToolbar };

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -99,7 +99,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-labelledby": densityMenuId,
+      "aria-controls": densityMenuId,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/modern/components/toolbar/GridToolbarExport.js

@@ -1,24 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["csvOptions", "printOptions"];
+const _excluded = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridToolbarExportContainer } from './GridToolbarExportContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export const GridCsvExportMenuItem = props => {
   const apiRef = useGridApiContext();
   const {
     hideMenu,
     options
   } = props;
-
-  if (options?.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(MenuItem, {
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
@@ -33,11 +27,6 @@ export const GridPrintExportMenuItem = props => {
     hideMenu,
     options
   } = props;
-
-  if (options?.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(MenuItem, {
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
@@ -49,21 +38,27 @@ export const GridPrintExportMenuItem = props => {
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
     csvOptions = {},
-    printOptions = {}
+    printOptions = {},
+    excelOptions
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  if (csvOptions?.disableToolbarButton && printOptions?.disableToolbarButton) {
+  const apiRef = useGridApiContext();
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
+    excelOptions,
+    csvOptions,
+    printOptions
+  }).sort((a, b) => a.componentName > b.componentName ? 1 : -1);
+
+  if (preProcessedButtons.length === 0) {
     return null;
   }
 
-  return /*#__PURE__*/_jsxs(GridToolbarExportContainer, _extends({}, other, {
+  return /*#__PURE__*/_jsx(GridToolbarExportContainer, _extends({}, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GridCsvExportMenuItem, {
-      options: csvOptions
-    }), /*#__PURE__*/_jsx(GridPrintExportMenuItem, {
-      options: printOptions
-    })]
+    children: preProcessedButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button.component, {
+      key: index
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["quickFilterParser", "debounceMs"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/Search';
+import { styled } from '@mui/material/styles';
+import { debounce } from '@mui/material/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridToolbarQuickFilterRoot = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter',
+  overridesResolver: (props, styles) => styles.toolbarQuickFilter
+})(({
+  theme
+}) => ({
+  width: 'auto',
+  paddingBottom: theme.spacing(0.5),
+  '& .MuiSvgIcon-root': {
+    marginRight: theme.spacing(0.5)
+  },
+  '& .MuiInput-underline:before': {
+    borderBottom: `1px solid ${theme.palette.divider}`
+  }
+}));
+
+const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
+
+function GridToolbarQuickFilter(props) {
+  const {
+    quickFilterParser = defaultSearchValueParser,
+    debounceMs = 500
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const [searchValue, setSearchValue] = React.useState('');
+  const updateSearchValue = React.useCallback(newSearchValue => {
+    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+  }, [apiRef, quickFilterParser]);
+  const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  const handleSearchValueChange = React.useCallback(event => {
+    const newSearchValue = event.target.value;
+    setSearchValue(newSearchValue);
+    debouncedUpdateSearchValue(newSearchValue);
+  }, [debouncedUpdateSearchValue]);
+  return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
+    as: rootProps.components.BaseTextField,
+    variant: "standard",
+    value: searchValue,
+    onChange: handleSearchValueChange,
+    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
+    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+    type: "search",
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(SearchIcon, {
+        fontSize: "small"
+      })
+    }
+  }, other, rootProps.componentsProps?.baseTextField));
+}
+
+process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The debounce time in milliseconds.
+   * @default 500
+   */
+  debounceMs: PropTypes.number,
+
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   */
+  quickFilterParser: PropTypes.func
+} : void 0;
+export { GridToolbarQuickFilter };

package/modern/components/toolbar/index.js

@@ -1,6 +1,7 @@
 export * from './GridToolbar';
 export * from './GridToolbarColumnsButton';
 export * from './GridToolbarDensitySelector';
-export * from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
 export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
+export * from './GridToolbarExportContainer';
+export * from './GridToolbarQuickFilter';

package/modern/components/virtualization/GridVirtualScroller.js

@@ -25,6 +25,8 @@ const VirtualScrollerRoot = styled('div', {
   overridesResolver: (props, styles) => styles.virtualScroller
 })({
   overflow: 'auto',
+  // See https://github.com/mui/mui-x/issues/4360
+  position: 'relative',
   '@media print': {
     overflow: 'hidden'
   }

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -24,9 +24,7 @@ const VirtualScrollerContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
-})({
-  position: 'relative'
-});
+})({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   const {
     className,

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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;
@@ -111,7 +110,7 @@ export const useGridStrategyProcessing = apiRef => {
       group: strategyGroup,
       isAvailable
     });
-    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   const strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/modern/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/modern/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/modern/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);
       }
     }