@mui/x-data-grid 5.6.0 → 5.8.0

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

@@ -33,21 +33,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const getSingleSelectOptionFormatter = ({
-  valueFormatter,
-  field
-}, api) => option => {
-  if (typeof option === 'object') {
-    return option.label;
-  }
-
-  return valueFormatter && option !== '' ? valueFormatter({
-    value: option,
-    field,
-    api
-  }) : option;
-};
-
 const isOptionEqualToValue = (option, value) => (0, _filterPanelUtils.getValueFromOption)(option) === (0, _filterPanelUtils.getValueFromOption)(value);
 
 const filter = (0, _Autocomplete.createFilterOptions)();
@@ -63,15 +48,31 @@ function GridFilterInputMultipleSingleSelect(props) {
   const id = (0, _utils.unstable_useId)();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    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]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
-    return resolvedValueOptions.map(_filterPanelUtils.getValueFromOption);
+    return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(_filterPanelUtils.getValueFromOption);
   }, [resolvedValueOptions]);
-  const 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
+  const {
+    valueFormatter,
+    field
+  } = apiRef.current.getColumn(item.columnField);
+
+  const filterValueOptionFormatter = option => {
+    if (typeof option === 'object') {
+      return option.label;
+    }
+
+    return valueFormatter && option !== '' ? valueFormatter({
+      value: option,
+      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
+
 
   const filterValues = React.useMemo(() => {
     if (!Array.isArray(item.value)) {
@@ -82,7 +83,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       const itemValueIndexes = item.value.map(element => {
         // get the index matching between values and valueoptions
         const formattedElement = (0, _filterPanelUtils.getValueFromOption)(element);
-        const index = resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement);
+        const index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement)) || 0;
         return index;
       });
       return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
@@ -107,7 +108,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     multiple: true,
     freeSolo: false,
     limitTags: 1,
-    options: resolvedValueOptions,
+    options: resolvedValueOptions // TODO: avoid `any`?
+    ,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -138,7 +140,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -46,7 +46,10 @@ const VirtualScrollerRenderZoneRoot = (0, _styles.styled)('div', {
   slot: 'VirtualScrollerRenderZone',
   overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
 })({
-  position: 'absolute'
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {

package/node/constants/defaultGridSlotsComponents.js

@@ -71,6 +71,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, DEFAULT_GR
   BaseTooltip: _Tooltip.default,
   BasePopper: _Popper.default,
   Cell: _components.GridCell,
+  ColumnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
   ColumnMenu: _components.GridColumnMenu,
   ErrorOverlay: _ErrorOverlay.ErrorOverlay,
   Footer: _components.GridFooter,

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.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']);
+const gridClasses = (0, _material.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']);
 exports.gridClasses = gridClasses;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridPipeProcessingApi = require("./gridPipeProcessingApi");
+
+Object.keys(_gridPipeProcessingApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridPipeProcessingApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridPipeProcessingApi[key];
+    }
+  });
+});
+
+var _useGridPipeProcessing = require("./useGridPipeProcessing");
+
+Object.keys(_useGridPipeProcessing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridPipeProcessing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridPipeProcessing[key];
+    }
+  });
+});
+
+var _useGridRegisterPipeProcessor = require("./useGridRegisterPipeProcessor");
+
+Object.keys(_useGridRegisterPipeProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterPipeProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterPipeProcessor[key];
+    }
+  });
+});

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridPipeProcessing = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _events = require("../../../models/events");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 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.
+ *
+ */
+const useGridPipeProcessing = apiRef => {
+  const processorsCache = React.useRef({});
+  const registerPipeProcessor = React.useCallback((group, id, processor) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {};
+    }
+
+    const groupProcessors = processorsCache.current[group];
+    const oldProcessor = groupProcessors[id];
+
+    if (oldProcessor !== processor) {
+      processorsCache.current[group] = (0, _extends2.default)({}, groupProcessors, {
+        [id]: processor
+      });
+      apiRef.current.publishEvent(_events.GridEvents.pipeProcessorRegister, group);
+    }
+
+    return () => {
+      const _ref = processorsCache.current[group],
+            otherProcessors = (0, _objectWithoutPropertiesLoose2.default)(_ref, [id].map(_toPropertyKey2.default));
+      processorsCache.current[group] = otherProcessors;
+      apiRef.current.publishEvent(_events.GridEvents.pipeProcessorUnregister, group);
+    };
+  }, [apiRef]);
+  const applyPipeProcessors = React.useCallback((...args) => {
+    const [group, value, context] = args;
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    const preProcessors = Object.values(processorsCache.current[group]);
+    return preProcessors.reduce((acc, preProcessor) => {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  const preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};
+
+exports.useGridPipeProcessing = useGridPipeProcessing;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRegisterPreProcessor = void 0;
+exports.useGridRegisterPipeProcessor = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -13,11 +13,14 @@ 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 useGridRegisterPreProcessor = (apiRef, group, callback) => {
+/**
+ * TODO: Rename `useGridRegisterPipeProcessor`
+ */
+const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
-    cleanup.current = apiRef.current.unstable_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   (0, _useFirstRender.useFirstRender)(() => {
     registerPreProcessor();
@@ -39,4 +42,4 @@ const useGridRegisterPreProcessor = (apiRef, group, callback) => {
   }, [registerPreProcessor]);
 };
 
-exports.useGridRegisterPreProcessor = useGridRegisterPreProcessor;
+exports.useGridRegisterPipeProcessor = useGridRegisterPipeProcessor;

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,146 @@
+"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)
+ *
+ * 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.
+ */
+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

@@ -13,9 +13,9 @@ var _useGridErrorHandler = require("./useGridErrorHandler");
 
 var _useGridLocaleText = require("./useGridLocaleText");
 
-var _preProcessing = require("./preProcessing");
+var _pipeProcessing = require("./pipeProcessing");
 
-var _rowGroupsPreProcessing = require("./rowGroupsPreProcessing");
+var _strategyProcessing = require("./strategyProcessing");
 
 var _useGridStateInitialization = require("./useGridStateInitialization");
 
@@ -27,8 +27,8 @@ const useGridInitialization = (inputApiRef, props) => {
   (0, _useGridLoggerFactory.useGridLoggerFactory)(apiRef, props);
   (0, _useGridErrorHandler.useGridErrorHandler)(apiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(apiRef, props);
-  (0, _preProcessing.useGridPreProcessing)(apiRef);
-  (0, _rowGroupsPreProcessing.useGridRowGroupsPreProcessing)(apiRef);
+  (0, _pipeProcessing.useGridPipeProcessing)(apiRef);
+  (0, _strategyProcessing.useGridStrategyProcessing)(apiRef);
   (0, _useGridLocaleText.useGridLocaleText)(apiRef, props);
   return apiRef;
 };

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

@@ -144,7 +144,7 @@ const 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/node/hooks/features/columnMenu/useGridColumnMenu.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridColumnMenu = void 0;
+exports.useGridColumnMenu = exports.columnMenuStateInitializer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _events = require("../../../models/events");
 
-var _useGridStateInit = require("../../utils/useGridStateInit");
-
 var _utils = require("../../utils");
 
 var _columnMenuSelector = require("./columnMenuSelector");
@@ -23,17 +21,21 @@ 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 columnMenuStateInitializer = state => (0, _extends2.default)({}, state, {
+  columnMenu: {
+    open: false
+  }
+});
 /**
  * @requires useGridColumnResize (event)
  * @requires useGridInfiniteLoader (event)
  */
+
+
+exports.columnMenuStateInitializer = columnMenuStateInitializer;
+
 const useGridColumnMenu = apiRef => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridColumnMenu');
-  (0, _useGridStateInit.useGridStateInit)(apiRef, state => (0, _extends2.default)({}, state, {
-    columnMenu: {
-      open: false
-    }
-  }));
   /**
    * API METHODS
    */