@mui/x-data-grid-premium 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/DataGridPremium/DataGridPremium.js

@@ -106,6 +106,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.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
@@ -171,6 +176,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   disableChildrenSorting: PropTypes.bool,
+  /**
+   * If `true`, the clipboard paste is disabled.
+   * @default false
+   */
+  disableClipboardPaste: PropTypes.bool,
   /**
    * If `true`, column filters are disabled.
    * @default false
@@ -246,6 +256,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    clipboardPaste: PropTypes.bool,
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -481,6 +492,19 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.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 the clipboard paste operation ends.
+   */
+  onClipboardPasteEnd: PropTypes.func,
+  /**
+   * Callback fired when the clipboard paste operation starts.
+   */
+  onClipboardPasteStart: PropTypes.func,
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -885,10 +909,26 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set the cell selection model of the grid.
    */
   unstable_cellSelectionModel: 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]),
   /**
    * Callback fired when the selection state of one or multiple cells changes.
    * @param {GridCellSelectionModel} cellSelectionModel Object in the shape of [[GridCellSelectionModel]] containing the selected cells.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
-  unstable_onCellSelectionModelChange: PropTypes.func
+  unstable_onCellSelectionModelChange: PropTypes.func,
+  /**
+   * The function is used to split the pasted text into rows and cells.
+   * @param {string} text The text pasted from the clipboard.
+   * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns.
+   * @default `(text) => text.split(/\r\n|\n|\r/).map((row) => row.split('\t'))`
+   */
+  unstable_splitClipboardPastedText: PropTypes.func
 } : void 0;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -6,6 +6,7 @@ import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/featur
 import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 import { useGridExcelExport } from '../hooks/features/export/useGridExcelExport';
 import { cellSelectionStateInitializer, useGridCellSelection } from '../hooks/features/cellSelection/useGridCellSelection';
