@mui/x-data-grid-premium 8.0.0-alpha.5 → 8.0.0-alpha.6

package/CHANGELOG.md

@@ -5,6 +5,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.6
+
+_Dec 26, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Improve Data Grid scrolling performance
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@JoepVerkoelen, @k-rajat19, @lauri865.
+Following are all team members who have contributed to this release:
+@flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `sanitizeFilterItemValue()` utility is not exported anymore.
+
+#### `@mui/x-data-grid@8.0.0-alpha.6`
+
+- [DataGrid] Avoid subscribing to `renderContext` state in grid root for better scroll performance (#15986) @lauri865
+- [DataGrid] Fix header filters showing clear button while empty (#15829) @k-rajat19
+- [DataGrid] Improve test coverage of server side data source (#15942) @MBilalShafi
+- [DataGrid] Move progress components to leaf import (#15914) @romgrk
+- [DataGrid] Move skeleton to leaf import (#15931) @romgrk
+- [DataGrid] Replace `forwardRef` with a shim for forward compatibility (#15955) @lauri865
+- [l10n] Improve Dutch (nl-NL) locale (#15994) @JoepVerkoelen
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.6`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.6`, plus:
+
+- [DataGridPremium] Fix column unpinning with row grouping (#15908) @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.6`
+
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` to get the actions in the `actionBar` slot and in internal components (#15843) @flaviendelangle
+- [pickers] Use `usePickerContext()` to get the view-related props in the layout, toolbar and tabs slots (#15606) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.6`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.6`
+
+No changes since `@mui/x-charts@v8.0.0-alpha.5`.
+
+#### `@mui/x-charts-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.6`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.6`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.5`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.6`.
+
+### Docs
+
+- [docs] Remove production profiler from docs build (#15959) @lauri865
+- [code-infra] Add new `next-env.d.ts` changes (#15947) @JCQuintas
+
 ## 8.0.0-alpha.5
 
 _Dec 19, 2024_

package/DataGridPremium/DataGridPremium.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xLicense = require("@mui/x-license");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useDataGridPremiumComponent = require("./useDataGridPremiumComponent");
 var _useDataGridPremiumProps = require("./useDataGridPremiumProps");
 var _releaseInfo = require("../utils/releaseInfo");
@@ -30,7 +31,7 @@ let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [..._internals.propValidatorsDataGrid, ..._internals.propValidatorsDataGridPro];
 }
-const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(inProps, ref) {
+const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(inProps, ref) {
   const props = (0, _useDataGridPremiumProps.useDataGridPremiumProps)(inProps);
   const privateApiRef = (0, _useDataGridPremiumComponent.useDataGridPremiumComponent)(props.apiRef, props);
   (0, _xLicense.useLicenseVerifier)('x-data-grid-premium', releaseInfo);
@@ -44,9 +45,9 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGridPro.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
           packageName: "x-data-grid-premium",

package/components/GridDataSourceGroupingCriteriaCell.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -55,7 +54,7 @@ function GridGroupingCriteriaCellIcon(props) {
   if (isDataLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.loadingContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCircularProgress, {
         size: "1rem",
         color: "inherit"
       })

package/components/GridPremiumColumnMenu.d.ts

@@ -30,4 +30,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
         displayOrder: number;
     };
 };
-export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;

package/components/GridPremiumColumnMenu.js

@@ -11,6 +11,7 @@ exports.GridPremiumColumnMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridColumnMenuAggregationItem = require("./GridColumnMenuAggregationItem");
 var _rowGrouping = require("../hooks/features/rowGrouping");
 var _GridColumnMenuRowGroupItem = require("./GridColumnMenuRowGroupItem");
@@ -37,11 +38,10 @@ const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = exports.GRID_COLUMN_MENU_SLOT_PROPS_
     displayOrder: 27
   }
 });
-const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridGenericColumnMenu, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = (0, _forwardRef.forwardRef)(function GridPremiumColumnMenuSimple(props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM,
+    ref: ref
   }));
 });

package/esm/DataGridPremium/DataGridPremium.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
 import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps } from '@mui/x-data-grid-pro/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
 import { getReleaseInfo } from "../utils/releaseInfo.js";
@@ -23,7 +24,7 @@ let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
-const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(inProps, ref) {
+const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
   const props = useDataGridPremiumProps(inProps);
   const privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
@@ -37,9 +38,9 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-premium",

package/esm/components/GridDataSourceGroupingCriteriaCell.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -47,7 +46,7 @@ function GridGroupingCriteriaCellIcon(props) {
   if (isDataLoading) {
     return /*#__PURE__*/_jsx("div", {
       className: classes.loadingContainer,
-      children: /*#__PURE__*/_jsx(CircularProgress, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseCircularProgress, {
         size: "1rem",
         color: "inherit"
       })

package/esm/components/GridPremiumColumnMenu.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid-pro';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
 import { isGroupingColumn } from "../hooks/features/rowGrouping/index.js";
 import { GridColumnMenuRowGroupItem } from "./GridColumnMenuRowGroupItem.js";
@@ -27,11 +28,10 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU
     displayOrder: 27
   }
 });
-export const GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
-  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({
-    ref: ref
-  }, props, {
+export const GridPremiumColumnMenu = forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
+  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM,
+    ref: ref
   }));
 });

package/esm/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -48,10 +48,13 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const groupingColDefs = getGroupingColDefs(columnsState);
     let newColumnFields = [];
     const newColumnsLookup = {};
+    const prevGroupingfields = [];
 
     // We only keep the non-grouping columns
     columnsState.orderedFields.forEach(field => {
-      if (!isGroupingColumn(field)) {
+      if (isGroupingColumn(field)) {
+        prevGroupingfields.push(field);
+      } else {
         newColumnFields.push(field);
         newColumnsLookup[field] = columnsState.lookup[field];
       }
@@ -66,9 +69,11 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       }
       newColumnsLookup[groupingColDef.field] = groupingColDef;
     });
-    const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-    newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
-    columnsState.orderedFields = newColumnFields;
+    if (prevGroupingfields.length !== groupingColDefs.length) {
+      const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+      newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
+      columnsState.orderedFields = newColumnFields;
+    }
     columnsState.lookup = newColumnsLookup;
     return columnsState;
   }, [getGroupingColDefs]);

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
   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/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -55,10 +55,13 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const groupingColDefs = getGroupingColDefs(columnsState);
     let newColumnFields = [];
     const newColumnsLookup = {};
