@mui/x-data-grid 6.3.0 → 6.4.0

package/CHANGELOG.md

@@ -3,6 +3,109 @@
 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_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.3.1` / `@mui/x-data-grid-pro@v6.3.1` / `@mui/x-data-grid-premium@v6.3.1`
+
+#### Changes
+
+- [DataGrid] Fix broken filtering in the value formatter demo (#8621) @cherniavskii
+- [DataGrid] Fix falsy filter values not showing in filter button tooltip (#8550) @ithrforu
+- [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii
+- [DataGrid] Remove unwarranted warning log (#8847) @romgrk
+- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
+- [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii
+
+### `@mui/x-date-pickers@v6.3.1` / `@mui/x-date-pickers-pro@v6.3.1`
+
+#### Changes
+
+- [pickers] Fix `minutesStep` validation prop behavior (#8794) @LukasTy
+- [pickers] Fix time picker `viewRenderers` overriding (#8830) @LukasTy
+- [pickers] Remove last additional character when using LTR (#8848) @alexfauquette
+
+### Docs
+
+- [docs] Fix controlled mode demo on Editing page (#8800) @yaredtsy
+- [docs] Fix scrolling demo not working with React 18 (#6489) @cherniavskii
+- [docs] Update demo to support agregation on popular feature cell (#8617) @BalaM314
+- [docs] Clarify what `<path>` is (#8764) @alexfauquette
+
+### Core
+
+- [core] Do not include playground pages in `yarn typescript` script (#8822) @cherniavskii
+- [core] Limit `typescript:ci` step memory limit (#8796) @LukasTy
+- [core] Upgrade monorepo (#8835) @cherniavskii
+- [test] Use `fake` clock on `MobileDateRangePicker` (#8861) @LukasTy
+- [charts] Clean some styling (#8778) @alexfauquette
+- [charts] Improve tooltip (#8792) @alexfauquette
+- [charts] Improvement and docs on axis (#8654) @alexfauquette
+- [charts] Defaultize attributes (#8788) @alexfauquette
+
 ## 6.3.0
 
 _Apr 28, 2023_
@@ -264,9 +367,9 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 
 - [fields] Add missing tokens to `AdapterDateFnsJalali` (#8402) @flaviendelangle
 - [fields] Clean the active date manager (#8370) @flaviendelangle
-- [fields] Cleanup `useFieldState`  (#8292) @flaviendelangle
+- [fields] Cleanup `useFieldState` (#8292) @flaviendelangle
 - [fields] Only add RTL characters when needed (#8325) @flaviendelangle
-- [pickers] Add support for single input fields in range pickers  (#7927) @flaviendelangle
+- [pickers] Add support for single input fields in range pickers (#7927) @flaviendelangle
 - [pickers] Allows non token characters in format (#8256) @alexfauquette
 - [pickers] Avoid root imports and move public models to the models folder (#8337) @flaviendelangle
 - [pickers] Update `view` when `views` or `openTo` changes (#8361) @LukasTy

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/GridPagination.js

@@ -43,9 +43,11 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     apiRef.current.setPage(page);
   }, [apiRef]);
   if (process.env.NODE_ENV !== 'production') {
+    var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(paginationModel.pageSize)) {
+    const pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }

package/components/base/GridBody.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 interface GridBodyProps {
+    children?: React.ReactNode;
     ColumnHeadersProps?: Record<string, any>;
     VirtualScrollerComponent: React.JSXElementConstructor<React.HTMLAttributes<HTMLDivElement> & {
         ref: React.Ref<HTMLDivElement>;

package/components/base/GridBody.js

@@ -18,7 +18,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   const {
     VirtualScrollerComponent,
-    ColumnHeadersProps
+    ColumnHeadersProps,
+    children
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -88,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, {
@@ -119,7 +121,7 @@ function GridBody(props) {
     , {
       ref: virtualScrollerRef,
       disableVirtualization: isVirtualizationDisabled
-    })]
+    }), children]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -127,6 +129,7 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
   ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;

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/GridPanel.d.ts

@@ -16,7 +16,8 @@ export interface GridPanelProps extends Partial<React.ComponentProps<typeof Grid
     open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit<import("@mui/base").PopperProps<"div", {}>, "direction"> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: React.ElementType<any> | undefined;
     components?: {
         Root?: React.ElementType<any> | undefined;
     } | undefined;

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/components/toolbar/GridToolbarFilterButton.js

@@ -69,7 +69,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ? getFilterItemValue(item) : ''}`
+                  ${
+          // implicit check for null and undefined
+          item.value != null ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

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 {};