@mui/x-data-grid 5.8.0 → 5.9.0

package/node/components/columnHeaders/GridColumnHeaders.js

@@ -25,7 +25,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["innerRef", "className"];
+const _excluded = ["className"];
 
 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); }
 

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -31,7 +31,7 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue", "api"];
 
 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); }
 
@@ -126,6 +126,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.default.any.isRequired,
+
   /**
    * The mode of the cell.
    */
@@ -141,10 +147,21 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    */
   field: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  formattedValue: _propTypes.default.any,
 
   /**
    * Get the cell value of a row and field.
@@ -188,7 +205,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: _propTypes.default.any.isRequired
+  value: _propTypes.default.any
 } : void 0;
 const GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);
 exports.GridCellCheckboxRenderer = GridCellCheckboxRenderer;

package/node/components/panel/GridPanel.js

@@ -109,6 +109,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     modifiers: modifiers
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+      mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
         className: classes.paper,

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

@@ -17,6 +17,8 @@ var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
@@ -131,7 +133,7 @@ const getColumnLabel = col => col.headerName || col.field;
 const 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;
 
   const {
     item,
@@ -166,6 +168,9 @@ function GridFilterForm(props) {
   const filterSelectorRef = React.useRef(null);
   const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   const baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
+  const baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
+  const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const OptionComponent = isBaseSelectNative ? 'option' : _MenuItem.default;
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -279,9 +284,9 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
-      }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
-        children: linkOperators.map(linkOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+        children: linkOperators.map(linkOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: linkOperator.toString(),
           children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
         }, linkOperator.toString()))
@@ -301,9 +306,9 @@ 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, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+        children: sortedFilterableColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -323,10 +328,10 @@ 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, {
-        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+      }, (_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(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.capitalize)(operator.value)}`)
         }, operator.value))

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

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,7 +26,7 @@ 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; }
 
 function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -35,6 +37,9 @@ function GridFilterInputBoolean(props) {
         others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -51,21 +56,22 @@ function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

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

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/material/utils");
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _filterPanelUtils = require("./filterPanelUtils");
@@ -33,25 +35,29 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/(0, _jsxRuntime.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;
 
   const {
     item,
@@ -64,6 +70,8 @@ function GridFilterInputSingleSelect(props) {
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -114,11 +122,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: (0, _extends2.default)({
+      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.default)
   }));
 }
 

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

@@ -18,6 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/material/utils");
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _icons = require("../../icons");
 
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
@@ -43,28 +45,32 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 const SUBMIT_FILTER_STROKE_TIME = 500;
 exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
 
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -84,12 +90,14 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: (0, _extends2.default)({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : _MenuItem.default)
   } : {};
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value; // NativeSelect casts the value to a string.
@@ -140,7 +148,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/node/components/toolbar/GridToolbarDensitySelector.js

@@ -129,7 +129,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       "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/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/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/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)}`);