@mui/x-data-grid 5.6.0 → 5.8.0

package/legacy/components/containers/GridRoot.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef } from '@mui/material/utils';
-import NoSsr from '@mui/material/NoSsr';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -28,21 +28,38 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   var rootContainerRef = React.useRef(null);
   var handleRef = useForkRef(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(GridRootStyles, _extends({
-      ref: handleRef,
-      className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
-      role: "grid",
-      "aria-colcount": visibleColumns.length,
-      "aria-rowcount": totalRowCount,
-      "aria-multiselectable": !rootProps.disableMultipleSelection,
-      "aria-label": rootProps['aria-label'],
-      "aria-labelledby": rootProps['aria-labelledby']
-    }, other, {
-      children: children
-    }))
-  });
+  apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mountedState = _React$useState2[0],
+      setMountedState = _React$useState2[1];
+
+  useEnhancedEffect(function () {
+    setMountedState(true);
+  }, []);
+  useEnhancedEffect(function () {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
+    role: "grid",
+    "aria-colcount": visibleColumns.length,
+    "aria-rowcount": totalRowCount,
+    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-label": rootProps['aria-label'],
+    "aria-labelledby": rootProps['aria-labelledby']
+  }, other, {
+    children: children
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/legacy/components/containers/GridRootStyles.js

@@ -30,9 +30,9 @@ export var GridRootStyles = styled('div', {
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
     height: 'auto'
   }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderColor: 'transparent'
+    borderBottomColor: 'transparent'
   })), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderColor: 'transparent'
+    borderBottomColor: 'transparent'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
     WebkitTapHighlightColor: 'transparent',
     lineHeight: null,
@@ -52,7 +52,7 @@ export var GridRootStyles = styled('div', {
     position: 'relative',
     display: 'flex',
     alignItems: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sorted'], " .").concat(gridClasses.iconButtonContainer), {
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sorted'], " .").concat(gridClasses.iconButtonContainer, ", & .").concat(gridClasses['columnHeader--filtered'], " .").concat(gridClasses.iconButtonContainer), {
     visibility: 'visible',
     width: 'auto'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], ") .").concat(gridClasses.sortIcon), {

package/legacy/components/menu/columnMenu/GridColumnMenu.js

@@ -28,7 +28,7 @@ var GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props
     onClick: hideMenu,
     column: currentColumn
   })];
-  var preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  var preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, props, {

package/legacy/components/panel/GridColumnsPanel.js

@@ -60,7 +60,7 @@ var GridColumnsPanelRowRoot = styled('div', {
 var GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel() {
+export function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   var apiRef = useGridApiContext();
@@ -114,7 +114,7 @@ export function GridColumnsPanel() {
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -171,5 +171,5 @@ export function GridColumnsPanel() {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]
     })]
-  });
+  }));
 }

package/legacy/components/panel/GridPreferencesPanel.js

@@ -7,21 +7,19 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4;
+  var _preferencePanelState, _rootProps$components, _rootProps$components2;
 
   var apiRef = useGridApiContext();
   var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   var rootProps = useGridRootProps();
   var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  var isColumnsTabOpen = preferencePanelState.openedPanelValue === GridPreferencePanelsValue.columns;
-  var isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
-  return /*#__PURE__*/_jsxs(rootProps.components.Panel, _extends({
+  var panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     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__*/_jsx(rootProps.components.ColumnsPanel, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/_jsx(rootProps.components.FilterPanel, _extends({}, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.filterPanel))]
+    children: panelContent
   }));
 });

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,22 +12,6 @@ import { unstable_useId as useId } from '@mui/material/utils';
 import { getValueFromOption } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-var getSingleSelectOptionFormatter = function getSingleSelectOptionFormatter(_ref, api) {
-  var valueFormatter = _ref.valueFormatter,
-      field = _ref.field;
-  return function (option) {
-    if (_typeof(option) === 'object') {
-      return option.label;
-    }
-
-    return valueFormatter && option !== '' ? valueFormatter({
-      value: option,
-      field: field,
-      api: api
-    }) : option;
-  };
-};
-
 var isOptionEqualToValue = function isOptionEqualToValue(option, value) {
   return getValueFromOption(option) === getValueFromOption(value);
 };
