From 1417eda2cd2eaa9c0c88d8afde4c465a76c22146 Mon Sep 17 00:00:00 2001
From: HARPER Jon <jon.harper87@gmail.com>
Date: Tue, 23 May 2023 11:33:50 +0200
Subject: [PATCH] Fix ReportViewer report-item treeitem css after mui v5
 migration

After a quick look, we didn' customize TreeViewFinder which also uses TreeView/TreeItem
so it shouldn't need the same fixing as ReportViewer.

in https://github.com/mui/material-ui/pull/21514 pseudo classes were moved
from root to content, so we no longer need nested selectors and rules need to go on content directly
use Mui-focused instead of :focus

also restore muiv4 treeitem label color rule to get a different color right after a click on an
item. It was also removed in treeitem in https://github.com/mui/material-ui/pull/21514
Note: in v5 primary.main was changed from indigo to blue in https://github.com/mui/material-ui/pull/26555) but let's
go with the new primary colors
Note2: fade renamed to alpha
---
 src/components/ReportViewer/report-item.js | 28 +++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/ReportViewer/report-item.js b/src/components/ReportViewer/report-item.js
index 2c4a66cd5..244580220 100644
--- a/src/components/ReportViewer/report-item.js
+++ b/src/components/ReportViewer/report-item.js
@@ -12,6 +12,7 @@ import TreeItem from '@mui/lab/TreeItem';
 import Typography from '@mui/material/Typography';
 import Label from '@mui/icons-material/Label';
 import ReportTreeViewContext from './report-tree-view-context';
+import { alpha } from '@mui/system';
 
 const useReportItemStyles = makeStyles((theme) => ({
     root: {
@@ -19,14 +20,6 @@ const useReportItemStyles = makeStyles((theme) => ({
         '&:hover > $content': {
             backgroundColor: theme.palette.action.hover,
         },
-        '&:focus > $content, &$selected > $content': {
-            backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
-            color: 'var(--tree-view-color)',
-        },
-        '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label':
-            {
-                backgroundColor: 'transparent',
-            },
     },
     content: {
         color: theme.palette.text.secondary,
@@ -34,9 +27,26 @@ const useReportItemStyles = makeStyles((theme) => ({
         borderBottomRightRadius: theme.spacing(2),
         paddingRight: theme.spacing(1),
         fontWeight: theme.typography.fontWeightMedium,
-        '$expanded > &': {
+        '&$expanded': {
             fontWeight: theme.typography.fontWeightRegular,
         },
+        /* &&.Mui-focused to increase specifity because mui5 has a rule for &.Mui-selected.Mui-focused */
+        /* &&$selected to increase specifity because we have a rule for &:hover > $content on root */
+        '&&.Mui-focused, &&$selected': {
+            backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
+            color: 'var(--tree-view-color)',
+        },
+        // same as mui v4 behavior on label text only right after clicking in contrast to after moving away with arrow keys.
+        '&$selected $label:hover, &$selected.Mui-focused $label': {
+            backgroundColor: alpha(
+                theme.palette.primary.main,
+                theme.palette.action.selectedOpacity +
+                    theme.palette.action.hoverOpacity
+            ),
+        },
+        '&.Mui-focused $label, &:hover $label, &$selected $label': {
+            backgroundColor: 'transparent',
+        },
     },
     group: {
         marginLeft: 10,