From 097aec1771aa6a2119a8a23a3db5ffc5973970e2 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Thu, 5 Dec 2024 17:51:12 +0100
Subject: [PATCH] [DataGridPremium] Fix group column ignoring `valueOptions`
 for `singleSelect` column type (#15739)

---
 .../rowGrouping/createGroupingColDef.tsx      | 10 +++++++
 .../rowGrouping.DataGridPremium.test.tsx      | 26 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
index 194c62efa5215..a56f6a8bbc02f 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
@@ -7,6 +7,7 @@ import {
   GridGroupingColDefOverride,
   GridGroupNode,
   GridTreeNodeWithRender,
+  GridValueFormatter,
 } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup, isSingleSelectColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
@@ -94,10 +95,19 @@ const getLeafProperties = (leafColDef: GridColDef): Partial<GridColDef> => ({
   },
 });
 
+const groupedByColValueFormatter: (
+  groupedByColDef: GridColDef,
+) => GridValueFormatter<any, any, any, never> =
+  (groupedByColDef: GridColDef) => (value, row, _, apiRef) =>
+    groupedByColDef.valueFormatter!(value, row, groupedByColDef, apiRef);
+
 const getGroupingCriteriaProperties = (groupedByColDef: GridColDef, applyHeaderName: boolean) => {
   const properties: Partial<GridColDef> = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter
+      ? groupedByColValueFormatter(groupedByColDef)
+      : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria
diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
index f956007843f70..f30b9e4374c7a 100644
--- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -169,6 +169,32 @@ describe('<DataGridPremium /> - Row grouping', () => {
       expect(getColumnValues(0)).to.deep.equal(['Cat A (3)', '', '', '', 'Cat B (2)', '', '']);
     });
 
+    it('should display the value from the `valueOptions` for `singleSelect` column type', () => {
+      render(
+        <Test
+          columns={[
+            {
+              field: 'category',
+              type: 'singleSelect',
+              valueOptions: [
+                { value: 'category1', label: 'categoryLabel1' },
+                { value: 'category2', label: 'categoryLabel2' },
+              ],
+            },
+          ]}
+          rows={[
+            { id: 1, category: 'category1' },
+            { id: 2, category: 'category1' },
+            { id: 3, category: 'category1' },
+            { id: 4, category: 'category2' },
+            { id: 5, category: 'category2' },
+          ]}
+          initialState={{ rowGrouping: { model: ['category'] } }}
+        />,
+      );
+      expect(getColumnValues(0)).to.deep.equal(['categoryLabel1 (3)', 'categoryLabel2 (2)']);
+    });
+
     it('should display icon on auto-generated row', () => {
       render(
         <Test