@mui/x-data-grid 5.6.0 → 5.8.0

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { GridCellIndexCoordinates, GridScrollParams } from '../../../models';
+import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
+import { GridColDef } from '../../../models/colDef/gridColDef';
+import { GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
+import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
+import { GridRowEntry } from '../../../models/gridRows';
+import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
+export declare type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
+export interface GridPipeProcessingLookup {
+    hydrateColumns: {
+        value: GridHydrateColumnsValue;
+    };
+    scrollToIndexes: {
+        value: Partial<GridScrollParams>;
+        context: Partial<GridCellIndexCoordinates>;
+    };
+    columnMenu: {
+        value: React.ReactNode[];
+        context: GridColDef;
+    };
+    exportState: {
+        value: GridInitialStateCommunity;
+    };
+    restoreState: {
+        value: GridRestoreStatePreProcessingValue;
+        context: GridRestoreStatePreProcessingContext<GridInitialStateCommunity>;
+    };
+    rowHeight: {
+        value: Record<string, number>;
+        context: GridRowEntry;
+    };
+    preferencePanel: {
+        value: React.ReactNode;
+        context: GridPreferencePanelsValue;
+    };
+}
+export declare type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
+    context: any;
+} ? 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 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 {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_registerPipeProcessor: <G extends GridPipeProcessorGroup>(processorName: GridPipeProcessorGroup, id: string, callback: GridPipeProcessor<G>) => () => void;
+    /**
+     * 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_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}

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-export const useGridRegisterPreProcessor = (apiRef, group, callback) => {
+
+/**
+ * TODO: Rename `useGridRegisterPipeProcessor`
+ */
+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/gridStrategyProcessingApi.d.ts

@@ -0,0 +1,58 @@
+import { GridRowTreeCreationParams, GridRowTreeCreationValue } from '../../features/rows/gridRowsState';
+import { GridFilteringMethodParams, GridFilteringMethodValue } from '../../features/filter/gridFilterState';
+import { GridSortingMethodParams, GridSortingMethodValue } from '../../features/sorting/gridSortingState';
+export declare type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
+export declare type GridStrategyGroup = GridStrategyProcessingLookup[keyof GridStrategyProcessingLookup]['group'];
+export interface GridStrategyProcessingLookup {
+    rowTreeCreation: {
+        group: 'rowTree';
+        params: GridRowTreeCreationParams;
+        value: GridRowTreeCreationValue;
+    };
+    filtering: {
+        group: 'rowTree';
+        params: GridFilteringMethodParams;
+        value: GridFilteringMethodValue;
+    };
+    sorting: {
+        group: 'rowTree';
+        params: GridSortingMethodParams;
+        value: GridSortingMethodValue;
+    };
+}
+export declare type GridStrategyProcessor<P extends GridStrategyProcessorName> = (params: GridStrategyProcessingLookup[P]['params']) => GridStrategyProcessingLookup[P]['value'];
+export interface GridStrategyProcessingApi {
+    /**
+     * Registers a strategy processor.
+     * If the strategy is active, it emits an event to notify the agents to re-apply the processor.
+     * @template P
+     * @param {string} strategyName The name of the strategy on which this processor should be applied.
+     * @param {GridStrategyProcessorName} processorName The name of the processor.
+     * @param {GridStrategyProcessor<P>} processor The processor to register.
+     * @returns {() => void} A function to unregister the processor.
+     * @ignore - do not document.
+     */
+    unstable_registerStrategyProcessor: <P extends GridStrategyProcessorName>(strategyName: string, processorName: P, callback: GridStrategyProcessor<P>) => () => void;
+    /**
+     * Set a callback to know if a strategy is available.
+     * @param {string} strategyName The name of the strategy.
+     * @param {boolean} callback A callback to know if this strategy is available.
+     * @ignore - do not document.
+     */
+    unstable_setStrategyAvailability: (strategyGroup: GridStrategyGroup, strategyName: string, callback: () => boolean) => void;
+    /**
+     * Returns the name of the active strategy of a given strategy group
+     * @param {GridStrategyGroup} strategyGroup The group from which we want the active strategy.
+     * @returns {string} The name of the active strategy.
+     * @ignore - do not document.
+     */
+    unstable_getActiveStrategy: (strategyGroup: GridStrategyGroup) => string;
+    /**
+     * Run the processor registered for the active strategy.
+     * @param {GridStrategyProcessorName} processorName The name of the processor to run.
+     * @param {GridStrategyProcessingLookup[P]['params']} params Additional params to pass to the processor.
+     * @returns {GridStrategyProcessingLookup[P]['value']} The value returned by the processor.
+     * @ignore - do not document.
+     */
+    unstable_applyStrategyProcessor: <P extends GridStrategyProcessorName>(processorName: P, params: GridStrategyProcessingLookup[P]['params']) => GridStrategyProcessingLookup[P]['value'];
+}

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

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

package/hooks/core/strategyProcessing/index.js

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

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommon } from '../../../models/api/gridApiCommon';
+import { GridStrategyProcessor } from './gridStrategyProcessingApi';
+export declare const useGridRegisterStrategyProcessor: <Api extends GridApiCommon, G extends keyof import("./gridStrategyProcessingApi").GridStrategyProcessingLookup>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

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

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridStrategyProcessorName, GridStrategyProcessingLookup } from './gridStrategyProcessingApi';
+export declare const GRID_DEFAULT_STRATEGY = "none";
+export declare const GRID_STRATEGIES_PROCESSORS: {
+    [P in GridStrategyProcessorName]: GridStrategyProcessingLookup[P]['group'];
+};
+/**
+ * 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 declare const useGridStrategyProcessing: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -0,0 +1,125 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridEvents } from '../../../models/events';
+export const GRID_DEFAULT_STRATEGY = 'none';
+export const 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 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 = _objectWithoutPropertiesLoose(_ref, [strategyName].map(_toPropertyKey));
+
+      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(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(GridEvents.strategyAvailabilityChange);
+  }, [apiRef]);
+  const strategyProcessingApi = {
+    unstable_registerStrategyProcessor: registerStrategyProcessor,
+    unstable_applyStrategyProcessor: applyStrategyProcessor,
+    unstable_getActiveStrategy: getActiveStrategy,
+    unstable_setStrategyAvailability: setStrategyAvailability
+  };
+  useGridApiMethod(apiRef, strategyProcessingApi, 'GridStrategyProcessing');
+};

package/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 const useGridInitialization = (inputApiRef, props) => {
   useGridLoggerFactory(apiRef, props);
   useGridErrorHandler(apiRef, props);
   useGridStateInitialization(apiRef, props);
-  useGridPreProcessing(apiRef);
-  useGridRowGroupsPreProcessing(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/columnMenu/useGridColumnMenu.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const columnMenuStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumnResize (event)
  * @requires useGridInfiniteLoader (event)

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,21 +1,20 @@
 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 const columnMenuStateInitializer = state => _extends({}, state, {
+  columnMenu: {
+    open: false
+  }
+});
 /**
  * @requires useGridColumnResize (event)
  * @requires useGridInfiniteLoader (event)
  */
