@mui/x-data-grid 5.7.0 → 5.8.0

package/components/panel/GridPanel.d.ts

@@ -5,7 +5,7 @@ import { InternalStandardProps as StandardProps } from '@mui/material';
 import { PopperProps } from '@mui/material/Popper';
 export interface GridPanelClasses {
     /** Styles applied to the root element. */
-    root: string;
+    panel: string;
     /** Styles applied to the paper element. */
     paper: string;
 }
@@ -17,6 +17,6 @@ export interface GridPanelProps extends StandardProps<MUIStyledCommonProps<Theme
     classes?: Partial<GridPanelClasses>;
     open: boolean;
 }
-export declare const gridPanelClasses: Record<"paper" | "panel", string>;
+export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
 declare const GridPanel: React.ForwardRefExoticComponent<Pick<GridPanelProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "children" | "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "theme" | "classes" | "container" | "disablePortal" | "keepMounted" | "anchorEl" | "placement" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };

package/components/panel/GridPreferencesPanel.js

@@ -14,7 +14,7 @@ export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridP
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  const 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,

package/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 const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay,
   Footer: GridFooter,

package/constants/gridClasses.d.ts

@@ -1,4 +1,8 @@
 export interface GridClasses {
+    /**
+     * Styles applied to the root element of the cell with type="actions"
+     */
+    actionsCell: string;
     /**
      * Styles applied to the root element if `autoHeight={true}`.
      */
@@ -365,14 +369,22 @@ export interface GridClasses {
      */
     withBorder: string;
     /**
-     * Styles applied to the root of the grouping column of the tree data.
+     * Styles applied to the root of the grouping cell of the tree data.
      */
     treeDataGroupingCell: string;
     /**
-     * Styles applied to the toggle of the grouping column of the tree data.
+     * Styles applied to the toggle of the grouping cell of the tree data.
      */
     treeDataGroupingCellToggle: string;
+    /**
+     * Styles applied to the root element of the grouping criteria cell
+     */
+    groupingCriteriaCell: string;
+    /**
+     * Styles applied to the toggle of the grouping criteria cell
+     */
+    groupingCriteriaCellToggle: string;
 }
 export declare type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;
-export declare const gridClasses: Record<"overlay" | "cell" | "row" | "menu" | "main" | "root" | "paper" | "autoHeight" | "booleanCell" | "cell--editable" | "cell--editing" | "cell--textCenter" | "cell--textLeft" | "cell--textRight" | "cell--withRenderer" | "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" | "editBooleanCell" | "filterForm" | "filterFormDeleteIcon" | "filterFormLinkOperatorInput" | "filterFormColumnInput" | "filterFormOperatorInput" | "filterFormValueInput" | "editInputCell" | "filterIcon" | "footerContainer" | "iconButtonContainer" | "iconSeparator" | "menuIcon" | "menuIconButton" | "menuOpen" | "menuList" | "virtualScroller" | "virtualScrollerContent" | "virtualScrollerContent--overflowed" | "virtualScrollerRenderZone" | "pinnedColumns" | "pinnedColumns--left" | "pinnedColumns--right" | "pinnedColumnHeaders" | "pinnedColumnHeaders--left" | "pinnedColumnHeaders--right" | "row--editable" | "row--editing" | "row--lastVisible" | "rowCount" | "scrollArea" | "scrollArea--left" | "scrollArea--right" | "selectedRowCount" | "sortIcon" | "toolbarContainer" | "toolbarFilterList" | "withBorder" | "treeDataGroupingCell" | "treeDataGroupingCellToggle" | "actionsCell" | "groupingCriteriaCell" | "groupingCriteriaCellToggle", string>;
+export declare const gridClasses: Record<keyof GridClasses, string>;

package/hooks/core/index.d.ts

@@ -1 +1 @@
-export type { GridPreProcessingGroupLookup } from './preProcessing';
+export type { GridPipeProcessingLookup } from './pipeProcessing';

package/hooks/core/{preProcessing/gridPreProcessingApi.d.ts → pipeProcessing/gridPipeProcessingApi.d.ts}

@@ -6,8 +6,8 @@ import { GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValu
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry } from '../../../models/gridRows';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
-export declare type GridPreProcessingGroup = keyof GridPreProcessingGroupLookup;
-export interface GridPreProcessingGroupLookup {
+export declare type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
+export interface GridPipeProcessingLookup {
     hydrateColumns: {
         value: GridHydrateColumnsValue;
     };
@@ -35,33 +35,34 @@ export interface GridPreProcessingGroupLookup {
         context: GridPreferencePanelsValue;
     };
 }
-export declare type GridPreProcessor<P extends GridPreProcessingGroup> = (value: GridPreProcessingGroupLookup[P]['value'], context: GridPreProcessingGroupLookup[P] extends {
+export declare type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     context: any;
-} ? GridPreProcessingGroupLookup[P]['context'] : undefined) => GridPreProcessingGroupLookup[P]['value'];
-declare type GridPreProcessorsApplierArg<P extends GridPreProcessingGroup, T extends {
+} ? GridPipeProcessingLookup[P]['context'] : undefined) => GridPipeProcessingLookup[P]['value'];
+declare type GridPipeProcessorsApplierArgs<P extends GridPipeProcessorGroup, T extends {
     value: any;
 }> = T extends {
     context: any;
 } ? [P, T['value'], T['context']] : [P, T['value']];
-declare type GridPreProcessorsApplier = <P extends GridPreProcessingGroup>(...params: GridPreProcessorsApplierArg<P, GridPreProcessingGroupLookup[P]>) => GridPreProcessingGroupLookup[P]['value'];
-export interface GridPreProcessingApi {
+declare type GridPipeProcessorsApplier = <P extends GridPipeProcessorGroup>(...params: GridPipeProcessorsApplierArgs<P, GridPipeProcessingLookup[P]>) => GridPipeProcessingLookup[P]['value'];
+export interface GridPipeProcessingApi {
     /**
      * Register a pre-processor and emit an event to notify the agents to re-apply the pre-processors.
-     * @param {GridPreProcessingGroup} group The name of the group to bind this pre-processor to.
-     * @param {number} id An unique and static identifier of the pre-processor.
-     * @param {GridPreProcessor} callback The pre-processor to register.
-     * @returns {() => void} A function to unregister the pre-processor.
+     * @param {GridPipeProcessorGroup} group The group on which this processor should be applied.
+     * @param {number} id An unique and static identifier of the processor.
+     * @param {GridPipeProcessor} processor The processor to register.
+     * @returns {() => void} A function to unregister the processor.
      * @ignore - do not document.
      */
-    unstable_registerPreProcessor: <G extends GridPreProcessingGroup>(group: GridPreProcessingGroup, id: string, callback: GridPreProcessor<G>) => () => void;
+    unstable_registerPipeProcessor: <G extends GridPipeProcessorGroup>(processorName: GridPipeProcessorGroup, id: string, callback: GridPipeProcessor<G>) => () => void;
     /**
-     * Apply on the value the pre-processors registered on the given group.
-     * @param {GridPreProcessingGroup} group The name of the processing group.
-     * @param {any} value The value to pass to the first pre-processor.
-     * @param {any} params Additional params to pass to the pre-processors.
-     * @returns {any} The value after passing through all pre-processors.
+     * Run all the processors registered for the given group.
+     * @template T
+     * @param {GridPipeProcessorGroup} group The group from which we want to apply the processors.
+     * @param {T['value']} value The initial value to pass to the first processor.
+     * @param {T['context]} context Context object that will be passed to each processor.
+     * @returns {T['value]} The value after passing through all pre-processors.
      * @ignore - do not document.
      */
-    unstable_applyPreProcessors: GridPreProcessorsApplier;
+    unstable_applyPipeProcessors: GridPipeProcessorsApplier;
 }
 export {};

package/hooks/core/pipeProcessing/index.d.ts

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

package/hooks/core/pipeProcessing/index.js

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

package/hooks/core/pipeProcessing/useGridPipeProcessing.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+/**
+ * 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 declare const useGridPipeProcessing: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -0,0 +1,74 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+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 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] = _extends({}, groupProcessors, {
+        [id]: processor
+      });
+      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+    }
+
+    return () => {
+      const _ref = processorsCache.current[group],
+            otherProcessors = _objectWithoutPropertiesLoose(_ref, [id].map(_toPropertyKey));
+
+      processorsCache.current[group] = otherProcessors;
+      apiRef.current.publishEvent(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
+  };
+  useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../../models/api/gridApiCommon';
+import { GridPipeProcessor } from './gridPipeProcessingApi';
+/**
+ * TODO: Rename `useGridRegisterPipeProcessor`
+ */
+export declare const useGridRegisterPipeProcessor: <Api extends GridApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<Api>, group: G, callback: GridPipeProcessor<G>) => void;

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

@@ -4,11 +4,11 @@ import { useFirstRender } from '../../utils/useFirstRender';
 /**
  * TODO: Rename `useGridRegisterPipeProcessor`
  */
-export const useGridRegisterPreProcessor = (apiRef, group, callback) => {
+export 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]);
   useFirstRender(() => {
     registerPreProcessor();

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -8,30 +8,41 @@ export declare const 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.
+ * 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.
  *
- * Some hooks need to run the custom logic of the active strategy.
- * For instance, the `useGridFiltering` wants to run:
- * - the tree data filtering if the tree data is the current way of grouping rows.
- * - the row grouping filtering if the row grouping is the current way of grouping rows.
- * - the flat filtering if there is no grouping of the rows (equivalent to the "none" strategy).
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to apply the custom logic of the current strategy must use:
+ *
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * These hooks must use:
- * - `apiRef.current.unstable_applyStrategyProcessor` to run a processor.
  * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
  *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes
+ *
+ * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ *
+ * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ * For now, there is only one strategy group named `rowTree` which customize
+ * - row tree creation algorithm.
+ * - sorting algorithm.
+ * - filtering algorithm.
  */
 export declare const useGridStrategyProcessing: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

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

package/hooks/core/useGridInitialization.js

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

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -115,7 +115,7 @@ export 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/hooks/features/columns/gridColumnsSelector.d.ts

@@ -21,7 +21,7 @@ export declare const gridColumnLookupSelector: import("../../../utils/createSele
  * Get the columns as an array.
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
@@ -32,7 +32,7 @@ export declare const gridColumnVisibilityModelSelector: import("../../../utils/c
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
@@ -52,7 +52,7 @@ export declare const gridColumnsTotalWidthSelector: import("../../../utils/creat
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
@@ -69,19 +69,19 @@ export declare const allGridColumnsFieldsSelector: import("../../../utils/create
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const allGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+export declare const allGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]> | ((...args: any[]) => any);
 /**
  * @category Visible Columns
  * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const visibleGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+export declare const visibleGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]> | ((...args: any[]) => any);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const filterableGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+export declare const filterableGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]> | ((...args: any[]) => any);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -41,11 +41,11 @@ export declare const applyInitialState: (columnsState: Omit<GridColumnsRawState,
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
-export declare const getGridColDef: (columnTypes: GridColumnTypesRecord, type: GridColType | undefined) => import("../../../models").GridColTypeDef;
-export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnsTypes, currentColumnVisibilityModel, shouldRegenColumnVisibilityModelFromColumns, keepOnlyColumnsToUpsert, }: {
+export declare const getGridColDef: (columnTypes: GridColumnTypesRecord, type: GridColType | undefined) => import("../../../models").GridColTypeDef<any, any>;
+export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnTypes, currentColumnVisibilityModel, shouldRegenColumnVisibilityModelFromColumns, keepOnlyColumnsToUpsert, }: {
     columnsToUpsert: GridColDef[];
     initialState: GridColumnsInitialState | undefined;
-    columnsTypes: GridColumnTypesRecord;
+    columnTypes: GridColumnTypesRecord;
     currentColumnVisibilityModel?: GridColumnVisibilityModel | undefined;
     shouldRegenColumnVisibilityModelFromColumns: boolean;
     keepOnlyColumnsToUpsert: boolean;