@mui/x-data-grid-premium 8.0.0-alpha.6 → 8.0.0-alpha.8

package/hooks/features/aggregation/createAggregationLookup.js

@@ -7,18 +7,13 @@ exports.createAggregationLookup = void 0;
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _gridAggregationUtils = require("./gridAggregationUtils");
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
-const getAggregationCellValue = ({
-  apiRef,
-  groupId,
-  field,
-  aggregationFunction,
-  aggregationRowsScope
-}) => {
-  const filteredRowsLookup = (0, _xDataGridPro.gridFilteredRowsLookupSelector)(apiRef);
+const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position) => {
+  const groupAggregationLookup = {};
+  const aggregatedValues = [];
   const rowIds = apiRef.current.getRowGroupChildren({
     groupId
   });
-  const values = [];
+  const filteredRowsLookup = (0, _xDataGridPro.gridFilteredRowsLookupSelector)(apiRef);
   rowIds.forEach(rowId => {
     if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
       return;
@@ -35,42 +30,53 @@ const getAggregationCellValue = ({
     if (rowNode.type === 'group') {
       return;
     }
-    if (typeof aggregationFunction.getCellValue === 'function') {
-      const row = apiRef.current.getRow(rowId);
-      values.push(aggregationFunction.getCellValue({
-        row
-      }));
-    } else {
-      values.push(apiRef.current.getCellValue(rowId, field));
+    const row = apiRef.current.getRow(rowId);
+    for (let j = 0; j < aggregatedFields.length; j += 1) {
+      const aggregatedField = aggregatedFields[j];
+      const columnAggregationRules = aggregationRules[aggregatedField];
+      const aggregationFunction = columnAggregationRules.aggregationFunction;
+      const field = aggregatedField;
+      if (aggregatedValues[j] === undefined) {
+        aggregatedValues[j] = {
+          aggregatedField,
+          values: []
+        };
+      }
+      if (typeof aggregationFunction.getCellValue === 'function') {
+        aggregatedValues[j].values.push(aggregationFunction.getCellValue({
+          row
+        }));
+      } else {
+        const colDef = apiRef.current.getColumn(field);
+        aggregatedValues[j].values.push(apiRef.current.getRowValue(row, colDef));
+      }
     }
   });
-  return aggregationFunction.apply({
-    values,
-    groupId,
-    field // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
-  });
+  for (let i = 0; i < aggregatedValues.length; i += 1) {
+    const {
+      aggregatedField,
+      values
+    } = aggregatedValues[i];
+    const aggregationFunction = aggregationRules[aggregatedField].aggregationFunction;
+    const value = aggregationFunction.apply({
+      values,
+      groupId,
+      field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
+    });
+    groupAggregationLookup[aggregatedField] = {
+      position,
+      value
+    };
+  }
+  return groupAggregationLookup;
 };
-const getGroupAggregatedValue = ({
-  groupId,
-  apiRef,
-  aggregationRowsScope,
-  aggregatedFields,
-  aggregationRules,
-  position
-}) => {
+const getGroupAggregatedValueDataSource = (groupId, apiRef, aggregatedFields, position) => {
   const groupAggregationLookup = {};
   for (let j = 0; j < aggregatedFields.length; j += 1) {
     const aggregatedField = aggregatedFields[j];
-    const columnAggregationRules = aggregationRules[aggregatedField];
     groupAggregationLookup[aggregatedField] = {
       position,
-      value: getAggregationCellValue({
-        apiRef,
-        groupId,
-        field: aggregatedField,
-        aggregationFunction: columnAggregationRules.aggregationFunction,
-        aggregationRowsScope
-      })
+      value: apiRef.current.resolveGroupAggregation(groupId, aggregatedField)
     };
   }
   return groupAggregationLookup;
@@ -79,13 +85,10 @@ const createAggregationLookup = ({
   apiRef,
   aggregationFunctions,
   aggregationRowsScope,
-  getAggregationPosition
+  getAggregationPosition,
+  isDataSource
 }) => {
-  const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)({
-    columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
-    aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-    aggregationFunctions
-  });
+  const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), aggregationFunctions, isDataSource);
   const aggregatedFields = Object.keys(aggregationRules);
   if (aggregatedFields.length === 0) {
     return {};
@@ -100,18 +103,12 @@ const createAggregationLookup = ({
         createGroupAggregationLookup(childNode);
       }
     }
-    const hasAggregableChildren = groupNode.children.length;
-    if (hasAggregableChildren) {
-      const position = getAggregationPosition(groupNode);
-      if (position != null) {
-        aggregationLookup[groupNode.id] = getGroupAggregatedValue({
-          groupId: groupNode.id,
-          apiRef,
-          aggregatedFields,
-          aggregationRowsScope,
-          aggregationRules,
-          position
-        });
+    const position = getAggregationPosition(groupNode);
+    if (position !== null) {
+      if (isDataSource) {
+        aggregationLookup[groupNode.id] = getGroupAggregatedValueDataSource(groupNode.id, apiRef, aggregatedFields, position);
+      } else if (groupNode.children.length) {
+        aggregationLookup[groupNode.id] = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position);
       }
     }
   };

package/hooks/features/aggregation/gridAggregationInterfaces.d.ts

@@ -17,6 +17,12 @@ export interface GridAggregationApi {
      */
     setAggregationModel: (model: GridAggregationModel) => void;
 }
+export interface GridAggregationPrivateApi {
+    /**
+     * Applies the aggregation to the rows.
+     */
+    applyAggregation: () => void;
+}
 export interface GridAggregationGetCellValueParams {
     /**
      * The row model of the row that the current cell belongs to.
@@ -38,7 +44,7 @@ export interface GridAggregationFunction<V = any, AV = V> {
     apply: (params: GridAggregationParams<V>) => AV | null | undefined;
     /**
      * Label of the aggregation function.
-     * Will be used to add a label on the footer of the grouping column when this aggregation function is the only one being used.
+     * Used for adding a label to the footer of the grouping column when this aggregation function is the only one being used.
      * @default apiRef.current.getLocaleText('aggregationFunctionLabel{capitalize(name)})
      */
     label?: string;
@@ -48,12 +54,12 @@ export interface GridAggregationFunction<V = any, AV = V> {
      */
     columnTypes?: string[];
     /**
-     * Function that allows to apply a formatter to the aggregated value.
-     * If not defined, the grid will use the formatter of the column.
+     * Function for applying a formatter to the aggregated value.
+     * If not defined, the grid uses the formatter of the column.
      */
     valueFormatter?: GridValueFormatter;
     /**
-     * Indicates if the aggregated value have the same unit as the cells used to generate it.
+     * Indicates if the aggregated value has the same unit as the cells used to generate it.
      * It can be used to apply a custom cell renderer only if the aggregated value has the same unit.
      * @default true
      */
@@ -67,6 +73,13 @@ export interface GridAggregationFunction<V = any, AV = V> {
      */
     getCellValue?: (params: GridAggregationGetCellValueParams) => V;
 }
+/**
+ * Grid aggregation function data source definition interface.
+ * @demos
+ *   - [Server-side aggregation](/x/react-data-grid/server-side-data/aggregation/)
+ */
+export interface GridAggregationFunctionDataSource extends Omit<GridAggregationFunction, 'apply' | 'getCellValue'> {
+}
 export interface GridAggregationParams<V = any> {
     values: (V | undefined)[];
     groupId: GridRowId;
@@ -102,7 +115,7 @@ export interface GridAggregationHeaderMeta {
 }
 export interface GridAggregationRule {
     aggregationFunctionName: string;
-    aggregationFunction: GridAggregationFunction;
+    aggregationFunction: GridAggregationFunction | GridAggregationFunctionDataSource;
 }
 /**
  * Object containing all the aggregation rules that must be applied to the current columns.

package/hooks/features/aggregation/gridAggregationUtils.d.ts

@@ -1,27 +1,26 @@
 import * as React from 'react';
 import { GridColDef, GridRowId } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup, GridHydrateRowsValue } from '@mui/x-data-grid-pro/internals';
-import { GridAggregationFunction, GridAggregationModel, GridAggregationRule, GridAggregationRules } from './gridAggregationInterfaces';
+import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationModel, GridAggregationRule, GridAggregationRules } from './gridAggregationInterfaces';
 import { GridStatePremium } from '../../../models/gridStatePremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridApiPremium, GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = "auto-generated-group-footer-root";
 export declare const getAggregationFooterRowIdFromGroupId: (groupId: GridRowId | null) => string;
-export declare const canColumnHaveAggregationFunction: ({ colDef, aggregationFunctionName, aggregationFunction, }: {
+type AggregationFunction = GridAggregationFunction | GridAggregationFunctionDataSource | undefined;
+export declare const canColumnHaveAggregationFunction: ({ colDef, aggregationFunctionName, aggregationFunction, isDataSource, }: {
     colDef: GridColDef | undefined;
     aggregationFunctionName: string;
-    aggregationFunction: GridAggregationFunction | undefined;
+    aggregationFunction: AggregationFunction;
+    isDataSource: boolean;
 }) => boolean;
-export declare const getAvailableAggregationFunctions: ({ aggregationFunctions, colDef, }: {
-    aggregationFunctions: Record<string, GridAggregationFunction>;
+export declare const getAvailableAggregationFunctions: ({ aggregationFunctions, colDef, isDataSource, }: {
+    aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
     colDef: GridColDef;
+    isDataSource: boolean;
 }) => string[];
 export declare const mergeStateWithAggregationModel: (aggregationModel: GridAggregationModel) => (state: GridStatePremium) => GridStatePremium;
-export declare const getAggregationRules: ({ columnsLookup, aggregationModel, aggregationFunctions, }: {
-    columnsLookup: GridColumnRawLookup;
-    aggregationModel: GridAggregationModel;
-    aggregationFunctions: Record<string, GridAggregationFunction>;
-}) => GridAggregationRules;
+export declare const getAggregationRules: (columnsLookup: GridColumnRawLookup, aggregationModel: GridAggregationModel, aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>, isDataSource: boolean) => GridAggregationRules;
 interface AddFooterRowsParams {
     groupingParams: GridHydrateRowsValue;
     getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];
@@ -29,7 +28,7 @@ interface AddFooterRowsParams {
      * If `true`, there are some aggregation rules to apply
      */
     hasAggregationRule: boolean;
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: React.RefObject<GridPrivateApiPremium>;
 }
 /**
  * Add a footer for each group that has at least one column with an aggregated value.
@@ -40,7 +39,7 @@ export declare const addFooterRows: ({ groupingParams, apiRef, getAggregationPos
  */
 export declare const areAggregationRulesEqual: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
 export declare const getAggregationFunctionLabel: ({ apiRef, aggregationRule, }: {
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: React.RefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => string;
 export {};

package/hooks/features/aggregation/gridAggregationUtils.js

@@ -18,21 +18,23 @@ const getAggregationFooterRowIdFromGroupId = groupId => {
   return `auto-generated-group-footer-${groupId}`;
 };
 exports.getAggregationFooterRowIdFromGroupId = getAggregationFooterRowIdFromGroupId;
+const isClientSideAggregateFunction = aggregationFunction => !!aggregationFunction && 'apply' in aggregationFunction;
 const canColumnHaveAggregationFunction = ({
   colDef,
   aggregationFunctionName,
-  aggregationFunction
+  aggregationFunction,
+  isDataSource
 }) => {
   if (!colDef) {
     return false;
   }
-  if (!aggregationFunction) {
+  if (!isClientSideAggregateFunction(aggregationFunction) && !isDataSource) {
     return false;
   }
   if (colDef.availableAggregationFunctions != null) {
     return colDef.availableAggregationFunctions.includes(aggregationFunctionName);
   }
-  if (!aggregationFunction.columnTypes) {
+  if (!aggregationFunction?.columnTypes) {
     return true;
   }
   return aggregationFunction.columnTypes.includes(colDef.type);
@@ -40,11 +42,13 @@ const canColumnHaveAggregationFunction = ({
 exports.canColumnHaveAggregationFunction = canColumnHaveAggregationFunction;
 const getAvailableAggregationFunctions = ({
   aggregationFunctions,
-  colDef
+  colDef,
+  isDataSource
 }) => Object.keys(aggregationFunctions).filter(aggregationFunctionName => canColumnHaveAggregationFunction({
   colDef,
   aggregationFunctionName,
-  aggregationFunction: aggregationFunctions[aggregationFunctionName]
+  aggregationFunction: aggregationFunctions[aggregationFunctionName],
+  isDataSource
 }));
 exports.getAvailableAggregationFunctions = getAvailableAggregationFunctions;
 const mergeStateWithAggregationModel = aggregationModel => state => (0, _extends2.default)({}, state, {
@@ -53,24 +57,24 @@ const mergeStateWithAggregationModel = aggregationModel => state => (0, _extends
   })
 });
 exports.mergeStateWithAggregationModel = mergeStateWithAggregationModel;
-const getAggregationRules = ({
-  columnsLookup,
-  aggregationModel,
-  aggregationFunctions
-}) => {
+const getAggregationRules = (columnsLookup, aggregationModel, aggregationFunctions, isDataSource) => {
   const aggregationRules = {};
-  Object.entries(aggregationModel).forEach(([field, columnItem]) => {
+
+  // eslint-disable-next-line guard-for-in
+  for (const field in aggregationModel) {
+    const columnItem = aggregationModel[field];
     if (columnsLookup[field] && canColumnHaveAggregationFunction({
       colDef: columnsLookup[field],
       aggregationFunctionName: columnItem,
-      aggregationFunction: aggregationFunctions[columnItem]
+      aggregationFunction: aggregationFunctions[columnItem],
+      isDataSource
     })) {
       aggregationRules[field] = {
         aggregationFunctionName: columnItem,
         aggregationFunction: aggregationFunctions[columnItem]
       };
     }
-  });
+  }
   return aggregationRules;
 };
 exports.getAggregationRules = getAggregationRules;

package/hooks/features/aggregation/index.d.ts

@@ -1,4 +1,4 @@
-export * from './gridAggregationInterfaces';
+export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationPosition, GridAggregationCellMeta, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules, } from './gridAggregationInterfaces';
 export * from './gridAggregationSelectors';
 export * from './gridAggregationFunctions';
 export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId, } from './gridAggregationUtils';

package/hooks/features/aggregation/index.js

@@ -19,18 +19,6 @@ Object.defineProperty(exports, "getAggregationFooterRowIdFromGroupId", {
     return _gridAggregationUtils.getAggregationFooterRowIdFromGroupId;
   }
 });
-var _gridAggregationInterfaces = require("./gridAggregationInterfaces");
-Object.keys(_gridAggregationInterfaces).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridAggregationInterfaces[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridAggregationInterfaces[key];
-    }
-  });
-});
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
 Object.keys(_gridAggregationSelectors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/features/aggregation/useGridAggregation.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const aggregationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'aggregationModel' | 'initialState'>, GridPrivateApiPremium>;
-export declare const useGridAggregation: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode">) => void;
+export declare const useGridAggregation: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "unstable_dataSource">) => void;

package/hooks/features/aggregation/useGridAggregation.js

@@ -9,6 +9,7 @@ exports.useGridAggregation = exports.aggregationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
 var _gridAggregationUtils = require("./gridAggregationUtils");
 var _createAggregationLookup = require("./createAggregationLookup");
@@ -48,18 +49,29 @@ const useGridAggregation = (apiRef, props) => {
       apiRef,
       getAggregationPosition: props.getAggregationPosition,
       aggregationFunctions: props.aggregationFunctions,
-      aggregationRowsScope: props.aggregationRowsScope
+      aggregationRowsScope: props.aggregationRowsScope,
+      isDataSource: !!props.unstable_dataSource
     });
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       aggregation: (0, _extends2.default)({}, state.aggregation, {
         lookup: aggregationLookup
       })
     }));
-  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope]);
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.unstable_dataSource]);
   const aggregationApi = {
     setAggregationModel
   };
