@mui/x-data-grid 6.3.1 → 6.4.0

package/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v6.4.0
+
+_May 12, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce clipboard paste support for `DataGridPremium`:
+
+  https://github.com/mui/mui-x/assets/13808724/abfcb5c6-9db6-4677-9ba7-ae97de441080
+
+  See [the documentation](https://mui.com/x/react-data-grid/clipboard/#clipboard-paste) for more information
+
+- 🌍 Improve French (fr-FR), German (de-DE), Portuguese (pt-BR) and Ukrainian (uk-UA) locales on the data grid
+- 🌍 Add Slovak (sk-SK) locale on the pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.4.0` / `@mui/x-data-grid-pro@v6.4.0` / `@mui/x-data-grid-premium@v6.4.0`
+
+#### Changes
+
+- [DataGrid] Fix DataGrid rendering in JSDOM (#8968) @cherniavskii
+- [DataGrid] Fix layout when rendered inside a parent with `display: grid` (#8577) @cherniavskii
+- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
+- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
+- [DataGrid] Extract `baseChip` slot (#8748) @cherniavskii
+- [DataGridPremium] Implement Clipboard import (#7389) @cherniavskii
+- [l10n] Improve French (fr-FR) locale (#8825) @vallereaugabriel
+- [l10n] Improve German (de-DE) locale (#8898) @marcauberer
+- [l10n] Improve Portuguese (pt-BR) locale (#8960) @Sorriso337
+- [l10n] Improve Ukrainian (uk-UA) locale (#8863) @Neonin
+
+### `@mui/x-date-pickers@v6.4.0` / `@mui/x-date-pickers-pro@v6.4.0`
+
+#### Changes
+
+- [pickers] Fix trailing zeros inconsistency in `LuxonAdapter` (#8955) @alexfauquette
+- [pickers] Stop using deprecated adapter methods (#8735) @flaviendelangle
+- [pickers] Strictly type the `adapterLocale` prop of `LocalizationProvider` (#8780) @flaviendelangle
+- [l10n] Add Slovak (sk-SK) locale (#8875) @MatejFacko
+
+### Docs
+
+- [docs] Fix date pickers typo in the docs  (#8939) @richbustos
+- [docs] Fix master detail demo (#8894) @m4theushw
+- [docs] Fix typo in clipboard docs (#8971) @MBilalShafi
+- [docs] Reduce list of dependencies in Codesandbox/Stackblitz demos (#8535) @cherniavskii
+
+### Core
+
+- [core] Improve testing of the adapters (#8789) @flaviendelangle
+- [core] Update license key for tests (#8917) @LukasTy
+- [charts] Make introduction docs pages for each chart (#8869) @alexfauquette
+- [charts] Document Tooltip and Highlighs (#8867) @alexfauquette
+- [test] Cover row grouping regression with a unit test (#8870) @cherniavskii
+- [test] Fix flaky regression tests (#8954) @cherniavskii
+
 ## 6.3.1
 
 _May 5, 2023_

package/DataGrid/DataGrid.js

@@ -68,6 +68,11 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * The character used to separate cell values when copying to the clipboard.
+   * @default '\t'
+   */
+  clipboardCopyCellDelimiter: PropTypes.string,
   /**
    * Number of extra columns to be rendered before/after the visible slice.
    * @default 3
@@ -326,6 +331,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: PropTypes.func,
+  /**
+   * Callback called when the data is copied to the clipboard.
+   * @param {string} data The data copied to the clipboard.
+   */
+  onClipboardCopy: PropTypes.func,
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -611,5 +621,14 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default: false
+   */
+  unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
+    clipboardExport: PropTypes.bool,
+    csvExport: PropTypes.bool
+  }), PropTypes.bool])
 };

package/DataGrid/useDataGridComponent.js

@@ -67,9 +67,9 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowsMeta(privateApiRef, props);
   useGridScroll(privateApiRef, props);
   useGridColumnMenu(privateApiRef);
-  useGridCsvExport(privateApiRef);
+  useGridCsvExport(privateApiRef, props);
   useGridPrintExport(privateApiRef, props);
-  useGridClipboard(privateApiRef);
+  useGridClipboard(privateApiRef, props);
   useGridDimensions(privateApiRef, props);
   useGridEvents(privateApiRef, props);
   useGridStatePersistence(privateApiRef);

package/DataGrid/useDataGridProps.js

@@ -66,7 +66,9 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnReorder: false,
   disableColumnResize: false,
   keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false
+  keepColumnPositionIfDraggedOutside: false,
+  unstable_ignoreValueFormatterDuringExport: false,
+  clipboardCopyCellDelimiter: '\t'
 };
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProps = inProps => {

package/colDef/gridBooleanColDef.js

@@ -10,6 +10,22 @@ function gridBooleanFormatter({
 }) {
   return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
 }
+const stringToBoolean = value => {
+  switch (value.toLowerCase().trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
 export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
   align: 'center',
@@ -21,5 +37,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: undefined,
   // @ts-ignore
-  aggregable: false
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: value => stringToBoolean(value)
 });

package/colDef/gridDateColDef.js

@@ -51,7 +51,9 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
 });
 export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
@@ -59,5 +61,7 @@ export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
 });

package/colDef/gridSingleSelectColDef.js

@@ -51,5 +51,25 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  // @ts-ignore
+  pastedValueParser: (value, params) => {
+    const colDef = params.colDef;
+    const colDefValueOptions = colDef.valueOptions;
+    const valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
+      field: colDef.field
+    }) : colDefValueOptions || [];
+    const getOptionValue = colDef.getOptionValue;
+    const valueOption = valueOptions.find(option => {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
 });

package/components/base/GridBody.js

@@ -89,7 +89,8 @@ function GridBody(props) {
   apiRef.current.register('private', {
     columnHeadersContainerElementRef: columnsContainerRef,
     columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    mainElementRef: rootRef
   });
   const hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {

package/components/containers/GridRootStyles.js

@@ -149,6 +149,7 @@ export const GridRootStyles = styled('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
+    overflow: 'hidden',
     flexDirection: 'column',
     overflowAnchor: 'none',
     // Keep the same scrolling position

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -4,7 +4,6 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "c
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
@@ -98,7 +97,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
       variant: "outlined",
       size: "small",
       label: getOptionLabel(option)

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -4,7 +4,6 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "c
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -56,7 +55,7 @@ function GridFilterInputMultipleValue(props) {
     id: id,
     value: filterValueState,
     onChange: handleChange,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
       variant: "outlined",
       size: "small",
       label: option

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridCellIndexCoordinates, GridScrollParams, GridColDef, GridCellCoordinates, GridCellParams } from '../../../models';
+import { GridCellIndexCoordinates, GridScrollParams, GridColDef, GridCellCoordinates, GridCellParams, GridEditMode } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
 import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
@@ -64,6 +64,17 @@ export interface GridPipeProcessingLookup {
             cell: GridCellParams | null;
         };
     };
+    clipboardCopy: {
+        value: string;
+    };
+    canStartEditing: {
+        value: boolean;
+        context: {
+            event: React.KeyboardEvent;
+            cellParams: GridCellParams;
+            editMode: GridEditMode;
+        };
+    };
 }
 export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     context: any;

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;

package/hooks/features/clipboard/useGridClipboard.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+import { useGridApiOptionHandler, useGridNativeEventListener } from '../../utils';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
+import { serializeCellValue } from '../export/serializers/csvSerializer';
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -18,6 +20,15 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function copyToClipboard(data) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(data).catch(() => {
+      writeToClipboardPolyfill(data);
+    });
+  } else {
+    writeToClipboardPolyfill(data);
+  }
+}
 function hasNativeSelection(element) {
   var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
@@ -38,24 +49,11 @@ function hasNativeSelection(element) {
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export const useGridClipboard = apiRef => {
-  const copySelectedRowsToClipboard = React.useCallback(() => {
-    if (apiRef.current.getSelectedRows().size === 0) {
-      return;
-    }
-    const data = apiRef.current.getDataAsCsv({
-      includeHeaders: false,
-      delimiter: '\t'
-    });
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(data).catch(() => {
-        writeToClipboardPolyfill(data);
-      });
-    } else {
-      writeToClipboardPolyfill(data);
-    }
-  }, [apiRef]);
-  const handleKeydown = React.useCallback(event => {
+export const useGridClipboard = (apiRef, props) => {
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
+  const handleCopy = React.useCallback(event => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey;
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -67,11 +65,30 @@ export const useGridClipboard = apiRef => {
     if (hasNativeSelection(event.target)) {
       return;
     }
-    apiRef.current.unstable_copySelectedRowsToClipboard();
-  }, [apiRef]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
-  const clipboardApi = {
-    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
-  };
-  useGridApiMethod(apiRef, clipboardApi, 'public');
+    let textToCopy = '';
+    const selectedRows = apiRef.current.getSelectedRows();
+    if (selectedRows.size > 0) {
+      textToCopy = apiRef.current.getDataAsCsv({
+        includeHeaders: false,
+        // TODO: make it configurable
+        delimiter: clipboardCopyCellDelimiter
+      });
+    } else {
+      const focusedCell = gridFocusCellSelector(apiRef);
+      if (focusedCell) {
+        const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = serializeCellValue(cellParams, {
+          delimiterCharacter: clipboardCopyCellDelimiter,
+          ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/hooks/features/dimensions/useGridDimensions.js

@@ -10,7 +10,6 @@ import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { gridClasses } from '../../../constants/gridClasses';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 const hasScroll = ({
   content,
@@ -151,9 +150,8 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const computeSizeAndPublishResizeEvent = React.useCallback(() => {
-    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
-    const rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
-    const mainEl = rootEl == null ? void 0 : rootEl.querySelector(`.${gridClasses.main}`);
+    var _apiRef$current$mainE, _previousSize$current, _previousSize$current2;
+    const mainEl = (_apiRef$current$mainE = apiRef.current.mainElementRef) == null ? void 0 : _apiRef$current$mainE.current;
     if (!mainEl) {
       return;
     }

package/hooks/features/editing/useGridCellEditing.js

@@ -90,10 +90,14 @@ export const useGridCellEditing = (apiRef, props) => {
       }
     } else if (params.isEditable) {
       let reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'cell'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

package/hooks/features/editing/useGridRowEditing.js

@@ -144,10 +144,14 @@ export const useGridRowEditing = (apiRef, props) => {
       }
     } else if (params.isEditable) {
       let reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'row'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if (isPrintableKey(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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

@@ -1,12 +1,17 @@
 import { GridRowId } from '../../../../models';
 import { GridCellParams } from '../../../../models/params/gridCellParams';
 import { GridStateColDef } from '../../../../models/colDef/gridColDef';
+export declare const serializeCellValue: (cellParams: GridCellParams, options: {
+    delimiterCharacter: string;
+    ignoreValueFormatter: boolean;
+}) => any;
 interface BuildCSVOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
     getCellParams: (id: GridRowId, field: string) => GridCellParams;
     delimiterCharacter: string;
     includeHeaders: boolean;
+    ignoreValueFormatter: boolean;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};

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

@@ -1,6 +1,6 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-const serializeCellValue = (value, delimiterCharacter) => {
+function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     const formattedValue = value.replace(/"/g, '""');
 
@@ -11,16 +11,49 @@ const serializeCellValue = (value, delimiterCharacter) => {
     return formattedValue;
   }
   return value;
+}
+export const serializeCellValue = (cellParams, options) => {
+  const {
+    delimiterCharacter,
+    ignoreValueFormatter
+  } = options;
+  let value;
+  if (ignoreValueFormatter) {
+    var _cellParams$value2;
+    const columnType = cellParams.colDef.type;
+    if (columnType === 'number') {
+      value = String(cellParams.value);
+    } else if (columnType === 'date' || columnType === 'dateTime') {
+      var _cellParams$value;
+      value = (_cellParams$value = cellParams.value) == null ? void 0 : _cellParams$value.toISOString();
+    } else if (typeof ((_cellParams$value2 = cellParams.value) == null ? void 0 : _cellParams$value2.toString) === 'function') {
+      value = cellParams.value.toString();
+    } else {
+      value = cellParams.value;
+    }
+  } else {
+    value = cellParams.formattedValue;
+  }
+  return sanitizeCellValue(value, delimiterCharacter);
 };
 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.']);
-const serializeRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
+const serializeRow = ({
+  id,
+  columns,
+  getCellParams,
+  delimiterCharacter,
+  ignoreValueFormatter
+}) => columns.map(column => {
   const cellParams = getCellParams(id, column.field);
   if (process.env.NODE_ENV !== 'production') {
     if (String(cellParams.formattedValue) === '[object Object]') {
       objectFormattedValueWarning();
     }
   }
-  return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
+  return serializeCellValue(cellParams, {
+    delimiterCharacter,
+    ignoreValueFormatter
+  });
 });
 export function buildCSV(options) {
   const {
@@ -28,12 +61,19 @@ export function buildCSV(options) {
     rowIds,
     getCellParams,
     delimiterCharacter,
-    includeHeaders
+    includeHeaders,
+    ignoreValueFormatter
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
+  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
+    id,
+    columns,
+    getCellParams,
+    delimiterCharacter,
+    ignoreValueFormatter
+  }).join(delimiterCharacter)}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serializeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => sanitizeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

package/hooks/features/export/useGridCsvExport.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -7,4 +8,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport'>) => void;

package/hooks/features/export/useGridCsvExport.js

@@ -6,7 +6,7 @@ import { buildCSV } from './serializers/csvSerializer';
 import { getColumnsToExport, defaultGetRowsToExport } from './utils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -14,9 +14,10 @@ import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarEx
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const useGridCsvExport = apiRef => {
+export const useGridCsvExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
+  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;
     logger.debug(`Get data as CSV`);
@@ -33,9 +34,10 @@ export const useGridCsvExport = apiRef => {
       rowIds: exportedRowIds,
       getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true
+      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+      ignoreValueFormatter
     });
-  }, [logger, apiRef]);
+  }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {
     logger.debug(`Export data as CSV`);
     const csv = getDataAsCsv(options);

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -14,6 +14,7 @@ import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { useGridSelector } from '../../utils/useGridSelector';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -450,6 +451,16 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPageRows, theme.direction, getRowIdFromIndex, goToCell, goToHeader]);
+  const checkIfCanStartEditing = React.useCallback((initialValue, {
+    event
+  }) => {
+    if (event.key === ' ') {
+      // Space scrolls to the last row
+      return false;
+    }
+    return initialValue;
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'canStartEditing', checkIfCanStartEditing);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);

package/index.js

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