From 6aaf77ff097f4abc5930beba306eb200e887102e Mon Sep 17 00:00:00 2001
From: Ashley Lamont <ashley@ashl.dev>
Date: Sat, 21 Dec 2024 08:17:04 +1100
Subject: [PATCH] Fix bug where setting the style prop on a data grid cell
 causes column resizing to fail, and add a test for this.

---
 .../DataGridCell/DataGridCell.test.tsx        | 23 +++++++++++++++++++
 .../DataGridCell/useDataGridCell.ts           |  5 ++++
 2 files changed, 28 insertions(+)

diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx
index c23ab6932d69a7..a73124ff444241 100644
--- a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx
@@ -5,6 +5,7 @@ import { isConformant } from '../../testing/isConformant';
 import { DataGridCellProps } from './DataGridCell.types';
 import { DataGridContextProvider } from '../../contexts/dataGridContext';
 import { mockDataGridContext } from '../../testing/mockDataGridContext';
+import {defaultColumnSizingState} from "../../hooks";
 
 describe('DataGridCell', () => {
   isConformant<DataGridCellProps>({
@@ -65,4 +66,26 @@ describe('DataGridCell', () => {
     expect(row.tabIndex).toBe(-1);
     expect(row.hasAttribute('tabindex')).toBe(false);
   });
+
+  it('should merge column sizing styles when a style prop is provided', () => {
+    const ctx = mockDataGridContext({
+      resizableColumns: true,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      columnSizing_unstable: {
+        ...defaultColumnSizingState,
+        getTableCellProps: ()=> ({
+          style: { width: 100, minWidth: 100 },
+        })
+      }
+    });
+    const {getByRole} = render(
+      <DataGridContextProvider value={ctx}>
+        <DataGridCell style={{color: 'red', minWidth: 'unset'}}>Default DataGridCell</DataGridCell>
+      </DataGridContextProvider>,
+    );
+    const cell = getByRole('gridcell');
+    expect(cell).toHaveProperty('style.color', 'red');
+    expect(cell).toHaveProperty('style.width', '100px');
+    expect(cell).toHaveProperty('style.minWidth', 'unset');
+  });
 });
diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts b/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts
index 4cd7facddb251c..74751b80a145eb 100644
--- a/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts
@@ -25,6 +25,10 @@ export const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Re
     return ctx.columnSizing_unstable.getTableCellProps;
   });
   const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });
+  const style = {
+    ...(resizableColumns ? getTableCellProps(columnId).style : {}),
+    ...(props.style || {}),
+  };
   return useTableCell_unstable(
     {
       as: 'div',
@@ -33,6 +37,7 @@ export const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Re
       tabIndex: tabbable ? 0 : undefined,
       ...(resizableColumns ? getTableCellProps(columnId) : {}),
       ...props,
+      style,
     },
     ref,
   );