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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +44 -1
  2. package/DataGridPremium/DataGridPremium.js +47 -0
  3. package/DataGridPremium/useDataGridPremiumComponent.js +6 -1
  4. package/DataGridPremium/useDataGridPremiumProps.js +17 -7
  5. package/components/GridAggregationColumnMenuItem.d.ts +9 -0
  6. package/components/GridAggregationColumnMenuItem.js +93 -0
  7. package/components/GridAggregationHeader.d.ts +4 -0
  8. package/components/GridAggregationHeader.js +94 -0
  9. package/components/GridExcelExportMenuItem.js +11 -4
  10. package/components/GridFooterCell.d.ts +9 -0
  11. package/components/GridFooterCell.js +51 -0
  12. package/components/GridGroupingColumnFooterCell.d.ts +4 -0
  13. package/components/GridGroupingColumnFooterCell.js +29 -0
  14. package/hooks/features/aggregation/createAggregationLookup.d.ts +10 -0
  15. package/hooks/features/aggregation/createAggregationLookup.js +128 -0
  16. package/hooks/features/aggregation/gridAggregationFunctions.d.ts +8 -0
  17. package/hooks/features/aggregation/gridAggregationFunctions.js +96 -0
  18. package/hooks/features/aggregation/gridAggregationInterfaces.d.ts +104 -0
  19. package/hooks/features/aggregation/gridAggregationInterfaces.js +1 -0
  20. package/hooks/features/aggregation/gridAggregationSelectors.d.ts +4 -0
  21. package/hooks/features/aggregation/gridAggregationSelectors.js +5 -0
  22. package/hooks/features/aggregation/gridAggregationUtils.d.ts +40 -0
  23. package/hooks/features/aggregation/gridAggregationUtils.js +177 -0
  24. package/hooks/features/aggregation/index.d.ts +4 -0
  25. package/hooks/features/aggregation/index.js +4 -0
  26. package/hooks/features/aggregation/useGridAggregation.d.ts +6 -0
  27. package/hooks/features/aggregation/useGridAggregation.js +94 -0
  28. package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts +4 -0
  29. package/hooks/features/aggregation/useGridAggregationPreProcessors.js +137 -0
  30. package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts +29 -0
  31. package/hooks/features/aggregation/wrapColumnWithAggregation.js +257 -0
  32. package/hooks/features/export/serializer/excelSerializer.js +2 -1
  33. package/hooks/features/index.d.ts +1 -0
  34. package/hooks/features/index.js +1 -0
  35. package/hooks/features/rowGrouping/createGroupingColDef.js +13 -2
  36. package/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
  37. package/hooks/features/rowGrouping/useGridRowGrouping.d.ts +1 -1
  38. package/hooks/features/rowGrouping/useGridRowGrouping.js +20 -10
  39. package/index.js +1 -1
  40. package/legacy/DataGridPremium/DataGridPremium.js +47 -0
  41. package/legacy/DataGridPremium/useDataGridPremiumComponent.js +6 -1
  42. package/legacy/DataGridPremium/useDataGridPremiumProps.js +12 -2
  43. package/legacy/components/GridAggregationColumnMenuItem.js +95 -0
  44. package/legacy/components/GridAggregationHeader.js +95 -0
  45. package/legacy/components/GridExcelExportMenuItem.js +11 -4
  46. package/legacy/components/GridFooterCell.js +63 -0
  47. package/legacy/components/GridGroupingColumnFooterCell.js +27 -0
  48. package/legacy/hooks/features/aggregation/createAggregationLookup.js +127 -0
  49. package/legacy/hooks/features/aggregation/gridAggregationFunctions.js +94 -0
  50. package/legacy/hooks/features/aggregation/gridAggregationInterfaces.js +1 -0
  51. package/legacy/hooks/features/aggregation/gridAggregationSelectors.js +11 -0
  52. package/legacy/hooks/features/aggregation/gridAggregationUtils.js +189 -0
  53. package/legacy/hooks/features/aggregation/index.js +4 -0
  54. package/legacy/hooks/features/aggregation/useGridAggregation.js +95 -0
  55. package/legacy/hooks/features/aggregation/useGridAggregationPreProcessors.js +140 -0
  56. package/legacy/hooks/features/aggregation/wrapColumnWithAggregation.js +262 -0
  57. package/legacy/hooks/features/export/serializer/excelSerializer.js +2 -1
  58. package/legacy/hooks/features/index.js +1 -0
  59. package/legacy/hooks/features/rowGrouping/createGroupingColDef.js +13 -2
  60. package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
  61. package/legacy/hooks/features/rowGrouping/useGridRowGrouping.js +24 -10
  62. package/legacy/index.js +1 -1
  63. package/legacy/typeOverloads/index.js +1 -1
  64. package/legacy/utils/releaseInfo.js +1 -1
  65. package/models/dataGridPremiumProps.d.ts +46 -1
  66. package/models/gridApiPremium.d.ts +2 -2
  67. package/models/gridStatePremium.d.ts +3 -1
  68. package/modern/DataGridPremium/DataGridPremium.js +47 -0
  69. package/modern/DataGridPremium/useDataGridPremiumComponent.js +6 -1
  70. package/modern/DataGridPremium/useDataGridPremiumProps.js +8 -2
  71. package/modern/components/GridAggregationColumnMenuItem.js +93 -0
  72. package/modern/components/GridAggregationHeader.js +92 -0
  73. package/modern/components/GridExcelExportMenuItem.js +11 -4
  74. package/modern/components/GridFooterCell.js +51 -0
  75. package/modern/components/GridGroupingColumnFooterCell.js +29 -0
  76. package/modern/hooks/features/aggregation/createAggregationLookup.js +122 -0
  77. package/modern/hooks/features/aggregation/gridAggregationFunctions.js +96 -0
  78. package/modern/hooks/features/aggregation/gridAggregationInterfaces.js +1 -0
  79. package/modern/hooks/features/aggregation/gridAggregationSelectors.js +5 -0
  80. package/modern/hooks/features/aggregation/gridAggregationUtils.js +175 -0
  81. package/modern/hooks/features/aggregation/index.js +4 -0
  82. package/modern/hooks/features/aggregation/useGridAggregation.js +92 -0
  83. package/modern/hooks/features/aggregation/useGridAggregationPreProcessors.js +135 -0
  84. package/modern/hooks/features/aggregation/wrapColumnWithAggregation.js +251 -0
  85. package/modern/hooks/features/export/serializer/excelSerializer.js +2 -1
  86. package/modern/hooks/features/index.js +1 -0
  87. package/modern/hooks/features/rowGrouping/createGroupingColDef.js +13 -2
  88. package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
  89. package/modern/hooks/features/rowGrouping/useGridRowGrouping.js +17 -11
  90. package/modern/index.js +1 -1
  91. package/modern/typeOverloads/index.js +1 -1
  92. package/modern/utils/releaseInfo.js +1 -1
  93. package/node/DataGridPremium/DataGridPremium.js +47 -0
  94. package/node/DataGridPremium/useDataGridPremiumComponent.js +8 -1
  95. package/node/DataGridPremium/useDataGridPremiumProps.js +17 -6
  96. package/node/components/GridAggregationColumnMenuItem.js +120 -0
  97. package/node/components/GridAggregationHeader.js +115 -0
  98. package/node/components/GridExcelExportMenuItem.js +12 -4
  99. package/node/components/GridFooterCell.js +73 -0
  100. package/node/components/GridGroupingColumnFooterCell.js +46 -0
  101. package/node/hooks/features/aggregation/createAggregationLookup.js +139 -0
  102. package/node/hooks/features/aggregation/gridAggregationFunctions.js +105 -0
  103. package/node/hooks/features/aggregation/gridAggregationInterfaces.js +5 -0
  104. package/node/hooks/features/aggregation/gridAggregationSelectors.js +17 -0
  105. package/node/hooks/features/aggregation/gridAggregationUtils.js +212 -0
  106. package/node/hooks/features/aggregation/index.js +65 -0
  107. package/node/hooks/features/aggregation/useGridAggregation.js +118 -0
  108. package/node/hooks/features/aggregation/useGridAggregationPreProcessors.js +161 -0
  109. package/node/hooks/features/aggregation/wrapColumnWithAggregation.js +279 -0
  110. package/node/hooks/features/export/serializer/excelSerializer.js +2 -1
  111. package/node/hooks/features/index.js +13 -0
  112. package/node/hooks/features/rowGrouping/createGroupingColDef.js +14 -2
  113. package/node/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
  114. package/node/hooks/features/rowGrouping/useGridRowGrouping.js +19 -10
  115. package/node/index.js +1 -1
  116. package/node/typeOverloads/index.js +16 -1
  117. package/node/utils/releaseInfo.js +1 -1
  118. package/package.json +4 -4
  119. package/typeOverloads/index.d.ts +1 -1
  120. package/typeOverloads/index.js +1 -1
  121. package/typeOverloads/modules.d.ts +32 -2
  122. package/utils/releaseInfo.js +1 -1
