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

package/legacy/hooks/features/export/serializer/excelSerializer.js

@@ -78,7 +78,8 @@ var serializeRow = function serializeRow(id, columns, api, defaultValueOptionsFo
   api.unstable_calculateColSpan({
     rowId: id,
     minFirstColumn: 0,
-    maxLastColumn: columns.length - 1
+    maxLastColumn: columns.length,
+    columns: columns
   });
   columns.forEach(function (column, colIndex) {
     var colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);

package/legacy/hooks/features/index.js

@@ -1,3 +1,4 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
+export * from './aggregation';
 export * from './rowGrouping';
 export * from './export';

package/legacy/hooks/features/rowGrouping/createGroupingColDef.js

@@ -5,6 +5,7 @@ var _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
     _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
 import * as React from 'react';
 import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
+import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
 import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
 import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
 import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
@@ -155,7 +156,12 @@ export var createGroupingColDefForOneGroupingCriteria = function createGroupingC
   var commonProperties = {
     width: Math.max(((_groupedByColDef$widt = groupedByColDef.width) != null ? _groupedByColDef$widt : GRID_STRING_COL_DEF.width) + 40, (_leafColDef$width = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width : 0),
     renderCell: function renderCell(params) {
-      // Render leaves
+      // Render footer
+      if (params.rowNode.position === 'footer') {
+        return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
+      } // Render leaves
+
+
       if (params.rowNode.groupingField == null) {
         if (leafColDef) {
           var leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
@@ -254,7 +260,12 @@ export var createGroupingColDefForAllGroupingCriteria = function createGroupingC
       return ((_columnsLookup$field$ = columnsLookup[field].width) != null ? _columnsLookup$field$ : GRID_STRING_COL_DEF.width) + 40;
     })).concat([(_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0])),
     renderCell: function renderCell(params) {
-      // Render the leaves
+      // Render footer
+      if (params.rowNode.position === 'footer') {
+        return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
+      } // Render the leaves
+
+
       if (params.rowNode.groupingField == null) {
         if (leafColDef) {
           var leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {

package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -81,13 +81,17 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
 
+    if (node.footerId != null) {
+      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+
     if (!shouldPassFilters) {
       return 0;
     }
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (!node.children) {
+    if (!node.children && !node.isAutoGenerated) {
       return filteredDescendantCount + 1;
     }
 

package/legacy/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import Divider from '@mui/material/Divider';
+import MuiDivider from '@mui/material/Divider';
 import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
@@ -9,6 +9,15 @@ import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroup
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
 import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+var Divider = function Divider() {
+  return /*#__PURE__*/_jsx(MuiDivider, {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  });
+};
+
 export var rowGroupingStateInitializer = function rowGroupingStateInitializer(state, props, apiRef) {
   var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
 
@@ -28,6 +37,8 @@ export var rowGroupingStateInitializer = function rowGroupingStateInitializer(st
  */
 
 export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
+  var _props$initialState3, _props$initialState3$;
+
   apiRef.current.unstable_registerControlState({
     stateId: 'rowGrouping',
     propModel: props.rowGroupingModel,
@@ -94,16 +105,16 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var addColumnMenuButtons = React.useCallback(function (initialValue, columns) {
+  var addColumnMenuButtons = React.useCallback(function (initialValue, column) {
     if (props.disableRowGrouping) {
       return initialValue;
     }
 
     var menuItems;
 
-    if (isGroupingColumn(columns.field)) {
+    if (isGroupingColumn(column.field)) {
       menuItems = /*#__PURE__*/_jsx(GridRowGroupingColumnMenuItems, {});
-    } else if (columns.groupable) {
+    } else if (column.groupable) {
       menuItems = /*#__PURE__*/_jsx(GridRowGroupableColumnMenuItems, {});
     } else {
       menuItems = null;
@@ -115,14 +126,17 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
 
     return [].concat(_toConsumableArray(initialValue), [/*#__PURE__*/_jsx(Divider, {}), menuItems]);
   }, [props.disableRowGrouping]);
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
-    if (props.disableRowGrouping) {
-      return prevState;
-    }
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
+    var _props$initialState2, _props$initialState2$;
 
     var rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
+    var shouldExportRowGroupingModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.rowGroupingModel != null || // Always export if the model has been initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.rowGrouping) == null ? void 0 : _props$initialState2$.model) != null || // Export if the model is not empty
+    Object.keys(rowGroupingModelToExport).length > 0;
 
-    if (rowGroupingModelToExport.length === 0) {
+    if (!shouldExportRowGroupingModel) {
       return prevState;
     }
 
@@ -131,7 +145,7 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
         model: rowGroupingModelToExport
       }
     });
-  }, [apiRef, props.disableRowGrouping]);
+  }, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3$.model]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.12.3
+/** @license MUI v5.14.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/typeOverloads/index.js

@@ -1,2 +1,2 @@
 import '@mui/x-data-grid-pro/typeOverloads';
-import './modules';
+export * from './modules';

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY1NjAyMTYwMDAwMA==";
+  var releaseInfo = "MTY1ODQ0MDgwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/models/dataGridPremiumProps.d.ts

@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { GridCallbackDetails, GridValidRowModel } from '@mui/x-data-grid-pro';
+import { GridCallbackDetails, GridValidRowModel, GridRowTreeNodeConfig } from '@mui/x-data-grid-pro';
 import { GridExperimentalProFeatures, DataGridProPropsWithDefaultValue, DataGridProPropsWithoutDefaultValue, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing } from '@mui/x-data-grid-pro/internals';
 import type { GridRowGroupingModel } from '../hooks/features/rowGrouping';
+import type { GridAggregationModel, GridAggregationFunction, GridAggregationPosition } from '../hooks/features/aggregation';
 import { GridInitialStatePremium } from './gridStatePremium';
 import { GridApiPremium } from './gridApiPremium';
 export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
+    /**
+     * Enables the aggregation feature.
+     */
+    private_aggregation: boolean;
 }
 /**
  * The props users can give to the `DataGridProProps` component.
@@ -28,6 +33,12 @@ export declare type DataGridPremiumForcedPropsKey = 'signature';
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
  */
 export interface DataGridPremiumPropsWithDefaultValue extends DataGridProPropsWithDefaultValue {
+    /**
+     * If `true`, aggregation is disabled.
+     * @default false
+     * @ignore - do not document.
+     */
+    private_disableAggregation: boolean;
     /**
      * If `true`, the row grouping is disabled.
      * @default false
@@ -39,6 +50,28 @@ export interface DataGridPremiumPropsWithDefaultValue extends DataGridProPropsWi
      * @default 'single'
      */
     rowGroupingColumnMode: 'single' | 'multiple';
+    /**
+     * Aggregation functions available on the grid.
+     * @default GRID_AGGREGATION_FUNCTIONS
+     * @ignore - do not document.
+     */
+    private_aggregationFunctions: Record<string, GridAggregationFunction>;
+    /**
+     * 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: 'filtered' | 'all';
+    /**
+     * 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: (groupNode: GridRowTreeNodeConfig | null) => GridAggregationPosition | null;
 }
 export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridProPropsWithoutDefaultValue<R>, 'initialState' | 'apiRef'> {
     /**
@@ -61,4 +94,16 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onRowGroupingModelChange?: (model: GridRowGroupingModel, details: GridCallbackDetails) => void;
+    /**
+     * Set the aggregation model of the grid.
+     * @ignore - do not document.
+     */
+    private_aggregationModel?: GridAggregationModel;
+    /**
+     * 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?: (model: GridAggregationModel, details: GridCallbackDetails) => void;
 }

package/models/gridApiPremium.d.ts

@@ -1,6 +1,6 @@
 import { GridApiCommon, GridStateApi, GridStatePersistenceApi, GridColumnPinningApi, GridDetailPanelApi } from '@mui/x-data-grid-pro';
 import { GridInitialStatePremium, GridStatePremium } from './gridStatePremium';
-import type { GridRowGroupingApi, GridExcelExportApi } from '../hooks';
+import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from '../hooks';
 declare type GridStateApiUntyped = {
     [key in keyof (GridStateApi<any> & GridStatePersistenceApi<any>)]: any;
 };
@@ -8,6 +8,6 @@ declare type GridStateApiUntyped = {
  * The api of `DataGridPremium`.
  * TODO: Do not redefine manually the pro features
  */
-export interface GridApiPremium extends Omit<GridApiCommon, keyof GridStateApiUntyped>, GridStateApi<GridStatePremium>, GridStatePersistenceApi<GridInitialStatePremium>, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi {
+export interface GridApiPremium extends Omit<GridApiCommon, keyof GridStateApiUntyped>, GridStateApi<GridStatePremium>, GridStatePersistenceApi<GridInitialStatePremium>, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi {
 }
 export {};

package/models/gridStatePremium.d.ts

@@ -1,14 +1,16 @@
 import { GridInitialState as GridInitialStatePro, GridState as GridStatePro } from '@mui/x-data-grid-pro';
-import type { GridRowGroupingState, GridRowGroupingInitialState } from '../hooks';
+import type { GridRowGroupingState, GridRowGroupingInitialState, GridAggregationState, GridAggregationInitialState } from '../hooks';
 /**
  * The state of `DataGridPremium`.
  */
 export interface GridStatePremium extends GridStatePro {
     rowGrouping: GridRowGroupingState;
+    private_aggregation: GridAggregationState;
 }
 /**
  * The initial state of `DataGridPremium`.
  */
 export interface GridInitialStatePremium extends GridInitialStatePro {
     rowGrouping?: GridRowGroupingInitialState;
+    private_aggregation?: GridAggregationInitialState;
 }

package/modern/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/modern/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';
@@ -13,6 +15,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.
 
@@ -23,6 +26,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);
@@ -41,6 +45,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);
@@ -52,7 +57,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   const useGridEditing = props.experimentalFeatures?.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/modern/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({
@@ -30,6 +35,7 @@ export const useDataGridPremiumProps = inProps => {
     return mergedComponents;
   }, [themedProps.components]);
   return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+    private_disableAggregation: themedProps.private_disableAggregation || !themedProps.experimentalFeatures?.private_aggregation,
     localeText,
     components,
     signature: 'DataGridPremium'

package/modern/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/modern/components/GridAggregationHeader.js

@@ -0,0 +1,92 @@
+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 => {
+  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.field,
+      description: colDef.description,
+      columnWidth: colDef.computedWidth
+    }), /*#__PURE__*/_jsx(GridAggregationFunctionLabel, {
+      ownerState: ownerState,
+      className: classes.aggregationLabel,
+      children: aggregationLabel
+    })]
+  });
+};
+
+export { GridAggregationHeader };

package/modern/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?.();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
-  });
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {