@mui/x-data-grid 5.6.1 → 5.7.0

package/node/components/cell/GridEditInputCell.js

@@ -28,11 +28,13 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _index = require("../icons/index");
+
 var _GridFilterInputValue = require("../panel/filterPanel/GridFilterInputValue");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
 
 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); }
 
@@ -63,6 +65,9 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
 }));
 
 function GridEditInputCell(props) {
+  var _rootProps$experiment;
+
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     id,
     value,
@@ -70,12 +75,12 @@ function GridEditInputCell(props) {
     field,
     colDef,
     hasFocus,
-    debounceMs = _GridFilterInputValue.SUBMIT_FILTER_STROKE_TIME
+    debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : _GridFilterInputValue.SUBMIT_FILTER_STROKE_TIME,
+    isProcessingProps
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {
     classes: rootProps.classes
   };
@@ -104,7 +109,8 @@ function GridEditInputCell(props) {
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
-    onChange: handleChange
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GridLoadIcon, {}) : undefined
   }, other));
 }
 
@@ -119,8 +125,63 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @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.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: _propTypes.default.object.isRequired,
   debounceMs: _propTypes.default.number,
-  isValidating: _propTypes.default.bool
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: _propTypes.default.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: _propTypes.default.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: _propTypes.default.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+  isProcessingProps: _propTypes.default.bool,
+  isValidating: _propTypes.default.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: _propTypes.default.object.isRequired
 } : void 0;
 
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));

package/node/components/cell/GridEditSingleSelectCell.js

@@ -30,7 +30,7 @@ var _gridEvents = require("../../models/events/gridEvents");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 
 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); }
 
@@ -93,13 +93,20 @@ function GridEditSingleSelectCell(props) {
   }
 
   const handleChange = async event => {
+    var _rootProps$experiment;
+
     setOpen(false);
     const target = event.target;
     const isValid = await api.setEditCellValue({
       id,
       field,
       value: target.value
-    }, event); // We use isValid === false because the default return is undefined which evaluates to true with !isValid
+    }, event);
+
+    if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi) {
+      return;
+    } // We use isValid === false because the default return is undefined which evaluates to true with !isValid
+
 
     if (rootProps.editMode === _gridEditRowModel.GridEditModes.Row || isValid === false) {
       return;
@@ -128,7 +135,17 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || (0, _keyboardUtils.isEscapeKey)(event.key)) {
-      api.setCellMode(id, field, 'view');
+      var _rootProps$experiment2;
+
+      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+        api.stopCellEditMode({
+          id,
+          field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -169,7 +186,62 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: _propTypes.default.any.isRequired,
-  isValidating: _propTypes.default.bool
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: _propTypes.default.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: _propTypes.default.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: _propTypes.default.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: _propTypes.default.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+  isProcessingProps: _propTypes.default.bool,
+  isValidating: _propTypes.default.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: _propTypes.default.object.isRequired
 } : void 0;
 
 const renderEditSingleSelectCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditSingleSelectCell, (0, _extends2.default)({}, params));

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -112,6 +112,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   columnWidth: _propTypes.default.number.isRequired,
-  description: _propTypes.default.string,
+  description: _propTypes.default.node,
   label: _propTypes.default.string.isRequired
 } : void 0;

package/node/components/columnHeaders/GridColumnHeaders.js

@@ -57,7 +57,9 @@ const GridColumnHeadersRoot = (0, _styles.styled)('div', {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: `1px solid ${borderColor}`
+    borderBottom: `1px solid ${borderColor}`,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius
   };
 });
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {

package/node/components/containers/GridOverlay.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _material = require("@mui/material");
@@ -70,4 +72,11 @@ const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, re
     className: (0, _clsx.default)(classes.root, className)
   }, other));
 });
-exports.GridOverlay = GridOverlay;
+exports.GridOverlay = GridOverlay;
+process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/containers/GridRootStyles.js