+
 export const useGridColumnMenu = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridColumnMenu');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    columnMenu: {
-      open: false
-    }
-  }));
   /**
    * API METHODS
    */

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

@@ -1,5 +1,6 @@
 import type { GridRowId } from '../../../models';
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+import type { GridColumnDimensionProperties } from './gridColumnsUtils';
 export declare type GridColumnLookup = {
     [field: string]: GridStateColDef;
 };
@@ -8,16 +9,20 @@ export declare type GridColumnRawLookup = {
 };
 export interface GridColumnsState {
     /**
-     * TODO v6: Rename `orderedFields`.
+     * TODO v6: Rename `all` to `orderedFields`
      */
     all: string[];
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
+export declare type GridColumnDimensions = Pick<GridStateColDef, GridColumnDimensionProperties>;
 export interface GridColumnsInitialState {
     columnVisibilityModel?: GridColumnVisibilityModel;
+    orderedFields?: string[];
+    dimensions?: Record<string, GridColumnDimensions>;
 }
 export declare type GridColumnsRawState = Omit<GridColumnsState, 'lookup'> & {
     lookup: GridColumnRawLookup;
 };
+export declare type GridHydrateColumnsValue = Omit<GridColumnsRawState, 'columnVisibilityModel'>;
 export declare type GridColumnVisibilityModel = Record<GridRowId, boolean>;