+  const aggregationPrivateApi = {
+    applyAggregation
+  };
   (0, _xDataGridPro.useGridApiMethod)(apiRef, aggregationApi, 'public');
+  (0, _xDataGridPro.useGridApiMethod)(apiRef, aggregationPrivateApi, 'private');
+  const addGetRowsParams = React.useCallback(params => {
+    return (0, _extends2.default)({}, params, {
+      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef)
+    });
+  }, [apiRef]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
 
   /**
    * EVENTS
@@ -69,16 +81,16 @@ const useGridAggregation = (apiRef, props) => {
       rulesOnLastRowHydration,
       rulesOnLastColumnHydration
     } = apiRef.current.caches.aggregation;
-    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
-      columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
-      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
 
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!(0, _gridAggregationUtils.areAggregationRulesEqual)(rulesOnLastRowHydration, aggregationRules)) {
-      apiRef.current.requestPipeProcessorsApplication('hydrateRows');
-      applyAggregation();
+      if (props.unstable_dataSource) {
+        apiRef.current.unstable_dataSource.fetchRows();
+      } else {
+        apiRef.current.requestPipeProcessorsApplication('hydrateRows');
+        applyAggregation();
+      }
     }
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
@@ -86,7 +98,7 @@ const useGridAggregation = (apiRef, props) => {
       apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'filteredRowsSet', applyAggregation);

package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots">) => void;
+export declare const useGridAggregationPreProcessors: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "unstable_dataSource">) => void;

package/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -18,11 +18,7 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
   // that the pre-processor is called it will already have been updated with the current rules.
   const rulesOnLastColumnHydration = React.useRef({});
   const updateAggregatedColumns = React.useCallback(columnsState => {
-    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
-      columnsLookup: columnsState.lookup,
-      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)(columnsState.lookup, (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
     columnsState.orderedFields.forEach(field => {
       const shouldHaveAggregationValue = !!aggregationRules[field];
       const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
@@ -43,13 +39,9 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
     });
     rulesOnLastColumnHydration.current = aggregationRules;
     return columnsState;
-  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   const addGroupFooterRows = React.useCallback(value => {
-    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)({
-      columnsLookup: (0, _xDataGridPro.gridColumnLookupSelector)(apiRef),
-      aggregationModel: (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef),
-      aggregationFunctions: props.aggregationFunctions
-    });
+    const aggregationRules = props.disableAggregation ? {} : (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
     const hasAggregationRule = Object.keys(aggregationRules).length > 0;
 
     // If we did not have any aggregation footer before, and we still don't have any,
@@ -64,20 +56,21 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       hasAggregationRule
     });
-  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.unstable_dataSource]);
   const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
     if (props.disableAggregation || !colDef.aggregable) {
       return columnMenuItems;
     }
     const availableAggregationFunctions = (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
       aggregationFunctions: props.aggregationFunctions,
-      colDef
+      colDef,
+      isDataSource: !!props.unstable_dataSource
     });
     if (availableAggregationFunctions.length === 0) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuAggregationItem'];
-  }, [props.aggregationFunctions, props.disableAggregation]);
+  }, [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
   const stateExportPreProcessing = React.useCallback(prevState => {
     if (props.disableAggregation) {
       return prevState;

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -17,7 +17,7 @@ interface GridColDefWithAggregationWrappers extends GridBaseColDef {
  */
 export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
     column: GridBaseColDef;
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: React.RefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => GridBaseColDef;
 /**

package/hooks/features/cellSelection/gridCellSelectionInterfaces.d.ts

@@ -13,13 +13,13 @@ export interface GridCellSelectionApi {
     isCellSelected: (id: GridRowId, field: GridColDef['field']) => boolean;
     /**
      * Returns an object containing the selection state of the cells.
-     * The keys of the object correpond to the row IDs.
-     * The value of each key is another object whose keys are the fields and values are the selection state.
+     * The keys of the object correspond to the row IDs.
+     * The value of each key is also an object, which has a column field for a key and a boolean value for its selection state.
      * @returns {GridCellSelectionModel} Object containing the selection state of the cells
      */
     getCellSelectionModel: () => GridCellSelectionModel;
     /**
-     * Updates the selected cells to be those passed to the `newModel` argument.
+     * Updates the cell selection model according to the value passed to the `newModel` argument.
      * Any cell already selected will be unselected.
      * @param {GridCellSelectionModel} newModel The cells to select.
      */

