@mui/x-data-grid 5.8.0 → 5.11.0

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+
+var _styles = require("@mui/material/styles");
+
+var _utils = require("@mui/material/utils");
+
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["quickFilterParser", "debounceMs"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
+  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) {
+  var _rootProps$components;
+
+  const {
+    quickFilterParser = defaultSearchValueParser,
+    debounceMs = 500
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [searchValue, setSearchValue] = React.useState('');
+  const updateSearchValue = React.useCallback(newSearchValue => {
+    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+  }, [apiRef, quickFilterParser]);
+  const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  const handleSearchValueChange = React.useCallback(event => {
+    const newSearchValue = event.target.value;
+    setSearchValue(newSearchValue);
+    debouncedUpdateSearchValue(newSearchValue);
+  }, [debouncedUpdateSearchValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
+    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__*/(0, _jsxRuntime.jsx)(_Search.default, {
+        fontSize: "small"
+      })
+    }
+  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.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.default.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.default.func
+} : void 0;

package/node/components/toolbar/index.js

@@ -3,11 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  GridCsvExportMenuItem: true,
+  GridPrintExportMenuItem: true,
+  GridToolbarExport: true
+};
+Object.defineProperty(exports, "GridCsvExportMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbarExport.GridCsvExportMenuItem;
+  }
+});
+Object.defineProperty(exports, "GridPrintExportMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbarExport.GridPrintExportMenuItem;
+  }
+});
+Object.defineProperty(exports, "GridToolbarExport", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbarExport.GridToolbarExport;
+  }
+});
 
 var _GridToolbar = require("./GridToolbar");
 
 Object.keys(_GridToolbar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridToolbar[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -21,6 +45,7 @@ var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
 
 Object.keys(_GridToolbarColumnsButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridToolbarColumnsButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -34,6 +59,7 @@ var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
 
 Object.keys(_GridToolbarDensitySelector).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridToolbarDensitySelector[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -45,21 +71,11 @@ Object.keys(_GridToolbarDensitySelector).forEach(function (key) {
 
 var _GridToolbarExport = require("./GridToolbarExport");
 
-Object.keys(_GridToolbarExport).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridToolbarExport[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridToolbarExport[key];
-    }
-  });
-});
-
 var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
 
 Object.keys(_GridToolbarFilterButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridToolbarFilterButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -73,6 +89,7 @@ var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
 
 Object.keys(_GridToolbarExportContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridToolbarExportContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -80,4 +97,18 @@ Object.keys(_GridToolbarExportContainer).forEach(function (key) {
       return _GridToolbarExportContainer[key];
     }
   });
+});
+
+var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
+
+Object.keys(_GridToolbarQuickFilter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridToolbarQuickFilter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridToolbarQuickFilter[key];
+    }
+  });
 });

package/node/components/virtualization/GridVirtualScroller.js

@@ -47,6 +47,8 @@ const VirtualScrollerRoot = (0, _styles.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/node/components/virtualization/GridVirtualScrollerContent.js

@@ -46,9 +46,7 @@ const VirtualScrollerContentRoot = (0, _styles.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/node/constants/defaultGridSlotsComponents.js

@@ -55,7 +55,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: _components.GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: _components.GridKeyboardArrowRight,
   DetailPanelExpandIcon: _components.GridAddIcon,
-  DetailPanelCollapseIcon: _components.GridRemoveIcon
+  DetailPanelCollapseIcon: _components.GridRemoveIcon,
+  RowReorderIcon: _components.GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.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']);
+const gridClasses = (0, _material.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']);
 exports.gridClasses = gridClasses;

package/node/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
+// Can't import from pro package - hence duplication
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = GRID_DETAIL_PANEL_TOGGLE_FIELD;

package/node/constants/localeTextConstants.js

@@ -24,11 +24,16 @@ 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',
@@ -109,6 +114,8 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };
 exports.GRID_DEFAULT_LOCALE_TEXT = GRID_DEFAULT_LOCALE_TEXT;

package/node/hooks/core/pipeProcessing/index.js

@@ -41,4 +41,17 @@ Object.keys(_useGridRegisterPipeProcessor).forEach(function (key) {
       return _useGridRegisterPipeProcessor[key];
     }
   });
+});
+
+var _useGridRegisterPipeApplier = require("./useGridRegisterPipeApplier");
+
+Object.keys(_useGridRegisterPipeApplier).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterPipeApplier[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterPipeApplier[key];
+    }
+  });
 });

