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 mui/material-ui#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 mui/material-ui#21514
Note: in v5 primary.main was changed from indigo to blue in mui/material-ui#26555) but let's
go with the new primary colors
Note2: fade renamed to alpha

src/components/ReportViewer/report-item.js

@@ -12,31 +12,41 @@ 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: {
         color: theme.palette.text.secondary,
         '&: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,
         borderTopRightRadius: theme.spacing(2),
         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,