@mui/x-data-grid-premium 7.5.1 → 7.6.1

package/CHANGELOG.md

@@ -3,6 +3,117 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.1
+
+_May 31, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+🐞 Address the `@mui/internal-test-utils` added as a direct dependency to `@mui/x-data-grid` by mistake.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.1`
+
+- [DataGrid] Fix column resize not working with special character (#13069) @oukunan
+- [DataGrid] Move `@mui/internal-test-utils` to dev dependency (#13318) @LukasTy
+
+#### `@mui/x-data-grid-pro@7.6.1` [![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@7.6.1`.
+
+#### `@mui/x-data-grid-premium@7.6.1` [![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@7.6.1`.
+
+## 7.6.0
+
+_May 30, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow to define and customize the indentation of nested items in the Tree View
+- ✨ Allow charts highlights to be controlled
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.0`
+
+- [DataGrid] Avoid re-rendering all cells on column change (#12980) @romgrk
+- [DataGrid] Export `GridColumnHeadersProps` (#13229) @cherniavskii
+- [DataGrid] Fix header filters' issue with custom filters (#13255) @MBilalShafi
+- [DataGrid] Remove dead logic to support Safari < 13 (#13249) @oliviertassinari
+- [l10n] Improve Persian (fa-IR) locale (#12994) @amiryxe
+
+#### `@mui/x-data-grid-pro@7.6.0` [![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@7.6.0`.
+
+#### `@mui/x-data-grid-premium@7.6.0` [![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@7.6.0`, plus:
+
+- [DataGridPremium] Fix excel export causing column with wrong width (#13191) @romgrk
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.0`
+
+- [pickers] Fix `DateBuilderReturnType` when the date is `undefined` (#13244) @alexey-kozlenkov
+
+#### `@mui/x-date-pickers-pro@7.6.0` [![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@7.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.0`
+
+- [charts] Allow charts highlights to be controlled (#12828) @JCQuintas
+- [charts] Refactor axis band scaleType check (#13295) @JCQuintas
+- [charts] Refactor checkScaleErrors to improve readability and simplify axis message logic (#13305) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.6.0`
+
+- [TreeView] Add JSDoc to every instance method (#13219) @flaviendelangle
+- [TreeView] Allow to customize the indentation of nested items (#13225) @flaviendelangle
+- [TreeView] Allow to define indentation at the item level (#13126) @flaviendelangle
+
+### Docs
+
+- [docs] Add Bulk editing demo for the Community plan (#12800) @cherniavskii
+- [docs] Add conditional label formatting on tooltip page and link to label page (#13235) @JCQuintas
+- [docs] Add information about key combinations on a11y sections (#13234) @arthurbalduini
+- [docs] Cleanup of the Tree View demos (#13237) @flaviendelangle
+- [docs] Document how to customize a subsection of a line chart (#13210) @alexfauquette
+- [docs] Fix Pickers FAQ callout (#13238) @LukasTy
+- [docs] Fix Vale errors @oliviertassinari
+- [docs] Fix a small typo in property comment (#13245) @Janpot
+- [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
+- [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
+- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Update Pickers demo configurations (#13303) @LukasTy
+
+### Core
+
+- [core] Add comment on why logic to sync column header (#13248) @oliviertassinari
+- [core] Fix `l10n` script execution with arguments (#13297) @LukasTy
+- [core] Prevent "Add reviewers" workflow from triggering since it doesn't work (#13236) @JCQuintas
+- [docs-infra] Fix `@mui/material` version used in sandboxes (#13260) @LukasTy
+- [test] Use `describeTreeView` for keyboard navigation tests on disabled items (#13184) @flaviendelangle
+- [test] Use `describeTreeView` for remaining items tests (#13262) @flaviendelangle
+- [test] Use test-utils from npm (#12880) @michaldudak
+- [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
+
 ## v7.5.1
 
 _May 23, 2024_
@@ -339,7 +450,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 ### Core
 
 - [core] Fix `l10n` GH workflow (#12895) @LukasTy
-- [core] Match Base UI and Toolpad @oliviertassinari
+- [core] Match Base UI and Toolpad @oliviertassinari
 - [core] Remove redundant `setupFiles` entries in `package.json` (#12899) @LukasTy
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle

package/DataGridPremium/DataGridPremium.js

@@ -92,7 +92,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': _propTypes.default.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: _propTypes.default.bool,

package/esm/DataGridPremium/DataGridPremium.js

@@ -84,7 +84,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: PropTypes.bool,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '@mui/x-data-grid-pro';
-import { buildWarning, isObject, isSingleSelectColDef } from '@mui/x-data-grid/internals';
+import { buildWarning, isObject, isSingleSelectColDef, gridHasColSpanSelector } from '@mui/x-data-grid/internals';
 const getExcelJs = async () => {
   const excelJsModule = await import('exceljs');
   return excelJsModule.default ?? excelJsModule;
@@ -23,22 +23,30 @@ const getFormattedValueOptions = (colDef, row, valueOptions, api) => {
   }
   return valueOptionsFormatted.map(option => typeof option === 'object' ? option.label : option);
 };
-export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) => {
+/**
+ * FIXME: This function mutates the colspan info, but colspan info assumes that the columns
+ * passed to it are always consistent. In this case, the exported columns may differ from the
+ * actual rendered columns.
+ * The caller of this function MUST call `resetColSpan()` before and after usage.
+ */
+export const serializeRowUnsafe = (id, columns, apiRef, defaultValueOptionsFormulae, options) => {
   const row = {};
   const dataValidation = {};
   const mergedCells = [];
-  const firstCellParams = api.getCellParams(id, columns[0].field);
+  const firstCellParams = apiRef.current.getCellParams(id, columns[0].field);
   const outlineLevel = firstCellParams.rowNode.depth;
-
-  // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
-  api.calculateColSpan({
-    rowId: id,
-    minFirstColumn: 0,
-    maxLastColumn: columns.length,
-    columns
-  });
+  const hasColSpan = gridHasColSpanSelector(apiRef);
+  if (hasColSpan) {
+    // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+    apiRef.current.calculateColSpan({
+      rowId: id,
+      minFirstColumn: 0,
+      maxLastColumn: columns.length,
+      columns
+    });
+  }
   columns.forEach((column, colIndex) => {
-    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+    const colSpanInfo = hasColSpan ? apiRef.current.unstable_getCellColSpanInfo(id, colIndex) : undefined;
     if (colSpanInfo && colSpanInfo.spannedByColSpan) {
       return;
     }
@@ -48,7 +56,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
         rightIndex: colIndex + colSpanInfo.cellProps.colSpan
       });
     }
-    const cellParams = api.getCellParams(id, column.field);
+    const cellParams = apiRef.current.getCellParams(id, column.field);
     let cellValue;
     switch (cellParams.colDef.type) {
       case 'singleSelect':
@@ -62,7 +70,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
               row,
               field: cellParams.field
             });
-            const formattedValueOptions = getFormattedValueOptions(castColumn, row, valueOptions, api);
+            const formattedValueOptions = getFormattedValueOptions(castColumn, row, valueOptions, apiRef.current);
             dataValidation[castColumn.field] = {
               type: 'list',
               allowBlank: true,
@@ -78,7 +86,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
               formulae: [address]
             };
           }
-          const formattedValue = api.getCellParams(id, castColumn.field).formattedValue;
+          const formattedValue = apiRef.current.getCellParams(id, castColumn.field).formattedValue;
           if (process.env.NODE_ENV !== 'production') {
             if (String(cellParams.formattedValue) === '[object Object]') {
               warnInvalidFormattedValue();
@@ -93,7 +101,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
         }
       case 'boolean':
       case 'number':
-        cellValue = api.getCellParams(id, column.field).value;
+        cellValue = apiRef.current.getCellParams(id, column.field).value;
         break;
       case 'date':
       case 'dateTime':
@@ -101,7 +109,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
           // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
           // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
           // About Date.UTC(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
-          const value = api.getCellParams(id, column.field).value;
+          const value = apiRef.current.getCellParams(id, column.field).value;
           // value may be `undefined` in auto-generated grouping rows
           if (!value) {
             break;
@@ -113,7 +121,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
       case 'actions':
         break;
       default:
-        cellValue = api.getCellParams(id, column.field).formattedValue;
+        cellValue = apiRef.current.getCellParams(id, column.field).formattedValue;
         if (process.env.NODE_ENV !== 'production') {
           if (String(cellParams.formattedValue) === '[object Object]') {
             warnInvalidFormattedValue();
@@ -276,7 +284,7 @@ async function createValueOptionsSheetIfNeeded(valueOptionsData, sheetName, work
     valueOptionsWorksheet.getColumn(field).values = values;
   });
 }
-export async function buildExcel(options, api) {
+export async function buildExcel(options, apiRef) {
   const {
     columns,
     rowIds,
@@ -300,20 +308,22 @@ export async function buildExcel(options, api) {
   }
   if (includeColumnGroupsHeaders) {
     const columnGroupPaths = columns.reduce((acc, column) => {
-      acc[column.field] = api.getColumnGroupPath(column.field);
+      acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;
     }, {});
-    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, api.getAllGroupDetails());
+    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, apiRef.current.getAllGroupDetails());
   }
   if (includeHeaders) {
     worksheet.addRow(columns.map(column => column.headerName ?? column.field));
   }
-  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, api);
+  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, apiRef.current);
   createValueOptionsSheetIfNeeded(valueOptionsData, valueOptionsSheetName, workbook);
+  apiRef.current.resetColSpan();
   rowIds.forEach(id => {
-    const serializedRow = serializeRow(id, columns, api, valueOptionsData, options);
+    const serializedRow = serializeRowUnsafe(id, columns, apiRef, valueOptionsData, options);
     addSerializedRowToWorksheet(serializedRow, worksheet);
   });
+  apiRef.current.resetColSpan();
   if (exceljsPostProcess) {
     await exceljsPostProcess({
       workbook,

package/esm/hooks/features/export/useGridExcelExport.js

@@ -3,7 +3,7 @@ const _excluded = ["worker", "exceljsPostProcess", "exceljsPreProcess", "columns
 import * as React from 'react';
 import { useGridApiMethod, useGridLogger, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, exportAs, getColumnsToExport, defaultGetRowsToExport } from '@mui/x-data-grid/internals';
-import { buildExcel, getDataForValueOptionsSheet, serializeColumns, serializeRow } from './serializer/excelSerializer';
+import { buildExcel, getDataForValueOptionsSheet, serializeColumns, serializeRowUnsafe } from './serializer/excelSerializer';
 import { GridExcelExportMenuItem } from '../../../components';
 
 /**
@@ -36,7 +36,7 @@ export const useGridExcelExport = (apiRef, props) => {
       exceljsPreProcess: options?.exceljsPreProcess,
       exceljsPostProcess: options?.exceljsPostProcess,
       escapeFormulas: options.escapeFormulas ?? true
-    }, apiRef.current);
+    }, apiRef);
   }, [logger, apiRef]);
   const exportDataAsExcel = React.useCallback(async (options = {}) => {
     const {
@@ -88,9 +88,11 @@ export const useGridExcelExport = (apiRef, props) => {
     });
     const valueOptionsData = await getDataForValueOptionsSheet(exportedColumns, valueOptionsSheetName, apiRef.current);
     const serializedColumns = serializeColumns(exportedColumns, options.columnsStyles || {});
-    const serializedRows = exportedRowIds.map(id => serializeRow(id, exportedColumns, apiRef.current, valueOptionsData, {
+    apiRef.current.resetColSpan();
+    const serializedRows = exportedRowIds.map(id => serializeRowUnsafe(id, exportedColumns, apiRef, valueOptionsData, {
       escapeFormulas: options.escapeFormulas ?? true
     }));
+    apiRef.current.resetColSpan();
     const columnGroupPaths = exportedColumns.reduce((acc, column) => {
       acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxNjQxNTIwMDAwMA==";
+  const releaseInfo = "MTcxNzEwMjgwMDAwMA==";
   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/export/serializer/excelSerializer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type * as Excel from 'exceljs';
 import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
 import { GridStateColDef, GridColumnGroupLookup } from '@mui/x-data-grid/internals';
@@ -12,7 +13,13 @@ interface SerializedRow {
         rightIndex: number;
     }[];
 }
-export declare const serializeRow: (id: GridRowId, columns: GridStateColDef[], api: GridPrivateApiPremium, defaultValueOptionsFormulae: {
+/**
+ * FIXME: This function mutates the colspan info, but colspan info assumes that the columns
+ * passed to it are always consistent. In this case, the exported columns may differ from the
+ * actual rendered columns.
+ * The caller of this function MUST call `resetColSpan()` before and after usage.
+ */
+export declare const serializeRowUnsafe: (id: GridRowId, columns: GridStateColDef[], apiRef: React.MutableRefObject<GridPrivateApiPremium>, defaultValueOptionsFormulae: {
     [field: string]: {
         address: string;
     };
@@ -47,7 +54,7 @@ interface BuildExcelOptions extends Pick<GridExcelExportOptions, 'exceljsPreProc
     rowIds: GridRowId[];
     columnsStyles?: ColumnsStylesInterface;
 }
-export declare function buildExcel(options: BuildExcelOptions, api: GridPrivateApiPremium): Promise<Excel.Workbook>;
+export declare function buildExcel(options: BuildExcelOptions, apiRef: React.MutableRefObject<GridPrivateApiPremium>): Promise<Excel.Workbook>;
 export interface ExcelExportInitEvent {
     serializedColumns: SerializedColumns;
     serializedRows: SerializedRow[];

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

@@ -8,7 +8,7 @@ exports.buildExcel = buildExcel;
 exports.getDataForValueOptionsSheet = getDataForValueOptionsSheet;
 exports.serializeColumn = void 0;
 exports.serializeColumns = serializeColumns;
-exports.serializeRow = void 0;
+exports.serializeRowUnsafe = void 0;
 exports.setupExcelExportWebWorker = setupExcelExportWebWorker;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -37,22 +37,30 @@ const getFormattedValueOptions = (colDef, row, valueOptions, api) => {
   }
   return valueOptionsFormatted.map(option => typeof option === 'object' ? option.label : option);
 };
-const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) => {
+/**
+ * FIXME: This function mutates the colspan info, but colspan info assumes that the columns
+ * passed to it are always consistent. In this case, the exported columns may differ from the
+ * actual rendered columns.
+ * The caller of this function MUST call `resetColSpan()` before and after usage.
+ */
+const serializeRowUnsafe = (id, columns, apiRef, defaultValueOptionsFormulae, options) => {
   const row = {};
   const dataValidation = {};
   const mergedCells = [];
-  const firstCellParams = api.getCellParams(id, columns[0].field);
+  const firstCellParams = apiRef.current.getCellParams(id, columns[0].field);
   const outlineLevel = firstCellParams.rowNode.depth;
-
-  // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
-  api.calculateColSpan({
-    rowId: id,
-    minFirstColumn: 0,
-    maxLastColumn: columns.length,
-    columns
-  });
+  const hasColSpan = (0, _internals.gridHasColSpanSelector)(apiRef);
+  if (hasColSpan) {
+    // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+    apiRef.current.calculateColSpan({
+      rowId: id,
+      minFirstColumn: 0,
+      maxLastColumn: columns.length,
+      columns
+    });
+  }
   columns.forEach((column, colIndex) => {
-    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+    const colSpanInfo = hasColSpan ? apiRef.current.unstable_getCellColSpanInfo(id, colIndex) : undefined;
     if (colSpanInfo && colSpanInfo.spannedByColSpan) {
       return;
     }
@@ -62,7 +70,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
         rightIndex: colIndex + colSpanInfo.cellProps.colSpan
       });
     }
-    const cellParams = api.getCellParams(id, column.field);
+    const cellParams = apiRef.current.getCellParams(id, column.field);
     let cellValue;
     switch (cellParams.colDef.type) {
       case 'singleSelect':
@@ -76,7 +84,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
               row,
               field: cellParams.field
             });
-            const formattedValueOptions = getFormattedValueOptions(castColumn, row, valueOptions, api);
+            const formattedValueOptions = getFormattedValueOptions(castColumn, row, valueOptions, apiRef.current);
             dataValidation[castColumn.field] = {
               type: 'list',
               allowBlank: true,
@@ -92,7 +100,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
               formulae: [address]
             };
           }
-          const formattedValue = api.getCellParams(id, castColumn.field).formattedValue;
+          const formattedValue = apiRef.current.getCellParams(id, castColumn.field).formattedValue;
           if (process.env.NODE_ENV !== 'production') {
             if (String(cellParams.formattedValue) === '[object Object]') {
               warnInvalidFormattedValue();
@@ -107,7 +115,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
         }
       case 'boolean':
       case 'number':
-        cellValue = api.getCellParams(id, column.field).value;
+        cellValue = apiRef.current.getCellParams(id, column.field).value;
         break;
       case 'date':
       case 'dateTime':
@@ -115,7 +123,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
           // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
           // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
           // About Date.UTC(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
-          const value = api.getCellParams(id, column.field).value;
+          const value = apiRef.current.getCellParams(id, column.field).value;
           // value may be `undefined` in auto-generated grouping rows
           if (!value) {
             break;
@@ -127,7 +135,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
       case 'actions':
         break;
       default:
-        cellValue = api.getCellParams(id, column.field).formattedValue;
+        cellValue = apiRef.current.getCellParams(id, column.field).formattedValue;
         if (process.env.NODE_ENV !== 'production') {
           if (String(cellParams.formattedValue) === '[object Object]') {
             warnInvalidFormattedValue();
@@ -152,7 +160,7 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) =>
     mergedCells
   };
 };
-exports.serializeRow = serializeRow;
+exports.serializeRowUnsafe = serializeRowUnsafe;
 const defaultColumnsStyles = {
   [_xDataGridPro.GRID_DATE_COL_DEF.type]: {
     numFmt: 'dd.mm.yyyy'
@@ -292,7 +300,7 @@ async function createValueOptionsSheetIfNeeded(valueOptionsData, sheetName, work
     valueOptionsWorksheet.getColumn(field).values = values;
   });
 }
-async function buildExcel(options, api) {
+async function buildExcel(options, apiRef) {
   const {
     columns,
     rowIds,
@@ -316,20 +324,22 @@ async function buildExcel(options, api) {
   }
   if (includeColumnGroupsHeaders) {
     const columnGroupPaths = columns.reduce((acc, column) => {
-      acc[column.field] = api.getColumnGroupPath(column.field);
+      acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;
     }, {});
-    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, api.getAllGroupDetails());
+    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, apiRef.current.getAllGroupDetails());
   }
   if (includeHeaders) {
     worksheet.addRow(columns.map(column => column.headerName ?? column.field));
   }
-  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, api);
+  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, apiRef.current);
   createValueOptionsSheetIfNeeded(valueOptionsData, valueOptionsSheetName, workbook);
+  apiRef.current.resetColSpan();
   rowIds.forEach(id => {
-    const serializedRow = serializeRow(id, columns, api, valueOptionsData, options);
+    const serializedRow = serializeRowUnsafe(id, columns, apiRef, valueOptionsData, options);
     addSerializedRowToWorksheet(serializedRow, worksheet);
   });
+  apiRef.current.resetColSpan();
   if (exceljsPostProcess) {
     await exceljsPostProcess({
       workbook,

package/hooks/features/export/useGridExcelExport.js

@@ -44,7 +44,7 @@ const useGridExcelExport = (apiRef, props) => {
       exceljsPreProcess: options?.exceljsPreProcess,
       exceljsPostProcess: options?.exceljsPostProcess,
       escapeFormulas: options.escapeFormulas ?? true
-    }, apiRef.current);
+    }, apiRef);
   }, [logger, apiRef]);
   const exportDataAsExcel = React.useCallback(async (options = {}) => {
     const {
@@ -96,9 +96,11 @@ const useGridExcelExport = (apiRef, props) => {
     });
     const valueOptionsData = await (0, _excelSerializer.getDataForValueOptionsSheet)(exportedColumns, valueOptionsSheetName, apiRef.current);
     const serializedColumns = (0, _excelSerializer.serializeColumns)(exportedColumns, options.columnsStyles || {});
-    const serializedRows = exportedRowIds.map(id => (0, _excelSerializer.serializeRow)(id, exportedColumns, apiRef.current, valueOptionsData, {
+    apiRef.current.resetColSpan();
+    const serializedRows = exportedRowIds.map(id => (0, _excelSerializer.serializeRowUnsafe)(id, exportedColumns, apiRef, valueOptionsData, {
       escapeFormulas: options.escapeFormulas ?? true
     }));
+    apiRef.current.resetColSpan();
     const columnGroupPaths = exportedColumns.reduce((acc, column) => {
       acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;

package/index.d.ts

@@ -22,6 +22,7 @@ export * from './hooks';
 export * from './models';
 export * from './components';
 export { GridColumnHeaders } from '@mui/x-data-grid-pro';
+export type { GridColumnHeadersProps } from '@mui/x-data-grid-pro';
 export type { DataGridPremiumProps, GridExperimentalPremiumFeatures, } from './models/dataGridPremiumProps';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';

package/index.js

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

package/modern/DataGridPremium/DataGridPremium.js

@@ -84,7 +84,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: PropTypes.bool,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '@mui/x-data-grid-pro';
-import { buildWarning, isObject, isSingleSelectColDef } from '@mui/x-data-grid/internals';
+import { buildWarning, isObject, isSingleSelectColDef, gridHasColSpanSelector } from '@mui/x-data-grid/internals';
 const getExcelJs = async () => {
   const excelJsModule = await import('exceljs');
   return excelJsModule.default ?? excelJsModule;
@@ -23,22 +23,30 @@ const getFormattedValueOptions = (colDef, row, valueOptions, api) => {
   }
   return valueOptionsFormatted.map(option => typeof option === 'object' ? option.label : option);
 };
-export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, options) => {
+/**
+ * FIXME: This function mutates the colspan info, but colspan info assumes that the columns
+ * passed to it are always consistent. In this case, the exported columns may differ from the
+ * actual rendered columns.
+ * The caller of this function MUST call `resetColSpan()` before and after usage.
+ */
+export const serializeRowUnsafe = (id, columns, apiRef, defaultValueOptionsFormulae, options) => {
   const row = {};
   const dataValidation = {};
   const mergedCells = [];
-  const firstCellParams = api.getCellParams(id, columns[0].field);
+  const firstCellParams = apiRef.current.getCellParams(id, columns[0].field);
   const outlineLevel = firstCellParams.rowNode.depth;
-
-  // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
-  api.calculateColSpan({
-    rowId: id,
-    minFirstColumn: 0,
-    maxLastColumn: columns.length,
-    columns
-  });
+  const hasColSpan = gridHasColSpanSelector(apiRef);
+  if (hasColSpan) {
+    // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+    apiRef.current.calculateColSpan({
+      rowId: id,
+      minFirstColumn: 0,
+      maxLastColumn: columns.length,
+      columns
+    });
+  }
   columns.forEach((column, colIndex) => {
-    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+    const colSpanInfo = hasColSpan ? apiRef.current.unstable_getCellColSpanInfo(id, colIndex) : undefined;
     if (colSpanInfo && colSpanInfo.spannedByColSpan) {
       return;
     }
@@ -48,7 +56,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
         rightIndex: colIndex + colSpanInfo.cellProps.colSpan
       });
     }
-    const cellParams = api.getCellParams(id, column.field);
+    const cellParams = apiRef.current.getCellParams(id, column.field);
     let cellValue;
     switch (cellParams.colDef.type) {
       case 'singleSelect':
@@ -62,7 +70,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
               row,
               field: cellParams.field
             });
-            const formattedValueOptions = getFormattedValueOptions(castColumn, row, valueOptions, api);
+            const formattedValueOptions = getFormattedValueOptions(castColumn, row, valueOptions, apiRef.current);
             dataValidation[castColumn.field] = {
               type: 'list',
               allowBlank: true,
@@ -78,7 +86,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
               formulae: [address]
             };
           }
-          const formattedValue = api.getCellParams(id, castColumn.field).formattedValue;
+          const formattedValue = apiRef.current.getCellParams(id, castColumn.field).formattedValue;
           if (process.env.NODE_ENV !== 'production') {
             if (String(cellParams.formattedValue) === '[object Object]') {
               warnInvalidFormattedValue();
@@ -93,7 +101,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
         }
       case 'boolean':
       case 'number':
-        cellValue = api.getCellParams(id, column.field).value;
+        cellValue = apiRef.current.getCellParams(id, column.field).value;
         break;
       case 'date':
       case 'dateTime':
@@ -101,7 +109,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
           // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
           // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
           // About Date.UTC(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
-          const value = api.getCellParams(id, column.field).value;
+          const value = apiRef.current.getCellParams(id, column.field).value;
           // value may be `undefined` in auto-generated grouping rows
           if (!value) {
             break;
@@ -113,7 +121,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae, opti
       case 'actions':
         break;
       default:
-        cellValue = api.getCellParams(id, column.field).formattedValue;
+        cellValue = apiRef.current.getCellParams(id, column.field).formattedValue;
         if (process.env.NODE_ENV !== 'production') {
           if (String(cellParams.formattedValue) === '[object Object]') {
             warnInvalidFormattedValue();
@@ -276,7 +284,7 @@ async function createValueOptionsSheetIfNeeded(valueOptionsData, sheetName, work
     valueOptionsWorksheet.getColumn(field).values = values;
   });
 }
-export async function buildExcel(options, api) {
+export async function buildExcel(options, apiRef) {
   const {
     columns,
     rowIds,
@@ -300,20 +308,22 @@ export async function buildExcel(options, api) {
   }
   if (includeColumnGroupsHeaders) {
     const columnGroupPaths = columns.reduce((acc, column) => {
-      acc[column.field] = api.getColumnGroupPath(column.field);
+      acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;
     }, {});
-    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, api.getAllGroupDetails());
+    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, apiRef.current.getAllGroupDetails());
   }
   if (includeHeaders) {
     worksheet.addRow(columns.map(column => column.headerName ?? column.field));
   }
-  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, api);
+  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, apiRef.current);
   createValueOptionsSheetIfNeeded(valueOptionsData, valueOptionsSheetName, workbook);
+  apiRef.current.resetColSpan();
   rowIds.forEach(id => {
-    const serializedRow = serializeRow(id, columns, api, valueOptionsData, options);
+    const serializedRow = serializeRowUnsafe(id, columns, apiRef, valueOptionsData, options);
     addSerializedRowToWorksheet(serializedRow, worksheet);
   });
+  apiRef.current.resetColSpan();
   if (exceljsPostProcess) {
     await exceljsPostProcess({
       workbook,

package/modern/hooks/features/export/useGridExcelExport.js

@@ -3,7 +3,7 @@ const _excluded = ["worker", "exceljsPostProcess", "exceljsPreProcess", "columns
 import * as React from 'react';
 import { useGridApiMethod, useGridLogger, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, exportAs, getColumnsToExport, defaultGetRowsToExport } from '@mui/x-data-grid/internals';
-import { buildExcel, getDataForValueOptionsSheet, serializeColumns, serializeRow } from './serializer/excelSerializer';
+import { buildExcel, getDataForValueOptionsSheet, serializeColumns, serializeRowUnsafe } from './serializer/excelSerializer';
 import { GridExcelExportMenuItem } from '../../../components';
 
 /**
@@ -36,7 +36,7 @@ export const useGridExcelExport = (apiRef, props) => {
       exceljsPreProcess: options?.exceljsPreProcess,
       exceljsPostProcess: options?.exceljsPostProcess,
       escapeFormulas: options.escapeFormulas ?? true
-    }, apiRef.current);
+    }, apiRef);
   }, [logger, apiRef]);
   const exportDataAsExcel = React.useCallback(async (options = {}) => {
     const {
@@ -88,9 +88,11 @@ export const useGridExcelExport = (apiRef, props) => {
     });
     const valueOptionsData = await getDataForValueOptionsSheet(exportedColumns, valueOptionsSheetName, apiRef.current);
     const serializedColumns = serializeColumns(exportedColumns, options.columnsStyles || {});
-    const serializedRows = exportedRowIds.map(id => serializeRow(id, exportedColumns, apiRef.current, valueOptionsData, {
+    apiRef.current.resetColSpan();
+    const serializedRows = exportedRowIds.map(id => serializeRowUnsafe(id, exportedColumns, apiRef, valueOptionsData, {
       escapeFormulas: options.escapeFormulas ?? true
     }));
+    apiRef.current.resetColSpan();
     const columnGroupPaths = exportedColumns.reduce((acc, column) => {
       acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.5.1
+ * @mui/x-data-grid-premium v7.6.1
  *
  * @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 = "MTcxNjQxNTIwMDAwMA==";
+  const releaseInfo = "MTcxNzEwMjgwMDAwMA==";
   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": "7.5.1",
+  "version": "7.6.1",
   "description": "The Premium plan edition of the Data Grid Components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -33,17 +33,17 @@
     "directory": "packages/x-data-grid-premium"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@mui/system": "^5.15.14",
+    "@babel/runtime": "^7.24.6",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "exceljs": "^4.4.0",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-data-grid": "7.5.1",
-    "@mui/x-data-grid-pro": "7.5.1",
-    "@mui/x-license": "7.2.1"
+    "@mui/x-data-grid": "7.6.1",
+    "@mui/x-data-grid-pro": "7.6.1",
+    "@mui/x-license": "7.6.1"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.14",

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 = "MTcxNjQxNTIwMDAwMA==";
+  const releaseInfo = "MTcxNzEwMjgwMDAwMA==";
   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