fix: rbac property matrix

packages/core/admin/admin/src/pages/Settings/pages/Roles/components/CollapsePropertyMatrix.tsx

@@ -225,7 +225,7 @@ const ActionRow = ({
                           },
                         });
                       }}
-                      value={checkboxValue}
+                      checked={checkboxValue}
                     />
                   </Flex>
                 );
@@ -322,15 +322,15 @@ const Wrapper = styled<FlexComponent>(Flex)<{ $isCollapsable?: boolean; $isActiv
   height: ${rowHeight};
   flex: 1;
 
-  ${({ $isCollapsable, theme }) =>
+  &:hover {
+    ${({ $isCollapsable, theme }) => $isCollapsable && activeStyle(theme)}
+  }
+
+  ${({ $isCollapsable }) =>
     $isCollapsable &&
     `
       ${CarretIcon} {
-        display: block;
-        color: ${theme.colors.neutral100};
-      }
-      &:hover {
-        ${activeStyle(theme)}
+        display: flex;
       }
   `}
   ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
@@ -338,7 +338,15 @@ const Wrapper = styled<FlexComponent>(Flex)<{ $isCollapsable?: boolean; $isActiv
 
 const CarretIcon = styled(CaretDown)<{ $isActive: boolean }>`
   display: none;
-  width: 1rem;
+
+  svg {
+    width: 1.4rem;
+  }
+
+  path {
+    fill: ${({ theme }) => theme.colors.neutral200};
+  }
+
   transform: rotate(${({ $isActive }) => ($isActive ? '180' : '0')}deg);
   margin-left: ${({ theme }) => theme.spaces[2]};
 `;
@@ -485,7 +493,7 @@ const SubActionRow = ({
                                   },
                                 });
                               }}
-                              value={checkboxValue}
+                              checked={checkboxValue}
                             />
                           </Flex>
                         );
