@mui/x-data-grid 6.19.11 → 6.20.0

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.20.0
+
+_May 24, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.20.0`
+
+- [DataGrid] Escape formulas in CSV and Excel export (#13190) @cherniavskii
+
+#### `@mui/x-data-grid-pro@6.20.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@6.20.0`.
+
+#### `@mui/x-data-grid-premium@6.20.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@6.20.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.20.0`
+
+- [pickers] Fix `disableOpenPicker` prop behavior (#13221) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.20.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@6.20.0`.
+
+## 6.19.12
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.12`
+
+- [pickers] Fix `AdapterMomentJalaali` regression (#13150) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.12` [![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@6.19.12`.
+
+### Docs
+
+- [docs] Use MUI X v6 in Codesandbox and Stackblitz demos (#12838) @cherniavskii
+
 ## 6.19.11
 
 _Apr 18, 2024_

package/hooks/features/clipboard/useGridClipboard.js

@@ -67,18 +67,21 @@ export const useGridClipboard = (apiRef, props) => {
     if (selectedRows.size > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
-        // TODO: make it configurable
         delimiter: clipboardCopyCellDelimiter,
-        shouldAppendQuotes: false
+        shouldAppendQuotes: false,
+        escapeFormulas: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
       if (focusedCell) {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
-          delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter,
-          shouldAppendQuotes: false
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter
         });
       }
     }

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -4,19 +4,16 @@ import type { GridCellParams } from '../../../../models/params/gridCellParams';
 import type { GridStateColDef } from '../../../../models/colDef/gridColDef';
 import type { GridApiCommunity } from '../../../../models/api/gridApiCommunity';
 export declare const serializeCellValue: (cellParams: GridCellParams, options: {
-    delimiterCharacter: string;
+    csvOptions: CSVOptions;
     ignoreValueFormatter: boolean;
-    shouldAppendQuotes: boolean;
 }) => any;
+type CSVOptions = Required<Pick<GridCsvExportOptions, 'delimiter' | 'shouldAppendQuotes' | 'escapeFormulas'>>;
 interface BuildCSVOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
-    delimiterCharacter: NonNullable<GridCsvExportOptions['delimiter']>;
-    includeHeaders: NonNullable<GridCsvExportOptions['includeHeaders']>;
-    includeColumnGroupsHeaders: NonNullable<GridCsvExportOptions['includeColumnGroupsHeaders']>;
+    csvOptions: Required<Pick<GridCsvExportOptions, 'delimiter' | 'includeColumnGroupsHeaders' | 'includeHeaders' | 'shouldAppendQuotes' | 'escapeFormulas'>>;
     ignoreValueFormatter: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
-    shouldAppendQuotes: boolean;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};

package/hooks/features/export/serializers/csvSerializer.js

@@ -1,13 +1,19 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       const escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
         return `"${escapedValue}"`;
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return `'${escapedValue}`;
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -16,9 +22,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
 }
 export const serializeCellValue = (cellParams, options) => {
   const {
-    delimiterCharacter,
-    ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions,
+    ignoreValueFormatter
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -37,7 +42,7 @@ export const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 const objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 class CSVRow {
@@ -49,12 +54,12 @@ class CSVRow {
   }
   addValue(value) {
     if (!this.isEmpty) {
-      this.rowString += this.options.delimiterCharacter;
+      this.rowString += this.options.csvOptions.delimiter;
     }
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;
     }
@@ -68,13 +73,11 @@ const serializeRow = ({
   id,
   columns,
   getCellParams,
-  delimiterCharacter,
-  ignoreValueFormatter,
-  shouldAppendQuotes
+  csvOptions,
+  ignoreValueFormatter
 }) => {
   const row = new CSVRow({
-    delimiterCharacter,
-    shouldAppendQuotes
+    csvOptions
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -84,9 +87,8 @@ const serializeRow = ({
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter,
       ignoreValueFormatter,
-      shouldAppendQuotes
+      csvOptions
     }));
   });
   return row.getRowString();
@@ -95,27 +97,23 @@ export function buildCSV(options) {
   const {
     columns,
     rowIds,
-    delimiterCharacter,
-    includeHeaders,
-    includeColumnGroupsHeaders,
+    csvOptions,
     ignoreValueFormatter,
-    apiRef,
-    shouldAppendQuotes
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
-    delimiterCharacter,
     ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions
   })}\r\n`, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   const filteredColumns = columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
@@ -126,9 +124,8 @@ export function buildCSV(options) {
     }, {});
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
-        delimiterCharacter,
-        sanitizeCellValue,
-        shouldAppendQuotes
+        csvOptions,
+        sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -139,9 +136,8 @@ export function buildCSV(options) {
     }
   }
   const mainHeaderRow = new CSVRow({
-    delimiterCharacter,
-    sanitizeCellValue,
-    shouldAppendQuotes
+    csvOptions,
+    sanitizeCellValue
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

package/hooks/features/export/useGridCsvExport.js

@@ -19,7 +19,7 @@ export const useGridCsvExport = (apiRef, props) => {
   const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
-    var _options$getRowsToExp, _options$includeHeade, _options$includeColum, _options$shouldAppend;
+    var _options$getRowsToExp, _options$shouldAppend, _options$includeHeade, _options$includeColum, _options$escapeFormul;
     logger.debug(`Get data as CSV`);
     const exportedColumns = getColumnsToExport({
       apiRef,
@@ -32,12 +32,15 @@ export const useGridCsvExport = (apiRef, props) => {
     return buildCSV({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
-      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: (_options$shouldAppend = options.shouldAppendQuotes) != null ? _options$shouldAppend : true,
+        includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+        includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+        escapeFormulas: (_options$escapeFormul = options.escapeFormulas) != null ? _options$escapeFormul : true
+      },
       ignoreValueFormatter,
-      apiRef,
-      shouldAppendQuotes: (_options$shouldAppend = options.shouldAppendQuotes) != null ? _options$shouldAppend : true
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.19.11
+ * @mui/x-data-grid v6.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/hooks/features/clipboard/useGridClipboard.js

@@ -68,18 +68,21 @@ export var useGridClipboard = function useGridClipboard(apiRef, props) {
     if (selectedRows.size > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
-        // TODO: make it configurable
         delimiter: clipboardCopyCellDelimiter,
-        shouldAppendQuotes: false
+        shouldAppendQuotes: false,
+        escapeFormulas: false
       });
     } else {
       var focusedCell = gridFocusCellSelector(apiRef);
       if (focusedCell) {
         var cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
-          delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter: ignoreValueFormatter,
-          shouldAppendQuotes: false
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter: ignoreValueFormatter
         });
       }
     }

package/legacy/hooks/features/export/serializers/csvSerializer.js

@@ -2,16 +2,22 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       var escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(function (delimiter) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(function (delimiter) {
         return value.includes(delimiter);
       })) {
         return "\"".concat(escapedValue, "\"");
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return "'".concat(escapedValue);
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -19,9 +25,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
   return value;
 }
 export var serializeCellValue = function serializeCellValue(cellParams, options) {
-  var delimiterCharacter = options.delimiterCharacter,
-    ignoreValueFormatter = options.ignoreValueFormatter,
-    shouldAppendQuotes = options.shouldAppendQuotes;
+  var csvOptions = options.csvOptions,
+    ignoreValueFormatter = options.ignoreValueFormatter;
   var value;
   if (ignoreValueFormatter) {
     var _cellParams$value2;
@@ -39,7 +44,7 @@ export var serializeCellValue = function serializeCellValue(cellParams, options)
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 var objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 var CSVRow = /*#__PURE__*/function () {
@@ -54,12 +59,12 @@ var CSVRow = /*#__PURE__*/function () {
     key: "addValue",
     value: function addValue(value) {
       if (!this.isEmpty) {
-        this.rowString += this.options.delimiterCharacter;
+        this.rowString += this.options.csvOptions.delimiter;
       }
       if (value === null || value === undefined) {
         this.rowString += '';
       } else if (typeof this.options.sanitizeCellValue === 'function') {
-        this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+        this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
       } else {
         this.rowString += value;
       }
@@ -77,12 +82,10 @@ var serializeRow = function serializeRow(_ref) {
   var id = _ref.id,
     columns = _ref.columns,
     getCellParams = _ref.getCellParams,
-    delimiterCharacter = _ref.delimiterCharacter,
-    ignoreValueFormatter = _ref.ignoreValueFormatter,
-    shouldAppendQuotes = _ref.shouldAppendQuotes;
+    csvOptions = _ref.csvOptions,
+    ignoreValueFormatter = _ref.ignoreValueFormatter;
   var row = new CSVRow({
-    delimiterCharacter: delimiterCharacter,
-    shouldAppendQuotes: shouldAppendQuotes
+    csvOptions: csvOptions
   });
   columns.forEach(function (column) {
     var cellParams = getCellParams(id, column.field);
@@ -92,9 +95,8 @@ var serializeRow = function serializeRow(_ref) {
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter: delimiterCharacter,
       ignoreValueFormatter: ignoreValueFormatter,
-      shouldAppendQuotes: shouldAppendQuotes
+      csvOptions: csvOptions
     }));
   });
   return row.getRowString();
@@ -102,30 +104,26 @@ var serializeRow = function serializeRow(_ref) {
 export function buildCSV(options) {
   var columns = options.columns,
     rowIds = options.rowIds,
-    delimiterCharacter = options.delimiterCharacter,
-    includeHeaders = options.includeHeaders,
-    includeColumnGroupsHeaders = options.includeColumnGroupsHeaders,
+    csvOptions = options.csvOptions,
     ignoreValueFormatter = options.ignoreValueFormatter,
-    apiRef = options.apiRef,
-    shouldAppendQuotes = options.shouldAppendQuotes;
+    apiRef = options.apiRef;
   var CSVBody = rowIds.reduce(function (acc, id) {
     return "".concat(acc).concat(serializeRow({
       id: id,
       columns: columns,
       getCellParams: apiRef.current.getCellParams,
-      delimiterCharacter: delimiterCharacter,
       ignoreValueFormatter: ignoreValueFormatter,
-      shouldAppendQuotes: shouldAppendQuotes
+      csvOptions: csvOptions
     }), "\r\n");
   }, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   var filteredColumns = columns.filter(function (column) {
     return column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field;
   });
   var headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     var columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
     var maxColumnGroupsDepth = 0;
     var columnGroupPathsLookup = filteredColumns.reduce(function (acc, column) {
@@ -136,9 +134,8 @@ export function buildCSV(options) {
     }, {});
     var _loop = function _loop(i) {
       var headerGroupRow = new CSVRow({
-        delimiterCharacter: delimiterCharacter,
-        sanitizeCellValue: sanitizeCellValue,
-        shouldAppendQuotes: shouldAppendQuotes
+        csvOptions: csvOptions,
+        sanitizeCellValue: sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(function (column) {
@@ -152,9 +149,8 @@ export function buildCSV(options) {
     }
   }
   var mainHeaderRow = new CSVRow({
-    delimiterCharacter: delimiterCharacter,
-    sanitizeCellValue: sanitizeCellValue,
-    shouldAppendQuotes: shouldAppendQuotes
+    csvOptions: csvOptions,
+    sanitizeCellValue: sanitizeCellValue
   });
   filteredColumns.forEach(function (column) {
     mainHeaderRow.addValue(column.headerName || column.field);

package/legacy/hooks/features/export/useGridCsvExport.js

@@ -21,7 +21,7 @@ export var useGridCsvExport = function useGridCsvExport(apiRef, props) {
   var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   var getDataAsCsv = React.useCallback(function () {
-    var _options$getRowsToExp, _options$includeHeade, _options$includeColum, _options$shouldAppend;
+    var _options$getRowsToExp, _options$shouldAppend, _options$includeHeade, _options$includeColum, _options$escapeFormul;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     logger.debug("Get data as CSV");
     var exportedColumns = getColumnsToExport({
@@ -35,12 +35,15 @@ export var useGridCsvExport = function useGridCsvExport(apiRef, props) {
     return buildCSV({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
-      includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: (_options$shouldAppend = options.shouldAppendQuotes) != null ? _options$shouldAppend : true,
+        includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+        includeColumnGroupsHeaders: (_options$includeColum = options.includeColumnGroupsHeaders) != null ? _options$includeColum : true,
+        escapeFormulas: (_options$escapeFormul = options.escapeFormulas) != null ? _options$escapeFormul : true
+      },
       ignoreValueFormatter: ignoreValueFormatter,
-      apiRef: apiRef,
-      shouldAppendQuotes: (_options$shouldAppend = options.shouldAppendQuotes) != null ? _options$shouldAppend : true
+      apiRef: apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   var exportDataAsCsv = React.useCallback(function (options) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.19.11
+ * @mui/x-data-grid v6.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/models/gridExport.d.ts

@@ -37,6 +37,13 @@ export interface GridFileExportOptions<Api extends GridApiCommon = GridApiCommun
      * @returns {GridRowId[]} The list of row ids to export.
      */
     getRowsToExport?: (params: GridGetRowsToExportParams<Api>) => GridRowId[];
+    /**
+     * If `false`, the formulas in the cells will not be escaped.
+     * It is not recommended to disable this option as it exposes the user to potential CSV injection attacks.
+     * See https://owasp.org/www-community/attacks/CSV_Injection for more information.
+     * @default true
+     */
+    escapeFormulas?: boolean;
 }
 export interface GridGetRowsToExportParams<Api extends GridApiCommon = GridApiCommunity> {
     /**

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -66,18 +66,21 @@ export const useGridClipboard = (apiRef, props) => {
     if (selectedRows.size > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
-        // TODO: make it configurable
         delimiter: clipboardCopyCellDelimiter,
-        shouldAppendQuotes: false
+        shouldAppendQuotes: false,
+        escapeFormulas: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
       if (focusedCell) {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
-          delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter,
-          shouldAppendQuotes: false
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter
         });
       }
     }

package/modern/hooks/features/export/serializers/csvSerializer.js

@@ -1,13 +1,19 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       const escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
         return `"${escapedValue}"`;
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return `'${escapedValue}`;
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -16,9 +22,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
 }
 export const serializeCellValue = (cellParams, options) => {
   const {
-    delimiterCharacter,
-    ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions,
+    ignoreValueFormatter
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -35,7 +40,7 @@ export const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 const objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 class CSVRow {
@@ -47,12 +52,12 @@ class CSVRow {
   }
   addValue(value) {
     if (!this.isEmpty) {
-      this.rowString += this.options.delimiterCharacter;
+      this.rowString += this.options.csvOptions.delimiter;
     }
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;
     }
@@ -66,13 +71,11 @@ const serializeRow = ({
   id,
   columns,
   getCellParams,
-  delimiterCharacter,
-  ignoreValueFormatter,
-  shouldAppendQuotes
+  csvOptions,
+  ignoreValueFormatter
 }) => {
   const row = new CSVRow({
-    delimiterCharacter,
-    shouldAppendQuotes
+    csvOptions
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -82,9 +85,8 @@ const serializeRow = ({
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter,
       ignoreValueFormatter,
-      shouldAppendQuotes
+      csvOptions
     }));
   });
   return row.getRowString();
@@ -93,27 +95,23 @@ export function buildCSV(options) {
   const {
     columns,
     rowIds,
-    delimiterCharacter,
-    includeHeaders,
-    includeColumnGroupsHeaders,
+    csvOptions,
     ignoreValueFormatter,
-    apiRef,
-    shouldAppendQuotes
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
-    delimiterCharacter,
     ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions
   })}\r\n`, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   const filteredColumns = columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
@@ -124,9 +122,8 @@ export function buildCSV(options) {
     }, {});
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
-        delimiterCharacter,
-        sanitizeCellValue,
-        shouldAppendQuotes
+        csvOptions,
+        sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -137,9 +134,8 @@ export function buildCSV(options) {
     }
   }
   const mainHeaderRow = new CSVRow({
-    delimiterCharacter,
-    sanitizeCellValue,
-    shouldAppendQuotes
+    csvOptions,
+    sanitizeCellValue
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

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

@@ -31,12 +31,15 @@ export const useGridCsvExport = (apiRef, props) => {
     return buildCSV({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: options.includeHeaders ?? true,
-      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: options.shouldAppendQuotes ?? true,
+        includeHeaders: options.includeHeaders ?? true,
+        includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+        escapeFormulas: options.escapeFormulas ?? true
+      },
       ignoreValueFormatter,
-      apiRef,
-      shouldAppendQuotes: options.shouldAppendQuotes ?? true
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.19.11
+ * @mui/x-data-grid v6.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -74,18 +74,21 @@ const useGridClipboard = (apiRef, props) => {
     if (selectedRows.size > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
-        // TODO: make it configurable
         delimiter: clipboardCopyCellDelimiter,
-        shouldAppendQuotes: false
+        shouldAppendQuotes: false,
+        escapeFormulas: false
       });
     } else {
       const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
       if (focusedCell) {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = (0, _csvSerializer.serializeCellValue)(cellParams, {
-          delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter,
-          shouldAppendQuotes: false
+          csvOptions: {
+            delimiter: clipboardCopyCellDelimiter,
+            shouldAppendQuotes: false,
+            escapeFormulas: false
+          },
+          ignoreValueFormatter
         });
       }
     }

package/node/hooks/features/export/serializers/csvSerializer.js

@@ -7,14 +7,20 @@ exports.buildCSV = buildCSV;
 exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../utils/warning");
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       const escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
         return `"${escapedValue}"`;
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return `'${escapedValue}`;
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -23,9 +29,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
 }
 const serializeCellValue = (cellParams, options) => {
   const {
-    delimiterCharacter,
-    ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions,
+    ignoreValueFormatter
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -42,7 +47,7 @@ const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.buildWarning)(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
@@ -55,12 +60,12 @@ class CSVRow {
   }
   addValue(value) {
     if (!this.isEmpty) {
-      this.rowString += this.options.delimiterCharacter;
+      this.rowString += this.options.csvOptions.delimiter;
     }
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;
     }
@@ -74,13 +79,11 @@ const serializeRow = ({
   id,
   columns,
   getCellParams,
-  delimiterCharacter,
-  ignoreValueFormatter,
-  shouldAppendQuotes
+  csvOptions,
+  ignoreValueFormatter
 }) => {
   const row = new CSVRow({
-    delimiterCharacter,
-    shouldAppendQuotes
+    csvOptions
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -90,9 +93,8 @@ const serializeRow = ({
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter,
       ignoreValueFormatter,
-      shouldAppendQuotes
+      csvOptions
     }));
   });
   return row.getRowString();
@@ -101,27 +103,23 @@ function buildCSV(options) {
   const {
     columns,
     rowIds,
-    delimiterCharacter,
-    includeHeaders,
-    includeColumnGroupsHeaders,
+    csvOptions,
     ignoreValueFormatter,
-    apiRef,
-    shouldAppendQuotes
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
-    delimiterCharacter,
     ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions
   })}\r\n`, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   const filteredColumns = columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
@@ -132,9 +130,8 @@ function buildCSV(options) {
     }, {});
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
-        delimiterCharacter,
-        sanitizeCellValue,
-        shouldAppendQuotes
+        csvOptions,
+        sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -145,9 +142,8 @@ function buildCSV(options) {
     }
   }
   const mainHeaderRow = new CSVRow({
-    delimiterCharacter,
-    sanitizeCellValue,
-    shouldAppendQuotes
+    csvOptions,
+    sanitizeCellValue
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

package/node/hooks/features/export/useGridCsvExport.js

@@ -39,12 +39,15 @@ const useGridCsvExport = (apiRef, props) => {
     return (0, _csvSerializer.buildCSV)({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: options.includeHeaders ?? true,
-      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: options.shouldAppendQuotes ?? true,
+        includeHeaders: options.includeHeaders ?? true,
+        includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+        escapeFormulas: options.escapeFormulas ?? true
+      },
       ignoreValueFormatter,
-      apiRef,
-      shouldAppendQuotes: options.shouldAppendQuotes ?? true
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.19.11
+ * @mui/x-data-grid v6.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.19.11",
+  "version": "6.20.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",