From 8a23eba85f26345c750f7c8627a899be3da1062a Mon Sep 17 00:00:00 2001
From: Michal Lukowski <michal.lukowski@gmail.com>
Date: Tue, 18 May 2021 14:43:04 +0200
Subject: [PATCH 1/5] [DataGrid] Add optional exportConfiguration props to
 GridToolbarExport #1440

This feature allows to:
- set the file name
- set flag utf8WithBom to generate csv file as UTF-8 with BOM

It may be extended with further options in the future
---
 .../components/toolbar/GridToolbarExport.tsx  | 45 +++++++++++++------
 .../features/export/useGridCsvExport.tsx      | 20 ++++++---
 .../grid/models/api/gridCsvExportApi.ts       |  4 +-
 .../grid/_modules_/grid/models/gridExport.ts  | 16 ++++++-
 .../grid/_modules_/grid/utils/exportAs.ts     |  4 +-
 5 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
index b8029d608198..6b2d7f7ebcc4 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
@@ -7,28 +7,44 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
 import { GridApiContext } from '../GridApiContext';
 import { GridMenu } from '../menu/GridMenu';
-import { GridExportOption } from '../../models';
+import { GridExportOption, GridExportFormat, GridExportConfiguration } from '../../models';
 
-export const GridToolbarExport = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function GridToolbarExport(props, ref) {
+type GridToolbarExportProps = ButtonProps & { exportConfiguration?: GridExportConfiguration };
+
+export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbarExportProps>(
+  function GridToolbarExport({ exportConfiguration, ...buttonProps }, ref) {
     const apiRef = React.useContext(GridApiContext);
     const exportButtonId = useId();
     const exportMenuId = useId();
     const [anchorEl, setAnchorEl] = React.useState(null);
     const ExportIcon = apiRef!.current.components!.ExportIcon!;
 
-    const ExportOptions: Array<GridExportOption> = [
-      {
+    const ExportOptions: Array<GridExportOption> = [];
+
+    if (exportConfiguration) {
+      if (!exportConfiguration.csv?.disabled) {
+        ExportOptions.push({
+          label: apiRef!.current.getLocaleText('toolbarExportCSV'),
+          format: {
+            name: 'csv',
+            options: exportConfiguration.csv,
+          },
+        });
+      }
+    } else {
+      ExportOptions.push({
         label: apiRef!.current.getLocaleText('toolbarExportCSV'),
-        format: 'csv',
-      },
-    ];
+        format: {
+          name: 'csv',
+        },
+      });
+    }
 
     const handleExportSelectorOpen = (event) => setAnchorEl(event.currentTarget);
     const handleExportSelectorClose = () => setAnchorEl(null);
-    const handleExport = (format) => {
-      if (format === 'csv') {
-        apiRef!.current.exportDataAsCsv();
+    const handleExport = (format: GridExportFormat, fileName?: string) => {
+      if (format.name === 'csv') {
+        apiRef!.current.exportDataAsCsv(format.options, fileName);
       }
 
       setAnchorEl(null);
@@ -44,7 +60,10 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, ButtonProps
     };
 
     const renderExportOptions: Array<React.ReactElement> = ExportOptions.map((option, index) => (
-      <MenuItem key={index} onClick={() => handleExport(option.format)}>
+      <MenuItem
+        key={index}
+        onClick={() => handleExport(option.format, exportConfiguration?.fileName)}
+      >
         {option.label}
       </MenuItem>
     ));
@@ -61,7 +80,7 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, ButtonProps
           aria-haspopup="menu"
           aria-labelledby={exportMenuId}
           id={exportButtonId}
-          {...props}
+          {...buttonProps}
         >
           {apiRef!.current.getLocaleText('toolbarExport')}
         </Button>
diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
index a788eaafa7e9..467aa5ccc950 100644
--- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
@@ -5,7 +5,7 @@ import { useGridSelector } from '../core/useGridSelector';
 import { visibleGridColumnsSelector } from '../columns';
 import { visibleSortedGridRowsSelector } from '../filter';
 import { gridSelectionStateSelector } from '../selection';
-import { GridCsvExportApi } from '../../../models';
+import { GridCsvExportApi, GridExportCsvOptions } from '../../../models';
 import { useLogger } from '../../utils/useLogger';
 import { exportAs } from '../../../utils';
 import { buildCSV } from './seralizers/csvSeraliser';
@@ -22,13 +22,19 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => {
     return buildCSV(visibleColumns, visibleSortedRows, selection, apiRef.current.getCellValue);
   }, [logger, visibleColumns, visibleSortedRows, selection, apiRef]);
 
-  const exportDataAsCsv = React.useCallback((): void => {
-    logger.debug(`Export data as CSV`);
-    const csv = getDataAsCsv();
-    const blob = new Blob([csv], { type: 'text/csv' });
+  const exportDataAsCsv = React.useCallback(
+    (options?: GridExportCsvOptions, fileName: string = 'data'): void => {
+      logger.debug(`Export data as CSV`);
+      const csv = getDataAsCsv();
 
-    exportAs(blob, 'csv', 'data');
-  }, [logger, getDataAsCsv]);
+      const blob = new Blob([options?.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
+        type: 'text/csv',
+      });
+
+      exportAs(blob, 'csv', fileName.length ? fileName : 'data');
+    },
+    [logger, getDataAsCsv],
+  );
 
   const csvExportApi: GridCsvExportApi = {
     getDataAsCsv,
diff --git a/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts b/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
index e3fe81214025..e68774acab51 100644
--- a/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
+++ b/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
@@ -1,3 +1,5 @@
+import { GridExportCsvOptions } from '../gridExport';
+
 /**
  * The csv export API interface that is available in the grid [[apiRef]].
  */
@@ -10,5 +12,5 @@ export interface GridCsvExportApi {
   /**
    * Exports the grid data as CSV and sends it to the user.
    */
-  exportDataAsCsv: () => void;
+  exportDataAsCsv: (options?: GridExportCsvOptions, fileName?: string) => void;
 }
diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
index cd8e73764dac..90ed438ef686 100644
--- a/packages/grid/_modules_/grid/models/gridExport.ts
+++ b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -1,7 +1,21 @@
+export interface GridExportCsvOptions {
+  utf8WithBom?: boolean;
+  disabled?: boolean;
+}
+export interface GridExportFormatCsv {
+  name: 'csv';
+  options?: GridExportCsvOptions;
+}
+
 /**
  * Available export formats. To be extended in future.
  */
-export type GridExportFormat = 'csv';
+export type GridExportFormatExtension = 'csv';
+export type GridExportFormat = GridExportFormatCsv;
+export interface GridExportConfiguration {
+  fileName?: string;
+  csv?: GridExportCsvOptions;
+}
 
 /**
  * Export option interface
diff --git a/packages/grid/_modules_/grid/utils/exportAs.ts b/packages/grid/_modules_/grid/utils/exportAs.ts
index dde478cadd98..cfe4e2ed30ff 100644
--- a/packages/grid/_modules_/grid/utils/exportAs.ts
+++ b/packages/grid/_modules_/grid/utils/exportAs.ts
@@ -1,4 +1,4 @@
-import { GridExportFormat } from '../models/gridExport';
+import { GridExportFormatExtension } from '../models/gridExport';
 
 /**
  * I have hesitate to use https://github.com/eligrey/FileSaver.js.
@@ -12,7 +12,7 @@ import { GridExportFormat } from '../models/gridExport';
  */
 export function exportAs(
   blob: Blob,
-  extension: GridExportFormat = 'csv',
+  extension: GridExportFormatExtension = 'csv',
   filename: string = document.title,
 ): void {
   const fullName = `${filename}.${extension}`;

From a248e6c56219f8dce423bcc64ea1b62694522907 Mon Sep 17 00:00:00 2001
From: Michal Lukowski <michal.lukowski@gmail.com>
Date: Thu, 20 May 2021 22:59:37 +0200
Subject: [PATCH 2/5] Changes after review

---
 .../components/toolbar/GridToolbarExport.tsx  | 38 ++++++-------------
 .../features/export/useGridCsvExport.tsx      |  4 +-
 .../grid/_modules_/grid/models/gridExport.ts  |  8 ++--
 3 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
index 6b2d7f7ebcc4..bf1408ac66b9 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
@@ -12,7 +12,7 @@ import { GridExportOption, GridExportFormat, GridExportConfiguration } from '../
 type GridToolbarExportProps = ButtonProps & { exportConfiguration?: GridExportConfiguration };
 
 export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbarExportProps>(
-  function GridToolbarExport({ exportConfiguration, ...buttonProps }, ref) {
+  function GridToolbarExport({ exportConfiguration, ...other }, ref) {
     const apiRef = React.useContext(GridApiContext);
     const exportButtonId = useId();
     const exportMenuId = useId();
@@ -21,30 +21,17 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
 
     const ExportOptions: Array<GridExportOption> = [];
 
-    if (exportConfiguration) {
-      if (!exportConfiguration.csv?.disabled) {
-        ExportOptions.push({
-          label: apiRef!.current.getLocaleText('toolbarExportCSV'),
-          format: {
-            name: 'csv',
-            options: exportConfiguration.csv,
-          },
-        });
-      }
-    } else {
-      ExportOptions.push({
-        label: apiRef!.current.getLocaleText('toolbarExportCSV'),
-        format: {
-          name: 'csv',
-        },
-      });
-    }
+    ExportOptions.push({
+      label: apiRef!.current.getLocaleText('toolbarExportCSV'),
+      format: 'csv',
+      options: exportConfiguration?.csv,
+    });
 
     const handleExportSelectorOpen = (event) => setAnchorEl(event.currentTarget);
     const handleExportSelectorClose = () => setAnchorEl(null);
-    const handleExport = (format: GridExportFormat, fileName?: string) => {
-      if (format.name === 'csv') {
-        apiRef!.current.exportDataAsCsv(format.options, fileName);
+    const handleExport = (option: GridExportFormat, fileName?: string) => {
+      if (option.format === 'csv') {
+        apiRef!.current.exportDataAsCsv(option.options, fileName);
       }
 
       setAnchorEl(null);
@@ -60,10 +47,7 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
     };
 
     const renderExportOptions: Array<React.ReactElement> = ExportOptions.map((option, index) => (
-      <MenuItem
-        key={index}
-        onClick={() => handleExport(option.format, exportConfiguration?.fileName)}
-      >
+      <MenuItem key={index} onClick={() => handleExport(option, exportConfiguration?.fileName)}>
         {option.label}
       </MenuItem>
     ));
@@ -80,7 +64,7 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
           aria-haspopup="menu"
           aria-labelledby={exportMenuId}
           id={exportButtonId}
-          {...buttonProps}
+          {...other}
         >
           {apiRef!.current.getLocaleText('toolbarExport')}
         </Button>
diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
index 467aa5ccc950..65da0c4d7047 100644
--- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
@@ -23,7 +23,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => {
   }, [logger, visibleColumns, visibleSortedRows, selection, apiRef]);
 
   const exportDataAsCsv = React.useCallback(
-    (options?: GridExportCsvOptions, fileName: string = 'data'): void => {
+    (options?: GridExportCsvOptions, fileName?: string): void => {
       logger.debug(`Export data as CSV`);
       const csv = getDataAsCsv();
 
@@ -31,7 +31,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => {
         type: 'text/csv',
       });
 
-      exportAs(blob, 'csv', fileName.length ? fileName : 'data');
+      exportAs(blob, 'csv', fileName?.length ? fileName : undefined);
     },
     [logger, getDataAsCsv],
   );
diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
index 90ed438ef686..56dc6e28067e 100644
--- a/packages/grid/_modules_/grid/models/gridExport.ts
+++ b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -1,9 +1,8 @@
 export interface GridExportCsvOptions {
   utf8WithBom?: boolean;
-  disabled?: boolean;
 }
 export interface GridExportFormatCsv {
-  name: 'csv';
+  format: 'csv';
   options?: GridExportCsvOptions;
 }
 
@@ -20,7 +19,6 @@ export interface GridExportConfiguration {
 /**
  * Export option interface
  */
-export interface GridExportOption {
+export type GridExportOption = GridExportFormat & {
   label: React.ReactNode;
-  format: GridExportFormat;
-}
+};

From 49cfcf0990018fb889da0ec4c0fbbb8e977d70c4 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 31 May 2021 18:24:05 +0200
Subject: [PATCH 3/5] convention

---
 .../components/toolbar/GridToolbarExport.tsx  | 65 +++++++++++--------
 .../features/export/useGridCsvExport.tsx      | 22 ++++---
 .../grid/models/api/gridCsvExportApi.ts       | 16 +++--
 .../grid/_modules_/grid/models/gridExport.ts  | 22 ++-----
 .../grid/_modules_/grid/utils/exportAs.ts     |  4 +-
 5 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
index bf1408ac66b9..a3c2f2c0a2b5 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
@@ -7,31 +7,44 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
 import { GridApiContext } from '../GridApiContext';
 import { GridMenu } from '../menu/GridMenu';
-import { GridExportOption, GridExportFormat, GridExportConfiguration } from '../../models';
+import { GridExportCsvOptions } from '../../models/gridExport';
 
-type GridToolbarExportProps = ButtonProps & { exportConfiguration?: GridExportConfiguration };
+interface GridExportFormatCsv {
+  format: 'csv';
+  formatOptions?: GridExportCsvOptions;
+}
+
+type GridExportFormatOption = GridExportFormatCsv;
+
+type GridExportOption = GridExportFormatOption & {
+  label: React.ReactNode;
+};
+
+export interface GridToolbarExportProps extends ButtonProps {
+  csvOptions?: GridExportCsvOptions;
+}
 
 export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbarExportProps>(
-  function GridToolbarExport({ exportConfiguration, ...other }, ref) {
+  function GridToolbarExport(props, ref) {
+    const { csvOptions, ...other } = props;
     const apiRef = React.useContext(GridApiContext);
-    const exportButtonId = useId();
-    const exportMenuId = useId();
+    const buttonId = useId();
+    const menuId = useId();
     const [anchorEl, setAnchorEl] = React.useState(null);
     const ExportIcon = apiRef!.current.components!.ExportIcon!;
 
-    const ExportOptions: Array<GridExportOption> = [];
-
-    ExportOptions.push({
+    const exportOptions: Array<GridExportOption> = [];
+    exportOptions.push({
       label: apiRef!.current.getLocaleText('toolbarExportCSV'),
       format: 'csv',
-      options: exportConfiguration?.csv,
+      formatOptions: csvOptions,
     });
 
-    const handleExportSelectorOpen = (event) => setAnchorEl(event.currentTarget);
-    const handleExportSelectorClose = () => setAnchorEl(null);
-    const handleExport = (option: GridExportFormat, fileName?: string) => {
+    const handleMenuOpen = (event) => setAnchorEl(event.currentTarget);
+    const handleMenuClose = () => setAnchorEl(null);
+    const handleExport = (option: GridExportFormatOption) => () => {
       if (option.format === 'csv') {
-        apiRef!.current.exportDataAsCsv(option.options, fileName);
+        apiRef!.current.exportDataAsCsv(option.formatOptions);
       }
 
       setAnchorEl(null);
@@ -42,16 +55,10 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
         event.preventDefault();
       }
       if (isHideMenuKey(event.key)) {
-        handleExportSelectorClose();
+        handleMenuClose();
       }
     };
 
-    const renderExportOptions: Array<React.ReactElement> = ExportOptions.map((option, index) => (
-      <MenuItem key={index} onClick={() => handleExport(option, exportConfiguration?.fileName)}>
-        {option.label}
-      </MenuItem>
-    ));
-
     return (
       <React.Fragment>
         <Button
@@ -59,11 +66,11 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
           color="primary"
           size="small"
           startIcon={<ExportIcon />}
-          onClick={handleExportSelectorOpen}
+          onClick={handleMenuOpen}
           aria-expanded={anchorEl ? 'true' : undefined}
           aria-haspopup="menu"
-          aria-labelledby={exportMenuId}
-          id={exportButtonId}
+          aria-labelledby={menuId}
+          id={buttonId}
           {...other}
         >
           {apiRef!.current.getLocaleText('toolbarExport')}
@@ -71,17 +78,21 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
         <GridMenu
           open={Boolean(anchorEl)}
           target={anchorEl}
-          onClickAway={handleExportSelectorClose}
+          onClickAway={handleMenuClose}
           position="bottom-start"
         >
           <MenuList
-            id={exportMenuId}
+            id={menuId}
             className="MuiDataGrid-gridMenuList"
-            aria-labelledby={exportButtonId}
+            aria-labelledby={buttonId}
             onKeyDown={handleListKeyDown}
             autoFocusItem={Boolean(anchorEl)}
           >
-            {renderExportOptions}
+            {exportOptions.map((option, index) => (
+              <MenuItem key={index} onClick={handleExport(option)}>
+                {option.label}
+              </MenuItem>
+            ))}
           </MenuList>
         </GridMenu>
       </React.Fragment>
diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
index 65da0c4d7047..9928c2ed8578 100644
--- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
@@ -5,7 +5,8 @@ import { useGridSelector } from '../core/useGridSelector';
 import { visibleGridColumnsSelector } from '../columns';
 import { visibleSortedGridRowsSelector } from '../filter';
 import { gridSelectionStateSelector } from '../selection';
-import { GridCsvExportApi, GridExportCsvOptions } from '../../../models';
+import { GridCsvExportApi } from '../../../models/api/gridCsvExportApi';
+import { GridExportCsvOptions } from '../../../models/gridExport';
 import { useLogger } from '../../utils/useLogger';
 import { exportAs } from '../../../utils';
 import { buildCSV } from './seralizers/csvSeraliser';
@@ -16,22 +17,27 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => {
   const visibleSortedRows = useGridSelector(apiRef, visibleSortedGridRowsSelector);
   const selection = useGridSelector(apiRef, gridSelectionStateSelector);
 
-  const getDataAsCsv = React.useCallback((): string => {
-    logger.debug(`Get data as CSV`);
+  const getDataAsCsv = React.useCallback(
+    // TODO remove once we use the options
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (options?: GridExportCsvOptions): string => {
+      logger.debug(`Get data as CSV`);
 
-    return buildCSV(visibleColumns, visibleSortedRows, selection, apiRef.current.getCellValue);
-  }, [logger, visibleColumns, visibleSortedRows, selection, apiRef]);
+      return buildCSV(visibleColumns, visibleSortedRows, selection, apiRef.current.getCellValue);
+    },
+    [logger, visibleColumns, visibleSortedRows, selection, apiRef],
+  );
 
   const exportDataAsCsv = React.useCallback(
-    (options?: GridExportCsvOptions, fileName?: string): void => {
+    (options?: GridExportCsvOptions): void => {
       logger.debug(`Export data as CSV`);
-      const csv = getDataAsCsv();
+      const csv = getDataAsCsv(options);
 
       const blob = new Blob([options?.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
         type: 'text/csv',
       });
 
-      exportAs(blob, 'csv', fileName?.length ? fileName : undefined);
+      exportAs(blob, 'csv', options?.fileName?.length ? options.fileName : undefined);
     },
     [logger, getDataAsCsv],
   );
diff --git a/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts b/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
index e68774acab51..aca35a1732ad 100644
--- a/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
+++ b/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
@@ -1,16 +1,20 @@
 import { GridExportCsvOptions } from '../gridExport';
 
 /**
- * The csv export API interface that is available in the grid [[apiRef]].
+ * The CSV export API interface that is available in the grid [[apiRef]].
  */
 export interface GridCsvExportApi {
   /**
-   * Returns the grid data formatted as CSV.
-   * @returns {string} The data as CSV.
+   * Returns the grid data as a CSV string.
+   * This method is used internally by `exportDataAsCsv`.
+   * @params GridExportCsvOptions The options to apply on the export.
+   * @returns string
    */
-  getDataAsCsv: () => string;
+  getDataAsCsv: (options?: GridExportCsvOptions) => string;
   /**
-   * Exports the grid data as CSV and sends it to the user.
+   * Downloads and exports a CSV of the grid's data.
+   * @params GridExportCsvOptions The options to apply on the export.
+   * @returns void
    */
-  exportDataAsCsv: (options?: GridExportCsvOptions, fileName?: string) => void;
+  exportDataAsCsv: (options?: GridExportCsvOptions) => void;
 }
diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
index 56dc6e28067e..eeb97c272a99 100644
--- a/packages/grid/_modules_/grid/models/gridExport.ts
+++ b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -1,24 +1,12 @@
-export interface GridExportCsvOptions {
-  utf8WithBom?: boolean;
-}
-export interface GridExportFormatCsv {
-  format: 'csv';
-  options?: GridExportCsvOptions;
-}
-
 /**
- * Available export formats. To be extended in future.
+ * The options to apply on the CSV export.
  */
-export type GridExportFormatExtension = 'csv';
-export type GridExportFormat = GridExportFormatCsv;
-export interface GridExportConfiguration {
+export interface GridExportCsvOptions {
   fileName?: string;
-  csv?: GridExportCsvOptions;
+  utf8WithBom?: boolean;
 }
 
 /**
- * Export option interface
+ * Available export formats.
  */
-export type GridExportOption = GridExportFormat & {
-  label: React.ReactNode;
-};
+export type GridExportFormat = 'csv';
diff --git a/packages/grid/_modules_/grid/utils/exportAs.ts b/packages/grid/_modules_/grid/utils/exportAs.ts
index cfe4e2ed30ff..dde478cadd98 100644
--- a/packages/grid/_modules_/grid/utils/exportAs.ts
+++ b/packages/grid/_modules_/grid/utils/exportAs.ts
@@ -1,4 +1,4 @@
-import { GridExportFormatExtension } from '../models/gridExport';
+import { GridExportFormat } from '../models/gridExport';
 
 /**
  * I have hesitate to use https://github.com/eligrey/FileSaver.js.
@@ -12,7 +12,7 @@ import { GridExportFormatExtension } from '../models/gridExport';
  */
 export function exportAs(
   blob: Blob,
-  extension: GridExportFormatExtension = 'csv',
+  extension: GridExportFormat = 'csv',
   filename: string = document.title,
 ): void {
   const fullName = `${filename}.${extension}`;

From a46309816cf750130ac439693062cb9bab885cfb Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 31 May 2021 21:55:41 +0200
Subject: [PATCH 4/5] Polish

Co-authored-by: Matheus Wichman <matheushw@outlook.com>
---
 .../_modules_/grid/components/toolbar/GridToolbarExport.tsx  | 2 +-
 .../grid/hooks/features/export/useGridCsvExport.tsx          | 2 +-
 packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts  | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
index a3c2f2c0a2b5..d42eae3078bb 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx
@@ -42,7 +42,7 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
 
     const handleMenuOpen = (event) => setAnchorEl(event.currentTarget);
     const handleMenuClose = () => setAnchorEl(null);
-    const handleExport = (option: GridExportFormatOption) => () => {
+    const handleExport = (option: GridExportOption) => () => {
       if (option.format === 'csv') {
         apiRef!.current.exportDataAsCsv(option.formatOptions);
       }
diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
index 9928c2ed8578..560ac4fa9eb0 100644
--- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
@@ -37,7 +37,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => {
         type: 'text/csv',
       });
 
-      exportAs(blob, 'csv', options?.fileName?.length ? options.fileName : undefined);
+      exportAs(blob, 'csv', options?.fileName);
     },
     [logger, getDataAsCsv],
   );
diff --git a/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts b/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
index aca35a1732ad..7a4b7e949e50 100644
--- a/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
+++ b/packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts
@@ -7,14 +7,13 @@ export interface GridCsvExportApi {
   /**
    * Returns the grid data as a CSV string.
    * This method is used internally by `exportDataAsCsv`.
-   * @params GridExportCsvOptions The options to apply on the export.
+   * @param {GridExportCsvOptions} options The options to apply on the export.
    * @returns string
    */
   getDataAsCsv: (options?: GridExportCsvOptions) => string;
   /**
    * Downloads and exports a CSV of the grid's data.
-   * @params GridExportCsvOptions The options to apply on the export.
-   * @returns void
+   * @param {GridExportCsvOptions} options The options to apply on the export.
    */
   exportDataAsCsv: (options?: GridExportCsvOptions) => void;
 }

From 3c565f17df10a47ee47989f1b7fca79710c97a52 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 4 Jun 2021 09:43:18 -0300
Subject: [PATCH 5/5] rerun ci