@@ -45,15 +29,31 @@ function GridFilterInputMultipleSingleSelect(props) {
   var id = useId();
   var resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var resolvedValueOptions = React.useMemo(function () {
-    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+    return typeof (resolvedColumn == null ? void 0 : resolvedColumn.valueOptions) === 'function' ? resolvedColumn.valueOptions({
       field: resolvedColumn.field
-    }) : resolvedColumn.valueOptions;
+    }) : resolvedColumn == null ? void 0 : resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   var resolvedFormattedValueOptions = React.useMemo(function () {
-    return resolvedValueOptions.map(getValueFromOption);
+    return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(getValueFromOption);
   }, [resolvedValueOptions]);
-  var filterValueOptionFormatter = getSingleSelectOptionFormatter(apiRef.current.getColumn(item.columnField), apiRef.current); // The value is computed from the item.value and used directly
-  // If it was done by a useEffect/useSate, the Autocomplete could receive incoherent value and options
+
+  var _apiRef$current$getCo = apiRef.current.getColumn(item.columnField),
+      valueFormatter = _apiRef$current$getCo.valueFormatter,
+      field = _apiRef$current$getCo.field;
+
+  var filterValueOptionFormatter = function filterValueOptionFormatter(option) {
+    if (_typeof(option) === 'object') {
+      return option.label;
+    }
+
+    return valueFormatter && option !== '' ? valueFormatter({
+      value: option,
+      field: field,
+      api: apiRef.current
+    }) : option;
+  }; // The value is computed from the item.value and used directly
+  // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
+
 
   var filterValues = React.useMemo(function () {
     if (!Array.isArray(item.value)) {
@@ -64,9 +64,9 @@ function GridFilterInputMultipleSingleSelect(props) {
       var itemValueIndexes = item.value.map(function (element) {
         // get the index matching between values and valueoptions
         var formattedElement = getValueFromOption(element);
-        var index = resolvedFormattedValueOptions.findIndex(function (formatedOption) {
+        var index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(function (formatedOption) {
           return formatedOption === formattedElement;
-        });
+        })) || 0;
         return index;
       });
       return itemValueIndexes.filter(function (index) {
@@ -95,7 +95,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     multiple: true,
     freeSolo: false,
     limitTags: 1,
-    options: resolvedValueOptions,
+    options: resolvedValueOptions // TODO: avoid `any`?
+    ,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -132,7 +133,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -24,7 +24,10 @@ var VirtualScrollerRenderZoneRoot = styled('div', {
     return styles.virtualScrollerRenderZone;
   }
 })({
-  position: 'absolute'
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
 });
 var GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   var className = props.className,

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, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -49,6 +49,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', '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--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']);

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

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

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

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridEvents } from '../../../models/events';
+/**
+ * Implement the Pipeline Pattern
+ *
+ * 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.
+ *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * =====================================================================================================================
+ *
+ * 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.
+ *
+ * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
+ *
+ */
+
+export var useGridPipeProcessing = function useGridPipeProcessing(apiRef) {
+  var processorsCache = React.useRef({});
+  var registerPipeProcessor = React.useCallback(function (group, id, processor) {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {};
+    }
+
+    var groupProcessors = processorsCache.current[group];
+    var oldProcessor = groupProcessors[id];
+
+    if (oldProcessor !== processor) {
+      processorsCache.current[group] = _extends({}, groupProcessors, _defineProperty({}, id, processor));
+      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+    }
+
+    return function () {
+      var _ref = processorsCache.current[group],
+          removedGroupProcessor = _ref[id],
+          otherProcessors = _objectWithoutProperties(_ref, [id].map(_toPropertyKey));
+
+      processorsCache.current[group] = otherProcessors;
+      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+    };
+  }, [apiRef]);
+  var applyPipeProcessors = React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var _ref2 = args,
+        _ref3 = _slicedToArray(_ref2, 3),
+        group = _ref3[0],
+        value = _ref3[1],
+        context = _ref3[2];
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    var preProcessors = Object.values(processorsCache.current[group]);
+    return preProcessors.reduce(function (acc, preProcessor) {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  var preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};

package/legacy/hooks/core/{preProcessing/useGridRegisterPreProcessor.js → pipeProcessing/useGridRegisterPipeProcessor.js}

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-export var useGridRegisterPreProcessor = function useGridRegisterPreProcessor(apiRef, group, callback) {
+
+/**
+ * TODO: Rename `useGridRegisterPipeProcessor`
+ */
+export var useGridRegisterPipeProcessor = function useGridRegisterPipeProcessor(apiRef, group, callback) {
   var cleanup = React.useRef();
   var id = React.useRef("mui-".concat(Math.round(Math.random() * 1e9)));
   var registerPreProcessor = React.useCallback(function () {
-    cleanup.current = apiRef.current.unstable_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(function () {
     registerPreProcessor();

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

@@ -0,0 +1,3 @@
+export * from './gridStrategyProcessingApi';
+export * from './useGridRegisterStrategyProcessor';
+export * from './useGridStrategyProcessing';

package/legacy/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export var useGridRegisterStrategyProcessor = function useGridRegisterStrategyProcessor(apiRef, strategyName, group, processor) {
+  var registerPreProcessor = React.useCallback(function () {
+    apiRef.current.unstable_registerStrategyProcessor(strategyName, group, processor);
+  }, [apiRef, processor, group, strategyName]);
+  useFirstRender(function () {
+    registerPreProcessor();
+  });
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+  }, [registerPreProcessor]);
+};

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

@@ -0,0 +1,130 @@
+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';
+import { GridEvents } from '../../../models/events';
+export var GRID_DEFAULT_STRATEGY = 'none';
+export var GRID_STRATEGIES_PROCESSORS = {
+  rowTreeCreation: 'rowTree',
+  filtering: 'rowTree',
+  sorting: 'rowTree'
+};
+
+/**
+ * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
+ *
+ * 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.
+ *
+ * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
+ *
+ * =====================================================================================================================
+ *
+ * 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.
+ *
+ * - `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.
+ * 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());
+  var strategiesCache = React.useRef({});
+  var registerStrategyProcessor = React.useCallback(function (strategyName, processorName, processor) {
+    var cleanup = function cleanup() {
+      var _ref = strategiesCache.current[processorName],
+          removedPreProcessor = _ref[strategyName],
+          otherProcessors = _objectWithoutProperties(_ref, [strategyName].map(_toPropertyKey));
+
+      strategiesCache.current[processorName] = otherProcessors;
+    };
+
+    if (!strategiesCache.current[processorName]) {
+      strategiesCache.current[processorName] = {};
+    }
+
+    var groupPreProcessors = strategiesCache.current[processorName];
+    var 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(GridEvents.activeStrategyProcessorChange, processorName);
+    }
+
+    return cleanup;
+  }, [apiRef]);
+  var applyStrategyProcessor = React.useCallback(function (processorName, params) {
+    var 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");
+    }
+
+    var groupCache = strategiesCache.current[processorName];
+
+    if (!groupCache || !groupCache[activeStrategy]) {
+      throw new Error("No processor found for processor \"".concat(processorName, "\" on strategy \"").concat(activeStrategy, "\""));
+    }
+
+    var processor = groupCache[activeStrategy];
+    return processor(params);
+  }, [apiRef]);
+  var getActiveStrategy = React.useCallback(function (strategyGroup) {
+    var _availableStrategyEnt;
+
+    var strategyEntries = Array.from(availableStrategies.current.entries());
+    var availableStrategyEntry = strategyEntries.find(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          strategy = _ref3[1];
+
+      if (strategy.group !== strategyGroup) {
+        return false;
+      }
+
+      return strategy.isAvailable();
+    });
+    return (_availableStrategyEnt = availableStrategyEntry == null ? void 0 : availableStrategyEntry[0]) != null ? _availableStrategyEnt : GRID_DEFAULT_STRATEGY;
+  }, []);
+  var setStrategyAvailability = React.useCallback(function (strategyGroup, strategyName, isAvailable) {
+    availableStrategies.current.set(strategyName, {
+      group: strategyGroup,
+      isAvailable: isAvailable
+    });
+    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+  }, [apiRef]);
+  var strategyProcessingApi = {
+    unstable_registerStrategyProcessor: registerStrategyProcessor,
+    unstable_applyStrategyProcessor: applyStrategyProcessor,
+    unstable_getActiveStrategy: getActiveStrategy,
+    unstable_setStrategyAvailability: setStrategyAvailability
+  };
+  useGridApiMethod(apiRef, strategyProcessingApi, 'GridStrategyProcessing');
+};

package/legacy/hooks/core/useGridInitialization.js

@@ -2,8 +2,8 @@ import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridErrorHandler } from './useGridErrorHandler';
 import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPreProcessing } from './preProcessing';
-import { useGridRowGroupsPreProcessing } from './rowGroupsPreProcessing';
+import { useGridPipeProcessing } from './pipeProcessing';
+import { useGridStrategyProcessing } from './strategyProcessing';
 import { useGridStateInitialization } from './useGridStateInitialization';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -14,8 +14,8 @@ export var useGridInitialization = function useGridInitialization(inputApiRef, p
   useGridLoggerFactory(apiRef, props);
   useGridErrorHandler(apiRef, props);
   useGridStateInitialization(apiRef, props);
-  useGridPreProcessing(apiRef);
-  useGridRowGroupsPreProcessing(apiRef);
+  useGridPipeProcessing(apiRef);
+  useGridStrategyProcessing(apiRef);
   useGridLocaleText(apiRef, props);
   return apiRef;
 };

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -142,7 +142,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         column: column,
         colIndex: columnIndex,
         isResizing: resizeCol === column.field,
-        isLastColumn: columnIndex === columns.length - 1,
+        isLastColumn: columnIndex === visibleColumns.length - 1,
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex

package/legacy/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,23 +1,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents } from '../../../models/events';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
-
+export var columnMenuStateInitializer = function columnMenuStateInitializer(state) {
+  return _extends({}, state, {
+    columnMenu: {
+      open: false
+    }
+  });
+};
 /**
  * @requires useGridColumnResize (event)
  * @requires useGridInfiniteLoader (event)
  */
+
 export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
   var logger = useGridLogger(apiRef, 'useGridColumnMenu');
-  useGridStateInit(apiRef, function (state) {
-    return _extends({}, state, {
-      columnMenu: {
-        open: false
-      }
-    });
-  });
   /**
    * API METHODS
    */