From e9af2fa89cf14bd6a8436e8e6c2dfdceb55fd031 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     | 13 ++++++--
 .../tests/clipboard.DataGridPremium.test.tsx  | 30 +++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
index c40c3c97b9ab..edf8788d736f 100644
--- a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
+++ b/packages/grid/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.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter =
@@ -548,8 +551,12 @@ export const useGridCellSelection = (
       if (apiRef.current.unstable_getSelectedCellsAsArray().length <= 1) {
         return value;
       }
-      const cellSelectionModel = apiRef.current.unstable_getCellSelectionModel();
-      const copyData = Object.keys(cellSelectionModel).reduce((acc, rowId) => {
+      const cellSelectionModel = apiRef.current.getCellSelectionModel();
+      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;
@@ -568,7 +575,7 @@ export const useGridCellSelection = (
       }, '');
       return copyData;
     },
-    [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter],
+    [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds],
   );
 
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
diff --git a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
index 97eb968aee15..5ab59e337185 100644
--- a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -104,6 +104,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', () => {