@@ -566,15 +574,15 @@ const RowStyle = styled<FlexComponent>(Flex)<{
   padding-left: ${({ theme }) => theme.spaces[4]};
   width: ${({ $level }) => 145 - $level * 36}px;
 
-  ${({ $isCollapsable, theme }) =>
+  &:hover {
+    ${({ $isCollapsable, theme }) => $isCollapsable && activeStyle(theme)}
+  }
+
+  ${({ $isCollapsable }) =>
     $isCollapsable &&
     `
       ${CarretIcon} {
-        display: block;
-        color: ${theme.colors.neutral100};
-      }
-      &:hover {
-        ${activeStyle(theme)}
+        display: flex;
       }
   `}
   ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
@@ -658,26 +666,15 @@ const Header = ({ headers = [], label }: HeaderProps) => {
   );
 };
 
-/* -------------------------------------------------------------------------------------------------
- * activeStyle (util)
- * -----------------------------------------------------------------------------------------------*/
-
-/**
- * @internal
- */
 const activeStyle = (theme: DefaultTheme) => css`
-  ${RowLabel} {
-    color: ${theme.colors.primary600};
-    font-weight: ${theme.fontWeights.bold};
-  }
-  ${CarretIcon} {
-    display: block;
+  color: ${theme.colors.primary600};
+  font-weight: ${theme.fontWeights.bold};
 
+  ${CarretIcon} {
     path {
       fill: ${theme.colors.primary600};
     }
   }
 `;
 
-export { activeStyle as _internalActiveStyle };
 export { CollapsePropertyMatrix };

packages/core/admin/admin/src/pages/Settings/pages/Roles/components/ContentTypeCollapses.tsx

@@ -18,7 +18,7 @@ import { createArrayOfValues } from '../utils/createArrayOfValues';
 import { ConditionForm } from '../utils/forms';
 import { getCheckboxState } from '../utils/getCheckboxState';
 
-import { CollapsePropertyMatrix, _internalActiveStyle } from './CollapsePropertyMatrix';
+import { CollapsePropertyMatrix } from './CollapsePropertyMatrix';
 import { ConditionsButton } from './ConditionsButton';
 import { ConditionsModal } from './ConditionsModal';
 import { HiddenAction } from './HiddenAction';
@@ -358,16 +358,15 @@ const activeRowStyle = (theme: DefaultTheme, isActive?: boolean): string => `
     background-color: ${theme.colors.primary100};
     color: ${theme.colors.primary600};
     border-radius: ${isActive ? '2px 2px 0 0' : '2px'};
+    font-weight: ${theme.fontWeights.bold};
   }
+
   ${Chevron} {
     display: flex;
   }
   ${ConditionsButton} {
     display: block;
   }
-  &:hover {
-    ${_internalActiveStyle(theme)}
-  }
 
   &:focus-within {
     ${() => activeRowStyle(theme, isActive)}
@@ -401,10 +400,12 @@ const Cell = styled<FlexComponent>(Flex)`
 
 const Chevron = styled<BoxComponent>(Box)`
   display: none;
+
   svg {
-    width: 11px;
+    width: 1.4rem;
   }
-  * {
+
+  path {
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;

packages/core/admin/admin/src/pages/Settings/pages/Roles/components/ContentTypes.tsx

@@ -1,5 +1,4 @@
-import { Box, BoxComponent } from '@strapi/design-system';
-import { styled } from 'styled-components';
+import { Box } from '@strapi/design-system';
 
 import { ContentPermission } from '../../../../../../../shared/contracts/permissions';
 
@@ -19,7 +18,7 @@ const ContentTypes = ({
   const sortedSubjects = [...subjects].sort((a, b) => a.label.localeCompare(b.label));
 
   return (
-    <StyledBox background="neutral0">
+    <Box background="neutral0">
       <GlobalActions actions={actions} kind={kind} isFormDisabled={isFormDisabled} />
       <ContentTypeCollapses
         actions={actions}
@@ -27,12 +26,8 @@ const ContentTypes = ({
         pathToData={kind}
         subjects={sortedSubjects}
       />
-    </StyledBox>
+    </Box>
   );
 };
 
-const StyledBox = styled<BoxComponent>(Box)`
-  overflow-x: auto;
-`;
-
 export { ContentTypes };

packages/core/admin/admin/src/pages/Settings/pages/Roles/components/RowLabelWithCheckbox.tsx

@@ -36,6 +36,26 @@ const RowLabelWithCheckbox = ({
 }: RowLabelWithCheckboxProps) => {
   const { formatMessage } = useIntl();
 
+  const collapseLabelProps = {
+    title: label,
+    alignItems: 'center',
+    $isCollapsable: isCollapsable,
+  };
+
+  if (isCollapsable) {
+    Object.assign(collapseLabelProps, {
+      onClick,
+      'aria-expanded': isActive,
+      onKeyDown({ key }: React.KeyboardEvent<HTMLDivElement>) {
+        if (key === 'Enter' || key === ' ') {
+          onClick();
+        }
+      },
+      tabIndex: 0,
+      role: 'button',
+    });
+  }
+
   return (
     <Flex alignItems="center" paddingLeft={6} width={firstRowWidth} shrink={0}>
       <Box paddingRight={2}>
@@ -61,26 +81,8 @@ const RowLabelWithCheckbox = ({
           checked={someChecked ? 'indeterminate' : value}
         />
       </Box>
-      <CollapseLabel
-        title={label}
-        alignItems="center"
-        $isCollapsable={isCollapsable}
-        {...(isCollapsable && {
-          onClick,
-          'aria-expanded': isActive,
-          onKeyDown: ({ key }: React.KeyboardEvent<HTMLDivElement>) =>
-            (key === 'Enter' || key === ' ') && onClick(),
-          tabIndex: 0,
-          role: 'button',
-        })}
-      >
-        <Typography
-          fontWeight={isActive ? 'bold' : undefined}
-          textColor={isActive ? 'primary600' : 'neutral800'}
-          ellipsis
-        >
-          {capitalise(label)}
-        </Typography>
+      <CollapseLabel {...collapseLabelProps}>
+        <Typography ellipsis>{label}</Typography>
         {children}
       </CollapseLabel>
     </Flex>