@mui/x-data-grid 6.3.1 → 6.4.0

package/legacy/material/index.js

@@ -9,6 +9,7 @@ import MUIIconButton from '@mui/material/IconButton';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIInputLabel from '@mui/material/InputLabel';
+import MUIChip from '@mui/material/Chip';
 import { GridColumnUnsortedIcon } from './icons/GridColumnUnsortedIcon';
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from './icons';
 import MUISelectOption from './components/MUISelectOption';
@@ -60,6 +61,7 @@ var materialSlots = _extends({}, iconSlots, {
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   BaseInputLabel: MUIInputLabel,
-  BaseSelectOption: MUISelectOption
+  BaseSelectOption: MUISelectOption,
+  BaseChip: MUIChip
 });
 export default materialSlots;

package/legacy/models/api/index.js

@@ -11,7 +11,6 @@ export * from './gridColumnMenuApi';
 export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridDisableVirtualizationApi';
-export * from './gridClipboardApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';

package/legacy/utils/domUtils.js

@@ -38,4 +38,17 @@ export function getGridCellElement(root, _ref) {
   var cellSelector = ".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]");
   var selector = "".concat(rowSelector, " ").concat(cellSelector);
   return root.querySelector(selector);
-}
+}
+
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+export var getActiveElement = function getActiveElement() {
+  var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+  var activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  return activeEl;
+};

package/locales/deDE.js