+    const prevGroupingfields = [];
 
     // We only keep the non-grouping columns
     columnsState.orderedFields.forEach(field => {
-      if (!(0, _gridRowGroupingUtils.isGroupingColumn)(field)) {
+      if ((0, _gridRowGroupingUtils.isGroupingColumn)(field)) {
+        prevGroupingfields.push(field);
+      } else {
         newColumnFields.push(field);
         newColumnsLookup[field] = columnsState.lookup[field];
       }
@@ -73,9 +76,11 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
       }
       newColumnsLookup[groupingColDef.field] = groupingColDef;
     });
-    const startIndex = newColumnFields[0] === _xDataGridPro.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-    newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
-    columnsState.orderedFields = newColumnFields;
+    if (prevGroupingfields.length !== groupingColDefs.length) {
+      const startIndex = newColumnFields[0] === _xDataGridPro.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+      newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
+      columnsState.orderedFields = newColumnFields;
+    }
     columnsState.lookup = newColumnsLookup;
     return columnsState;
   }, [getGroupingColDefs]);

package/index.js

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

package/modern/DataGridPremium/DataGridPremium.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
 import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps } from '@mui/x-data-grid-pro/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
 import { getReleaseInfo } from "../utils/releaseInfo.js";
@@ -23,7 +24,7 @@ let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
-const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(inProps, ref) {
+const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
   const props = useDataGridPremiumProps(inProps);
   const privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
@@ -37,9 +38,9 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-premium",

package/modern/components/GridDataSourceGroupingCriteriaCell.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -47,7 +46,7 @@ function GridGroupingCriteriaCellIcon(props) {
   if (isDataLoading) {
     return /*#__PURE__*/_jsx("div", {
       className: classes.loadingContainer,
-      children: /*#__PURE__*/_jsx(CircularProgress, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseCircularProgress, {
         size: "1rem",
         color: "inherit"
       })

package/modern/components/GridPremiumColumnMenu.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid-pro';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
 import { isGroupingColumn } from "../hooks/features/rowGrouping/index.js";
 import { GridColumnMenuRowGroupItem } from "./GridColumnMenuRowGroupItem.js";
@@ -27,11 +28,10 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU
     displayOrder: 27
   }
 });
-export const GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
-  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({
-    ref: ref
-  }, props, {
+export const GridPremiumColumnMenu = forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
+  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM,
+    ref: ref
   }));
 });

package/modern/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -48,10 +48,13 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const groupingColDefs = getGroupingColDefs(columnsState);
     let newColumnFields = [];
     const newColumnsLookup = {};
+    const prevGroupingfields = [];
 
     // We only keep the non-grouping columns
     columnsState.orderedFields.forEach(field => {
-      if (!isGroupingColumn(field)) {
+      if (isGroupingColumn(field)) {
+        prevGroupingfields.push(field);
+      } else {
         newColumnFields.push(field);
         newColumnsLookup[field] = columnsState.lookup[field];
       }
@@ -66,9 +69,11 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       }
       newColumnsLookup[groupingColDef.field] = groupingColDef;
     });
-    const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-    newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
-    columnsState.orderedFields = newColumnFields;
+    if (prevGroupingfields.length !== groupingColDefs.length) {
+      const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+      newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
+      columnsState.orderedFields = newColumnFields;
+    }
     columnsState.lookup = newColumnsLookup;
     return columnsState;
   }, [getGroupingColDefs]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.0.0-alpha.5
+ * @mui/x-data-grid-premium v8.0.0-alpha.6
  *
  * @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 = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
   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": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.6",
   "description": "The Premium plan edition of the Data Grid Components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -40,10 +40,10 @@
     "exceljs": "^4.4.0",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "8.0.0-alpha.5",
-    "@mui/x-data-grid-pro": "8.0.0-alpha.5",
-    "@mui/x-internals": "8.0.0-alpha.5",
-    "@mui/x-license": "8.0.0-alpha.5"
+    "@mui/x-data-grid": "8.0.0-alpha.6",
+    "@mui/x-data-grid-pro": "8.0.0-alpha.6",
+    "@mui/x-internals": "8.0.0-alpha.6",
+    "@mui/x-license": "8.0.0-alpha.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
   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