package/hooks/features/cellSelection/useGridCellSelection.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const cellSelectionStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'cellSelectionModel' | 'initialState'>>;
-export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "cellSelection" | "cellSelectionModel" | "onCellSelectionModelChange" | "pagination" | "paginationMode" | "ignoreValueFormatterDuringExport" | "clipboardCopyCellDelimiter" | "columnHeaderHeight">) => void;
+export declare const useGridCellSelection: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "cellSelection" | "cellSelectionModel" | "onCellSelectionModelChange" | "pagination" | "paginationMode" | "ignoreValueFormatterDuringExport" | "clipboardCopyCellDelimiter" | "columnHeaderHeight">) => void;

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -26,10 +26,10 @@ const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the s
 const useGridCellSelection = (apiRef, props) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const visibleRows = (0, _internals.useGridVisibleRows)(apiRef, props);
-  const cellWithVirtualFocus = React.useRef();
-  const lastMouseDownCell = React.useRef();
+  const cellWithVirtualFocus = React.useRef(null);
+  const lastMouseDownCell = React.useRef(null);
   const mousePosition = React.useRef(null);
-  const autoScrollRAF = React.useRef();
+  const autoScrollRAF = React.useRef(null);
   const sortedRowIds = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridSortedRowIdsSelector);
   const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridDimensionsSelector);
   const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, props);

