@mui/x-data-grid 5.7.0 → 5.10.0

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/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 } 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 @@ var 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
@@ -49,6 +50,7 @@ export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON_S
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay: ErrorOverlay,
   Footer: GridFooter,

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var 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 var 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/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/constants/localeTextConstants.js

@@ -115,5 +115,7 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };

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

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

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

@@ -0,0 +1,119 @@
+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 * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+
+/**
+ * Implement the Pipeline Pattern
+ *
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic to enrich data provided by other plugins or components.
+ * For instance, the row grouping plugin needs to add / remove the grouping columns when the grid columns are updated.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterPipeProcessor` to register their processor.
+ *
+ * - `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.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to enrich its data must use:
+ *
+ * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
+ *
+ * - `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] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    var groupCache = processorsCache.current[group];
+    var oldProcessor = groupCache.processors[id];
+
+    if (oldProcessor !== processor) {
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
+    }
+
+    return function () {
+      var _processors = processorsCache.current[group].processors,
+          removedGroupProcessor = _processors[id],
+          otherProcessors = _objectWithoutProperties(_processors, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].processors = otherProcessors;
+    };
+  }, [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 _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].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/{preProcessing/useGridRegisterPreProcessor.js → pipeProcessing/useGridRegisterPipeApplier.js}

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
-export var useGridRegisterPreProcessor = function useGridRegisterPreProcessor(apiRef, group, callback) {
+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_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(function () {
     registerPreProcessor();

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export var useGridRegisterPipeProcessor = function useGridRegisterPipeProcessor(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_registerPipeProcessor(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/strategyProcessing/useGridStrategyProcessing.js

@@ -14,31 +14,42 @@ export var GRID_STRATEGIES_PROCESSORS = {
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
  *
- * Some plugins contain custom logic that must only be run if the right strategy is active.
- * For instance, the tree data plugin has:
- * - custom row tree creation algorithm.
- * - custom sorting algorithm.
- * - custom filtering algorithm.
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic that must only be applied if the right strategy is active.
+ * For instance, the row grouping plugin has a custom filtering algorithm.
+ * This algorithm must be applied by the filtering plugin if the row grouping is the current way of grouping rows,
+ * but not if the tree data is the current way of grouping rows.
+ *
+ * =====================================================================================================================
+ *
+ * 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.
  *
- * These plugins must use:
- * - `apiRef.current.unstable_registerStrategyProcessor` to register their processors.
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
- * Some hooks need to run the custom logic of the active strategy.
- * For instance, the `useGridFiltering` wants to run:
- * - the tree data filtering if the tree data is the current way of grouping rows.
- * - the row grouping filtering if the row grouping is the current way of grouping rows.
- * - the flat filtering if there is no grouping of the rows (equivalent to the "none" strategy).
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to apply the custom logic of the current strategy must use:
+ *
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * These hooks must use:
- * - `apiRef.current.unstable_applyStrategyProcessor` to run a processor.
  * - `GridEvents.strategyAvailabilityChange` 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.
  *    So listening to both would most likely run your logic twice.
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes
+ *
+ * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ *
+ * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ * For now, there is only one strategy group named `rowTree` which customize
+ * - row tree creation algorithm.
+ * - sorting algorithm.
+ * - filtering algorithm.
  */
 export var useGridStrategyProcessing = function useGridStrategyProcessing(apiRef) {
   var availableStrategies = React.useRef(new Map());

package/legacy/hooks/core/useGridInitialization.js

@@ -2,7 +2,7 @@ import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridErrorHandler } from './useGridErrorHandler';
 import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPreProcessing } from './preProcessing';
+import { useGridPipeProcessing } from './pipeProcessing';
 import { useGridStrategyProcessing } from './strategyProcessing';
 import { useGridStateInitialization } from './useGridStateInitialization';
 /**
@@ -14,7 +14,7 @@ export var useGridInitialization = function useGridInitialization(inputApiRef, p
   useGridLoggerFactory(apiRef, props);
   useGridErrorHandler(apiRef, props);
   useGridStateInitialization(apiRef, props);
-  useGridPreProcessing(apiRef);
+  useGridPipeProcessing(apiRef);
   useGridStrategyProcessing(apiRef);
   useGridLocaleText(apiRef, props);
   return apiRef;