@@ -0,0 +1,137 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import * as React from 'react';
3
+ import MuiDivider from '@mui/material/Divider';
4
+ import { gridColumnLookupSelector } from '@mui/x-data-grid-pro';
5
+ import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
6
+ import { getAvailableAggregationFunctions, addFooterRows, getAggregationRules, mergeStateWithAggregationModel } from './gridAggregationUtils';
7
+ import { wrapColumnWithAggregationValue, unwrapColumnFromAggregation } from './wrapColumnWithAggregation';
8
+ import { GridAggregationColumnMenuItem } from '../../../components/GridAggregationColumnMenuItem';
9
+ import { gridAggregationModelSelector } from './gridAggregationSelectors';
10
+ import { jsx as _jsx } from "react/jsx-runtime";
11
+
12
+ const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
13
+ onClick: event => event.stopPropagation()
14
+ });
15
+
16
+ export const useGridAggregationPreProcessors = (apiRef, props) => {
17
+ const updateAggregatedColumns = React.useCallback(columnsState => {
18
+ const {
19
+ rulesOnLastColumnHydration
20
+ } = apiRef.current.unstable_caches.aggregation;
21
+ const aggregationRules = props.private_disableAggregation ? {} : getAggregationRules({
22
+ columnsLookup: columnsState.lookup,
23
+ aggregationModel: gridAggregationModelSelector(apiRef),
24
+ aggregationFunctions: props.private_aggregationFunctions
25
+ });
26
+ columnsState.all.forEach(field => {
27
+ const shouldHaveAggregationValue = !!aggregationRules[field];
28
+ const haveAggregationColumnValue = !!rulesOnLastColumnHydration[field];
29
+ let column = columnsState.lookup[field];
30
+
31
+ if (haveAggregationColumnValue) {
32
+ column = unwrapColumnFromAggregation({
33
+ column
34
+ });
35
+ }
36
+
37
+ if (shouldHaveAggregationValue) {
38
+ column = wrapColumnWithAggregationValue({
39
+ column,
40
+ aggregationRule: aggregationRules[field],
41
+ apiRef
42
+ });
43
+ }
44
+
45
+ columnsState.lookup[field] = column;
46
+ });
47
+ apiRef.current.unstable_caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
48
+ return columnsState;
49
+ }, [apiRef, props.private_aggregationFunctions, props.private_disableAggregation]);
50
+ const addGroupFooterRows = React.useCallback(groupingParams => {
51
+ let newGroupingParams;
52
+ let rulesOnLastRowHydration;
53
+
54
+ if (props.private_disableAggregation) {
55
+ newGroupingParams = groupingParams;
56
+ rulesOnLastRowHydration = {};
57
+ } else {
58
+ const aggregationRules = getAggregationRules({
59
+ columnsLookup: gridColumnLookupSelector(apiRef),
60
+ aggregationModel: gridAggregationModelSelector(apiRef),
61
+ aggregationFunctions: props.private_aggregationFunctions
62
+ });
63
+ rulesOnLastRowHydration = aggregationRules; // If no column have an aggregation rule
64
+ // Then don't create the footer rows
65
+
66
+ if (Object.values(aggregationRules).length === 0) {
67
+ newGroupingParams = groupingParams;
68
+ } else {
69
+ newGroupingParams = addFooterRows({
70
+ groupingParams,
71
+ aggregationRules,
72
+ getAggregationPosition: props.private_getAggregationPosition
73
+ });
74
+ }
75
+ }
76
+
77
+ apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration = rulesOnLastRowHydration;
78
+ return newGroupingParams;
79
+ }, [apiRef, props.private_disableAggregation, props.private_getAggregationPosition, props.private_aggregationFunctions]);
80
+ const addColumnMenuButtons = React.useCallback((initialValue, column) => {
81
+ if (props.private_disableAggregation) {
82
+ return initialValue;
83
+ }
84
+
85
+ const availableAggregationFunctions = getAvailableAggregationFunctions({
86
+ aggregationFunctions: props.private_aggregationFunctions,
87
+ column
88
+ });
89
+
90
+ if (availableAggregationFunctions.length === 0) {
91
+ return initialValue;
92
+ }
93
+
94
+ return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(GridAggregationColumnMenuItem, {
95
+ column: column,
96
+ label: apiRef.current.getLocaleText('aggregationMenuItemHeader'),
97
+ availableAggregationFunctions: availableAggregationFunctions
98
+ })];
99
+ }, [apiRef, props.private_aggregationFunctions, props.private_disableAggregation]);
100
+ const stateExportPreProcessing = React.useCallback(prevState => {
101
+ if (props.private_disableAggregation) {
102
+ return prevState;
103
+ }
104
+
105
+ const aggregationModelToExport = gridAggregationModelSelector(apiRef);
106
+
107
+ if (Object.values(aggregationModelToExport).length === 0) {
108
+ return prevState;
109
+ }
110
+
111
+ return _extends({}, prevState, {
112
+ private_aggregation: {
113
+ model: aggregationModelToExport
114
+ }
115
+ });
116
+ }, [apiRef, props.private_disableAggregation]);
117
+ const stateRestorePreProcessing = React.useCallback((params, context) => {
118
+ var _context$stateToResto;
119
+
120
+ if (props.private_disableAggregation) {
121
+ return params;
122
+ }
123
+
124
+ const aggregationModel = (_context$stateToResto = context.stateToRestore.private_aggregation) == null ? void 0 : _context$stateToResto.model;
125
+
126
+ if (aggregationModel != null) {
127
+ apiRef.current.setState(mergeStateWithAggregationModel(aggregationModel));
128
+ }
129
+
130
+ return params;
131
+ }, [apiRef, props.private_disableAggregation]);
132
+ useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateAggregatedColumns);
133
+ useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addGroupFooterRows);
134
+ useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
135
+ useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
136
+ useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
137
+ };
@@ -0,0 +1,29 @@
1
+ import * as React from 'react';
2
+ import { GridColDef } from '@mui/x-data-grid-pro';
3
+ import { GridApiPremium } from '../../../models/gridApiPremium';
4
+ import { GridAggregationRule } from './gridAggregationInterfaces';
5
+ declare const AGGREGATION_WRAPPABLE_PROPERTIES: readonly ["valueGetter", "valueFormatter", "renderCell", "renderHeader", "filterOperators"];
6
+ declare type WrappableColumnProperty = typeof AGGREGATION_WRAPPABLE_PROPERTIES[number];
7
+ interface GridColDefWithAggregationWrappers extends GridColDef {
8
+ aggregationWrappedProperties?: {
9
+ [P in WrappableColumnProperty]?: {
10
+ original: GridColDef[P];
11
+ wrapped: GridColDef[P];
12
+ };
13
+ };
14
+ }
15
+ /**
16
+ * Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
17
+ */
18
+ export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
19
+ column: GridColDef;
20
+ apiRef: React.MutableRefObject<GridApiPremium>;
21
+ aggregationRule: GridAggregationRule;
22
+ }) => GridColDef;
23
+ /**
24
+ * Remove the aggregation wrappers around the wrappable properties of the column.
25
+ */
26
+ export declare const unwrapColumnFromAggregation: ({ column, }: {
27
+ column: GridColDefWithAggregationWrappers;
28
+ }) => GridColDef<any, any, any>;
29
+ export {};
@@ -0,0 +1,257 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import * as React from 'react';
3
+ import { gridAggregationLookupSelector } from './gridAggregationSelectors';
4
+ import { GridFooterCell } from '../../../components/GridFooterCell';
5
+ import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const AGGREGATION_WRAPPABLE_PROPERTIES = ['valueGetter', 'valueFormatter', 'renderCell', 'renderHeader', 'filterOperators'];
8
+
9
+ const getAggregationValueWrappedValueGetter = ({
10
+ value: valueGetter,
11
+ getCellAggregationResult
12
+ }) => {
13
+ const wrappedValueGetter = params => {
14
+ const cellAggregationResult = getCellAggregationResult(params.id, params.field);
15
+
16
+ if (cellAggregationResult != null) {
17
+ var _cellAggregationResul;
18
+
19
+ return (_cellAggregationResul = cellAggregationResult == null ? void 0 : cellAggregationResult.value) != null ? _cellAggregationResul : null;
20
+ }
21
+
22
+ if (valueGetter) {
23
+ return valueGetter(params);
24
+ }
25
+
26
+ return params.row[params.field];
27
+ };
28
+
29
+ return wrappedValueGetter;
30
+ };
31
+
32
+ const getAggregationValueWrappedValueFormatter = ({
33
+ value: valueFormatter,
34
+ aggregationRule,
35
+ getCellAggregationResult
36
+ }) => {
37
+ // If neither the inline aggregation function nor the footer aggregation function have a custom value formatter,
38
+ // Then we don't wrap the column value formatter
39
+ if (!aggregationRule.aggregationFunction.valueFormatter) {
40
+ return valueFormatter;
41
+ }
42
+
43
+ const wrappedValueFormatter = params => {
44
+ if (params.id != null) {
45
+ const cellAggregationResult = getCellAggregationResult(params.id, params.field);
46
+
47
+ if (cellAggregationResult != null) {
48
+ return aggregationRule.aggregationFunction.valueFormatter(params);
49
+ }
50
+ }
51
+
52
+ if (valueFormatter) {
53
+ return valueFormatter(params);
54
+ }
55
+
56
+ return params.value;
57
+ };
58
+
59
+ return wrappedValueFormatter;
60
+ };
61
+
62
+ const getAggregationValueWrappedRenderCell = ({
63
+ value: renderCell,
64
+ aggregationRule,
65
+ getCellAggregationResult
66
+ }) => {
67
+ const wrappedRenderCell = params => {
68
+ const cellAggregationResult = getCellAggregationResult(params.id, params.field);
69
+
70
+ if (cellAggregationResult != null) {
71
+ var _aggregationFunction$;
72
+
73
+ if (!renderCell) {
74
+ if (cellAggregationResult.position === 'footer') {
75
+ return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
76
+ }
77
+
78
+ return params.formattedValue;
79
+ }
80
+
81
+ const aggregationMeta = {
82
+ hasCellUnit: (_aggregationFunction$ = aggregationRule.aggregationFunction.hasCellUnit) != null ? _aggregationFunction$ : true,
83
+ aggregationFunctionName: aggregationRule.aggregationFunctionName
84
+ };
85
+ return renderCell(_extends({}, params, {
86
+ aggregation: aggregationMeta
87
+ }));
88
+ }
89
+
90
+ if (!renderCell) {
91
+ return params.formattedValue;
92
+ }
93
+
94
+ return renderCell(params);
95
+ };
96
+
97
+ return wrappedRenderCell;
98
+ };
99
+ /**
100
+ * Skips the filtering for aggregated rows
101
+ */
102
+
103
+
104
+ const getWrappedFilterOperators = ({
105
+ value: filterOperators,
106
+ getCellAggregationResult
107
+ }) => filterOperators.map(operator => {
108
+ return _extends({}, operator, {
109
+ getApplyFilterFn: (filterItem, column) => {
110
+ const originalFn = operator.getApplyFilterFn(filterItem, column);
111
+
112
+ if (!originalFn) {
113
+ return null;
114
+ }
115
+
116
+ return params => {
117
+ if (getCellAggregationResult(params.id, params.field) != null) {
118
+ return true;
119
+ }
120
+
121
+ return originalFn(params);
122
+ };
123
+ }
124
+ });
125
+ });
126
+ /**
127
+ * Add the aggregation method around the header name
128
+ */
129
+
130
+
131
+ const getWrappedRenderHeader = ({
132
+ value: renderHeader,
133
+ aggregationRule
134
+ }) => {
135
+ const wrappedRenderCell = params => {
136
+ const aggregationMeta = {
137
+ aggregationRule
138
+ };
139
+
140
+ if (!renderHeader) {
141
+ return /*#__PURE__*/_jsx(GridAggregationHeader, _extends({}, params, {
142
+ aggregation: aggregationMeta
143
+ }));
144
+ }
145
+
146
+ return renderHeader(_extends({}, params, {
147
+ aggregation: aggregationMeta
148
+ }));
149
+ };
150
+
151
+ return wrappedRenderCell;
152
+ };
153
+ /**
154
+ * Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
155
+ */
156
+
157
+
158
+ export const wrapColumnWithAggregationValue = ({
159
+ column,
160
+ apiRef,
161
+ aggregationRule
162
+ }) => {
163
+ const getCellAggregationResult = (id, field) => {
164
+ var _parent, _gridAggregationLooku;
165
+
166
+ let cellAggregationPosition = null;
167
+
168
+ if (id.toString().startsWith('auto-generated-row-')) {
169
+ cellAggregationPosition = 'inline';
170
+ } else if (id.toString().startsWith('auto-generated-group-footer-')) {
171
+ cellAggregationPosition = 'footer';
172
+ }
173
+
174
+ if (cellAggregationPosition == null) {
175
+ return null;
176
+ } // TODO: Add custom root id
177
+
178
+
179
+ const groupId = cellAggregationPosition === 'inline' ? id : (_parent = apiRef.current.getRowNode(id).parent) != null ? _parent : '';
180
+ const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)[groupId]) == null ? void 0 : _gridAggregationLooku[field];
181
+
182
+ if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
183
+ return null;
184
+ }
185
+
186
+ return aggregationResult;
187
+ };
188
+
189
+ const aggregationWrappedProperties = {};
190
+
191
+ const wrappedColumn = _extends({}, column, {
192
+ aggregationWrappedProperties
193
+ });
194
+
195
+ const wrapColumnProperty = (property, wrapper) => {
196
+ const originalValue = column[property];
197
+ const wrappedProperty = wrapper({
198
+ apiRef,
199
+ value: originalValue,
200
+ colDef: column,
201
+ aggregationRule,
202
+ getCellAggregationResult
203
+ });
204
+
205
+ if (wrappedProperty !== originalValue) {
206
+ aggregationWrappedProperties[property] = {
207
+ original: originalValue,
208
+ wrapped: wrappedProperty
209
+ };
210
+ wrappedColumn[property] = wrappedProperty;
211
+ }
212
+ };
213
+
214
+ wrapColumnProperty('valueGetter', getAggregationValueWrappedValueGetter);
215
+ wrapColumnProperty('valueFormatter', getAggregationValueWrappedValueFormatter);
216
+ wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
217
+ wrapColumnProperty('renderHeader', getWrappedRenderHeader);
218
+ wrapColumnProperty('filterOperators', getWrappedFilterOperators);
219
+
220
+ if (Object.keys(aggregationWrappedProperties).length === 0) {
221
+ return column;
222
+ }
223
+
224
+ return wrappedColumn;
225
+ };
226
+ /**
227
+ * Remove the aggregation wrappers around the wrappable properties of the column.
228
+ */
229
+
230
+ export const unwrapColumnFromAggregation = ({
231
+ column
232
+ }) => {
233
+ if (!column.aggregationWrappedProperties) {
234
+ return column;
235
+ }
236
+
237
+ const originalProperties = Object.entries(column.aggregationWrappedProperties);
238
+
239
+ if (originalProperties.length === 0) {
240
+ return column;
241
+ }
242
+
243
+ const unwrappedColumn = _extends({}, column);
244
+
245
+ originalProperties.forEach(([propertyName, {
246
+ original,
247
+ wrapped
248
+ }]) => {
249
+ // The value changed since we wrapped it
250
+ if (wrapped !== column[propertyName]) {
251
+ return;
252
+ }
253
+
254
+ unwrappedColumn[propertyName] = original;
255
+ });
256
+ return unwrappedColumn;
257
+ };
@@ -46,7 +46,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
46
46
  api.unstable_calculateColSpan({
47
47
  rowId: id,
48
48
  minFirstColumn: 0,
49
- maxLastColumn: columns.length - 1
49
+ maxLastColumn: columns.length,
50
+ columns
50
51
  });
