@mui/x-data-grid-premium 6.10.0 → 6.10.2

package/CHANGELOG.md

@@ -3,6 +3,139 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.10.2
+
+_Jul 27, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve scatter charts performance
+- 📚 Redesigned component API documentation and side navigation
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.2`
+
+- [DataGrid] Fix quick filter & aggregation error (#9729) @romgrk
+- [DataGrid] Fix row click propagation causing error in nested grid (#9741) @cherniavskii
+- [DataGrid] Keep focused cell in the DOM (#7357) @yaredtsy
+- [l10n] Improve Finnish (fi-FI) locale (#9746) @sambbaahh
+
+#### `@mui/x-data-grid-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.2`.
+
+#### `@mui/x-data-grid-premium@v6.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.2`, plus:
+
+- [DataGridPremium] Allow to customize grouping cell offset (#9417) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.2`
+
+- [pickers] Remove the `endOfDate` from `DigitalClock` timeOptions (#9800) @noraleonte
+
+#### `@mui/x-date-pickers-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.2`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.5`
+
+- [charts] Improve JSDoc for axis-related props (#9779) @flaviendelangle
+- [charts] Improve performances of Scatter component (#9527) @flaviendelangle
+
+### Docs
+
+- [docs] Add `pnpm` in more places @oliviertassinari
+- [docs] Add `pnpm` installation instructions for MUI X (#9707) @richbustos
+- [docs] Align pickers "uncontrolled vs controlled" sections (#9772) @LukasTy
+- [docs] Apply style guide to the data grid Layout page (#9673) @richbustos
+- [docs] Differentiate between packages in `slotProps` docs (#9668) @cherniavskii
+- [docs] Fix charts width in axis pages (#9801) @alexfauquette
+- [docs] Fix wrong prop name in the Editing page (#9753) @m4theushw
+- [docs] New component API page and side nav design (#9187) @alexfauquette
+- [docs] Update overview page with up to date information about the plans (#9512) @joserodolfofreitas
+
+### Core
+
+- [core] Use PR charts version in preview (#9787) @alexfauquette
+- [license] Allow overriding the license on specific parts of the page (#9717) @Janpot
+- [license] Throw in dev mode after 30 days (#9701) @oliviertassinari
+- [license] Only throw in dev mode (#9803) @oliviertassinari
+- [test] Fail the CI when new unexpected files are created (#9728) @oliviertassinari
+
+## 6.10.1
+
+_Jul 20, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix CSV export for values containing double quotes
+- 🚀 Improve tree data performance
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.1`
+
+- [DataGrid] Filtering performance: compile filter applier with `eval` (#9635) @romgrk
+- [DataGrid] Fix CSV export for values containing double quotes (#9667) @cherniavskii
+- [DataGrid] Fix column type change not working correctly (#9594) @cherniavskii
+- [DataGrid] Fix quick filter `undefined` row error (#9708) @romgrk
+- [DataGrid] Prevent `viewportOuterSize.height` going negative (#9664) @gitstart
+- [DataGrid] Update focused cell on page change via keyboard (#9203) @m4theushw
+- [DataGrid] Wait for remote stylesheets to load before print (#9665) @cherniavskii
+
+#### `@mui/x-data-grid-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.1`, plus:
+
+- [DataGridPro] Improve tree data performance (#9682) @cherniavskii
+- [DataGridPro] Prevent affecting cells from child DataGrid when resizing a column (#9670) @m4theushw
+
+#### `@mui/x-data-grid-premium@v6.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.1`
+
+- [fields] Fix `format` and `value` update order (#9715) @LukasTy
+- [pickers] Remove `require` usage in comment (#9675) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.4`
+
+- [charts] Fix blinking in responsive charts and extremums computation for line charts (#9734) @alexfauquette
+- [charts] Use ESM with imports (#9645) @alexfauquette
+
+### Docs
+
+- [docs] Add additional note for license key installation on Next.js (#9575) @joserodolfofreitas
+- [docs] Add paragraph about managing focus of custom edit components (#9658) @m4theushw
+- [docs] Add unsorted icon slot to the custom sort icons demo (#9169) @d4rekanguok
+- [docs] Disable ad for onboarding pages (#9700) @oliviertassinari
+- [docs] Disabling ads without toolbar has no effect @oliviertassinari
+- [docs] Fix Date Pickers usage to Title Case (#9680) @richbustos
+- [docs] Fix sorting in `CustomSortIcons` demo (#9656) @MBilalShafi
+- [docs] Improve the UI for pickers introduction (#9644) @alexfauquette
+- [docs] Improve the demo design @oliviertassinari
+- [docs] Localization progress, polish (#9672) @oliviertassinari
+- [docs] Normalize the WIP items (#9671) @oliviertassinari
+
+### Core
+
+- [core] Add `validate` command (#9714) @romgrk
+- [CHANGELOG] Update generator to new format @oliviertassinari
+
 ## 6.10.0
 
 _Jul 13, 2023_
@@ -26,11 +159,11 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Make `rowExpansionChange` event public (#9611) @MBilalShafi
 - [l10n] Improve Polish (pl-PL) locale (#9625) @ch1llysense
 
-#### `@mui/x-data-grid-pro@6.10.0`
+#### `@mui/x-data-grid-pro@6.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
 
 Same changes as in `@mui/x-data-grid@6.10.0`.
 
-#### `@mui/x-data-grid-premium@6.10.0`
+#### `@mui/x-data-grid-premium@6.10.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
 
 Same changes as in `@mui/x-data-grid-pro@6.10.0`.
 
@@ -41,7 +174,7 @@ Same changes as in `@mui/x-data-grid-pro@6.10.0`.
 - [pickers] Fix date calendar issues (#9652) @LukasTy
 - [l10n] Improve Norwegian (nb-NO) locale (#9608) @JosteinBrevik
 
-#### `@mui/x-date-pickers-pro@6.10.0`
+#### `@mui/x-date-pickers-pro@6.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
 
 Same changes as in `@mui/x-date-pickers@6.10.0`.
 

package/components/GridGroupingColumnFooterCell.js

@@ -4,22 +4,19 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridFooterCell } from './GridFooterCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridGroupingColumnFooterCell(props) {
-  const {
-    rowNode
-  } = props;
   const rootProps = useGridRootProps();
-  let marginLeft;
-  if (rowNode.parent == null) {
-    marginLeft = 0;
+  const sx = {
+    ml: 0
+  };
+  if (props.rowNode.parent == null) {
+    sx.ml = 0;
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
-    marginLeft = 2;
+    sx.ml = 2;
   } else {
-    marginLeft = rowNode.depth * 2;
+    sx.ml = theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
   }
   return /*#__PURE__*/_jsx(GridFooterCell, _extends({
-    sx: {
-      ml: marginLeft
-    }
+    sx: sx
   }, props));
 }
 export { GridGroupingColumnFooterCell };

package/components/GridGroupingColumnLeafCell.js

@@ -8,10 +8,9 @@ function GridGroupingColumnLeafCell(props) {
     rowNode
   } = props;
   const rootProps = useGridRootProps();
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
   return /*#__PURE__*/_jsx(Box, {
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 1 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
     children: (_props$formattedValue = props.formattedValue) != null ? _props$formattedValue : props.value
   });

package/components/GridGroupingCriteriaCell.js

@@ -48,7 +48,6 @@ export function GridGroupingCriteriaCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();
   };
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
   let cellContent;
   const colDef = apiRef.current.getColumn(rowNode.groupingField);
   if (typeof colDef.renderCell === 'function') {
@@ -65,7 +64,7 @@ export function GridGroupingCriteriaCell(props) {
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,

package/hooks/features/aggregation/gridAggregationUtils.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_capitalize as capitalize } from '@mui/utils';
+import { GRID_ID_AUTOGENERATED } from '@mui/x-data-grid/internals';
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 import { addPinnedRow, isDeepEqual, insertNodeInTree, removeNodeFromTree } from '@mui/x-data-grid-pro/internals';
 export const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root';
@@ -108,10 +109,13 @@ export const addFooterRows = ({
   const updateRootGroupFooter = groupNode => {
     const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
     if (shouldHaveFooter) {
+      const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,
-        rowModel: undefined,
-        rowId: getAggregationFooterRowIdFromGroupId(null),
+        rowModel: {
+          [GRID_ID_AUTOGENERATED]: rowId
+        },
+        rowId,
         position: 'bottom',
         apiRef,
         isAutoGenerated: true

package/hooks/features/aggregation/useGridAggregation.js

@@ -5,14 +5,14 @@ import { gridAggregationModelSelector } from './gridAggregationSelectors';
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from './gridAggregationUtils';
 import { createAggregationLookup } from './createAggregationLookup';
 export const aggregationStateInitializer = (state, props, apiRef) => {
-  var _ref, _props$aggregationMod, _props$initialState, _props$initialState$a;
+  var _ref, _props$aggregationMod, _props$initialState;
   apiRef.current.caches.aggregation = {
     rulesOnLastColumnHydration: {},
     rulesOnLastRowHydration: {}
   };
   return _extends({}, state, {
     aggregation: {
-      model: (_ref = (_props$aggregationMod = props.aggregationModel) != null ? _props$aggregationMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$a = _props$initialState.aggregation) == null ? void 0 : _props$initialState$a.model) != null ? _ref : {}
+      model: (_ref = (_props$aggregationMod = props.aggregationModel) != null ? _props$aggregationMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.aggregation) == null ? void 0 : _props$initialState.model) != null ? _ref : {}
     }
   });
 };

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -149,7 +149,7 @@ export const wrapColumnWithAggregationValue = ({
   aggregationRule
 }) => {
   const getCellAggregationResult = (id, field) => {
-    var _rowNode$parent, _gridAggregationLooku, _gridAggregationLooku2;
+    var _rowNode$parent, _gridAggregationLooku;
     let cellAggregationPosition = null;
     const rowNode = apiRef.current.getRowNode(id);
     if (rowNode.type === 'group') {
@@ -163,7 +163,7 @@ export const wrapColumnWithAggregationValue = ({
 
     // TODO: Add custom root id
     const groupId = cellAggregationPosition === 'inline' ? id : (_rowNode$parent = rowNode.parent) != null ? _rowNode$parent : '';
-    const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)) == null ? void 0 : (_gridAggregationLooku2 = _gridAggregationLooku[groupId]) == null ? void 0 : _gridAggregationLooku2[field];
+    const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)) == null || (_gridAggregationLooku = _gridAggregationLooku[groupId]) == null ? void 0 : _gridAggregationLooku[field];
     if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
       return null;
     }

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -119,15 +119,15 @@ export const useGridCellSelection = (apiRef, props) => {
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
   const handleMouseUp = useEventCallback(() => {
-    var _apiRef$current$rootE, _apiRef$current$rootE2;
+    var _apiRef$current$rootE;
     lastMouseDownCell.current = null;
-    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.remove(gridClasses['root--disableUserSelection']);
+    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.classList.remove(gridClasses['root--disableUserSelection']);
 
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopAutoScroll();
   });
   const handleCellMouseDown = React.useCallback((params, event) => {
-    var _apiRef$current$rootE3, _apiRef$current$rootE4, _apiRef$current$rootE5;
+    var _apiRef$current$rootE2, _apiRef$current$rootE3;
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
     const isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -142,8 +142,8 @@ export const useGridCellSelection = (apiRef, props) => {
       id: params.id,
       field: params.field
     };
-    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.add(gridClasses['root--disableUserSelection']);
-    const document = ownerDocument((_apiRef$current$rootE5 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE5.current);
+    (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE2 = _apiRef$current$rootE2.current) == null ? void 0 : _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
+    const document = ownerDocument((_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE3.current);
     document.addEventListener('mouseup', handleMouseUp, {
       once: true
     });
@@ -161,20 +161,20 @@ export const useGridCellSelection = (apiRef, props) => {
     };
   }, []);
   const startAutoScroll = React.useCallback(() => {
-    var _apiRef$current$virtu, _apiRef$current$virtu2, _apiRef$current$virtu3;
+    var _apiRef$current$virtu, _apiRef$current$virtu2;
     if (autoScrollRAF.current) {
       return;
     }
     if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
       return;
     }
-    const virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu3 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
+    const virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu2 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu2.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
     function autoScroll() {
-      var _apiRef$current$virtu4;
-      if (!mousePosition.current || !((_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu4.current)) {
+      var _apiRef$current$virtu3;
+      if (!mousePosition.current || !((_apiRef$current$virtu3 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu3.current)) {
         return;
       }
       const {
@@ -221,7 +221,7 @@ export const useGridCellSelection = (apiRef, props) => {
     autoScroll();
   }, [apiRef]);
   const handleCellMouseOver = React.useCallback((params, event) => {
-    var _apiRef$current$virtu5, _apiRef$current$virtu6;
+    var _apiRef$current$virtu4;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -233,7 +233,7 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-    const virtualScrollerRect = (_apiRef$current$virtu5 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu6 = _apiRef$current$virtu5.current) == null ? void 0 : _apiRef$current$virtu6.getBoundingClientRect();
+    const virtualScrollerRect = (_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu4 = _apiRef$current$virtu4.current) == null ? void 0 : _apiRef$current$virtu4.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
@@ -354,8 +354,8 @@ export const useGridCellSelection = (apiRef, props) => {
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
   React.useEffect(() => {
-    var _apiRef$current$rootE6;
-    const rootRef = (_apiRef$current$rootE6 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE6.current;
+    var _apiRef$current$rootE4;
+    const rootRef = (_apiRef$current$rootE4 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE4.current;
     return () => {
       stopAutoScroll();
       const document = ownerDocument(rootRef);

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -5,13 +5,13 @@ import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from './gridRowGroupingUtils';
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
-  var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
+  var _ref, _props$rowGroupingMod, _props$initialState;
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []
   };
   return _extends({}, state, {
     rowGrouping: {
-      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : []
+      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState.model) != null ? _ref : []
     }
   });
 };
@@ -22,7 +22,7 @@ export const rowGroupingStateInitializer = (state, props, apiRef) => {
  * @requires useGridParamsApi (method) - can be after, async only
  */
 export const useGridRowGrouping = (apiRef, props) => {
-  var _props$initialState3, _props$initialState3$;
+  var _props$initialState3;
   apiRef.current.registerControlState({
     stateId: 'rowGrouping',
     propModel: props.rowGroupingModel,
@@ -89,7 +89,7 @@ export const useGridRowGrouping = (apiRef, props) => {
     return columnMenuItems;
   }, [props.disableRowGrouping]);
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2, _props$initialState2$;
+    var _props$initialState2;
     const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
     const shouldExportRowGroupingModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -97,7 +97,7 @@ export const useGridRowGrouping = (apiRef, props) => {
     // 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 ||
+    ((_props$initialState2 = props.initialState) == null || (_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 (!shouldExportRowGroupingModel) {
@@ -108,7 +108,7 @@ export const useGridRowGrouping = (apiRef, props) => {
         model: rowGroupingModelToExport
       }
     });
-  }, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3$.model]);
+  }, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3.model]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
     if (props.disableRowGrouping) {

package/hooks/utils/useKeepGroupedColumnsHidden.js

@@ -22,9 +22,9 @@ const updateColumnVisibilityModel = (columnVisibilityModel, rowGroupingModel, pr
  * Does not work when used with the `hide` property of `GridColDef`
  */
 export const useKeepGroupedColumnsHidden = props => {
-  var _props$rowGroupingMod, _props$initialState, _props$initialState$r;
+  var _props$rowGroupingMod, _props$initialState;
   const initialProps = React.useRef(props);
-  const rowGroupingModel = React.useRef((_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model);
+  const rowGroupingModel = React.useRef((_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState.model);
   React.useEffect(() => {
     props.apiRef.current.subscribeEvent('rowGroupingModelChange', newModel => {
       const columnVisibilityModel = updateColumnVisibilityModel(gridColumnVisibilityModelSelector(props.apiRef), newModel, rowGroupingModel.current);
@@ -35,7 +35,7 @@ export const useKeepGroupedColumnsHidden = props => {
   return React.useMemo(() => {
     var _invariantInitialStat;
     const invariantInitialState = initialProps.current.initialState;
-    const columnVisibilityModel = updateColumnVisibilityModel(invariantInitialState == null ? void 0 : (_invariantInitialStat = invariantInitialState.columns) == null ? void 0 : _invariantInitialStat.columnVisibilityModel, rowGroupingModel.current, undefined);
+    const columnVisibilityModel = updateColumnVisibilityModel(invariantInitialState == null || (_invariantInitialStat = invariantInitialState.columns) == null ? void 0 : _invariantInitialStat.columnVisibilityModel, rowGroupingModel.current, undefined);
     return _extends({}, invariantInitialState, {
       columns: _extends({}, invariantInitialState == null ? void 0 : invariantInitialState.columns, {
         columnVisibilityModel

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.10.0
+ * @mui/x-data-grid-premium v6.10.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/components/GridGroupingColumnFooterCell.js

@@ -4,20 +4,21 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridFooterCell } from './GridFooterCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridGroupingColumnFooterCell(props) {
-  var rowNode = props.rowNode;
   var rootProps = useGridRootProps();
-  var marginLeft;
-  if (rowNode.parent == null) {
-    marginLeft = 0;
+  var sx = {
+    ml: 0
+  };
+  if (props.rowNode.parent == null) {
+    sx.ml = 0;
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
-    marginLeft = 2;
+    sx.ml = 2;
   } else {
-    marginLeft = rowNode.depth * 2;
+    sx.ml = function (theme) {
+      return "calc(var(--DataGrid-cellOffsetMultiplier) * ".concat(theme.spacing(props.rowNode.depth), ")");
+    };
   }
   return /*#__PURE__*/_jsx(GridFooterCell, _extends({
-    sx: {
-      ml: marginLeft
-    }
+    sx: sx
   }, props));
 }
 export { GridGroupingColumnFooterCell };

package/legacy/components/GridGroupingColumnLeafCell.js

@@ -6,10 +6,11 @@ function GridGroupingColumnLeafCell(props) {
   var _props$formattedValue;
   var rowNode = props.rowNode;
   var rootProps = useGridRootProps();
-  var marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
   return /*#__PURE__*/_jsx(Box, {
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 1 : function (theme) {
+        return "calc(var(--DataGrid-cellOffsetMultiplier) * ".concat(theme.spacing(rowNode.depth), ")");
+      }
     },
     children: (_props$formattedValue = props.formattedValue) != null ? _props$formattedValue : props.value
   });

package/legacy/components/GridGroupingCriteriaCell.js

@@ -44,7 +44,6 @@ export function GridGroupingCriteriaCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();
   };
-  var marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
   var cellContent;
   var colDef = apiRef.current.getColumn(rowNode.groupingField);
   if (typeof colDef.renderCell === 'function') {
@@ -61,7 +60,9 @@ export function GridGroupingCriteriaCell(props) {
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : function (theme) {
+        return "calc(var(--DataGrid-cellOffsetMultiplier) * ".concat(theme.spacing(rowNode.depth), ")");
+      }
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,

package/legacy/hooks/features/aggregation/gridAggregationUtils.js

@@ -1,6 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_capitalize as capitalize } from '@mui/utils';
+import { GRID_ID_AUTOGENERATED } from '@mui/x-data-grid/internals';
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 import { addPinnedRow, isDeepEqual, insertNodeInTree, removeNodeFromTree } from '@mui/x-data-grid-pro/internals';
 export var GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root';
@@ -116,10 +118,11 @@ export var addFooterRows = function addFooterRows(_ref6) {
   var updateRootGroupFooter = function updateRootGroupFooter(groupNode) {
     var shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
     if (shouldHaveFooter) {
+      var rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,
-        rowModel: undefined,
-        rowId: getAggregationFooterRowIdFromGroupId(null),
+        rowModel: _defineProperty({}, GRID_ID_AUTOGENERATED, rowId),
+        rowId: rowId,
         position: 'bottom',
         apiRef: apiRef,
         isAutoGenerated: true

package/legacy/hooks/features/aggregation/useGridAggregation.js

@@ -5,14 +5,14 @@ import { gridAggregationModelSelector } from './gridAggregationSelectors';
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from './gridAggregationUtils';
 import { createAggregationLookup } from './createAggregationLookup';
 export var aggregationStateInitializer = function aggregationStateInitializer(state, props, apiRef) {
-  var _ref, _props$aggregationMod, _props$initialState, _props$initialState$a;
+  var _ref, _props$aggregationMod, _props$initialState;
   apiRef.current.caches.aggregation = {
     rulesOnLastColumnHydration: {},
     rulesOnLastRowHydration: {}
   };
   return _extends({}, state, {
     aggregation: {
-      model: (_ref = (_props$aggregationMod = props.aggregationModel) != null ? _props$aggregationMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$a = _props$initialState.aggregation) == null ? void 0 : _props$initialState$a.model) != null ? _ref : {}
+      model: (_ref = (_props$aggregationMod = props.aggregationModel) != null ? _props$aggregationMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.aggregation) == null ? void 0 : _props$initialState.model) != null ? _ref : {}
     }
   });
 };

package/legacy/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -145,7 +145,7 @@ export var wrapColumnWithAggregationValue = function wrapColumnWithAggregationVa
     apiRef = _ref6.apiRef,
     aggregationRule = _ref6.aggregationRule;
   var getCellAggregationResult = function getCellAggregationResult(id, field) {
-    var _rowNode$parent, _gridAggregationLooku, _gridAggregationLooku2;
+    var _rowNode$parent, _gridAggregationLooku;
     var cellAggregationPosition = null;
     var rowNode = apiRef.current.getRowNode(id);
     if (rowNode.type === 'group') {
@@ -159,7 +159,7 @@ export var wrapColumnWithAggregationValue = function wrapColumnWithAggregationVa
 
     // TODO: Add custom root id
     var groupId = cellAggregationPosition === 'inline' ? id : (_rowNode$parent = rowNode.parent) != null ? _rowNode$parent : '';
-    var aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)) == null ? void 0 : (_gridAggregationLooku2 = _gridAggregationLooku[groupId]) == null ? void 0 : _gridAggregationLooku2[field];
+    var aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)) == null || (_gridAggregationLooku = _gridAggregationLooku[groupId]) == null ? void 0 : _gridAggregationLooku[field];
     if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
       return null;
     }

package/legacy/hooks/features/cellSelection/useGridCellSelection.js

@@ -136,15 +136,15 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
   var handleMouseUp = useEventCallback(function () {
-    var _apiRef$current$rootE, _apiRef$current$rootE2;
+    var _apiRef$current$rootE;
     lastMouseDownCell.current = null;
-    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.remove(gridClasses['root--disableUserSelection']);
+    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.classList.remove(gridClasses['root--disableUserSelection']);
 
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopAutoScroll();
   });
   var handleCellMouseDown = React.useCallback(function (params, event) {
-    var _apiRef$current$rootE3, _apiRef$current$rootE4, _apiRef$current$rootE5;
+    var _apiRef$current$rootE2, _apiRef$current$rootE3;
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
     var isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -159,8 +159,8 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
       id: params.id,
       field: params.field
     };
-    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.add(gridClasses['root--disableUserSelection']);
-    var document = ownerDocument((_apiRef$current$rootE5 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE5.current);
+    (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE2 = _apiRef$current$rootE2.current) == null ? void 0 : _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
+    var document = ownerDocument((_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE3.current);
     document.addEventListener('mouseup', handleMouseUp, {
       once: true
     });
@@ -178,20 +178,20 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
     };
   }, []);
   var startAutoScroll = React.useCallback(function () {
-    var _apiRef$current$virtu, _apiRef$current$virtu2, _apiRef$current$virtu3;
+    var _apiRef$current$virtu, _apiRef$current$virtu2;
     if (autoScrollRAF.current) {
       return;
     }
     if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
       return;
     }
-    var virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu3 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
+    var virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu2 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu2.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
     function autoScroll() {
-      var _apiRef$current$virtu4;
-      if (!mousePosition.current || !((_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu4.current)) {
+      var _apiRef$current$virtu3;
+      if (!mousePosition.current || !((_apiRef$current$virtu3 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu3.current)) {
         return;
       }
       var _mousePosition$curren = mousePosition.current,
@@ -221,9 +221,9 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
         deltaX = AUTO_SCROLL_SPEED;
       }
       if (deltaX !== 0 || deltaY !== 0) {
-        var _apiRef$current$virtu5 = apiRef.current.virtualScrollerRef.current,
-          scrollLeft = _apiRef$current$virtu5.scrollLeft,
-          scrollTop = _apiRef$current$virtu5.scrollTop;
+        var _apiRef$current$virtu4 = apiRef.current.virtualScrollerRef.current,
+          scrollLeft = _apiRef$current$virtu4.scrollLeft,
+          scrollTop = _apiRef$current$virtu4.scrollTop;
         apiRef.current.scroll({
           top: scrollTop + deltaY * factor,
           left: scrollLeft + deltaX * factor
@@ -234,7 +234,7 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
     autoScroll();
   }, [apiRef]);
   var handleCellMouseOver = React.useCallback(function (params, event) {
-    var _apiRef$current$virtu6, _apiRef$current$virtu7;
+    var _apiRef$current$virtu5;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -244,7 +244,7 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
       id: id,
       field: field
     }, event.ctrlKey || event.metaKey);
-    var virtualScrollerRect = (_apiRef$current$virtu6 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu7 = _apiRef$current$virtu6.current) == null ? void 0 : _apiRef$current$virtu7.getBoundingClientRect();
+    var virtualScrollerRect = (_apiRef$current$virtu5 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu5 = _apiRef$current$virtu5.current) == null ? void 0 : _apiRef$current$virtu5.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
@@ -349,8 +349,8 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
   React.useEffect(function () {
-    var _apiRef$current$rootE6;
-    var rootRef = (_apiRef$current$rootE6 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE6.current;
+    var _apiRef$current$rootE4;
+    var rootRef = (_apiRef$current$rootE4 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE4.current;
     return function () {
       stopAutoScroll();
       var document = ownerDocument(rootRef);

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

@@ -6,13 +6,13 @@ import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from './gridRowGroupingUtils';
 export var rowGroupingStateInitializer = function rowGroupingStateInitializer(state, props, apiRef) {
-  var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
+  var _ref, _props$rowGroupingMod, _props$initialState;
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []
   };
   return _extends({}, state, {
     rowGrouping: {
-      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : []
+      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState.model) != null ? _ref : []
     }
   });
 };
@@ -23,7 +23,7 @@ export var rowGroupingStateInitializer = function rowGroupingStateInitializer(st
  * @requires useGridParamsApi (method) - can be after, async only
  */
 export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
-  var _props$initialState3, _props$initialState3$;
+  var _props$initialState3;
   apiRef.current.registerControlState({
     stateId: 'rowGrouping',
     propModel: props.rowGroupingModel,
@@ -92,7 +92,7 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
     return columnMenuItems;
   }, [props.disableRowGrouping]);
   var stateExportPreProcessing = React.useCallback(function (prevState, context) {
-    var _props$initialState2, _props$initialState2$;
+    var _props$initialState2;
     var rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
     var shouldExportRowGroupingModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -100,7 +100,7 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
     // 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 ||
+    ((_props$initialState2 = props.initialState) == null || (_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 (!shouldExportRowGroupingModel) {
@@ -111,7 +111,7 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
         model: rowGroupingModelToExport
       }
     });
-  }, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3$.model]);
+  }, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3.model]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
     if (props.disableRowGrouping) {

package/legacy/hooks/utils/useKeepGroupedColumnsHidden.js

@@ -22,9 +22,9 @@ var updateColumnVisibilityModel = function updateColumnVisibilityModel(columnVis
  * Does not work when used with the `hide` property of `GridColDef`
  */
 export var useKeepGroupedColumnsHidden = function useKeepGroupedColumnsHidden(props) {
-  var _props$rowGroupingMod, _props$initialState, _props$initialState$r;
+  var _props$rowGroupingMod, _props$initialState;
   var initialProps = React.useRef(props);
-  var rowGroupingModel = React.useRef((_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model);
+  var rowGroupingModel = React.useRef((_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState.model);
   React.useEffect(function () {
     props.apiRef.current.subscribeEvent('rowGroupingModelChange', function (newModel) {
       var columnVisibilityModel = updateColumnVisibilityModel(gridColumnVisibilityModelSelector(props.apiRef), newModel, rowGroupingModel.current);
@@ -35,7 +35,7 @@ export var useKeepGroupedColumnsHidden = function useKeepGroupedColumnsHidden(pr
   return React.useMemo(function () {
     var _invariantInitialStat;
     var invariantInitialState = initialProps.current.initialState;
-    var columnVisibilityModel = updateColumnVisibilityModel(invariantInitialState == null ? void 0 : (_invariantInitialStat = invariantInitialState.columns) == null ? void 0 : _invariantInitialStat.columnVisibilityModel, rowGroupingModel.current, undefined);
+    var columnVisibilityModel = updateColumnVisibilityModel(invariantInitialState == null || (_invariantInitialStat = invariantInitialState.columns) == null ? void 0 : _invariantInitialStat.columnVisibilityModel, rowGroupingModel.current, undefined);
     return _extends({}, invariantInitialState, {
       columns: _extends({}, invariantInitialState == null ? void 0 : invariantInitialState.columns, {
         columnVisibilityModel: columnVisibilityModel

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.10.0
+ * @mui/x-data-grid-premium v6.10.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/utils/releaseInfo.js

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

package/modern/components/GridGroupingColumnFooterCell.js

@@ -4,22 +4,19 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridFooterCell } from './GridFooterCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridGroupingColumnFooterCell(props) {
-  const {
-    rowNode
-  } = props;
   const rootProps = useGridRootProps();
-  let marginLeft;
-  if (rowNode.parent == null) {
-    marginLeft = 0;
+  const sx = {
+    ml: 0
+  };
+  if (props.rowNode.parent == null) {
+    sx.ml = 0;
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
-    marginLeft = 2;
+    sx.ml = 2;
   } else {
-    marginLeft = rowNode.depth * 2;
+    sx.ml = theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
   }
   return /*#__PURE__*/_jsx(GridFooterCell, _extends({
-    sx: {
-      ml: marginLeft
-    }
+    sx: sx
   }, props));
 }
 export { GridGroupingColumnFooterCell };

package/modern/components/GridGroupingColumnLeafCell.js

@@ -7,10 +7,9 @@ function GridGroupingColumnLeafCell(props) {
     rowNode
   } = props;
   const rootProps = useGridRootProps();
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
   return /*#__PURE__*/_jsx(Box, {
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 1 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
     children: props.formattedValue ?? props.value
   });

package/modern/components/GridGroupingCriteriaCell.js

@@ -47,7 +47,6 @@ export function GridGroupingCriteriaCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();
   };
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
   let cellContent;
   const colDef = apiRef.current.getColumn(rowNode.groupingField);
   if (typeof colDef.renderCell === 'function') {
@@ -64,7 +63,7 @@ export function GridGroupingCriteriaCell(props) {
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,

package/modern/hooks/features/aggregation/gridAggregationUtils.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_capitalize as capitalize } from '@mui/utils';
+import { GRID_ID_AUTOGENERATED } from '@mui/x-data-grid/internals';
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 import { addPinnedRow, isDeepEqual, insertNodeInTree, removeNodeFromTree } from '@mui/x-data-grid-pro/internals';
 export const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root';
@@ -108,10 +109,13 @@ export const addFooterRows = ({
   const updateRootGroupFooter = groupNode => {
     const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
     if (shouldHaveFooter) {
+      const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,
-        rowModel: undefined,
-        rowId: getAggregationFooterRowIdFromGroupId(null),
+        rowModel: {
+          [GRID_ID_AUTOGENERATED]: rowId
+        },
+        rowId,
         position: 'bottom',
         apiRef,
         isAutoGenerated: true

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.10.0
+ * @mui/x-data-grid-premium v6.10.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4OTE5OTIwMDAwMA==";
+  const releaseInfo = "MTY5MDQwODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/components/GridGroupingColumnFooterCell.js

@@ -13,21 +13,18 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function GridGroupingColumnFooterCell(props) {
-  const {
-    rowNode
-  } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  let marginLeft;
-  if (rowNode.parent == null) {
-    marginLeft = 0;
+  const sx = {
+    ml: 0
+  };
+  if (props.rowNode.parent == null) {
+    sx.ml = 0;
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
-    marginLeft = 2;
+    sx.ml = 2;
   } else {
-    marginLeft = rowNode.depth * 2;
+    sx.ml = theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFooterCell.GridFooterCell, (0, _extends2.default)({
-    sx: {
-      ml: marginLeft
-    }
+    sx: sx
   }, props));
 }

package/node/components/GridGroupingColumnLeafCell.js

@@ -16,10 +16,9 @@ function GridGroupingColumnLeafCell(props) {
     rowNode
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 1 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
     children: props.formattedValue ?? props.value
   });

package/node/components/GridGroupingCriteriaCell.js

@@ -55,7 +55,6 @@ function GridGroupingCriteriaCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();
   };
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
   let cellContent;
   const colDef = apiRef.current.getColumn(rowNode.groupingField);
   if (typeof colDef.renderCell === 'function') {
@@ -72,7 +71,7 @@ function GridGroupingCriteriaCell(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     className: classes.root,
     sx: {
-      ml: marginLeft
+      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.toggle,

package/node/hooks/features/aggregation/gridAggregationUtils.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.mergeStateWithAggregationModel = exports.getAvailableAggregationFunctions = exports.getAggregationRules = exports.getAggregationFunctionLabel = exports.getAggregationFooterRowIdFromGroupId = exports.canColumnHaveAggregationFunction = exports.areAggregationRulesEqual = exports.addFooterRows = exports.GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _utils = require("@mui/utils");
+var _internals = require("@mui/x-data-grid/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _internals = require("@mui/x-data-grid-pro/internals");
+var _internals2 = require("@mui/x-data-grid-pro/internals");
 const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root';
 exports.GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = GRID_AGGREGATION_ROOT_FOOTER_ROW_ID;
 const getAggregationFooterRowIdFromGroupId = groupId => {
@@ -93,7 +94,7 @@ const addFooterRows = ({
       const footerId = getAggregationFooterRowIdFromGroupId(groupNode.id);
       if (groupNode.footerId !== footerId) {
         if (groupNode.footerId != null) {
-          (0, _internals.removeNodeFromTree)({
+          (0, _internals2.removeNodeFromTree)({
             node: newGroupingParams.tree[groupNode.footerId],
             tree: newGroupingParams.tree,
             treeDepths: newGroupingParams.treeDepths
@@ -105,10 +106,10 @@ const addFooterRows = ({
           depth: groupNode ? groupNode.depth + 1 : 0,
           type: 'footer'
         };
-        (0, _internals.insertNodeInTree)(footerNode, newGroupingParams.tree, newGroupingParams.treeDepths, null);
+        (0, _internals2.insertNodeInTree)(footerNode, newGroupingParams.tree, newGroupingParams.treeDepths, null);
       }
     } else if (groupNode.footerId != null) {
-      (0, _internals.removeNodeFromTree)({
+      (0, _internals2.removeNodeFromTree)({
         node: newGroupingParams.tree[groupNode.footerId],
         tree: newGroupingParams.tree,
         treeDepths: newGroupingParams.treeDepths
@@ -121,10 +122,13 @@ const addFooterRows = ({
   const updateRootGroupFooter = groupNode => {
     const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
     if (shouldHaveFooter) {
-      newGroupingParams = (0, _internals.addPinnedRow)({
+      const rowId = getAggregationFooterRowIdFromGroupId(null);
+      newGroupingParams = (0, _internals2.addPinnedRow)({
         groupingParams: newGroupingParams,
-        rowModel: undefined,
-        rowId: getAggregationFooterRowIdFromGroupId(null),
+        rowModel: {
+          [_internals.GRID_ID_AUTOGENERATED]: rowId
+        },
+        rowId,
         position: 'bottom',
         apiRef,
         isAutoGenerated: true
@@ -155,7 +159,7 @@ exports.addFooterRows = addFooterRows;
 const areAggregationRulesEqual = (previousValue, newValue) => {
   const previousFields = Object.keys(previousValue ?? {});
   const newFields = Object.keys(newValue);
-  if (!(0, _internals.isDeepEqual)(previousFields, newFields)) {
+  if (!(0, _internals2.isDeepEqual)(previousFields, newFields)) {
     return false;
   }
   return newFields.every(field => {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.10.0
+ * @mui/x-data-grid-premium v6.10.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY4OTE5OTIwMDAwMA==";
+  const releaseInfo = "MTY5MDQwODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "6.10.0",
+  "version": "6.10.2",
   "description": "The Premium plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -31,11 +31,11 @@
     "directory": "packages/grid/x-data-grid-premium"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
-    "@mui/utils": "^5.13.6",
-    "@mui/x-data-grid": "6.10.0",
-    "@mui/x-data-grid-pro": "6.10.0",
-    "@mui/x-license-pro": "6.10.0",
+    "@babel/runtime": "^7.22.6",
+    "@mui/utils": "^5.13.7",
+    "@mui/x-data-grid": "6.10.2",
+    "@mui/x-data-grid-pro": "6.10.2",
+    "@mui/x-license-pro": "6.10.2",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",
     "exceljs": "^4.3.0",

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4OTE5OTIwMDAwMA==";
+  const releaseInfo = "MTY5MDQwODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat