From dd3826810479d00252d0cf8e13d7b65e15890810 Mon Sep 17 00:00:00 2001
From: Bilal Shafi <bilalshafidev@gmail.com>
Date: Thu, 29 Feb 2024 02:05:36 +0500
Subject: [PATCH] [DataGridPremium] Make clipboard copy respect the sorting
 during cell selection (#12235)

---
 .../cellSelection/useGridCellSelection.ts     | 11 +++++--
 .../tests/clipboard.DataGridPremium.test.tsx  | 30 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
index 5877bfe51094..946756162101 100644
--- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -23,6 +23,8 @@ import {
   gridFocusCellSelector,
   GridCellParams,
   GRID_REORDER_COL_DEF,
+  useGridSelector,
+  gridSortedRowIdsSelector,
 } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
 import { GridCellSelectionApi } from './gridCellSelectionInterfaces';
@@ -61,6 +63,7 @@ export const useGridCellSelection = (
   const lastMouseDownCell = React.useRef<GridCellCoordinates | null>();
   const mousePosition = React.useRef<{ x: number; y: number } | null>(null);
   const autoScrollRAF = React.useRef<number | null>();
+  const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
 
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter =
@@ -547,7 +550,11 @@ export const useGridCellSelection = (
         return value;
       }
       const cellSelectionModel = apiRef.current.getCellSelectionModel();
-      const copyData = Object.keys(cellSelectionModel).reduce((acc, rowId) => {
+      const unsortedSelectedRowIds = Object.keys(cellSelectionModel);
+      const sortedSelectedRowIds = sortedRowIds.filter((id) =>
+        unsortedSelectedRowIds.includes(`${id}`),
+      );
+      const copyData = sortedSelectedRowIds.reduce<string>((acc, rowId) => {
         const fieldsMap = cellSelectionModel[rowId];
         const rowString = Object.keys(fieldsMap).reduce((acc2, field) => {
           let cellData: string;
@@ -566,7 +573,7 @@ export const useGridCellSelection = (
       }, '');
       return copyData;
     },
-    [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter],
+    [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds],
   );
 
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
index a1aa7d15b88a..c98bc58370e2 100644
--- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -110,6 +110,36 @@ describe('<DataGridPremium /> - Clipboard', () => {
       fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
       expect(writeText.firstCall.args[0]).to.equal([['0', 'USDGBP', '1'].join('\t')].join('\r\n'));
     });
+
+    it(`should copy cells range selected based on their sorted order`, () => {
+      const columns = [{ field: 'brand' }];
+      const rows = [
+        { id: 0, brand: 'Nike' },
+        { id: 1, brand: 'Adidas' },
+        { id: 2, brand: 'Puma' },
+      ];
+      render(
+        <DataGridPremium
+          columns={columns}
+          rows={rows}
+          cellSelection
+          sortModel={[{ field: 'brand', sort: 'asc' }]}
+        />,
+      );
+
+      const cell = getCell(0, 0);
+      cell.focus();
+      userEvent.mousePress(cell);
+
+      fireEvent.keyDown(cell, { key: 'Ctrl' });
+      fireEvent.click(getCell(1, 0), { ctrlKey: true });
+
+      fireEvent.keyDown(cell, { key: 'Ctrl' });
+      fireEvent.click(getCell(2, 0), { ctrlKey: true });
+
+      fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
+      expect(writeText.lastCall.firstArg).to.equal(['Adidas', 'Nike', 'Puma'].join('\r\n'));
+    });
   });
 
   describe('paste', () => {