@mui/x-data-grid-premium 8.3.1 → 8.4.0

package/CHANGELOG.md

@@ -5,6 +5,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.4.0
+
+_May 21, 2025_
+
+We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔺 Support regular [`pyramid` variation in the `<FunnelChart />` component](https://mui.com/x/react-charts/funnel/#pyramid-chart):
+
+  <img width="398" alt="Pyramid funnel chart" src="https://github.com/user-attachments/assets/90ccb221-3a48-4ffa-8878-89c6db16da86" />
+
+- 📚 Documentation improvements
+- 🌎 Improve Icelandic (is-IS) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@aizerin, @arminmeh, @campmarc, @jyash97, @mapache-salvaje, @noraleonte, @nusr, @ragnarr18, @romgrk, @whereisrmsqhs.
+Following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @rita-codes.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.4.0`
+
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#14737) @campmarc
+- [DataGrid] Fix disabled typography variants crashing grid (#17934) @KenanYusuf
+- [DataGrid] Fix tree data demo crash (#17904) @MBilalShafi
+- [DataGrid] Use `exclude` selection model type if quick filter does not have actual values (#17899) @arminmeh
+- [DataGrid] Fix clipboard copy behavior for cell ranges with empty cells (#16797) @nusr
+- [l10n] Improve Icelandic (is-IS) locale (#17915) @ragnarr18
+
+#### `@mui/x-data-grid-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.4.0`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17122) @whereisrmsqhs
+- [DataGridPro] Preserve row state during server-side lazy loading (#17743) @arminmeh
+- [DataGridPro] Prevent text selection when reordering rows (#16568) @jyash97
+
+#### `@mui/x-data-grid-premium@8.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.4.0`
+
+- [fields] Ensure fresh `disabled` value is used when focusing or clicking (#17914) @aizerin
+- [fields] Improve the field controlled edition (#17816) @flaviendelangle
+- [pickers] Fix `PickersTextField` overflow (#17942) @noraleonte
+
+#### `@mui/x-date-pickers-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.4.0`
+
+- [charts] Add grouped axes demo (#17848) @bernardobelchior
+- [charts] Enable tooltip disable portal (#17871) @alexfauquette
+- [charts] Improve performance in scatter chart (#17849) @bernardobelchior
+- [charts] Recreate `isPointInside` less often (#17850) @bernardobelchior
+- [charts] Try fix for flaky `useAnimate` test (#17777) @JCQuintas
+- [charts] Add `isXInside` and `isYInside` (#17911) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.4.0`, plus:
+
+- [charts-pro] Add size for zoom slider (#17736) @bernardobelchior
+- [charts-pro] Add zoom slider tooltip (#17733) @bernardobelchior
+- [charts-pro] Clean and document Heatmap Tooltip (#17933) @alexfauquette
+- [charts-pro] Introduce `Pyramid` chart (#17783) @JCQuintas
+- [charts-pro] Update zoom slider nomenclature (#17938) @bernardobelchior
+- [charts-pro] Fix error when importing rasterizehtml (#17897) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.4.0`
+
+- [TreeView] Add `getItemChildren` prop in `RichTreeView` (#17894) @rita-codes
+- [TreeView] Add a method in the `apiRef` to toggle the editing status of an item (#17768) @rita-codes
+- [TreeView] Add missing sx prop on the Tree Item component (#17930) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.4.0`.
+
+### Docs
+
+- [docs] Add a recipe for drag and drop row grouping (#17638) @KenanYusuf
+- [docs] Add introductory text to Data Grid component pages (#17902) @KenanYusuf
+- [docs] Refactor embedded CodeSandbox on Data Grid—Quickstart page (#17749) @rita-codes
+- [docs] Remove double border on Data Grid—Quickstart demo (#17932) @rita-codes
+- [docs] Standardize `apiRef` copy (#17776) @mapache-salvaje
+- [docs][DataGrid] Revise server-side data docs (#17007) @mapache-salvaje
+- [docs][DataGrid] Audit and revise the tree data doc (#17650) @mapache-salvaje
+- [docs][pickers] Fix migration guide references to range fields (#17861) @LukasTy
+- [docs][charts] Reorganize the Tooltip documentation (#17917) @alexfauquette
+
+### Core
+
+- [core] refactor: remove manual `displayName` (#17845) @romgrk
+- [code-infra] Document how to use `vitest` cli (#17847) @JCQuintas
+- [code-infra] Increase charts export test timeout (#17909) @JCQuintas
+- [code-infra] Set `isolatedModules=true` in tsconfig (#17781) @JCQuintas
+- [infra] Ensure proper docs preview path resolution (#17863) @LukasTy
+
 ## 8.3.1
 
 _May 14, 2025_

package/DataGridPremium/DataGridPremium.js

@@ -40,7 +40,7 @@ const configuration = {
     }
   }
 };
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -1251,8 +1251,9 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * The function is used to split the pasted text into rows and cells.
    * @param {string} text The text pasted from the clipboard.
+   * @param {string} delimiter The delimiter used to split the text. Default is the tab character and can be set with the `clipboardCopyCellDelimiter` prop.
    * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns.
-   * @default (pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }
+   * @default (pastedText, delimiter = '\t') => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split(delimiter)); }
    */
   splitClipboardPastedText: _propTypes.default.func,
   style: _propTypes.default.object,
@@ -1287,4 +1288,5 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
  * API:
  * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)
  */
-const DataGridPremium = exports.DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
+const DataGridPremium = exports.DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
+if (process.env.NODE_ENV !== "production") DataGridPremium.displayName = "DataGridPremium";

package/DataGridPremium/useDataGridPremiumProps.js

@@ -35,11 +35,11 @@ const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PREMIUM_PROPS_D
   aggregationRowsScope: 'filtered',
   getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline',
   disableClipboardPaste: false,
-  splitClipboardPastedText: pastedText => {
+  splitClipboardPastedText: (pastedText, delimiter = '\t') => {
     // Excel on Windows adds an empty line break at the end of the copied text.
     // See https://github.com/mui/mui-x/issues/9103
     const text = pastedText.replace(/\r?\n$/, '');
-    return text.split(/\r\n|\n|\r/).map(row => row.split('\t'));
+    return text.split(/\r\n|\n|\r/).map(row => row.split(delimiter));
   },
   disablePivoting: false,
   getPivotDerivedColumns: _utils.defaultGetPivotDerivedColumns,

package/components/GridColumnMenuRowGroupItem.js

@@ -37,6 +37,7 @@ function GridColumnMenuRowGroupItem(props) {
       children: apiRef.current.getLocaleText('unGroupColumn')(name)
     }, field);
   };
+  if (process.env.NODE_ENV !== "production") renderUnGroupingMenuItem.displayName = "renderUnGroupingMenuItem";
   if (!colDef || !(0, _gridRowGroupingUtils.isGroupingColumn)(colDef.field)) {
     return null;
   }

package/components/GridPremiumToolbar.js

@@ -52,6 +52,7 @@ function GridPremiumToolbar(props) {
     onClick: onMenuItemClick,
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
+  if (process.env.NODE_ENV !== "production") additionalExportMenuItems.displayName = "additionalExportMenuItems";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridToolbar, (0, _extends2.default)({}, other, {
     additionalItems: additionalItems,
     additionalExportMenuItems: additionalExportMenuItems

package/components/collapsible/CollapsibleContext.js

@@ -8,6 +8,7 @@ exports.CollapsibleContext = void 0;
 exports.useCollapsibleContext = useCollapsibleContext;
 var React = _interopRequireWildcard(require("react"));
 const CollapsibleContext = exports.CollapsibleContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CollapsibleContext.displayName = "CollapsibleContext";
 function useCollapsibleContext() {
   const context = React.useContext(CollapsibleContext);
   if (context === undefined) {

package/components/promptField/PromptFieldContext.js

@@ -8,6 +8,7 @@ exports.PromptFieldContext = void 0;
 exports.usePromptFieldContext = usePromptFieldContext;
 var React = _interopRequireWildcard(require("react"));
 const PromptFieldContext = exports.PromptFieldContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") PromptFieldContext.displayName = "PromptFieldContext";
 function usePromptFieldContext() {
   const context = React.useContext(PromptFieldContext);
   if (context === undefined) {

package/components/resizablePanel/ResizablePanelContext.js

@@ -8,6 +8,7 @@ exports.ResizablePanelContext = void 0;
 exports.useResizablePanelContext = useResizablePanelContext;
 var React = _interopRequireWildcard(require("react"));
 const ResizablePanelContext = exports.ResizablePanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ResizablePanelContext.displayName = "ResizablePanelContext";
 function useResizablePanelContext() {
   const context = React.useContext(ResizablePanelContext);
   if (context === undefined) {

package/esm/DataGridPremium/DataGridPremium.js

@@ -33,7 +33,7 @@ const configuration = {
     }
   }
 };
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -1244,8 +1244,9 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * The function is used to split the pasted text into rows and cells.
    * @param {string} text The text pasted from the clipboard.
+   * @param {string} delimiter The delimiter used to split the text. Default is the tab character and can be set with the `clipboardCopyCellDelimiter` prop.
    * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns.
-   * @default (pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }
+   * @default (pastedText, delimiter = '\t') => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split(delimiter)); }
    */
   splitClipboardPastedText: PropTypes.func,
   style: PropTypes.object,
@@ -1280,4 +1281,5 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
  * API:
  * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)
  */
-export const DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
+export const DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
+if (process.env.NODE_ENV !== "production") DataGridPremium.displayName = "DataGridPremium";

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -27,11 +27,11 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
   aggregationRowsScope: 'filtered',
   getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline',
   disableClipboardPaste: false,
-  splitClipboardPastedText: pastedText => {
+  splitClipboardPastedText: (pastedText, delimiter = '\t') => {
     // Excel on Windows adds an empty line break at the end of the copied text.
     // See https://github.com/mui/mui-x/issues/9103
     const text = pastedText.replace(/\r?\n$/, '');
-    return text.split(/\r\n|\n|\r/).map(row => row.split('\t'));
+    return text.split(/\r\n|\n|\r/).map(row => row.split(delimiter));
   },
   disablePivoting: false,
   getPivotDerivedColumns: defaultGetPivotDerivedColumns,

package/esm/components/GridColumnMenuRowGroupItem.js

@@ -30,6 +30,7 @@ export function GridColumnMenuRowGroupItem(props) {
       children: apiRef.current.getLocaleText('unGroupColumn')(name)
     }, field);
   };
+  if (process.env.NODE_ENV !== "production") renderUnGroupingMenuItem.displayName = "renderUnGroupingMenuItem";
   if (!colDef || !isGroupingColumn(colDef.field)) {
     return null;
   }

package/esm/components/GridPremiumToolbar.js

@@ -44,6 +44,7 @@ export function GridPremiumToolbar(props) {
     onClick: onMenuItemClick,
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
+  if (process.env.NODE_ENV !== "production") additionalExportMenuItems.displayName = "additionalExportMenuItems";
   return /*#__PURE__*/_jsx(GridToolbar, _extends({}, other, {
     additionalItems: additionalItems,
     additionalExportMenuItems: additionalExportMenuItems

package/esm/components/collapsible/CollapsibleContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const CollapsibleContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CollapsibleContext.displayName = "CollapsibleContext";
 export function useCollapsibleContext() {
   const context = React.useContext(CollapsibleContext);
   if (context === undefined) {

package/esm/components/promptField/PromptFieldContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const PromptFieldContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") PromptFieldContext.displayName = "PromptFieldContext";
 export function usePromptFieldContext() {
   const context = React.useContext(PromptFieldContext);
   if (context === undefined) {

package/esm/components/resizablePanel/ResizablePanelContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const ResizablePanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ResizablePanelContext.displayName = "ResizablePanelContext";
 export function useResizablePanelContext() {
   const context = React.useContext(ResizablePanelContext);
   if (context === undefined) {

package/esm/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -134,6 +134,7 @@ const getWrappedRenderHeader = ({
       renderHeader: renderHeader
     }));
   };
+  if (process.env.NODE_ENV !== "production") wrappedRenderHeader.displayName = "wrappedRenderHeader";
   return wrappedRenderHeader;
 };
 

package/esm/hooks/features/cellSelection/useGridCellSelection.js

@@ -458,7 +458,7 @@ export const useGridCellSelection = (apiRef, props) => {
     const sortedSelectedRowIds = sortedRowIds.filter(id => unsortedSelectedRowIds.includes(`${id}`));
     const copyData = sortedSelectedRowIds.reduce((acc, rowId) => {
       const fieldsMap = cellSelectionModel[rowId];
-      const rowString = Object.keys(fieldsMap).reduce((acc2, field) => {
+      const rowValues = Object.keys(fieldsMap).map(field => {
         let cellData;
         if (fieldsMap[field]) {
           const cellParams = apiRef.current.getCellParams(rowId, field);
@@ -473,8 +473,9 @@ export const useGridCellSelection = (apiRef, props) => {
         } else {
           cellData = '';
         }
-        return acc2 === '' ? cellData : [acc2, cellData].join(clipboardCopyCellDelimiter);
+        return cellData;
       }, '');
+      const rowString = rowValues.join(clipboardCopyCellDelimiter);
       return acc === '' ? rowString : [acc, rowString].join('\r\n');
     }, '');
     return copyData;

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

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-export declare const useGridClipboardImport: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;
+export declare const useGridClipboardImport: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart" | "clipboardCopyCellDelimiter">) => void;

package/esm/hooks/features/clipboard/useGridClipboardImport.js

@@ -256,8 +256,9 @@ export const useGridClipboardImport = (apiRef, props) => {
   const getRowId = props.getRowId;
   const enableClipboardPaste = !props.disableClipboardPaste;
   const logger = useGridLogger(apiRef, 'useGridClipboardImport');
-  const splitClipboardPastedText = props.splitClipboardPastedText;
   const {
+    clipboardCopyCellDelimiter,
+    splitClipboardPastedText,
     pagination,
     paginationMode,
     onBeforeClipboardPasteStart
@@ -285,7 +286,7 @@ export const useGridClipboardImport = (apiRef, props) => {
     if (!text) {
       return;
     }
-    const pastedData = splitClipboardPastedText(text);
+    const pastedData = splitClipboardPastedText(text, clipboardCopyCellDelimiter);
     if (!pastedData) {
       return;
     }
@@ -318,7 +319,7 @@ export const useGridClipboardImport = (apiRef, props) => {
       paginationMode
     });
     cellUpdater.applyUpdates();
-  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, splitClipboardPastedText, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, splitClipboardPastedText, clipboardCopyCellDelimiter, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -255,6 +255,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
   // Then we apply the sorting / filtering on the leaves based on the properties of `leavesColDef`
   //
   // By default, we apply the sorting / filtering on the groups of the top level grouping criteria based on the properties of `columnsLookup[orderedGroupedByFields[0]]`.
+  if (process.env.NODE_ENV !== "production") commonProperties.renderCell.displayName = "commonProperties.renderCell";
   let sourceProperties;
   if (mainGroupingCriteria && rowGroupingModel.includes(mainGroupingCriteria)) {
     sourceProperties = getGroupingCriteriaProperties(columnsLookup[mainGroupingCriteria], true);

package/esm/index.js

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

package/esm/models/dataGridPremiumProps.d.ts

@@ -78,10 +78,11 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
   /**
    * The function is used to split the pasted text into rows and cells.
    * @param {string} text The text pasted from the clipboard.
+   * @param {string} delimiter The delimiter used to split the text. Default is the tab character and can be set with the `clipboardCopyCellDelimiter` prop.
    * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns.
-   * @default (pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }
+   * @default (pastedText, delimiter = '\t') => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split(delimiter)); }
    */
-  splitClipboardPastedText: (text: string) => string[][] | null;
+  splitClipboardPastedText: (text: string, delimiter: string) => string[][] | null;
   /**
    * If `true`, the pivoting feature is disabled.
    * @default false

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -142,6 +142,7 @@ const getWrappedRenderHeader = ({
       renderHeader: renderHeader
     }));
   };
+  if (process.env.NODE_ENV !== "production") wrappedRenderHeader.displayName = "wrappedRenderHeader";
   return wrappedRenderHeader;
 };
 

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -467,7 +467,7 @@ const useGridCellSelection = (apiRef, props) => {
     const sortedSelectedRowIds = sortedRowIds.filter(id => unsortedSelectedRowIds.includes(`${id}`));
     const copyData = sortedSelectedRowIds.reduce((acc, rowId) => {
       const fieldsMap = cellSelectionModel[rowId];
-      const rowString = Object.keys(fieldsMap).reduce((acc2, field) => {
+      const rowValues = Object.keys(fieldsMap).map(field => {
         let cellData;
         if (fieldsMap[field]) {
           const cellParams = apiRef.current.getCellParams(rowId, field);
@@ -482,8 +482,9 @@ const useGridCellSelection = (apiRef, props) => {
         } else {
           cellData = '';
         }
-        return acc2 === '' ? cellData : [acc2, cellData].join(clipboardCopyCellDelimiter);
+        return cellData;
       }, '');
+      const rowString = rowValues.join(clipboardCopyCellDelimiter);
       return acc === '' ? rowString : [acc, rowString].join('\r\n');
     }, '');
     return copyData;

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

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-export declare const useGridClipboardImport: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart">) => void;
+export declare const useGridClipboardImport: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pagination" | "paginationMode" | "processRowUpdate" | "onProcessRowUpdateError" | "getRowId" | "onClipboardPasteStart" | "onClipboardPasteEnd" | "splitClipboardPastedText" | "disableClipboardPaste" | "onBeforeClipboardPasteStart" | "clipboardCopyCellDelimiter">) => void;

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -264,8 +264,9 @@ const useGridClipboardImport = (apiRef, props) => {
   const getRowId = props.getRowId;
   const enableClipboardPaste = !props.disableClipboardPaste;
   const logger = (0, _internals.useGridLogger)(apiRef, 'useGridClipboardImport');
-  const splitClipboardPastedText = props.splitClipboardPastedText;
   const {
+    clipboardCopyCellDelimiter,
+    splitClipboardPastedText,
     pagination,
     paginationMode,
     onBeforeClipboardPasteStart
@@ -293,7 +294,7 @@ const useGridClipboardImport = (apiRef, props) => {
     if (!text) {
       return;
     }
-    const pastedData = splitClipboardPastedText(text);
+    const pastedData = splitClipboardPastedText(text, clipboardCopyCellDelimiter);
     if (!pastedData) {
       return;
     }
@@ -326,7 +327,7 @@ const useGridClipboardImport = (apiRef, props) => {
       paginationMode
     });
     cellUpdater.applyUpdates();
-  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, splitClipboardPastedText, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, splitClipboardPastedText, clipboardCopyCellDelimiter, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -264,6 +264,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
   // Then we apply the sorting / filtering on the leaves based on the properties of `leavesColDef`
   //
   // By default, we apply the sorting / filtering on the groups of the top level grouping criteria based on the properties of `columnsLookup[orderedGroupedByFields[0]]`.
+  if (process.env.NODE_ENV !== "production") commonProperties.renderCell.displayName = "commonProperties.renderCell";
   let sourceProperties;
   if (mainGroupingCriteria && rowGroupingModel.includes(mainGroupingCriteria)) {
     sourceProperties = getGroupingCriteriaProperties(columnsLookup[mainGroupingCriteria], true);

package/index.js

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

package/models/dataGridPremiumProps.d.ts

@@ -78,10 +78,11 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
   /**
    * The function is used to split the pasted text into rows and cells.
    * @param {string} text The text pasted from the clipboard.
+   * @param {string} delimiter The delimiter used to split the text. Default is the tab character and can be set with the `clipboardCopyCellDelimiter` prop.
    * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns.
-   * @default (pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }
+   * @default (pastedText, delimiter = '\t') => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split(delimiter)); }
    */
-  splitClipboardPastedText: (text: string) => string[][] | null;
+  splitClipboardPastedText: (text: string, delimiter: string) => string[][] | null;
   /**
    * If `true`, the pivoting feature is disabled.
    * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "main": "./index.js",
@@ -42,10 +42,10 @@
     "exceljs": "^4.4.0",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid-pro": "8.3.1",
-    "@mui/x-data-grid": "8.3.1",
-    "@mui/x-internals": "8.3.1",
-    "@mui/x-license": "8.3.1"
+    "@mui/x-license": "8.4.0",
+    "@mui/x-data-grid-pro": "8.4.0",
+    "@mui/x-internals": "8.4.0",
+    "@mui/x-data-grid": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",