@mui/x-data-grid-premium 5.13.1 → 5.14.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.14.0
+
+_Jul 21, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Export `GridBooleanCell` component from data grid (#5537) @cliedeman
+- ⚙️ Improve accessibility of the Export menu (#5486) @nogalpaulina
+- 🌍 Improvements to different locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.14.0` / `@mui/x-data-grid-pro@5.14.0` / `@mui/x-data-grid-premium@5.14.0`
+
+#### Changes
+
+- [DataGrid] Add generics to `GridPreProcessEditCellProps` (#5510) @YunosukeY
+- [DataGrid] Avoid inconsistent state export (#5390) @flaviendelangle
+- [DataGrid] Export `GridBooleanCell` component (#5537) @cliedeman
+- [DataGrid] Fix `date`/`dateTime` edit input font size to match view mode (#5304) @cherniavskii
+- [DataGrid] Fix loading overlay position (#5558) @DanailH
+- [DataGrid] Improve accessibility of the Export menu in the toolbar (#5486) @nogalpaulina
+- [DataGridPremium] Implement Aggregation - not publicly released (#4208) @flaviendelangle
+- [DataGridPremium] Fix crash when exporting all columns to Excel (#5425) @cherniavskii
+- [l10n] Add Traditional Chinese (zh-TW) locale (#5498) @happyincent
+
+### `@mui/x-date-pickers@v5.0.0-beta.2` / `@mui/x-date-picker-pro@5.0.0-beta.2`
+
+#### Changes
+
+- [l10n] Add Norwegian (nb-NO) locale (#5475) @elkebab
+
+### Docs
+
+- [docs] New page presenting the `apiRef` (#5273) @flaviendelangle
+- [docs] Remove blank line @oliviertassinari
+
+### Core
+
+- [core] Add missing comments on zh-TW translation (#5559) @flaviendelangle
+- [core] Polish on the bug issue template (#5525) @oliviertassinari
+- [test] Add more tests related to `isPrintableKey` (#5458) @mnajdova
+
 ## 5.13.1
 
 _Jul 15, 2022_
@@ -1466,7 +1509,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 - [core] Fix `yarn prettier` script (#3292) @oliviertassinari
 - [core] Improve tests for Tree Data (#3366) @flaviendelangle
 - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle
-- [core] Transition to a new StackOverflow tag (#3308) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari
 - [core] Update monorepo (#3370) @flaviendelangle
 - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle
 - [test] Replace `useFakeTimers` (#3323) @m4theushw

package/DataGridPremium/DataGridPremium.js

@@ -275,6 +275,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
+    private_aggregation: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -866,6 +867,52 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     right: PropTypes.arrayOf(PropTypes.string)
   }),
 
+  /**
+   * Aggregation functions available on the grid.
+   * @default GRID_AGGREGATION_FUNCTIONS
+   * @ignore - do not document.
+   */
+  private_aggregationFunctions: PropTypes.object,
+
+  /**
+   * Set the aggregation model of the grid.
+   * @ignore - do not document.
+   */
+  private_aggregationModel: PropTypes.object,
+
+  /**
+   * Rows used to generate the aggregated value.
+   * If `filtered`, the aggregated values will be generated using only the rows currently passing the filtering process.
+   * If `all`, the aggregated values will be generated using all the rows.
+   * @default "filtered"
+   * @ignore - do not document.
+   */
+  private_aggregationRowsScope: PropTypes.oneOf(['all', 'filtered']),
+
+  /**
+   * If `true`, aggregation is disabled.
+   * @default false
+   * @ignore - do not document.
+   */
+  private_disableAggregation: PropTypes.bool,
+
+  /**
+   * Determines the position of an aggregated value.
+   * @param {GridRowTreeNodeConfig | null} groupNode The current group (`null` being the top level group).
+   * @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group will not be aggregated).
+   * @default `(groupNode) => groupNode == null ? 'footer' : 'inline'`
+   * @ignore - do not document.
+   */
+  private_getAggregationPosition: PropTypes.func,
+
+  /**
+   * Callback fired when the row grouping model changes.
+   * @param {GridAggregationModel} model The aggregated columns.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   * @ignore - do not document.
+   */
+  private_onAggregationModelChange: PropTypes.func,
+
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,5 +1,7 @@
 import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
+import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
+import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
 import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
 import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 import { useGridExcelExport } from '../hooks/features/export/useGridExcelExport';
@@ -15,6 +17,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
+  useGridAggregationPreProcessors(apiRef, props);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
 
@@ -25,6 +28,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
    */
 
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
+  useGridInitializeState(aggregationStateInitializer, apiRef, props);
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
@@ -43,6 +47,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
+  useGridAggregation(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -54,7 +59,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/DataGridPremium/useDataGridPremiumProps.js

@@ -2,13 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT } from '@mui/x-data-grid-pro';
-
+import { PRIVATE_GRID_AGGREGATION_FUNCTIONS } from '../hooks/features/aggregation';
 /**
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
  */
+
 export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, {
+  private_disableAggregation: false,
   disableRowGrouping: false,
-  rowGroupingColumnMode: 'single'
+  rowGroupingColumnMode: 'single',
+  private_aggregationFunctions: PRIVATE_GRID_AGGREGATION_FUNCTIONS,
+  private_aggregationRowsScope: 'filtered',
+  private_getAggregationPosition: groupNode => groupNode == null ? 'footer' : 'inline'
 });
 export const useDataGridPremiumProps = inProps => {
   const themedProps = useThemeProps({
@@ -29,9 +34,14 @@ export const useDataGridPremiumProps = inProps => {
     });
     return mergedComponents;
   }, [themedProps.components]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
-    localeText,
-    components,
-    signature: 'DataGridPremium'
-  }), [themedProps, localeText, components]);
+  return React.useMemo(() => {
+    var _themedProps$experime;
+
+    return _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+      private_disableAggregation: themedProps.private_disableAggregation || !((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.private_aggregation),
+      localeText,
+      components,
+      signature: 'DataGridPremium'
+    });
+  }, [themedProps, localeText, components]);
 };

package/components/GridAggregationColumnMenuItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GridColDef } from '@mui/x-data-grid-pro';
+interface GridAggregationColumnMenuItemsProps {
+    column: GridColDef;
+    label: string;
+    availableAggregationFunctions: string[];
+}
+export declare const GridAggregationColumnMenuItem: (props: GridAggregationColumnMenuItemsProps) => JSX.Element;
+export {};

package/components/GridAggregationColumnMenuItem.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridSelector } from '@mui/x-data-grid-pro';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import { unstable_useId as useId } from '@mui/material/utils';
+import Select from '@mui/material/Select';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { canColumnHaveAggregationFunction, getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils';
+import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const GridAggregationColumnMenuItem = props => {
+  const {
+    column,
+    label,
+    availableAggregationFunctions
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const id = useId();
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const selectedAggregationRule = React.useMemo(() => {
+    if (!column || !aggregationModel[column.field]) {
+      return '';
+    }
+
+    const aggregationFunctionName = aggregationModel[column.field];
+
+    if (canColumnHaveAggregationFunction({
+      column,
+      aggregationFunctionName,
+      aggregationFunction: rootProps.private_aggregationFunctions[aggregationFunctionName]
+    })) {
+      return aggregationFunctionName;
+    }
+
+    return '';
+  }, [rootProps.private_aggregationFunctions, aggregationModel, column]);
+
+  const handleAggregationItemChange = event => {
+    const newAggregationItem = event.target.value || undefined;
+    const currentModel = gridAggregationModelSelector(apiRef);
+
+    const _column$field = column.field,
+          otherColumnItems = _objectWithoutPropertiesLoose(currentModel, [_column$field].map(_toPropertyKey));
+
+    const newModel = newAggregationItem == null ? otherColumnItems : _extends({}, otherColumnItems, {
+      [column.field]: newAggregationItem
+    });
+    apiRef.current.private_setAggregationModel(newModel);
+    apiRef.current.hideColumnMenu();
+  };
+
+  return /*#__PURE__*/_jsx(MenuItem, {
+    disableRipple: true,
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      size: "small",
+      sx: {
+        width: 150
+      },
+      children: [/*#__PURE__*/_jsx(InputLabel, {
+        id: `${id}-label`,
+        children: label
+      }), /*#__PURE__*/_jsxs(Select, {
+        labelId: `${id}-label`,
+        id: `${id}-input`,
+        value: selectedAggregationRule,
+        label: label,
+        onChange: handleAggregationItemChange,
+        onBlur: e => e.stopPropagation(),
+        fullWidth: true,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "",
+          children: "..."
+        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(MenuItem, {
+          value: aggFunc,
+          children: getAggregationFunctionLabel({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: aggFunc,
+              aggregationFunction: rootProps.private_aggregationFunctions[aggFunc]
+            }
+          })
+        }, aggFunc))]
+      })]
+    })
+  });
+};

package/components/GridAggregationHeader.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GridColumnHeaderParams } from '@mui/x-data-grid';
+declare const GridAggregationHeader: (props: GridColumnHeaderParams) => JSX.Element | null;
+export { GridAggregationHeader };

package/components/GridAggregationHeader.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass, gridClasses, GridColumnHeaderTitle, gridDensityHeaderHeightSelector, useGridSelector } from '@mui/x-data-grid';
+import { getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridAggregationHeaderRoot = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'AggregationColumnHeader',
+  overridesResolver: (_, styles) => styles.aggregationColumnHeader
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  [`&.${gridClasses['aggregationColumnHeader--alignRight']}`]: {
+    alignItems: 'flex-end'
+  },
+  [`&.${gridClasses['aggregationColumnHeader--alignCenter']}`]: {
+    alignItems: 'center'
+  }
+});
+const GridAggregationFunctionLabel = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AggregationColumnHeaderLabel',
+  overridesResolver: (_, styles) => styles.aggregationColumnHeaderLabel
+})(({
+  theme
+}) => {
+  return {
+    fontSize: theme.typography.caption.fontSize,
+    lineHeight: theme.typography.caption.fontSize,
+    marginTop: `calc(-2px - ${theme.typography.caption.fontSize})`,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.primary.dark,
+    textTransform: 'uppercase'
+  };
+});
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    colDef
+  } = ownerState;
+  const slots = {
+    root: ['aggregationColumnHeader', colDef.headerAlign === 'left' && 'aggregationColumnHeader--alignLeft', colDef.headerAlign === 'center' && 'aggregationColumnHeader--alignCenter', colDef.headerAlign === 'right' && 'aggregationColumnHeader--alignRight'],
+    aggregationLabel: ['aggregationColumnHeaderLabel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridAggregationHeader = props => {
+  var _colDef$headerName;
+
+  const {
+    colDef,
+    aggregation
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const ownerState = {
+    classes: rootProps.classes,
+    headerHeight,
+    colDef
+  };
+  const classes = useUtilityClasses(ownerState);
+
+  if (!aggregation) {
+    return null;
+  }
+
+  const aggregationLabel = getAggregationFunctionLabel({
+    apiRef,
+    aggregationRule: aggregation.aggregationRule
+  });
+  return /*#__PURE__*/_jsxs(GridAggregationHeaderRoot, {
+    ownerState: ownerState,
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+      label: (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field,
+      description: colDef.description,
+      columnWidth: colDef.computedWidth
+    }), /*#__PURE__*/_jsx(GridAggregationFunctionLabel, {
+      ownerState: ownerState,
+      className: classes.aggregationLabel,
+      children: aggregationLabel
+    })]
+  });
+};
+
+export { GridAggregationHeader };

package/components/GridExcelExportMenuItem.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["hideMenu", "options"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -6,17 +9,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
 const GridExcelExportMenuItem = props => {
   const apiRef = useGridApiContext();
+
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/_jsx(MenuItem, {
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsExcel(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
-  });
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {

package/components/GridFooterCell.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+interface GridFooterCellProps extends GridRenderCellParams {
+    sx?: SxProps<Theme>;
+}
+declare const GridFooterCell: (props: GridFooterCellProps) => JSX.Element;
+export { GridFooterCell };

package/components/GridFooterCell.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "getValue", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
+import * as React from 'react';
+import { getDataGridUtilityClass } from '@mui/x-data-grid';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridFooterCellRoot = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'FooterCell',
+  overridesResolver: (_, styles) => styles.footerCell
+})(({
+  theme
+}) => ({
+  fontWeight: theme.typography.fontWeightMedium,
+  color: theme.palette.primary.dark
+}));
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridFooterCell = props => {
+  const {
+    formattedValue
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridFooterCellRoot, _extends({
+    ownerState: ownerState,
+    className: classes.root
+  }, other, {
+    children: formattedValue
+  }));
+};
+
+export { GridFooterCell };

package/components/GridGroupingColumnFooterCell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+declare const GridGroupingColumnFooterCell: (props: GridRenderCellParams) => JSX.Element;
+export { GridGroupingColumnFooterCell };

package/components/GridGroupingColumnFooterCell.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { GridFooterCell } from './GridFooterCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridGroupingColumnFooterCell = props => {
+  const {
+    rowNode
+  } = props;
+  const rootProps = useGridRootProps();
+  let marginLeft;
+
+  if (rowNode.parent == null) {
+    marginLeft = 0;
+  } else if (rootProps.rowGroupingColumnMode === 'multiple') {
+    marginLeft = 2;
+  } else {
+    marginLeft = rowNode.depth * 2;
+  }
+
+  return /*#__PURE__*/_jsx(GridFooterCell, _extends({
+    sx: {
+      ml: marginLeft
+    }
+  }, props));
+};
+
+export { GridGroupingColumnFooterCell };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridAggregationFunction, GridAggregationLookup } from './gridAggregationInterfaces';
+export declare const createAggregationLookup: ({ apiRef, aggregationFunctions, aggregationRowsScope, getAggregationPosition, }: {
+    apiRef: React.MutableRefObject<GridApiPremium>;
+    aggregationFunctions: Record<string, GridAggregationFunction>;
+    aggregationRowsScope: DataGridPremiumProcessedProps['private_aggregationRowsScope'];
+    getAggregationPosition: DataGridPremiumProcessedProps['private_getAggregationPosition'];
+}) => GridAggregationLookup;

package/hooks/features/aggregation/createAggregationLookup.js

@@ -0,0 +1,128 @@
+import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowIdsSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
+import { getAggregationRules } from './gridAggregationUtils';
+import { gridAggregationModelSelector } from './gridAggregationSelectors';
+
+const getAggregationCellValue = ({
+  apiRef,
+  groupId,
+  field,
+  aggregationFunction,
+  aggregationRowsScope
+}) => {
+  const rowTree = gridRowTreeSelector(apiRef);
+  const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  let rowIds; // TODO: Add custom root id
+
+  if (groupId === '') {
+    rowIds = gridRowIdsSelector(apiRef).filter(rowId => !rowTree[rowId].isAutoGenerated);
+  } else {
+    rowIds = apiRef.current.getRowGroupChildren({
+      groupId
+    });
+  }
+
+  const values = [];
+  rowIds.forEach(rowId => {
+    if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
+      return;
+    }
+
+    values.push(apiRef.current.getCellValue(rowId, field));
+  });
+  return aggregationFunction.apply({
+    values
+  });
+};
+
+const getGroupAggregatedValue = ({
+  groupId,
+  apiRef,
+  aggregationRowsScope,
+  aggregatedFields,
+  aggregationRules,
+  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
+      })
+    };
+  }
+
+  return groupAggregationLookup;
+};
+
+export const createAggregationLookup = ({
+  apiRef,
+  aggregationFunctions,
+  aggregationRowsScope,
+  getAggregationPosition
+}) => {
+  const aggregationRules = getAggregationRules({
+    columnsLookup: gridColumnLookupSelector(apiRef),
+    aggregationModel: gridAggregationModelSelector(apiRef),
+    aggregationFunctions
+  });
+  const aggregatedFields = Object.keys(aggregationRules);
+
+  if (aggregatedFields.length === 0) {
+    return {};
+  }
+
+  const aggregationLookup = {};
+  const rowIds = gridRowIdsSelector(apiRef);
+  const rowTree = gridRowTreeSelector(apiRef);
+
+  for (let i = 0; i < rowIds.length; i += 1) {
+    var _node$children;
+
+    const rowId = rowIds[i];
+    const node = rowTree[rowId];
+    const hasChildren = (_node$children = node.children) == null ? void 0 : _node$children.some(childId => {
+      var _rowTree$childId$posi;
+
+      return ((_rowTree$childId$posi = rowTree[childId].position) != null ? _rowTree$childId$posi : 'body') === 'body';
+    });
+
+    if (hasChildren) {
+      const position = getAggregationPosition(node);
+
+      if (position != null) {
+        aggregationLookup[rowId] = getGroupAggregatedValue({
+          groupId: rowId,
+          apiRef,
+          aggregatedFields,
+          aggregationRowsScope,
+          aggregationRules,
+          position
+        });
+      }
+    }
+  } // TODO: Add custom root id
+
+
+  const position = getAggregationPosition(null);
+
+  if (position != null) {
+    aggregationLookup[''] = getGroupAggregatedValue({
+      groupId: '',
+      apiRef,
+      aggregatedFields,
+      aggregationRowsScope,
+      aggregationRules,
+      position
+    });
+  }
+
+  return aggregationLookup;
+};