+import { useGridClipboardImport } from '../hooks/features/clipboard/useGridClipboardImport';
 export const useDataGridPremiumComponent = (inputApiRef, props) => {
   const privateApiRef = useGridInitialization(inputApiRef, props);
 
@@ -63,6 +64,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridDetailPanel(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);
+  useGridClipboardImport(privateApiRef, props);
   useGridEditing(privateApiRef, props);
   useGridFocus(privateApiRef, props);
   useGridPreferencesPanel(privateApiRef, props);
@@ -78,10 +80,10 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInfiniteLoader(privateApiRef, props);
   useGridLazyLoader(privateApiRef, props);
   useGridColumnMenu(privateApiRef);
-  useGridCsvExport(privateApiRef);
+  useGridCsvExport(privateApiRef, props);
   useGridPrintExport(privateApiRef, props);
   useGridExcelExport(privateApiRef, props);
-  useGridClipboard(privateApiRef);
+  useGridClipboard(privateApiRef, props);
   useGridDimensions(privateApiRef, props);
   useGridEvents(privateApiRef, props);
   useGridStatePersistence(privateApiRef);

package/DataGridPremium/useDataGridPremiumProps.js

@@ -18,7 +18,9 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
   rowGroupingColumnMode: 'single',
   aggregationFunctions: GRID_AGGREGATION_FUNCTIONS,
   aggregationRowsScope: 'filtered',
-  getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline'
+  getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline',
+  disableClipboardPaste: false,
+  unstable_splitClipboardPastedText: text => text.split(/\r\n|\n|\r/).map(row => row.split('\t'))
 });
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridPremiumProps = inProps => {

package/hooks/features/cellSelection/useGridCellSelection.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const cellSelectionStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'unstable_cellSelectionModel' | 'initialState'>>;
-export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'unstable_cellSelection' | 'unstable_cellSelectionModel' | 'unstable_onCellSelectionModelChange' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'unstable_cellSelection' | 'unstable_cellSelectionModel' | 'unstable_onCellSelectionModelChange' | 'pagination' | 'paginationMode' | 'unstable_ignoreValueFormatterDuringExport' | 'clipboardCopyCellDelimiter'>) => void;

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useEventCallback } from '@mui/material/utils';
-import { isNavigationKey, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
+import { isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
 export const cellSelectionStateInitializer = (state, props) => {
@@ -17,6 +17,9 @@ export const useGridCellSelection = (apiRef, props) => {
   const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef();
   const lastMouseDownCell = React.useRef();
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   apiRef.current.registerControlState({
     stateId: 'cellSelection',
     propModel: props.unstable_cellSelectionModel,
@@ -317,7 +320,32 @@ export const useGridCellSelection = (apiRef, props) => {
     }
     return initialValue;
   }, [apiRef, props.unstable_cellSelection, hasClickedValidCellForRangeSelection]);
+  const handleClipboardCopy = React.useCallback(value => {
+    if (apiRef.current.unstable_getSelectedCellsAsArray().length <= 1) {
+      return value;
+    }
+    const cellSelectionModel = apiRef.current.unstable_getCellSelectionModel();
+    const copyData = Object.keys(cellSelectionModel).reduce((acc, rowId) => {
+      const fieldsMap = cellSelectionModel[rowId];
+      const rowString = Object.keys(fieldsMap).reduce((acc2, field) => {
+        let cellData;
+        if (fieldsMap[field]) {
+          const cellParams = apiRef.current.getCellParams(rowId, field);
+          cellData = serializeCellValue(cellParams, {
+            delimiterCharacter: clipboardCopyCellDelimiter,
+            ignoreValueFormatter
+          });
+        } else {
+          cellData = '';
+        }
+        return acc2 === '' ? cellData : [acc2, cellData].join(clipboardCopyCellDelimiter);
+      }, '');
+      return acc === '' ? rowString : [acc, rowString].join('\r\n');
+    }, '');
+    return copyData;
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
   useGridRegisterPipeProcessor(apiRef, 'cellClassName', addClassesToCells);
   useGridRegisterPipeProcessor(apiRef, 'canUpdateFocus', canUpdateFocus);
+  useGridRegisterPipeProcessor(apiRef, 'clipboardCopy', handleClipboardCopy);
 };

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+import type { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+export declare const useGridClipboardImport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'pagination' | 'paginationMode' | 'processRowUpdate' | 'onProcessRowUpdateError' | 'getRowId' | 'onClipboardPasteStart' | 'onClipboardPasteEnd' | 'experimentalFeatures' | 'unstable_splitClipboardPastedText' | 'disableClipboardPaste'>) => void;

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -0,0 +1,315 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GRID_CHECKBOX_SELECTION_FIELD, gridFocusCellSelector, gridVisibleColumnFieldsSelector, useGridApiOptionHandler, useGridApiEventHandler, gridPaginatedVisibleSortedGridRowIdsSelector } from '@mui/x-data-grid';
+import { buildWarning, getRowIdFromRowModel, getActiveElement, useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_REORDER_COL_DEF } from '@mui/x-data-grid-pro';
+import { unstable_debounce as debounce } from '@mui/utils';
+const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
+const columnFieldsToExcludeFromPaste = [GRID_CHECKBOX_SELECTION_FIELD, GRID_REORDER_COL_DEF.field, GRID_DETAIL_PANEL_TOGGLE_FIELD];
+
+// Batches rows that are updated during clipboard paste to reduce `updateRows` calls
+function batchRowUpdates(func, wait) {
+  let rows = [];
+  const debounced = debounce(() => {
+    func(rows);
+    rows = [];
+  }, wait);
+  return row => {
+    rows.push(row);
+    debounced();
+  };
+}
+async function getTextFromClipboard(rootEl) {
+  return new Promise(resolve => {
+    const focusedCell = getActiveElement(document);
+    const el = document.createElement('input');
+    el.style.width = '0px';
+    el.style.height = '0px';
+    el.style.border = 'none';
+    el.style.margin = '0';
+    el.style.padding = '0';
+    el.style.outline = 'none';
+    el.style.position = 'absolute';
+    el.style.top = '0';
+    el.style.left = '0';
+    const handlePasteEvent = event => {
+      var _event$clipboardData;
+      el.removeEventListener('paste', handlePasteEvent);
+      const text = (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData('text/plain');
+      if (focusedCell instanceof HTMLElement) {
+        focusedCell.focus({
+          preventScroll: true
+        });
+      }
+      el.remove();
+      resolve(text || '');
+    };
+    el.addEventListener('paste', handlePasteEvent);
+    rootEl.appendChild(el);
+    el.focus({
+      preventScroll: true
+    });
+  });
+}
+
+// Keeps track of updated rows during clipboard paste
+class CellValueUpdater {
+  constructor(options) {
+    this.rowsToUpdate = {};
+    this.updateRow = void 0;
+    this.options = void 0;
+    this.options = options;
+    this.updateRow = batchRowUpdates(options.apiRef.current.updateRows, 50);
+  }
+  updateCell({
+    rowId,
+    field,
+    pastedCellValue
+  }) {
+    if (pastedCellValue === undefined) {
+      return;
+    }
+    const {
+      apiRef,
+      getRowId
+    } = this.options;
+    const colDef = apiRef.current.getColumn(field);
+    if (!colDef || !colDef.editable) {
+      return;
+    }
+    const row = this.rowsToUpdate[rowId] || _extends({}, apiRef.current.getRow(rowId));
+    if (!row) {
+      return;
+    }
+    const cellParams = apiRef.current.getCellParams(rowId, field);
+    let parsedValue = pastedCellValue;
+    if (colDef.pastedValueParser) {
+      parsedValue = colDef.pastedValueParser(pastedCellValue, cellParams);
+    } else if (colDef.valueParser) {
+      parsedValue = colDef.valueParser(parsedValue, cellParams);
+    }
+    if (parsedValue === undefined) {
+      return;
+    }
+    let rowCopy = _extends({}, row);
+    if (typeof colDef.valueSetter === 'function') {
+      rowCopy = colDef.valueSetter({
+        value: parsedValue,
+        row: rowCopy
+      });
+    } else {
+      rowCopy[field] = parsedValue;
+    }
+    const newRowId = getRowIdFromRowModel(rowCopy, getRowId);
+    if (String(newRowId) !== String(rowId)) {
+      // We cannot update row id, so this cell value update should be ignored
+      return;
+    }
+    this.rowsToUpdate[rowId] = rowCopy;
+  }
+  applyUpdates() {
+    const {
+      apiRef,
+      processRowUpdate,
+      onProcessRowUpdateError
+    } = this.options;
+    const rowsToUpdate = this.rowsToUpdate;
+    const rowIdsToUpdate = Object.keys(rowsToUpdate);
+    if (rowIdsToUpdate.length === 0) {
+      apiRef.current.publishEvent('clipboardPasteEnd');
+      return;
+    }
+    const handleRowUpdate = async rowId => {
+      const newRow = rowsToUpdate[rowId];
+      if (typeof processRowUpdate === 'function') {
+        const handleError = errorThrown => {
+          if (onProcessRowUpdateError) {
+            onProcessRowUpdateError(errorThrown);
+          } else {
+            missingOnProcessRowUpdateErrorWarning();
+          }
+        };
+        try {
+          const oldRow = apiRef.current.getRow(rowId);
+          const finalRowUpdate = await processRowUpdate(newRow, oldRow);
+          this.updateRow(finalRowUpdate);
+        } catch (error) {
+          handleError(error);
+        }
+      } else {
+        this.updateRow(newRow);
+      }
+    };
+    const promises = rowIdsToUpdate.map(rowId => {
+      // Wrap in promise that always resolves to avoid Promise.all from stopping on first error.
+      // This is to avoid using `Promise.allSettled` that has worse browser support.
+      return new Promise(resolve => {
+        handleRowUpdate(rowId).then(resolve).catch(resolve);
+      });
+    });
+    Promise.all(promises).then(() => {
+      this.rowsToUpdate = {};
+      apiRef.current.publishEvent('clipboardPasteEnd');
+    });
+  }
+}
+function defaultPasteResolver({
+  pastedData,
+  apiRef,
+  updateCell
+}) {
+  const isSingleValuePasted = pastedData.length === 1 && pastedData[0].length === 1;
+  const cellSelectionModel = apiRef.current.unstable_getCellSelectionModel();
+  if (cellSelectionModel && apiRef.current.unstable_getSelectedCellsAsArray().length > 1) {
+    Object.keys(cellSelectionModel).forEach((rowId, rowIndex) => {
+      const rowDataArr = pastedData[isSingleValuePasted ? 0 : rowIndex];
+      const hasRowData = isSingleValuePasted ? true : rowDataArr !== undefined;
+      if (!hasRowData) {
+        return;
+      }
+      Object.keys(cellSelectionModel[rowId]).forEach((field, colIndex) => {
+        const cellValue = isSingleValuePasted ? rowDataArr[0] : rowDataArr[colIndex];
+        updateCell({
+          rowId,
+          field,
+          pastedCellValue: cellValue
+        });
+      });
+    });
+    return;
+  }
+  const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef).filter(field => {
+    if (columnFieldsToExcludeFromPaste.includes(field)) {
+      return false;
+    }
+    return true;
+  });
+  const selectedRows = apiRef.current.getSelectedRows();
+  if (selectedRows.size > 0 && !isSingleValuePasted) {
+    // Multiple values are pasted starting from the first and top-most cell
+    const pastedRowsDataCount = pastedData.length;
+
+    // There's no guarantee that the selected rows are in the same order as the pasted rows
+    selectedRows.forEach((row, rowId) => {
+      let rowData;
+      if (pastedRowsDataCount === 1) {
+        // If only one row is pasted - paste it to all selected rows
+        rowData = pastedData[0];
+      } else {
+        rowData = pastedData.shift();
+      }
+      if (rowData === undefined) {
+        return;
+      }
+      rowData.forEach((newCellValue, cellIndex) => {
+        updateCell({
+          rowId,
+          field: visibleColumnFields[cellIndex],
+          pastedCellValue: newCellValue
+        });
+      });
+    });
+    return;
+  }
+  const selectedCell = gridFocusCellSelector(apiRef);
+  if (!selectedCell) {
+    return;
+  }
+  if (columnFieldsToExcludeFromPaste.includes(selectedCell.field)) {
+    return;
+  }
+  const selectedRowId = selectedCell.id;
+  const selectedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(selectedRowId);
+  const visibleRowIds = gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+  const selectedFieldIndex = visibleColumnFields.indexOf(selectedCell.field);
+  pastedData.forEach((rowData, index) => {
+    const rowId = visibleRowIds[selectedRowIndex + index];
+    if (typeof rowId === 'undefined') {
+      return;
+    }
+    for (let i = selectedFieldIndex; i < visibleColumnFields.length; i += 1) {
+      const field = visibleColumnFields[i];
+      const stringValue = rowData[i - selectedFieldIndex];
+      updateCell({
+        rowId,
+        field,
+        pastedCellValue: stringValue
+      });
+    }
+  });
+}
+function isPasteShortcut(event) {
+  const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+  if (event.code === 'KeyV' && isModifierKeyPressed) {
+    return true;
+  }
+  return false;
+}
+export const useGridClipboardImport = (apiRef, props) => {
+  var _ref, _props$experimentalFe, _apiRef$current$rootE;
+  const processRowUpdate = props.processRowUpdate;
+  const onProcessRowUpdateError = props.onProcessRowUpdateError;
+  const getRowId = props.getRowId;
+  const enableClipboardPaste = (_ref = !props.disableClipboardPaste && ((_props$experimentalFe = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe.clipboardPaste)) != null ? _ref : false;
+  const rootEl = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
+  const splitClipboardPastedText = props.unstable_splitClipboardPastedText;
+  const handlePaste = React.useCallback(async (params, event) => {
+    if (!enableClipboardPaste) {
+      return;
+    }
+    if (!isPasteShortcut(event)) {
+      return;
+    }
+    const focusedCell = gridFocusCellSelector(apiRef);
+    if (focusedCell !== null) {
+      const cellMode = apiRef.current.getCellMode(focusedCell.id, focusedCell.field);
+      if (cellMode === 'edit') {
+        // Do not paste data when the cell is in edit mode
+        return;
+      }
+    }
+    if (!rootEl) {
+      return;
+    }
+    const text = await getTextFromClipboard(rootEl);
+    if (!text) {
+      return;
+    }
+    const pastedData = splitClipboardPastedText(text);
+    if (!pastedData) {
+      return;
+    }
+    const cellUpdater = new CellValueUpdater({
+      apiRef,
+      processRowUpdate,
+      onProcessRowUpdateError,
+      getRowId
+    });
+    apiRef.current.publishEvent('clipboardPasteStart', {
+      data: pastedData
+    });
+    defaultPasteResolver({
+      pastedData,
+      apiRef: {
+        current: apiRef.current.getPublicApi()
+      },
+      updateCell: (...args) => {
+        cellUpdater.updateCell(...args);
+      }
+    });
+    cellUpdater.applyUpdates();
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, rootEl, splitClipboardPastedText]);
+  const checkIfCanStartEditing = React.useCallback((initialValue, {
+    event
+  }) => {
+    if (isPasteShortcut(event) && enableClipboardPaste) {
+      // Do not enter cell edit mode on paste
+      return false;
+    }
+    return initialValue;
+  }, [enableClipboardPaste]);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handlePaste);
+  useGridApiOptionHandler(apiRef, 'clipboardPasteStart', props.onClipboardPasteStart);
+  useGridApiOptionHandler(apiRef, 'clipboardPasteEnd', props.onClipboardPasteEnd);
+  useGridRegisterPipeProcessor(apiRef, 'canStartEditing', checkIfCanStartEditing);
+};

package/index.js

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

package/legacy/DataGridPremium/DataGridPremium.js

@@ -106,6 +106,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.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
@@ -171,6 +176,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   disableChildrenSorting: PropTypes.bool,
+  /**
+   * If `true`, the clipboard paste is disabled.
+   * @default false
+   */
+  disableClipboardPaste: PropTypes.bool,
   /**
    * If `true`, column filters are disabled.
    * @default false
@@ -246,6 +256,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    clipboardPaste: PropTypes.bool,
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -481,6 +492,19 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.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 the clipboard paste operation ends.
+   */
+  onClipboardPasteEnd: PropTypes.func,
+  /**
+   * Callback fired when the clipboard paste operation starts.
+   */
+  onClipboardPasteStart: PropTypes.func,
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -885,10 +909,26 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set the cell selection model of the grid.
    */
   unstable_cellSelectionModel: 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]),
   /**
    * Callback fired when the selection state of one or multiple cells changes.
    * @param {GridCellSelectionModel} cellSelectionModel Object in the shape of [[GridCellSelectionModel]] containing the selected cells.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
-  unstable_onCellSelectionModelChange: PropTypes.func
+  unstable_onCellSelectionModelChange: PropTypes.func,
+  /**
+   * The function is used to split the pasted text into rows and cells.
+   * @param {string} text The text pasted from the clipboard.
+   * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns.
+   * @default `(text) => text.split(/\r\n|\n|\r/).map((row) => row.split('\t'))`
+   */
+  unstable_splitClipboardPastedText: PropTypes.func
 } : void 0;