package/node/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -11,14 +11,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
-var _events = require("../../../models/events");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,7 +32,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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.
  *
  * =====================================================================================================================
  *
@@ -44,33 +43,63 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * - `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.
  */
 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] = (0, _extends2.default)({}, groupProcessors, {
-        [id]: processor
-      });
-      apiRef.current.publishEvent(_events.GridEvents.pipeProcessorRegister, group);
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
     }
 
     return () => {
-      const _ref = processorsCache.current[group],
-            otherProcessors = (0, _objectWithoutPropertiesLoose2.default)(_ref, [id].map(_toPropertyKey2.default));
-      processorsCache.current[group] = otherProcessors;
-      apiRef.current.publishEvent(_events.GridEvents.pipeProcessorUnregister, group);
+      const _processors = processorsCache.current[group].processors,
+            otherProcessors = (0, _objectWithoutPropertiesLoose2.default)(_processors, [id].map(_toPropertyKey2.default));
+      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 = (0, _objectWithoutPropertiesLoose2.default)(_appliers, [id].map(_toPropertyKey2.default));
+      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;
 
@@ -78,13 +107,15 @@ 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
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, preProcessingApi, 'GridPipeProcessingApi');

package/node/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRegisterPipeApplier = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useFirstRender = require("../../utils/useFirstRender");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const 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]);
+  (0, _useFirstRender.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]);
+};
+
+exports.useGridRegisterPipeApplier = useGridRegisterPipeApplier;

package/node/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -13,9 +13,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/node/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -15,8 +15,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
-var _events = require("../../../models/events");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -45,7 +43,7 @@ exports.GRID_STRATEGIES_PROCESSORS = 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.
  *
@@ -55,12 +53,12 @@ exports.GRID_STRATEGIES_PROCESSORS = 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.
  *
  * =====================================================================================================================
  *
@@ -93,7 +91,7 @@ const useGridStrategyProcessing = apiRef => {
     }
 
     if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
-      apiRef.current.publishEvent(_events.GridEvents.activeStrategyProcessorChange, processorName);
+      apiRef.current.publishEvent('activeStrategyProcessorChange', processorName);
     }
 
     return cleanup;
@@ -132,7 +130,7 @@ const useGridStrategyProcessing = apiRef => {
       group: strategyGroup,
       isAvailable
     });
-    apiRef.current.publishEvent(_events.GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   const strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/node/hooks/core/useGridApiInitialization.js

@@ -7,8 +7,6 @@ exports.useGridApiInitialization = useGridApiInitialization;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../models/events");
-
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 
 var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
@@ -31,6 +29,7 @@ function useGridApiInitialization(inputApiRef, props) {
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new _EventManager.EventManager(),
+      unstable_caches: {},
       state: {},
       instanceId: globalId
     };
@@ -59,7 +58,7 @@ function useGridApiInitialization(inputApiRef, props) {
     };
   }, [apiRef]);
   const showError = React.useCallback(args => {
-    apiRef.current.publishEvent(_events.GridEvents.componentError, args);
+    apiRef.current.publishEvent('componentError', args);
   }, [apiRef]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, {
     subscribeEvent,
@@ -69,7 +68,7 @@ function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
-      api.publishEvent(_events.GridEvents.unmount);
+      api.publishEvent('unmount');
     };
   }, [apiRef]);
   return apiRef;

package/node/hooks/core/useGridErrorHandler.js

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../models/events");
-
 var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,5 +27,5 @@ function useGridErrorHandler(apiRef, props) {
   React.useEffect(() => {
     handleError(props.error);
   }, [handleError, props.error]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.componentError, handleError);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'componentError', handleError);
 }

package/node/hooks/core/useGridStateInitialization.js

@@ -15,8 +15,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 
-var _events = require("../../models/events");
-
 var _utils = require("../utils");
 
 var _utils2 = require("../../utils/utils");
@@ -86,7 +84,7 @@ const useGridStateInitialization = (apiRef, props) => {
       apiRef.current.state = newState;
 
       if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent(_events.GridEvents.stateChange, newState);
+        apiRef.current.publishEvent('stateChange', newState);
       }
     }