Feature/update dependency mui to v5.x (#332)

* Update dependency "mui" to v5.x

Update to v5.13.3

Fixes issue of "SxProps" not being exported by "@mui/material"

* Update dependency "mui" to v5.x - Fix grid item size

Update to v5.13.3

Fixes issue of "SxProps" not being exported by "@mui/material"

* Update dependency "mui" to v5.x - Replace "ListItem" with "ListItemButton"

* Update dependency "mui" to v5.x - Fix tsc issue

* Update dependency "mui" to v5.x - Prevent reader white screen

Due to "initialChapter" being a function returning an object, it causes a re-render everytime due to it (the object) being used as a dependency.
This caused a white screen when skipping to the previous or next chapter

src/components/MangaCard.tsx

@@ -11,7 +11,7 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Avatar, CardContent, Grid, Box, styled } from '@mui/material';
+import { Avatar, Box, CardContent, Grid, styled } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
 import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
@@ -92,9 +92,10 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
 
     if (gridLayout !== GridLayout.List) {
-        const cols = Math.ceil(dimensions / ItemWidth);
+        const columns = Math.ceil(dimensions / ItemWidth);
+        const columnsPerItem = 12 / columns;
         return (
-            <Grid item columns={cols} xs={1}>
+            <Grid item xs={columnsPerItem}>
                 <Link to={mangaLinkTo} style={gridLayout === GridLayout.Comfortable ? { textDecoration: 'none' } : {}}>
                     <Box
                         sx={{

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { ListItem, ListItemIcon, Tooltip, styled } from '@mui/material';
+import { ListItemIcon, Tooltip, styled, ListItemButton } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
@@ -46,13 +46,13 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
         <SideNavBarContainer>
             {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
                 <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
-                    <ListItem disableRipple button key={title}>
+                    <ListItemButton disableRipple key={title}>
                         <ListItemIcon sx={{ minWidth: '0' }}>
                             <Tooltip placement="right" title={t(title)}>
                                 {iconFor(path, IconComponent, SelectedIconComponent)}
                             </Tooltip>
                         </ListItemIcon>
-                    </ListItem>
+                    </ListItemButton>
                 </Link>
             ))}
         </SideNavBarContainer>

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { ListItem, styled, Box } from '@mui/material';
+import { styled, Box, ListItemButton } from '@mui/material';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
@@ -55,7 +55,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
         <BottomNavContainer>
             {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
                 <Link to={path} key={path}>
-                    <ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
+                    <ListItemButton disableRipple sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
                         <Box display="flex" flexDirection="column" alignItems="center">
                             {iconFor(path, IconComponent, SelectedIconComponent)}
                             <Box
@@ -73,7 +73,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
                                 {t(title)}
                             </Box>
                         </Box>
-                    </ListItem>
+                    </ListItemButton>
                 </Link>
             ))}
         </BottomNavContainer>

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useState } from 'react';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -18,6 +17,7 @@ import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { EditTextPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '@mui/material';
 
 export default function EditTextPreference(props: EditTextPreferenceProps) {
     const { t } = useTranslation();
@@ -42,9 +42,9 @@ export default function EditTextPreference(props: EditTextPreferenceProps) {
 
     return (
         <>
-            <ListItem button onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={summary} />
-            </ListItem>
+            </ListItemButton>
             <Dialog open={dialogOpen} onClose={handleDialogCancel}>
                 <DialogTitle>{dialogTitle}</DialogTitle>
                 <DialogContent>

src/components/sourceConfiguration/ListPreference.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -19,6 +18,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import { ListPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '@mui/material';
 
 interface IListDialogProps {
     value: string;
@@ -123,9 +123,9 @@ export default function ListPreference(props: ListPreferenceProps) {
 
     return (
         <>
-            <ListItem button onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={getSummary()} />
-            </ListItem>
+            </ListItemButton>
             <ListDialog
                 title={title}
                 open={dialogOpen}

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -20,6 +19,7 @@ import Button from '@mui/material/Button';
 import cloneObject from 'util/cloneObject';
 import { MultiSelectListPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '@mui/material';
 
 interface IListDialogProps {
     selectedValues: string[];
@@ -135,9 +135,9 @@ export default function MultiSelectListPreference(props: MultiSelectListPreferen
 
     return (
         <>
-            <ListItem button onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={getSummary()} />
-            </ListItem>
+            </ListItemButton>
             <ListDialog
                 title={title}
                 open={dialogOpen}

src/components/util/ListItemLink.tsx

@@ -7,14 +7,18 @@
  */
 
 import React from 'react';
-import ListItem, { ListItemProps } from '@mui/material/ListItem';
 import { Link } from 'react-router-dom';
+import { ListItemButton, ListItemButtonProps } from '@mui/material';
 
-export default function ListItemLink(props: ListItemProps<Link, { directLink?: boolean }>) {
+export default function ListItemLink(props: ListItemButtonProps<typeof Link, { directLink?: boolean }>) {
     const { directLink, to } = props;
     if (directLink) {
-        return <ListItem button component="a" href={to} {...props} />;
+        if (typeof to !== 'string') {
+            throw new Error('ListItemLink: "to" has to be a string in case it is a directLink');
+        }
+
+        return <ListItemButton component="a" href={to} {...props} />;
     }
 
-    return <ListItem button component={Link} {...props} />;
+    return <ListItemButton component={Link} {...props} />;
 }