@mui/x-data-grid-premium 7.5.0 → 7.6.0

package/DataGridPremium/DataGridPremium.js

@@ -59,7 +59,7 @@ const DataGridPremium = exports.DataGridPremium = /*#__PURE__*/React.memo(DataGr
 process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
@@ -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/components/GridColumnMenuAggregationItem.js

@@ -109,7 +109,7 @@ function GridColumnMenuAggregationItem(props) {
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   colDef: _propTypes.default.object.isRequired,
   onClick: _propTypes.default.func.isRequired

package/components/GridColumnMenuRowGroupItem.d.ts

@@ -1,7 +1,3 @@
 import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
-declare namespace GridColumnMenuRowGroupItem {
-    var propTypes: any;
-}
-export { GridColumnMenuRowGroupItem };
+export declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;

package/components/GridColumnMenuRowGroupItem.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridColumnMenuRowGroupItem = GridColumnMenuRowGroupItem;
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
@@ -55,12 +54,4 @@ function GridColumnMenuRowGroupItem(props) {
     });
   }
   return renderUnGroupingMenuItem((0, _gridRowGroupingUtils.getRowGroupingCriteriaFromGroupingField)(colDef.field));
-}
-process.env.NODE_ENV !== "production" ? GridColumnMenuRowGroupItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: _propTypes.default.object.isRequired,
-  onClick: _propTypes.default.func.isRequired
-} : void 0;
+}

package/components/GridColumnMenuRowUngroupItem.d.ts

@@ -1,7 +1,3 @@
 import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
-declare namespace GridColumnMenuRowUngroupItem {
-    var propTypes: any;
-}
-export { GridColumnMenuRowUngroupItem };
+export declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;

package/components/GridColumnMenuRowUngroupItem.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridColumnMenuRowUngroupItem = GridColumnMenuRowUngroupItem;
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
@@ -60,12 +59,4 @@ function GridColumnMenuRowUngroupItem(props) {
       children: apiRef.current.getLocaleText('groupColumn')(name)
     })]
   });
-}
-process.env.NODE_ENV !== "production" ? GridColumnMenuRowUngroupItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: _propTypes.default.object.isRequired,
-  onClick: _propTypes.default.func.isRequired
-} : void 0;
+}

package/components/GridExcelExportMenuItem.js

@@ -34,13 +34,14 @@ function GridExcelExportMenuItem(props) {
 process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   hideMenu: _propTypes.default.func,
   options: _propTypes.default.shape({
     allColumns: _propTypes.default.bool,
     columnsStyles: _propTypes.default.object,
     disableToolbarButton: _propTypes.default.bool,
+    escapeFormulas: _propTypes.default.bool,
     exceljsPostProcess: _propTypes.default.func,
     exceljsPreProcess: _propTypes.default.func,
     fields: _propTypes.default.arrayOf(_propTypes.default.string),

package/components/GridPremiumColumnMenu.d.ts

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

package/components/GridPremiumColumnMenu.js

@@ -9,7 +9,6 @@ exports.GridColumnMenuGroupingItem = GridColumnMenuGroupingItem;
 exports.GridPremiumColumnMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _GridColumnMenuAggregationItem = require("./GridColumnMenuAggregationItem");
 var _rowGrouping = require("../hooks/features/rowGrouping");
@@ -46,13 +45,4 @@ const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = /*#__PURE__*/React
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
   }));
-});
-process.env.NODE_ENV !== "production" ? GridPremiumColumnMenu.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: _propTypes.default.object.isRequired,
-  hideMenu: _propTypes.default.func.isRequired,
-  open: _propTypes.default.bool.isRequired
-} : void 0;
+});

package/esm/DataGridPremium/DataGridPremium.js

@@ -51,7 +51,7 @@ export const DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
 process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
@@ -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/components/GridColumnMenuAggregationItem.js

@@ -100,7 +100,7 @@ function GridColumnMenuAggregationItem(props) {
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   onClick: PropTypes.func.isRequired

package/esm/components/GridColumnMenuRowGroupItem.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -9,7 +8,7 @@ import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrou
 import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from '../hooks/features/rowGrouping/gridRowGroupingUtils';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function GridColumnMenuRowGroupItem(props) {
+export function GridColumnMenuRowGroupItem(props) {
   const {
     colDef,
     onClick
@@ -46,13 +45,4 @@ function GridColumnMenuRowGroupItem(props) {
     });
   }
   return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(colDef.field));
-}
-process.env.NODE_ENV !== "production" ? GridColumnMenuRowGroupItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: PropTypes.object.isRequired,
-  onClick: PropTypes.func.isRequired
-} : void 0;
-export { GridColumnMenuRowGroupItem };
+}

package/esm/components/GridColumnMenuRowUngroupItem.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -8,7 +7,7 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function GridColumnMenuRowUngroupItem(props) {
+export function GridColumnMenuRowUngroupItem(props) {
   const {
     colDef,
     onClick
@@ -51,13 +50,4 @@ function GridColumnMenuRowUngroupItem(props) {
       children: apiRef.current.getLocaleText('groupColumn')(name)
     })]
   });
-}
-process.env.NODE_ENV !== "production" ? GridColumnMenuRowUngroupItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: PropTypes.object.isRequired,
-  onClick: PropTypes.func.isRequired
-} : void 0;
-export { GridColumnMenuRowUngroupItem };
+}

package/esm/components/GridExcelExportMenuItem.js

