fix(ui): regression after MUI 7 upgrade (#5469)

.changeset/seven-eggs-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-components': patch
+---
+
+fix(ui): regression after mui 7 upgrade

packages/ui-components/package.json

@@ -8,7 +8,7 @@
   "main": "./build/index.js",
   "types": "build/index.d.ts",
   "scripts": {
-    "test": "cross-env TZ=UTC vitest run -u",
+    "test": "cross-env TZ=UTC vitest run",
     "clean": "rimraf ./build",
     "type-check": "tsc --noEmit -p tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",

packages/ui-components/src/components/Engines/Engines.tsx

@@ -20,7 +20,7 @@ type EngineItemProps = { title: string; element: React.ReactElement; engineText?
  * @category Component
  */
 const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
-  <Grid item={true} xs={6}>
+  <Grid size={{ xs: 6 }}>
     <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
       <EngineListItem>
         <Avatar sx={{ backgroundColor: 'transparent', marginLeft: 0, padding: 0 }}>

packages/ui-components/src/components/Package/Package.tsx

@@ -177,22 +177,15 @@ const Package: React.FC<PackageInterface> = ({
 
   const renderPrimaryComponent = (): React.ReactNode => {
     return (
-      <Grid container={true} item={true} xs={12}>
-        <Grid item={true} xs={11}>
+      <Grid container={true} size={{ xs: 12 }}>
+        <Grid size={{ xs: 11 }}>
           <WrapperLink to={`${Route.DETAIL}${packageName}`}>
             <PackageTitle className="package-title" data-testid="package-title">
               {packageName}
             </PackageTitle>
           </WrapperLink>
         </Grid>
-        <GridRightAligned
-          alignItems="center"
-          container={true}
-          item={true}
-          justify="flex-end"
-          spacing={3}
-          xs={true}
-        >
+        <GridRightAligned alignItems="center" container={true} justify="flex-end" size={{ xs: 1 }}>
           {renderHomePageLink()}
           {renderBugsLink()}
           {showDownload && renderDownloadLink()}
@@ -205,7 +198,6 @@ const Package: React.FC<PackageInterface> = ({
 
   const renderPackageListItemText = (): React.ReactNode => (
     <PackageListItemText
-      className="package-link"
       primary={renderPrimaryComponent()}
       secondary={renderSecondaryComponent()}
     />

packages/ui-components/src/layouts/Version/Version.tsx

@@ -6,10 +6,10 @@ import { Detail, SideBar } from '../../sections';
 const VersionLayout: React.FC = () => {
   return (
     <Grid className={'container content'} container={true} data-testid="version-layout" spacing={0}>
-      <Grid item={true} md={8} xs={12}>
+      <Grid size={{ md: 8, xs: 12 }}>
         <Detail />
       </Grid>
-      <Grid item={true} md={4} xs={12}>
+      <Grid size={{ md: 4, xs: 12 }}>
         <SideBar />
       </Grid>
     </Grid>

packages/ui-components/src/sections/Header/LanguageSwitch.tsx

@@ -78,7 +78,7 @@ const LanguageSwitch = () => {
         {languages.map((language, index) => {
           const { icon, translation } = getCurrentLngDetails(language);
           return (
-            <Grid item={true} key={index} sm={2} xs={6}>
+            <Grid key={index} size={{ sm: 2, xs: 6 }}>
               {language === currentLanguage ? (
                 <CardSelected sx={{ maxWidth: 80 }}>
                   <LanguageContent icon={icon} translation={translation} />