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

package/CHANGELOG.md

@@ -3,6 +3,152 @@
 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_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏️ Enter edit mode when pasting in a cell with Ctrl+V (Cmd+V on macOS) (#5405) @alexfauquette
+- 🌍 Many improvements to the locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.13.1` / `@mui/x-data-grid-pro@v5.13.1` / `@mui/x-data-grid-premium@v5.13.1`
+
+#### Changes
+
+- [DataGrid] Fix blank space when using dynamic row height with pagination (#5315) @m4theushw
+- [DataGrid] Start editing with uppercase letter and Ctrl+V (#5405) @alexfauquette
+- [DataGrid] Fix some filters being removed from filter model on filter panel open (#5403) @cherniavskii
+- [DataGridPro] Improve pinned column headers accessibility (#5370) @cherniavskii
+- [l10n] Improve Dutch (nl-NL) locale (#5464) @developenguin
+- [l10n] Improve French (fr-FR) locale (#3211) (#5420) @Zenoo
+- [l10n] Improve German (de-DE) locale (#5448) @sebastianfrey
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#5394) @andrepxa
+- [l10n] Improve Romanian (ro-RO) locale (#5449) @rolule
+
+### `@mui/x-date-pickers@v5.0.0-beta.1` / `@mui/x-date-picker-pro@5.0.0-beta.1`
+
+#### Changes
+
+- [pickers] Add Italian (it-IT) locale (#5467) @felixh10r
+- [pickers] Add Spanish (es-ES) locale (#5468) @felixh10r
+- [pickers] Improve French (fr-FR) locale (#5446) @Zenoo
+- [pickers] Improve German (de-DE) locale (#5447) @sebastianfrey
+
+### Docs
+
+- [docs] Fix typo in the sorting page (#5431) @JosephMarinier
+- [docs] Fix description for "Striped rows" example (#5432) @lindapaiste
+- [docs] Make a clear difference between the license and license key (#5316) @oliviertassinari
+- [docs] Update pickers README files (#5456) @cherniavskii
+- [docs] Clarify the scope of support for MUI X (#5423) @joserodolfofreitas
+
+### Core
+
+- [core] Add technical support link to \_redirects (#5428) @joserodolfofreitas
+- [core] Improve GitHub bug reproduction template (#5067) @joserodolfofreitas
+- [core] Include playground pages in tsconfig (#5367) @cherniavskii
+- [core] Sort keys like in material-ui @oliviertassinari
+- [test] Wait for flags to load on regression tests (#5473) @m4theushw
+
+## 5.13.0
+
+_Jul 7, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` are now in beta!
+
+- ✨ Allow detail panel's height to match its content (#5163) @m4theushw
+
+  ```tsx
+  <DataGridPro getDetailPanelHeight={() => 'auto'} />
+  ```
+
+- 🌍 Add Romanian (ro-RO) locale on the data grid (#5345) @rolule
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.13.0` / `@mui/x-data-grid-pro@v5.13.0` / `@mui/x-data-grid-premium@v5.13.0`
+
+#### Changes
+
+- [DataGrid] Allows to customize variant of value input in filter panel (#4826) @alexfauquette
+- [DataGrid] Add Romanian (ro-RO) locale (#5345) @rolule
+- [DataGrid] Export Norwegian (nb-NO) locale (#5407) @cherniavskii
+- [DataGrid] Fix broken "start editing" integration with Japanese (#5414) @mnajdova
+- [DataGrid] Fix "stop editing" integration with IME e.g. Japanese (#5257) @Gumichocopengin8
+- [DataGrid] Fix dimensions computation with `autoHeight` and scroll x (#5401) @flaviendelangle
+- [DataGrid] Improve Slovak (sk-SK) locale (#5332) @msidlo
+- [DataGrid] Mention Premium plan in error messages and docs warnings (#5328) @cherniavskii
+- [DataGrid] Remove trailing spaces in filter input (#5279) @alexfauquette
+- [DataGridPro] Allow to infer detail panel height from content (#5163) @m4theushw
+- [DataGridPro] Fix the depth of nodes when switching from a non-flat tree to a flat tree (#5362) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0-beta.0` / `@mui/x-date-picker-pro@5.0.0-beta.0`
+
+#### Changes
+
+- [DateRangePicker] Fix keyboard selection (#5265) @alexfauquette
+- [DayPicker] Remove empty space at the bottom of the day view (#5073) @flaviendelangle
+- [pickers] Add missing type dependencies (#5331) @Methuselah96
+- [pickers] Pass the generics to the components in the theme augmentation (#5199) @toruticas
+
+### Docs
+
+- [docs] Explain how to use hooks inside a cell renderer (#5158) @flaviendelangle
+- [docs] Fix server-side pagination demo (#5361) @cherniavskii
+- [docs] Fix typo in the quick filter docs (#5313) @alexfauquette
+- [docs] Improve the "Getting started" page (#5293) @alexfauquette
+- [docs] New page for the pickers action bar customization (#5267) @flaviendelangle
+- [docs] Revise and split up "Overview" page into "Introduction" (#4692) @samuelsycamore
+- [docs] Use `useKeepGroupedColumnsHiddren` from the grid package on remaining demo (#5382) @flaviendelangle
+
 ## v5.12.3
 
 _Jun 23, 2022_
@@ -1363,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
   }),
 
@@ -323,7 +324,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Function that returns the height of the row detail panel.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {number} The height in pixels.
+   * @returns {number | string} The height in pixels or "auto" to use the content height.
    * @default "() => 500"
    */
   getDetailPanelHeight: PropTypes.func,
@@ -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;