@@ -25,13 +25,14 @@ function GridExcelExportMenuItem(props) {
 process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   hideMenu: PropTypes.func,
   options: PropTypes.shape({
     allColumns: PropTypes.bool,
     columnsStyles: PropTypes.object,
     disableToolbarButton: PropTypes.bool,
+    escapeFormulas: PropTypes.bool,
     exceljsPostProcess: PropTypes.func,
     exceljsPreProcess: PropTypes.func,
     fields: PropTypes.arrayOf(PropTypes.string),

package/esm/components/GridPremiumColumnMenu.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid-pro';
 import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem';
 import { isGroupingColumn } from '../hooks/features/rowGrouping';
@@ -28,21 +27,11 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU
     displayOrder: 27
   }
 });
-const GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
+export const GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({
     ref: ref
   }, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
   }));
-});
-process.env.NODE_ENV !== "production" ? GridPremiumColumnMenu.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: PropTypes.object.isRequired,
-  hideMenu: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired
-} : void 0;
-export { GridPremiumColumnMenu };
+});

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

@@ -445,9 +445,12 @@ export const useGridCellSelection = (apiRef, props) => {
         if (fieldsMap[field]) {
           const cellParams = apiRef.current.getCellParams(rowId, field);
           cellData = serializeCellValue(cellParams, {
-            delimiterCharacter: clipboardCopyCellDelimiter,
-            ignoreValueFormatter,
-            shouldAppendQuotes: false
+            csvOptions: {
+              delimiter: clipboardCopyCellDelimiter,
+              shouldAppendQuotes: false,
+              escapeFormulas: false
+            },
+            ignoreValueFormatter
           });
         } else {
           cellData = '';

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) => {
+/**
+ * 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,8 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
         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':
         {
@@ -61,7 +70,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
               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,
@@ -77,7 +86,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
               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();
@@ -92,7 +101,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
         }
       case 'boolean':
       case 'number':
-        row[column.field] = api.getCellParams(id, column.field).value;
+        cellValue = apiRef.current.getCellParams(id, column.field).value;
         break;
       case 'date':
       case 'dateTime':
@@ -100,7 +109,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
           // 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;
@@ -112,7 +121,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
       case 'actions':
         break;
       default:
-        row[column.field] = 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();
@@ -120,6 +129,15 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
         }
         break;
     }
+    if (typeof cellValue === 'string' && options.escapeFormulas) {
+      // See https://owasp.org/www-community/attacks/CSV_Injection
+      if (['=', '+', '-', '@', '\t', '\r'].includes(cellValue[0])) {
+        cellValue = `'${cellValue}`;
+      }
+    }
+    if (typeof cellValue !== 'undefined') {
+      row[column.field] = cellValue;
+    }
   });
   return {
     row,
@@ -266,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,
@@ -290,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);
+    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';
 
 /**
@@ -34,8 +34,9 @@ export const useGridExcelExport = (apiRef, props) => {
       valueOptionsSheetName: options?.valueOptionsSheetName || 'Options',
       columnsStyles: options?.columnsStyles,
       exceljsPreProcess: options?.exceljsPreProcess,
-      exceljsPostProcess: options?.exceljsPostProcess
-    }, apiRef.current);
+      exceljsPostProcess: options?.exceljsPostProcess,
+      escapeFormulas: options.escapeFormulas ?? true
+    }, apiRef);
   }, [logger, apiRef]);
   const exportDataAsExcel = React.useCallback(async (options = {}) => {
     const {
@@ -87,7 +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 = "MTcxNTg5NjgwMDAwMA==";
+  const releaseInfo = "MTcxNzAxNjQwMDAwMA==";
   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/cellSelection/useGridCellSelection.js

@@ -455,9 +455,12 @@ const useGridCellSelection = (apiRef, props) => {
         if (fieldsMap[field]) {
           const cellParams = apiRef.current.getCellParams(rowId, field);
           cellData = (0, _internals.serializeCellValue)(cellParams, {
-            delimiterCharacter: clipboardCopyCellDelimiter,
-            ignoreValueFormatter,
-            shouldAppendQuotes: false
+            csvOptions: {
+              delimiter: clipboardCopyCellDelimiter,
+              shouldAppendQuotes: false,
+              escapeFormulas: false
+            },
+            ignoreValueFormatter
           });
         } else {
           cellData = '';

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -1,7 +1,8 @@
+/// <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';
-import { GridExceljsProcessInput, ColumnsStylesInterface, GridExcelExportOptions } from '../gridExcelExportInterface';
+import { ColumnsStylesInterface, GridExcelExportOptions } from '../gridExcelExportInterface';
 import { GridPrivateApiPremium } from '../../../../models/gridApiPremium';
 interface SerializedRow {
     row: Record<string, undefined | number | boolean | string | Date>;
@@ -12,11 +13,17 @@ 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;
     };
-}) => SerializedRow;
+}, options: Pick<BuildExcelOptions, 'escapeFormulas'>) => SerializedRow;
 export declare const serializeColumn: (column: GridColDef, columnsStyles: ColumnsStylesInterface) => {
     key: string;
     headerText: string;
@@ -42,17 +49,12 @@ type ValueOptionsData = Record<string, {
     address: string;
 }>;
 export declare function getDataForValueOptionsSheet(columns: GridStateColDef[], valueOptionsSheetName: string, api: GridPrivateApiPremium): Promise<ValueOptionsData>;
-interface BuildExcelOptions {
+interface BuildExcelOptions extends Pick<GridExcelExportOptions, 'exceljsPreProcess' | 'exceljsPostProcess'>, Pick<Required<GridExcelExportOptions>, 'valueOptionsSheetName' | 'includeHeaders' | 'includeColumnGroupsHeaders' | 'escapeFormulas'> {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
-    includeHeaders: boolean;
-    includeColumnGroupsHeaders: boolean;
-    valueOptionsSheetName: string;
-    exceljsPreProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
-    exceljsPostProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
     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[];