@mui/x-data-grid 5.8.0 → 5.9.0

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+var _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -35,6 +35,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
       hasFocus = props.hasFocus,
       tabIndex = props.tabIndex,
       getValue = props.getValue,
+      api = props.api,
       other = _objectWithoutProperties(props, _excluded);
 
   var apiRef = useGridApiContext();
@@ -104,6 +105,12 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+
   /**
    * The mode of the cell.
    */
@@ -119,10 +126,21 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    */
   field: PropTypes.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
@@ -166,7 +184,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridCellCheckboxForwardRef };
 export var GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);

package/legacy/components/panel/GridPanel.js

@@ -97,6 +97,7 @@ var GridPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     modifiers: modifiers
   }, other, {
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
@@ -117,7 +118,7 @@ var getColumnLabel = function getColumnLabel(col) {
 var collator = new Intl.Collator();
 
 function GridFilterForm(props) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4, _currentColumn$filter2;
+  var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   var item = props.item,
       hasMultipleFilters = props.hasMultipleFilters,
@@ -156,6 +157,9 @@ function GridFilterForm(props) {
   var filterSelectorRef = React.useRef(null);
   var hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   var baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
+  var baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
+  var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
   var sortedFilterableColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
@@ -281,10 +285,10 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
-      }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
         children: linkOperators.map(function (linkOperator) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: linkOperator.toString(),
             children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
           }, linkOperator.toString());
@@ -305,10 +309,10 @@ function GridFilterForm(props) {
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.columnField || '',
         onChange: changeColumn,
-        native: true
-      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
         children: sortedFilterableColumns.map(function (col) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: col.field,
             children: getColumnLabel(col)
           }, col.field);
@@ -329,11 +333,11 @@ function GridFilterForm(props) {
         id: operatorSelectId,
         value: item.operatorValue,
         onChange: changeOperator,
-        native: true,
+        native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+      }, (_rootProps$components5 = rootProps.componentsProps) == null ? void 0 : _rootProps$components5.baseSelect, {
         children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(function (operator) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: operator.value,
             children: operator.label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(operator.value)))
           }, operator.value);

package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -3,11 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -21,6 +22,9 @@ export function GridFilterInputBoolean(props) {
       setFilterValueState = _React$useState2[1];
 
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var OptionComponent = isSelectNative ? 'option' : MenuItem;
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value;
     setFilterValueState(value);
@@ -37,21 +41,22 @@ export function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: _extends({
+      native: isSelectNative,
+      displayEmpty: true
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: [/*#__PURE__*/_jsx("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/_jsx(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -7,11 +7,12 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api, OptionComponent) {
   var valueOptions = _ref.valueOptions,
       valueFormatter = _ref.valueFormatter,
       field = _ref.field;
@@ -19,22 +20,24 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
-    return _typeof(option) === 'object' ? /*#__PURE__*/_jsx("option", {
-      value: option.value,
-      children: option.label
-    }, option.value) : /*#__PURE__*/_jsx("option", {
+    var isOptionTypeObject = _typeof(option) === 'object';
+    var key = isOptionTypeObject ? option.value : option;
+    var value = isOptionTypeObject ? option.value : option;
+    var formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
-      children: valueFormatter && option !== '' ? valueFormatter({
-        value: option,
-        field: field,
-        api: api
-      }) : option
-    }, option);
+      field: field,
+      api: api
+    }) : option;
+    var content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
   });
 };
 
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -50,6 +53,8 @@ function GridFilterInputSingleSelect(props) {
 
   var id = useId();
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var currentValueOptions = React.useMemo(function () {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -100,11 +105,11 @@ function GridFilterInputSingleSelect(props) {
     },
     inputRef: focusElementRef,
     select: true,
-    SelectProps: {
-      native: true
-    }
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect)
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   }));
 }
 

package/legacy/components/panel/filterPanel/GridFilterInputValue.js