@@ -37,7 +37,7 @@ const deDEGrid = {
   columnsPanelHideAllButton: 'Verberge alle',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Alle entfernen',
   filterPanelDeleteIconLabel: 'Löschen',
   filterPanelLogicOperator: 'Logische Operatoren',
   filterPanelOperator: 'Operatoren',
@@ -67,7 +67,7 @@ const deDEGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Zeige alle Spalten',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Spalten verwalten',
   columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Verbergen',
   columnMenuUnsort: 'Sortierung deaktivieren',

package/locales/frFR.js

@@ -7,7 +7,7 @@ const frFRGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Densité',
   toolbarDensityLabel: 'Densité',
-  toolbarDensityCompact: 'Compact',
+  toolbarDensityCompact: 'Compacte',
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Confortable',
   // Columns selector toolbar button text
@@ -20,7 +20,7 @@ const frFRGrid = {
   toolbarFiltersTooltipShow: 'Afficher les filtres',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtres actifs` : `${count} filtre actif`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Recherche…',
+  toolbarQuickFilterPlaceholder: 'Rechercher…',
   toolbarQuickFilterLabel: 'Recherche',
   toolbarQuickFilterDeleteIconLabel: 'Supprimer',
   // Export selector toolbar button text
@@ -30,7 +30,7 @@ const frFRGrid = {
   toolbarExportPrint: 'Imprimer',
   toolbarExportExcel: 'Télécharger pour Excel',
   // Columns panel text
-  columnsPanelTextFieldLabel: 'Chercher colonne',
+  columnsPanelTextFieldLabel: 'Chercher une colonne',
   columnsPanelTextFieldPlaceholder: 'Titre de la colonne',
   columnsPanelDragIconLabel: 'Réorganiser la colonne',
   columnsPanelShowAllButton: 'Tout afficher',
@@ -43,12 +43,12 @@ const frFRGrid = {
   filterPanelOperator: 'Opérateur',
   filterPanelOperatorAnd: 'Et',
   filterPanelOperatorOr: 'Ou',
-  filterPanelColumns: 'Colonnes',
+  filterPanelColumns: 'Colonne',
   filterPanelInputLabel: 'Valeur',
   filterPanelInputPlaceholder: 'Filtrer la valeur',
   // Filter operators text
   filterOperatorContains: 'contient',
-  filterOperatorEquals: 'égal à',
+  filterOperatorEquals: 'est égal à',
   filterOperatorStartsWith: 'commence par',
   filterOperatorEndsWith: 'se termine par',
   filterOperatorIs: 'est',
@@ -80,7 +80,7 @@ const frFRGrid = {
   // Rows selected footer text
   footerRowSelected: count => count > 1 ? `${count.toLocaleString()} lignes sélectionnées` : `${count.toLocaleString()} ligne sélectionnée`,
   // Total row amount footer text
-  footerTotalRows: 'Lignes totales :',
+  footerTotalRows: 'Total de lignes :',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} sur ${totalCount.toLocaleString()}`,
   // Checkbox selection text

package/locales/ptBR.js

@@ -37,7 +37,7 @@ const ptBRGrid = {
   columnsPanelHideAllButton: 'Ocultar todas',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Excluir',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operador',

package/locales/ukUA.js

@@ -51,7 +51,7 @@ const ukUAGrid = {
   columnsPanelHideAllButton: 'Приховати всі',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Видалити всі',
   filterPanelDeleteIconLabel: 'Видалити',
   filterPanelLogicOperator: 'Логічна функція',
   filterPanelOperator: 'Оператори',
@@ -81,7 +81,7 @@ const ukUAGrid = {
   // Column menu text
   columnMenuLabel: 'Меню',
   columnMenuShowColumns: 'Показати стовпці',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Керування стовпцями',
   columnMenuFilter: 'Фільтр',
   columnMenuHideColumn: 'Приховати',
   columnMenuUnsort: 'Скасувати сортування',
@@ -135,12 +135,11 @@ const ukUAGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Порядок рядків',
   // Aggregation
-  aggregationMenuItemHeader: 'Агрегація'
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Агрегація',
+  aggregationFunctionLabelSum: 'сума',
+  aggregationFunctionLabelAvg: 'сер',
+  aggregationFunctionLabelMin: 'мін',
+  aggregationFunctionLabelMax: 'макс',
+  aggregationFunctionLabelSize: 'кількість'
 };
-
 export const ukUA = getGridLocalization(ukUAGrid, ukUACore);

package/material/index.d.ts

@@ -27,6 +27,7 @@ declare const materialSlots: {
     } & import("react").RefAttributes<HTMLDivElement>>;
     BaseInputLabel: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/InputLabel").InputLabelTypeMap<{}, "label">>;
     BaseSelectOption: typeof MUISelectOption;
+    BaseChip: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Chip").ChipTypeMap<{}, "div">>;
     BooleanCellTrueIcon: import("react").JSXElementConstructor<any>;
     BooleanCellFalseIcon: import("react").JSXElementConstructor<any>;
     ColumnMenuIcon: import("react").JSXElementConstructor<any>;

package/material/index.js

@@ -9,6 +9,7 @@ import MUIIconButton from '@mui/material/IconButton';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIInputLabel from '@mui/material/InputLabel';
+import MUIChip from '@mui/material/Chip';
 import { GridColumnUnsortedIcon } from './icons/GridColumnUnsortedIcon';
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from './icons';
 import MUISelectOption from './components/MUISelectOption';
@@ -60,6 +61,7 @@ const materialSlots = _extends({}, iconSlots, {
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   BaseInputLabel: MUIInputLabel,
-  BaseSelectOption: MUISelectOption
+  BaseSelectOption: MUISelectOption,
+  BaseChip: MUIChip
 });
 export default materialSlots;

package/models/api/gridApiCommon.d.ts

@@ -1,7 +1,6 @@
 import { GridColumnApi } from './gridColumnApi';
 import { GridColumnMenuApi } from './gridColumnMenuApi';
 import { GridCoreApi, GridCorePrivateApi } from './gridCoreApi';
-import { GridClipboardApi } from './gridClipboardApi';
 import { GridCsvExportApi } from './gridCsvExportApi';
 import { GridDensityApi } from './gridDensityApi';
 import { GridEditingApi, GridEditingPrivateApi } from './gridEditingApi';
@@ -28,7 +27,7 @@ import type { GridPaginationApi } from '../../hooks/features/pagination';
 import type { GridStatePersistenceApi } from '../../hooks/features/statePersistence';
 import { GridColumnGroupingApi } from './gridColumnGroupingApi';
 import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity';
-export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridDisableVirtualizationApi, GridLocaleTextApi, GridClipboardApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi {
+export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridDisableVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi {
 }
 export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon> extends GridCorePrivateApi<Api, PrivateApi>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridVirtualScrollerApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi {
 }

package/models/api/gridCoreApi.d.ts

@@ -53,6 +53,10 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * The React ref of the grid virtual scroller container element.
      */
     virtualScrollerRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid main container div element.
+     */
+    mainElementRef?: React.RefObject<HTMLDivElement>;
     register: <V extends 'public' | 'private', T extends V extends 'public' ? Partial<GridPublicApi> : Partial<Omit<GridPrivateApi, keyof GridPublicApi>>>(visibility: V, methods: T) => void;
     /**
      * Returns the public API.

package/models/api/index.d.ts

@@ -16,7 +16,6 @@ export * from './gridColumnMenuApi';
 export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridDisableVirtualizationApi';
-export * from './gridClipboardApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';

package/models/api/index.js

@@ -11,7 +11,6 @@ export * from './gridColumnMenuApi';
 export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridDisableVirtualizationApi';
-export * from './gridClipboardApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';

package/models/events/gridEventLookup.d.ts

@@ -541,6 +541,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridRowSelectionCheckboxParams;
         event: React.ChangeEvent<HTMLElement>;
     };
+    /**
+     * Fired when the data is copied to the clipboard
+     */
+    clipboardCopy: {
+        params: string;
+    };
     /**
      * Fired when the preference panel is closed.
      */

package/models/gridSlotsComponent.d.ts

@@ -60,6 +60,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default MenuItem
      */
     BaseSelectOption: React.JSXElementConstructor<any>;
+    /**
+     * The custom Chip component used in the grid.
+     * @default Chip
+     */
+    BaseChip: React.JSXElementConstructor<any>;
     /**
      * Component rendered for each cell.
      * @default GridCell

package/models/gridSlotsComponentsProps.d.ts

@@ -10,6 +10,7 @@ import { TooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
 import { PopperProps } from '@mui/material/Popper';
 import { TablePaginationProps } from '@mui/material/TablePagination';
+import { ChipProps } from '@mui/material/Chip';
 import { GridToolbarProps } from '../components/toolbar/GridToolbar';
 import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
 import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -42,6 +43,8 @@ export interface BaseInputLabelPropsOverrides {
 }
 export interface BaseSelectOptionPropsOverrides {
 }
+export interface BaseChipPropsOverrides {
+}
 export interface CellPropsOverrides {
 }
 export interface ToolbarPropsOverrides {
@@ -90,6 +93,7 @@ export interface GridSlotsComponentsProps {
         value: any;
         children?: React.ReactNode;
     }, BaseSelectOptionPropsOverrides>;
+    baseChip?: SlotProps<ChipProps, BaseChipPropsOverrides>;
     cell?: SlotProps<GridCellProps, CellPropsOverrides>;
     columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
     columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;

package/models/props/DataGridProps.d.ts

@@ -306,6 +306,20 @@ export interface DataGridPropsWithDefaultValues {
      * @default false
      */
     keepColumnPositionIfDraggedOutside: boolean;
+    /**
+     * 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: boolean | {
+        csvExport?: boolean;
+        clipboardExport?: boolean;
+    };
+    /**
+     * The character used to separate cell values when copying to the clipboard.
+     * @default '\t'
+     */
+    clipboardCopyCellDelimiter: string;
 }
 /**
  * The `DataGrid` props with no default value.
@@ -679,4 +693,9 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onProcessRowUpdateError?: (error: any) => void;
     columnGroupingModel?: GridColumnGroupingModel;
+    /**
+     * Callback called when the data is copied to the clipboard.
+     * @param {string} data The data copied to the clipboard.
+     */
+    onClipboardCopy?: GridEventListener<'clipboardCopy'>;
 }

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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';
@@ -96,7 +95,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/modern/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";
@@ -55,7 +54,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/modern/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) {
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
   if (window.getSelection()?.toString()) {
@@ -37,24 +48,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?.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).
@@ -66,11 +64,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/modern/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,
@@ -150,8 +149,7 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const computeSizeAndPublishResizeEvent = React.useCallback(() => {
-    const rootEl = apiRef.current.rootElementRef?.current;
-    const mainEl = rootEl?.querySelector(`.${gridClasses.main}`);
+    const mainEl = apiRef.current.mainElementRef?.current;
     if (!mainEl) {
       return;
     }