From 045f661ce6682f9077107f2a558266a5bdd4eeee Mon Sep 17 00:00:00 2001
From: Alessandro Cuppari <alessandro.cuppari@broadridge.com>
Date: Thu, 18 Jan 2024 11:04:49 +0000
Subject: [PATCH] fix: column opacity issue when row selection is enabled

---
 .gitignore                                    |  3 +
 .../src/body/MRT_TableBodyCell.tsx            | 32 ++++++++++-
 .../src/body/MRT_TableBodyRow.tsx             | 56 ++++++++++++++++---
 3 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index e1bd1d131..edb9827c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 
 # turbo
 .turbo
+
+#Intellij-based IDEs
+.idea
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
index 2aa55625c..3480bce72 100644
--- a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
+++ b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -7,7 +7,13 @@ import {
   type MouseEvent,
   type RefObject,
 } from 'react';
-import { Box, Skeleton, useMantineTheme } from '@mantine/core';
+import {
+  Box,
+  Skeleton,
+  useMantineTheme,
+  type MantineColor,
+  type Sx,
+} from '@mantine/core';
 import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
@@ -34,6 +40,24 @@ interface Props<TData extends Record<string, any> = {}> {
   virtualCell?: MRT_VirtualItem;
 }
 
+const getPinnedStyles = (backgroundColor: MantineColor): Sx => ({
+  '&[data-pinned="true"]': {
+    zIndex: 1,
+    position: 'sticky',
+    backgroundColor,
+    opacity: 0.98,
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'transparent',
+    },
+  }
+});
+
 export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
   cell,
   isStriped,
@@ -203,6 +227,9 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
         }
       }}
       {...tableCellProps}
+      data-pinned={
+        column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      }
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
@@ -238,6 +265,9 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
           theme,
           tableCellProps,
         }),
+        ...getPinnedStyles(
+          theme.colorScheme === 'light' ? theme.white : theme.black,
+        ),
         ...draggingBorders,
       })}
     >
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
index 344087b38..bdc0bc5b7 100644
--- a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
+++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
@@ -89,16 +89,54 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
           top: virtualRow ? 0 : undefined,
           transition: virtualRow ? 'none' : 'all 100ms ease-in-out',
           width: '100%',
-          '&:hover td': {
-            backgroundColor:
-              enableHover !== false
-                ? row.getIsSelected()
-                  ? theme.fn.rgba(getPrimaryColor(theme), 0.2)
-                  : theme.colorScheme === 'dark'
+          ...(row.getIsSelected() && {
+            backgroundColor: theme.fn.rgba(getPrimaryColor(theme), 0.2),
+            td: {
+              '* > .mantine-Checkbox-root': {
+                zIndex: 0,
+                position: 'relative'
+              },
+              '&[data-pinned="true"]': {
+                backgroundColor:
+                  theme.colorScheme === 'light' ? theme.white : theme.black,
+                '&:before': {
+                  backgroundColor: theme.fn.rgba(getPrimaryColor(theme), 0.2),
+                },
+              },
+            },
+          }),
+          ...(enableHover && {
+            '&:hover td': {
+              backgroundColor:
+                theme.colorScheme === 'dark'
                   ? `${theme.fn.lighten(theme.colors.dark[7], 0.12)}`
-                  : `${theme.fn.darken(theme.white, 0.05)}`
-                : undefined,
-          },
+                  : `${theme.fn.darken(theme.white, 0.05)}`,
+              '&[data-pinned="true"]': {
+                backgroundColor:
+                  theme.colorScheme === 'light'
+                    ? theme.white
+                    : theme.colors.dark[7],
+                '&:before': {
+                  backgroundColor:
+                    theme.colorScheme === 'dark'
+                      ? `${theme.fn.lighten(theme.colors.dark[7], 0.12)}`
+                      : `${theme.fn.darken(theme.white, 0.05)}`,
+                },
+              },
+            },
+          }),
+          ...(row.getIsSelected() && {
+            '&:hover td': {
+              backgroundColor: theme.fn.rgba(getPrimaryColor(theme), 0.2),
+              '&[data-pinned="true"]': {
+                backgroundColor:
+                  theme.colorScheme === 'light' ? theme.white : theme.black,
+                '&:before': {
+                  backgroundColor: theme.fn.rgba(getPrimaryColor(theme), 0.2),
+                },
+              },
+            },
+          }),
           ...(tableRowProps?.sx instanceof Function
             ? tableRowProps.sx(theme)
             : (tableRowProps?.sx as any)),