package/hooks/features/clipboard/useGridClipboardImport.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import type { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridClipboardImport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;
+export declare const useGridClipboardImport: (apiRef: React.RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -129,7 +129,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/hooks/features/dataSource/cache.d.ts

@@ -0,0 +1,2 @@
+import { GridGetRowsParamsPremium } from './models';
+export declare function getKeyPremium(params: GridGetRowsParamsPremium): string;

package/hooks/features/dataSource/cache.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKeyPremium = getKeyPremium;
+function getKeyPremium(params) {
+  return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.aggregationModel]);
+}

package/hooks/features/dataSource/models.d.ts

@@ -0,0 +1,47 @@
+import type { GridColDef, GridRowId, GridValidRowModel, GridDataSource, GridGetRowsResponse, GridGetRowsParams, GridDataSourceApiBase, GridDataSourcePrivateApi } from '@mui/x-data-grid-pro';
+import type { GridAggregationModel } from '../aggregation/gridAggregationInterfaces';
+export interface GridGetRowsResponsePremium extends GridGetRowsResponse {
+    /**
+     * Row to be used for aggregation footer row.
+     * It must provide the values for the aggregated columns passed in
+     * `GridGetRowsParams.aggregationModel`.
+     */
+    aggregateRow?: GridValidRowModel;
+}
+export interface GridGetRowsParamsPremium extends GridGetRowsParams {
+    aggregationModel?: GridAggregationModel;
+}
+export interface GridDataSourcePremium extends Omit<GridDataSource, 'getRows'> {
+    /**
+     * This method will be called when the grid needs to fetch some rows.
+     * @param {GridGetRowsParamsPremium} params The parameters required to fetch the rows.
+     * @returns {Promise<GridGetRowsResponsePremium>} A promise that resolves to the data of type [GridGetRowsResponsePremium].
+     */
+    getRows(params: GridGetRowsParamsPremium): Promise<GridGetRowsResponsePremium>;
+    /**
+     * Used to get the aggregated value for a parent row.
+     * @param {GridValidRowModel} row The row to extract the aggregated value from.
+     * @param {GridColDef['field']} field The field to extract the aggregated value for.
+     * @returns {string} The aggregated value for a specific aggregated column.
+     */
+    getAggregatedValue?: (row: GridValidRowModel, field: GridColDef['field']) => string;
+}
+export interface GridDataSourceApiBasePremium extends Omit<GridDataSourceApiBase, 'fetchRows'> {
+    /**
+     * Fetches the rows from the server.
+     * If no `parentId` option is provided, it fetches the root rows.
+     * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
+     * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
+     * @param {Partial<GridGetRowsParamsPremium>} params Request parameters override.
+     */
+    fetchRows: (parentId?: GridRowId, params?: Partial<GridGetRowsParamsPremium>) => void;
+}
+export interface GridDataSourceApiPremium {
+    /**
+     * The data source API.
+     */
+    unstable_dataSource: GridDataSourceApiBasePremium;
+}
+export interface GridDataSourcePremiumPrivateApi extends GridDataSourcePrivateApi {
+    resolveGroupAggregation: (groupId: GridRowId, field: string) => any;
+}