@@ -7,6 +7,7 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
@@ -18,7 +19,7 @@ function warnDeprecatedTypeSupport(type) {
   warnedOnce[type] = true;
 }
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api, OptionComponent) {
   var valueOptions = _ref.valueOptions,
       valueFormatter = _ref.valueFormatter,
       field = _ref.field;
@@ -26,24 +27,26 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
-    return _typeof(option) === 'object' ? /*#__PURE__*/_jsx("option", {
-      value: option.value,
-      children: option.label
-    }, option.value) : /*#__PURE__*/_jsx("option", {
+    var isOptionTypeObject = _typeof(option) === 'object';
+    var key = isOptionTypeObject ? option.value : option;
+    var value = isOptionTypeObject ? option.value : option;
+    var formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
-      children: valueFormatter && option !== '' ? valueFormatter({
-        value: option,
-        field: field,
-        api: api
-      }) : option
-    }, option);
+      field: field,
+      api: api
+    }) : option;
+    var content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
   });
 };
 
 export var SUBMIT_FILTER_STROKE_TIME = 500;
 
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -70,12 +73,14 @@ function GridFilterInputValue(props) {
 
   var id = useId();
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   } : {};
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value; // NativeSelect casts the value to a string.
@@ -126,7 +131,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+  }, singleSelectProps, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField));
 }
 
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -111,7 +111,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
       "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/legacy/components/virtualization/GridVirtualScroller.js

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

package/legacy/components/virtualization/GridVirtualScrollerContent.js

@@ -24,9 +24,7 @@ var VirtualScrollerContentRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.virtualScrollerContent;
   }
-})({
-  position: 'relative'
-});
+})({});
 var GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   var className = props.className,
       style = props.style,

package/legacy/constants/gridDetailPanelToggleField.js

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

package/legacy/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/legacy/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,11 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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
  *
@@ -19,7 +17,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.
  *
  * =====================================================================================================================
  *
@@ -27,56 +28,91 @@ 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 var useGridPipeProcessing = function useGridPipeProcessing(apiRef) {
   var processorsCache = React.useRef({});
+  var runAppliers = React.useCallback(function (groupCache) {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(function (callback) {
+      callback();
+    });
+  }, []);
   var registerPipeProcessor = React.useCallback(function (group, id, processor) {
     if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {};
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
     }
 
-    var groupProcessors = processorsCache.current[group];
-    var oldProcessor = groupProcessors[id];
+    var groupCache = processorsCache.current[group];
+    var oldProcessor = groupCache.processors[id];
 
     if (oldProcessor !== processor) {
-      processorsCache.current[group] = _extends({}, groupProcessors, _defineProperty({}, id, processor));
-      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
     }
 
     return function () {
-      var _ref = processorsCache.current[group],
-          removedGroupProcessor = _ref[id],
-          otherProcessors = _objectWithoutProperties(_ref, [id].map(_toPropertyKey));
+      var _processors = processorsCache.current[group].processors,
+          removedGroupProcessor = _processors[id],
+          otherProcessors = _objectWithoutProperties(_processors, [id].map(_toPropertyKey));
 
-      processorsCache.current[group] = otherProcessors;
-      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+      processorsCache.current[group].processors = otherProcessors;
     };
-  }, [apiRef]);
+  }, [runAppliers]);
+  var registerPipeApplier = React.useCallback(function (group, id, applier) {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return function () {
+      var _appliers = processorsCache.current[group].appliers,
+          removedGroupApplier = _appliers[id],
+          otherAppliers = _objectWithoutProperties(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  var requestPipeProcessorsApplication = React.useCallback(function (group) {
+    var groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
   var applyPipeProcessors = React.useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    var _ref2 = args,
-        _ref3 = _slicedToArray(_ref2, 3),
-        group = _ref3[0],
-        value = _ref3[1],
-        context = _ref3[2];
+    var _ref = args,
+        _ref2 = _slicedToArray(_ref, 3),
+        group = _ref2[0],
+        value = _ref2[1],
+        context = _ref2[2];
 
     if (!processorsCache.current[group]) {
       return value;
     }
 
-    var preProcessors = Object.values(processorsCache.current[group]);
+    var preProcessors = Object.values(processorsCache.current[group].processors);
     return preProcessors.reduce(function (acc, preProcessor) {
       return preProcessor(acc, context);
     }, value);
   }, []);
   var preProcessingApi = {
     unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
     unstable_applyPipeProcessors: applyPipeProcessors
   };
   useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');

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

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

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

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