@@ -119,11 +119,11 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`&.${_gridClasses.gridClasses.autoHeight}`]: {
       height: 'auto',
       [`& .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
-        borderColor: 'transparent'
+        borderBottomColor: 'transparent'
       }
     },
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
-      borderColor: 'transparent'
+      borderBottomColor: 'transparent'
     },
     [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',

package/node/components/panel/GridColumnsPanel.js

@@ -85,7 +85,7 @@ const GridIconButtonRoot = (0, _styles.styled)(_IconButton.default)({
   justifyContent: 'flex-end'
 });
 
-function GridColumnsPanel() {
+function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -133,7 +133,7 @@ function GridColumnsPanel() {
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, props, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelHeader.GridPanelHeader, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -186,5 +186,5 @@ function GridColumnsPanel() {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]
     })]
-  });
+  }));
 }

package/node/components/panel/GridPreferencesPanel.js

@@ -30,20 +30,19 @@ 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; }
 
 const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4;
+  var _preferencePanelState, _rootProps$components, _rootProps$components2;
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
-  const isColumnsTabOpen = preferencePanelState.openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns;
-  const isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.components.Panel, (0, _extends2.default)({
+  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Panel, (0, _extends2.default)({
     ref: ref,
     as: rootProps.components.BasePopper,
     open: columns.length > 0 && preferencePanelState.open
   }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.panel, props, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.basePopper, {
-    children: [!rootProps.disableColumnSelector && isColumnsTabOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnsPanel, (0, _extends2.default)({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.FilterPanel, (0, _extends2.default)({}, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.filterPanel))]
+    children: panelContent
   }));
 });
 exports.GridPreferencesPanel = GridPreferencesPanel;

package/node/hooks/core/preProcessing/useGridPreProcessing.js

@@ -23,6 +23,9 @@ 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 `useGridPipProcessing`
+ */
 const useGridPreProcessing = apiRef => {
   const preProcessorsRef = React.useRef({});
   const registerPreProcessor = React.useCallback((group, id, callback) => {
@@ -33,7 +36,7 @@ const useGridPreProcessing = apiRef => {
     const preProcessors = preProcessorsRef.current[group];
     const oldCallback = preProcessors[id];
 
-    if (!oldCallback || oldCallback !== callback) {
+    if (oldCallback !== callback) {
       preProcessorsRef.current[group] = (0, _extends2.default)({}, preProcessors, {
         [id]: callback
       });

package/node/hooks/core/preProcessing/useGridRegisterPreProcessor.js

@@ -13,6 +13,9 @@ 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 useGridRegisterPreProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
+
+Object.keys(_gridStrategyProcessingApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridStrategyProcessingApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridStrategyProcessingApi[key];
+    }
+  });
+});
+
+var _useGridRegisterStrategyProcessor = require("./useGridRegisterStrategyProcessor");
+
+Object.keys(_useGridRegisterStrategyProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterStrategyProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterStrategyProcessor[key];
+    }
+  });
+});
+
+var _useGridStrategyProcessing = require("./useGridStrategyProcessing");
+
+Object.keys(_useGridStrategyProcessing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridStrategyProcessing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridStrategyProcessing[key];
+    }
+  });
+});

package/node/hooks/{features/sorting/useGridRegisterSortingMethod.js → core/strategyProcessing/useGridRegisterStrategyProcessor.js}

@@ -3,22 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRegisterSortingMethod = void 0;
+exports.useGridRegisterStrategyProcessor = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _preProcessing = require("../../core/preProcessing");
+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 useGridRegisterSortingMethod = (apiRef, groupingName, filteringMethod) => {
-  const updateRegistration = React.useCallback(sortingMethodCollection => {
-    sortingMethodCollection[groupingName] = filteringMethod;
-    return sortingMethodCollection;
-  }, [groupingName, filteringMethod]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'sortingMethod', updateRegistration);
+const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
+  const registerPreProcessor = React.useCallback(() => {
+    apiRef.current.unstable_registerStrategyProcessor(strategyName, group, processor);
+  }, [apiRef, processor, group, strategyName]);
+  (0, _useFirstRender.useFirstRender)(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+  }, [registerPreProcessor]);
 };
 
-exports.useGridRegisterSortingMethod = useGridRegisterSortingMethod;
+exports.useGridRegisterStrategyProcessor = useGridRegisterStrategyProcessor;

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

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridStrategyProcessing = exports.GRID_STRATEGIES_PROCESSORS = exports.GRID_DEFAULT_STRATEGY = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
+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; }
+
+const GRID_DEFAULT_STRATEGY = 'none';
+exports.GRID_DEFAULT_STRATEGY = GRID_DEFAULT_STRATEGY;
+const GRID_STRATEGIES_PROCESSORS = {
+  rowTreeCreation: 'rowTree',
+  filtering: 'rowTree',
+  sorting: 'rowTree'
+};
+exports.GRID_STRATEGIES_PROCESSORS = 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.
+ *
+ * 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).
+ *
+ * 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
+ *
+ * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ */
+const useGridStrategyProcessing = apiRef => {
+  const availableStrategies = React.useRef(new Map());
+  const strategiesCache = React.useRef({});
+  const registerStrategyProcessor = React.useCallback((strategyName, processorName, processor) => {
+    const cleanup = () => {
+      const _ref = strategiesCache.current[processorName],
+            otherProcessors = (0, _objectWithoutPropertiesLoose2.default)(_ref, [strategyName].map(_toPropertyKey2.default));
+      strategiesCache.current[processorName] = otherProcessors;
+    };
+
+    if (!strategiesCache.current[processorName]) {
+      strategiesCache.current[processorName] = {};
+    }
+
+    const groupPreProcessors = strategiesCache.current[processorName];
+    const previousProcessor = groupPreProcessors[strategyName];
+    groupPreProcessors[strategyName] = processor;
+
+    if (!previousProcessor || previousProcessor === processor) {
+      return cleanup;
+    }
+
+    if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
+      apiRef.current.publishEvent(_events.GridEvents.activeStrategyProcessorChange, processorName);
+    }
+
+    return cleanup;
+  }, [apiRef]);
+  const applyStrategyProcessor = React.useCallback((processorName, params) => {
+    const activeStrategy = apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName]);
+
+    if (activeStrategy == null) {
+      throw new Error("Can't apply a strategy processor before defining an active strategy");
+    }
+
+    const groupCache = strategiesCache.current[processorName];
+
+    if (!groupCache || !groupCache[activeStrategy]) {
+      throw new Error(`No processor found for processor "${processorName}" on strategy "${activeStrategy}"`);
+    }
+
+    const processor = groupCache[activeStrategy];
+    return processor(params);
+  }, [apiRef]);
+  const getActiveStrategy = React.useCallback(strategyGroup => {
+    var _availableStrategyEnt;
+
+    const strategyEntries = Array.from(availableStrategies.current.entries());
+    const availableStrategyEntry = strategyEntries.find(([, strategy]) => {
+      if (strategy.group !== strategyGroup) {
+        return false;
+      }
+
+      return strategy.isAvailable();
+    });
+    return (_availableStrategyEnt = availableStrategyEntry == null ? void 0 : availableStrategyEntry[0]) != null ? _availableStrategyEnt : GRID_DEFAULT_STRATEGY;
+  }, []);
+  const setStrategyAvailability = React.useCallback((strategyGroup, strategyName, isAvailable) => {
+    availableStrategies.current.set(strategyName, {
+      group: strategyGroup,
+      isAvailable
+    });
+    apiRef.current.publishEvent(_events.GridEvents.strategyAvailabilityChange);
+  }, [apiRef]);
+  const strategyProcessingApi = {
+    unstable_registerStrategyProcessor: registerStrategyProcessor,
+    unstable_applyStrategyProcessor: applyStrategyProcessor,
+    unstable_getActiveStrategy: getActiveStrategy,
+    unstable_setStrategyAvailability: setStrategyAvailability
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, strategyProcessingApi, 'GridStrategyProcessing');
+};
+
+exports.useGridStrategyProcessing = useGridStrategyProcessing;

package/node/hooks/core/useGridInitialization.js

@@ -15,7 +15,7 @@ var _useGridLocaleText = require("./useGridLocaleText");
 
 var _preProcessing = require("./preProcessing");
 
-var _rowGroupsPreProcessing = require("./rowGroupsPreProcessing");
+var _strategyProcessing = require("./strategyProcessing");
 
 var _useGridStateInitialization = require("./useGridStateInitialization");
 
@@ -28,7 +28,7 @@ const useGridInitialization = (inputApiRef, props) => {
   (0, _useGridErrorHandler.useGridErrorHandler)(apiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(apiRef, props);
   (0, _preProcessing.useGridPreProcessing)(apiRef);
-  (0, _rowGroupsPreProcessing.useGridRowGroupsPreProcessing)(apiRef);
+  (0, _strategyProcessing.useGridStrategyProcessing)(apiRef);
   (0, _useGridLocaleText.useGridLocaleText)(apiRef, props);
   return apiRef;
 };