51
52
  columns.forEach((column, colIndex) => {
52
53
  const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
@@ -1,2 +1,3 @@
1
+ export * from './aggregation';
1
2
  export * from './rowGrouping';
2
3
  export * from './export';
@@ -1,3 +1,4 @@
1
1
  // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
2
+ export * from './aggregation';
2
3
  export * from './rowGrouping';
3
4
  export * from './export';
@@ -4,6 +4,7 @@ const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
4
4
  _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
5
5
  import * as React from 'react';
6
6
  import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
7
+ import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
7
8
  import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
8
9
  import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
9
10
  import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
@@ -152,7 +153,12 @@ export const createGroupingColDefForOneGroupingCriteria = ({
152
153
  const commonProperties = {
153
154
  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),
154
155
  renderCell: params => {
155
- // Render leaves
156
+ // Render footer
157
+ if (params.rowNode.position === 'footer') {
158
+ return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
159
+ } // Render leaves
160
+
161
+
156
162
  if (params.rowNode.groupingField == null) {
157
163
  if (leafColDef) {
158
164
  const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
@@ -253,7 +259,12 @@ export const createGroupingColDefForAllGroupingCriteria = ({
253
259
  return ((_columnsLookup$field$ = columnsLookup[field].width) != null ? _columnsLookup$field$ : GRID_STRING_COL_DEF.width) + 40;
254
260
  }), (_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0),
255
261
  renderCell: params => {
256
- // Render the leaves
262
+ // Render footer
263
+ if (params.rowNode.position === 'footer') {
264
+ return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
265
+ } // Render the leaves
266
+
267
+
257
268
  if (params.rowNode.groupingField == null) {
258
269
  if (leafColDef) {
259
270
  const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
@@ -79,13 +79,17 @@ export const filterRowTreeFromGroupingColumns = params => {
79
79
  visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
80
80
  filteredRowsLookup[node.id] = shouldPassFilters;
81
81
 
82
+ if (node.footerId != null) {
83
+ visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
84
+ }
85
+
82
86
  if (!shouldPassFilters) {
83
87
  return 0;
84
88
  }
85
89
 
86
90
  filteredDescendantCountLookup[node.id] = filteredDescendantCount;
87
91
 
88
- if (!node.children) {
92
+ if (!node.children && !node.isAutoGenerated) {
89
93
  return filteredDescendantCount + 1;
90
94
  }
91
95
 
@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
8
8
  * @requires useGridRows (state, method) - can be after, async only
9
9
  * @requires useGridParamsApi (method) - can be after, async only
10
10
  */
11
- export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping'>) => void;
11
+ export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'initialState' | 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping'>) => void;
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
- import Divider from '@mui/material/Divider';
3
+ import MuiDivider from '@mui/material/Divider';
4
4
  import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
5
5
  import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
6
6
  import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
@@ -8,6 +8,11 @@ import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroup
8
8
  import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
9
9
  import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
+
12
+ const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
13
+ onClick: event => event.stopPropagation()
14
+ });
15
+
11
16
  export const rowGroupingStateInitializer = (state, props, apiRef) => {
12
17
  var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
13
18
 
@@ -27,6 +32,8 @@ export const rowGroupingStateInitializer = (state, props, apiRef) => {
27
32
  */
28
33
 
29
34
  export const useGridRowGrouping = (apiRef, props) => {
35
+ var _props$initialState3, _props$initialState3$;
36
+
30
37
  apiRef.current.unstable_registerControlState({
31
38
  stateId: 'rowGrouping',
32
39
  propModel: props.rowGroupingModel,
@@ -90,16 +97,16 @@ export const useGridRowGrouping = (apiRef, props) => {
90
97
  * PRE-PROCESSING
91
98
  */
92
99
 
93
- const addColumnMenuButtons = React.useCallback((initialValue, columns) => {
100
+ const addColumnMenuButtons = React.useCallback((initialValue, column) => {
94
101
  if (props.disableRowGrouping) {
95
102
  return initialValue;
96
103
  }
97
104
 
98
105
  let menuItems;
99
106
 
100
- if (isGroupingColumn(columns.field)) {
107
+ if (isGroupingColumn(column.field)) {
101
108
  menuItems = /*#__PURE__*/_jsx(GridRowGroupingColumnMenuItems, {});
102
- } else if (columns.groupable) {
109
+ } else if (column.groupable) {
103
110
  menuItems = /*#__PURE__*/_jsx(GridRowGroupableColumnMenuItems, {});
104
111
  } else {
105
112
  menuItems = null;
@@ -111,14 +118,17 @@ export const useGridRowGrouping = (apiRef, props) => {
111
118
 
112
119
  return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), menuItems];
113
120
  }, [props.disableRowGrouping]);
114
- const stateExportPreProcessing = React.useCallback(prevState => {
115
- if (props.disableRowGrouping) {
116
- return prevState;
117
- }
121
+ const stateExportPreProcessing = React.useCallback((prevState, context) => {
122
+ var _props$initialState2, _props$initialState2$;
118
123
 
119
124
  const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
125
+ const shouldExportRowGroupingModel = // Always export if the `exportOnlyDirtyModels` property is activated
126
+ !context.exportOnlyDirtyModels || // Always export if the model is controlled
127
+ props.rowGroupingModel != null || // Always export if the model has been initialized
128
+ ((_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
129
+ Object.keys(rowGroupingModelToExport).length > 0;
120
130
 
121
- if (rowGroupingModelToExport.length === 0) {
131
+ if (!shouldExportRowGroupingModel) {
122
132
  return prevState;
123
133
  }
124
134
 
@@ -127,7 +137,7 @@ export const useGridRowGrouping = (apiRef, props) => {
127
137
  model: rowGroupingModelToExport
128
138
  }
129
139
  });
130
- }, [apiRef, props.disableRowGrouping]);
140
+ }, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3$.model]);
131
141
  const stateRestorePreProcessing = React.useCallback((params, context) => {
132
142
  var _context$stateToResto;
133
143
 
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.13.1
1
+ /** @license MUI v5.14.0
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -275,6 +275,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
275
275
  experimentalFeatures: PropTypes.shape({
276
276
  newEditingApi: PropTypes.bool,
277
277
  preventCommitWhileValidating: PropTypes.bool,
278
+ private_aggregation: PropTypes.bool,
278
279
  warnIfFocusStateIsNotSynced: PropTypes.bool
279
280
  }),
280
281
 
@@ -866,6 +867,52 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
866
867
  right: PropTypes.arrayOf(PropTypes.string)
867
868
  }),
868
869
 
870
+ /**
871
+ * Aggregation functions available on the grid.
872
+ * @default GRID_AGGREGATION_FUNCTIONS
873
+ * @ignore - do not document.
874
+ */
875
+ private_aggregationFunctions: PropTypes.object,
876
+
877
+ /**
878
+ * Set the aggregation model of the grid.
879
+ * @ignore - do not document.
880
+ */
881
+ private_aggregationModel: PropTypes.object,
882
+
883
+ /**
884
+ * Rows used to generate the aggregated value.
885
+ * If `filtered`, the aggregated values will be generated using only the rows currently passing the filtering process.
886
+ * If `all`, the aggregated values will be generated using all the rows.
887
+ * @default "filtered"
888
+ * @ignore - do not document.
889
+ */
890
+ private_aggregationRowsScope: PropTypes.oneOf(['all', 'filtered']),
891
+
892
+ /**
893
+ * If `true`, aggregation is disabled.
894
+ * @default false
895
+ * @ignore - do not document.
896
+ */
897
+ private_disableAggregation: PropTypes.bool,
898
+
899
+ /**
900
+ * Determines the position of an aggregated value.
901
+ * @param {GridRowTreeNodeConfig | null} groupNode The current group (`null` being the top level group).
902
+ * @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group will not be aggregated).
903
+ * @default `(groupNode) => groupNode == null ? 'footer' : 'inline'`
904
+ * @ignore - do not document.
905
+ */
906
+ private_getAggregationPosition: PropTypes.func,
907
+
908
+ /**
909
+ * Callback fired when the row grouping model changes.
910
+ * @param {GridAggregationModel} model The aggregated columns.
911
+ * @param {GridCallbackDetails} details Additional details for this callback.
912
+ * @ignore - do not document.
913
+ */
914
+ private_onAggregationModelChange: PropTypes.func,
915
+
869
916
  /**
870
917
  * Callback called before updating a row with new values in the row and cell editing.
871
918
  * Only applied if `props.experimentalFeatures.newEditingApi: true`.