@mui/x-data-grid-premium 8.0.0-alpha.1 → 8.0.0-alpha.11

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;
@@ -119,7 +123,7 @@ const addFooterRows = ({
     }
   };
   const updateRootGroupFooter = groupNode => {
-    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer' && groupNode.children.length > 0;
     if (shouldHaveFooter) {
       const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = (0, _internals2.addPinnedRow)({

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 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: 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");
@@ -40,7 +41,6 @@ const useGridAggregation = (apiRef, props) => {
     const currentModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
     if (currentModel !== model) {
       apiRef.current.setState((0, _gridAggregationUtils.mergeStateWithAggregationModel)(model));
-      apiRef.current.forceUpdate();
     }
   }, [apiRef]);
   const applyAggregation = React.useCallback(() => {
@@ -48,18 +48,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,24 +80,23 @@ 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
     if (!(0, _gridAggregationUtils.areAggregationRulesEqual)(rulesOnLastColumnHydration, aggregationRules)) {
-      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 { RefObject } from '@mui/x-internals/types';
 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: 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];
@@ -42,14 +38,11 @@ const useGridAggregationPreProcessors = (apiRef, props) => {
       columnsState.lookup[field] = column;
     });
     rulesOnLastColumnHydration.current = aggregationRules;
+    apiRef.current.caches.aggregation.rulesOnLastColumnHydration = 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 +57,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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridFilterOperator } from '@mui/x-data-grid-pro';
 import { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
@@ -17,7 +18,7 @@ interface GridColDefWithAggregationWrappers extends GridBaseColDef {
  */
 export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
     column: GridBaseColDef;
-    apiRef: React.MutableRefObject<GridApiPremium>;
+    apiRef: RefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => GridBaseColDef;
 /**
@@ -60,7 +61,7 @@ export declare const unwrapColumnFromAggregation: ({ column, }: {
     hideSortIcons?: boolean;
     disableColumnMenu?: boolean;
     filterable?: boolean;
-    filterOperators?: readonly GridFilterOperator<import("@mui/x-data-grid").GridValidRowModel, any, any>[] | undefined;
+    filterOperators?: readonly GridFilterOperator<import("@mui/x-data-grid").GridValidRowModel, any, any, any>[] | undefined;
     getApplyQuickFilterFn?: import("@mui/x-data-grid").GetApplyQuickFilterFn<import("@mui/x-data-grid").GridValidRowModel, any> | undefined;
     disableReorder?: boolean;
     disableExport?: boolean;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 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: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "cellSelection" | "cellSelectionModel" | "onCellSelectionModelChange" | "pagination" | "paginationMode" | "ignoreValueFormatterDuringExport" | "clipboardCopyCellDelimiter" | "columnHeaderHeight">) => void;

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -25,13 +25,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 sortedRowIds = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridSortedRowIdsSelector);
-  const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridDimensionsSelector);
+  const autoScrollRAF = React.useRef(null);
   const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, props);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
@@ -85,6 +82,7 @@ const useGridCellSelection = (apiRef, props) => {
       finalEndColumnIndex = startColumnIndex;
     }
     const visibleColumns = apiRef.current.getVisibleColumns();
+    const visibleRows = (0, _internals.getVisibleRows)(apiRef);
     const rowsInRange = visibleRows.rows.slice(finalStartRowIndex, finalEndRowIndex + 1);
     const columnsInRange = visibleColumns.slice(finalStartColumnIndex, finalEndColumnIndex + 1);
     const newModel = keepOtherSelected ? (0, _extends2.default)({}, apiRef.current.getCellSelectionModel()) : {};
@@ -97,10 +95,9 @@ const useGridCellSelection = (apiRef, props) => {
       }, {});
     });
     apiRef.current.setCellSelectionModel(newModel);
-  }, [apiRef, visibleRows.rows]);
+  }, [apiRef]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
-    const idToIdLookup = (0, _xDataGridPro.gridRowsDataRowIdToIdLookupSelector)(apiRef);
     const currentVisibleRows = (0, _internals.getVisibleRows)(apiRef, props);
     const sortedEntries = currentVisibleRows.rows.reduce((result, row) => {
       if (row.id in selectionModel) {
@@ -112,7 +109,7 @@ const useGridCellSelection = (apiRef, props) => {
       selectedCells.push(...Object.entries(fields).reduce((selectedFields, [field, isSelected]) => {
         if (isSelected) {
           selectedFields.push({
-            id: idToIdLookup[id],
+            id,
             field
           });
         }
@@ -196,6 +193,7 @@ const useGridCellSelection = (apiRef, props) => {
       if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
         return;
       }
+      const dimensions = (0, _xDataGridPro.gridDimensionsSelector)(apiRef.current.state);
       const {
         x: mouseX,
         y: mouseY
@@ -238,7 +236,7 @@ const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef, dimensions, totalHeaderHeight]);
+  }, [apiRef, totalHeaderHeight]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -255,6 +253,7 @@ const useGridCellSelection = (apiRef, props) => {
     if (!virtualScrollerRect) {
       return;
     }
+    const dimensions = (0, _xDataGridPro.gridDimensionsSelector)(apiRef.current.state);
     const {
       x,
       y
@@ -280,7 +279,7 @@ const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight]);
   const handleCellClick = (0, _useEventCallback.default)((params, event) => {
     const {
       id,
@@ -340,6 +339,7 @@ const useGridCellSelection = (apiRef, props) => {
     } else if (event.key === 'ArrowLeft') {
       endColumnIndex -= 1;
     }
+    const visibleRows = (0, _internals.getVisibleRows)(apiRef);
     if (endRowIndex < 0 || endRowIndex >= visibleRows.rows.length) {
       return;
     }
@@ -392,6 +392,7 @@ const useGridCellSelection = (apiRef, props) => {
     id,
     field
   }) => {
+    const visibleRows = (0, _internals.getVisibleRows)(apiRef);
     if (!visibleRows.range || !apiRef.current.isCellSelected(id, field)) {
       return classes;
     }
@@ -440,7 +441,7 @@ const useGridCellSelection = (apiRef, props) => {
       newClasses.push(_xDataGridPro.gridClasses['cell--rangeRight']);
     }
     return newClasses;
-  }, [apiRef, visibleRows.range, visibleRows.rows]);
+  }, [apiRef]);
   const canUpdateFocus = React.useCallback((initialValue, {
     event,
     cell
@@ -461,6 +462,7 @@ const useGridCellSelection = (apiRef, props) => {
     if (apiRef.current.getSelectedCellsAsArray().length <= 1) {
       return value;
     }
+    const sortedRowIds = (0, _xDataGridPro.gridSortedRowIdsSelector)(apiRef.current.state);
     const cellSelectionModel = apiRef.current.getCellSelectionModel();
     const unsortedSelectedRowIds = Object.keys(cellSelectionModel);
     const sortedSelectedRowIds = sortedRowIds.filter(id => unsortedSelectedRowIds.includes(`${id}`));
@@ -486,7 +488,7 @@ const useGridCellSelection = (apiRef, props) => {
       return acc === '' ? rowString : [acc, rowString].join('\r\n');
     }, '');
     return copyData;
-  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds]);
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'isCellSelected', checkIfCellIsSelected);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'cellClassName', addClassesToCells);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'canUpdateFocus', canUpdateFocus);

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 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: 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;
+}

package/hooks/features/dataSource/models.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+export declare const useGridDataSourcePremium: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => void;

package/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSourcePremium = 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 _cache = require("./cache");
+const options = {
+  cacheOptions: {
+    getKey: _cache.getKeyPremium
+  }
+};
+const useGridDataSourcePremium = (apiRef, props) => {
+  const {
+    api,
+    strategyProcessor,
+    events
+  } = (0, _internals.useGridDataSourceBase)(apiRef, props, options);
+  const aggregateRowRef = React.useRef({});
+  const processDataSourceRows = React.useCallback(({
+    params,
+    response
+  }, applyRowHydration) => {
+    if (response.aggregateRow) {
+      aggregateRowRef.current = response.aggregateRow;
+    }
+    if (Object.keys(params.aggregationModel || {}).length > 0) {
+      if (applyRowHydration) {
+        apiRef.current.requestPipeProcessorsApplication('hydrateRows');
+      }
+      apiRef.current.applyAggregation();
+    }
+    return {
+      params,
+      response
+    };
+  }, [apiRef]);
+  const resolveGroupAggregation = React.useCallback((groupId, field) => {
+    if (groupId === _xDataGridPro.GRID_ROOT_GROUP_ID) {
+      return props.unstable_dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
+    }
+    const row = apiRef.current.getRow(groupId);
+    return props.unstable_dataSource?.getAggregatedValue?.(row, field);
+  }, [apiRef, props.unstable_dataSource]);
+  const privateApi = (0, _extends2.default)({}, api.private, {
+    resolveGroupAggregation
+  });
+  (0, _xDataGridPro.useGridApiMethod)(apiRef, api.public, 'public');
+  (0, _xDataGridPro.useGridApiMethod)(apiRef, privateApi, 'private');
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, strategyProcessor.strategyName, strategyProcessor.group, strategyProcessor.processor);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'processDataSourceRows', processDataSourceRows);
+  Object.entries(events).forEach(([event, handler]) => {
+    (0, _xDataGridPro.useGridApiEventHandler)(apiRef, event, handler);
+  });
+};
+exports.useGridDataSourcePremium = useGridDataSourcePremium;

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -1,4 +1,5 @@
 import type * as Excel from 'exceljs';
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
 import { GridStateColDef, GridColumnGroupLookup } from '@mui/x-data-grid/internals';
 import { ColumnsStylesInterface, GridExcelExportOptions } from '../gridExcelExportInterface';
@@ -18,7 +19,7 @@ interface SerializedRow {
  * actual rendered columns.
  * The caller of this function MUST call `resetColSpan()` before and after usage.
  */
-export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: React.MutableRefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
+export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: RefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
     [field: string]: {
         address: string;
     };
@@ -53,7 +54,7 @@ interface BuildExcelOptions extends Pick<GridExcelExportOptions, 'exceljsPreProc
     rowIds: GridRowId[];
     columnsStyles?: ColumnsStylesInterface;
 }
-export declare function buildExcel(options: BuildExcelOptions, apiRef: React.MutableRefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
+export declare function buildExcel(options: BuildExcelOptions, apiRef: RefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
 export interface ExcelExportInitEvent {
     serializedColumns: SerializedColumns;
     serializedRows: SerializedRow[];

package/hooks/features/export/useGridExcelExport.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProps } from '../../../models/dataGridPremiumProps';
 /**
@@ -8,4 +8,4 @@ import { DataGridPremiumProps } from '../../../models/dataGridPremiumProps';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridExcelExport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;
+export declare const useGridExcelExport: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;