Update dependency mui to v9.x

2026-04-25 17:14:08 +02:00
parent 8155bd6906
commit f95b0c8bcc
30 changed files with 191 additions and 272 deletions
--- a/src/features/backup/screens/Backup.tsx
+++ b/src/features/backup/screens/Backup.tsx
@@ -306,7 +306,9 @@ export function Backup() {
                                    <span>{t`Exclude: ${excludedCategoriesText}`}</span>
                                </>
                            }
-                            secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
+                            slotProps={{
+                                secondary: { sx: { display: 'flex', flexDirection: 'column' } },
+                            }}
                        />
                    </ListItemButton>
                    <TimeSetting
--- a/src/features/category/components/CategoriesInclusionSetting.tsx
+++ b/src/features/category/components/CategoriesInclusionSetting.tsx
@@ -162,7 +162,9 @@ export const CategoriesInclusionSetting = ({
                            <span>{t`Exclude: ${excludedCategoriesText}`}</span>
                        </>
                    }
-                    secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
+                    slotProps={{
+                        secondary: { sx: { display: 'flex', flexDirection: 'column' } },
+                    }}
                />
            </ListItemButton>
            <Dialog open={isDialogOpen} onClose={closeDialog}>
--- a/src/features/chapter/components/ChapterList.tsx
+++ b/src/features/chapter/components/ChapterList.tsx
@@ -189,9 +189,11 @@ export const ChapterList = ({
            <Stack direction="column" sx={{ position: 'relative', flexBasis: '60%' }}>
                <ChapterListHeader
                    ref={setChapterListHeaderRef}
-                    direction="row"
-                    alignItems="center"
-                    justifyContent="space-between"
+                    sx={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }}
                    scrollbarWidth={scrollbarWidth}
                >
                    <Stack>
--- a/src/features/chapter/components/cards/ChapterCardMetadata.tsx
+++ b/src/features/chapter/components/cards/ChapterCardMetadata.tsx
@@ -57,10 +57,9 @@ export const ChapterCardMetadata = ({
            <CustomTooltip title={secondaryText}>
                <TypographyMaxLines
                    variant="caption"
-                    display="block"
                    lines={1}
                    {...slotProps?.secondaryText}
-                    sx={{ maxWidth: 'fit-content', ...slotProps?.secondaryText?.sx }}
+                    sx={{ maxWidth: 'fit-content', display: 'block', ...slotProps?.secondaryText?.sx }}
                >
                    {secondaryText}
                </TypographyMaxLines>
@@ -70,10 +69,9 @@ export const ChapterCardMetadata = ({
            <CustomTooltip title={ternaryText}>
                <TypographyMaxLines
                    variant="caption"
-                    display="block"
                    lines={1}
                    {...slotProps?.ternaryText}
-                    sx={{ maxWidth: 'fit-content', ...slotProps?.ternaryText?.sx }}
+                    sx={{ maxWidth: 'fit-content', display: 'block', ...slotProps?.ternaryText?.sx }}
                >
                    {ternaryText}
                </TypographyMaxLines>
--- a/src/features/manga/components/MangaToolbarMenu.tsx
+++ b/src/features/manga/components/MangaToolbarMenu.tsx
@@ -128,8 +128,10 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                        anchorEl={anchorEl}
                        open={open}
                        onClose={handleClose}
-                        MenuListProps={{
-                            'aria-labelledby': 'chaptersMenuButton',
+                        slotProps={{
+                            list: {
+                                'aria-labelledby': 'chaptersMenuButton',
+                            }
                        }}
                    >
                        <MenuItem
--- a/src/features/migration/components/migration-entry/MigrationDestinationEntry.tsx
+++ b/src/features/migration/components/migration-entry/MigrationDestinationEntry.tsx
@@ -33,7 +33,6 @@ import Button from '@mui/material/Button';
 import { plural } from '@lingui/core/macro';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { alpha } from '@mui/material/styles';
 import ReplayIcon from '@mui/icons-material/Replay';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
@@ -266,7 +265,7 @@ export const MigrationDestinationEntry = ({
                        p: 0,
                        backgroundColor: 'primary.dark',
                        '&:hover': {
-                            backgroundColor: (theme) => alpha(theme.palette.primary.dark, 0.8),
+                            backgroundColor: (theme) => theme.alpha(theme.palette.primary.dark, 0.8),
                        },
                    }}
                >
--- a/src/features/navigation-bar/components/DesktopSideBar.tsx
+++ b/src/features/navigation-bar/components/DesktopSideBar.tsx
@@ -54,8 +54,10 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
                    zIndex: (theme) => theme.zIndex.drawer - 1,
                },
            }}
-            PaperProps={{
-                ref,
+            slotProps={{
+                paper: {
+                    ref,
+                }
            }}
        >
            <Box
--- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
+++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
@@ -14,7 +14,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
-import { alpha } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
 import type { Ref } from 'react';
 import { memo } from 'react';
@@ -62,7 +61,7 @@ const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & {
                    right: `${scrollbar.ySize}px`,
                    p: 2,
                    pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`,
-                    backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
+                    backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.95),
                    pointerEvents: 'all',
                    boxShadow: 2,
                }}
--- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
+++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
@@ -101,11 +101,13 @@ const BaseReaderNavBarDesktop = ({
            variant={isStaticNav ? 'permanent' : 'persistent'}
            open={isVisible || isStaticNav}
            transitionDuration={drawerTransitionDuration}
-            SlideProps={{
-                unmountOnExit: true,
-            }}
-            PaperProps={{
-                ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+            slotProps={{
+                paper: {
+                    ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+                },
+                transition: {
+                    unmountOnExit: true,
+                },
            }}
        >
            <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
--- a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
+++ b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
@@ -11,7 +11,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import Stack from '@mui/material/Stack';
 import AppSettingsAltIcon from '@mui/icons-material/AppSettingsAlt';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
-import { alpha } from '@mui/material/styles';
 import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
@@ -69,7 +68,7 @@ const BaseReaderBottomBarMobile = ({
                        ref={bottomBarRef}
                        sx={{
                            alignItems: 'center',
-                            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
+                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.95),
                            pb: `max(${scrollbar.xSize}px, env(safe-area-inset-bottom))`,
                            boxShadow: 2,
                            pointerEvents: 'all',
--- a/src/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx
+++ b/src/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx
@@ -6,7 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { memo } from 'react';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
@@ -40,16 +40,16 @@ export const ReaderProgressBarSlotDesktop = memo(
                    box: {
                        sx: {
                            cursor: 'pointer',
-                            backgroundColor: darken(theme.palette.background.paper, 0.2),
+                            backgroundColor: theme.darken(theme.palette.background.paper, 0.2),
                            ...theme.applyStyles('dark', {
-                                backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                                backgroundColor: theme.lighten(theme.palette.background.paper, 0.1),
                            }),
                            ...applyStyles(
                                primaryPageLoadState && (secondaryPageLoadState == null || secondaryPageLoadState),
                                {
-                                    backgroundColor: darken(theme.palette.background.paper, 0.35),
+                                    backgroundColor: theme.darken(theme.palette.background.paper, 0.35),
                                    ...theme.applyStyles('dark', {
-                                        backgroundColor: lighten(theme.palette.background.paper, 0.25),
+                                        backgroundColor: theme.lighten(theme.palette.background.paper, 0.25),
                                    }),
                                },
                            ),
@@ -74,7 +74,7 @@ export const ReaderProgressBarSlotDesktop = memo(
                        width: '100%',
                        height: '100%',
                        ...applyStyles(isLeadingPage, {
-                            backgroundColor: alpha(theme.palette.primary.main, 0.5),
+                            backgroundColor: theme.alpha(theme.palette.primary.main, 0.5),
                        }),
                        ...applyStyles(isCurrentPage, {
                            cursor: showDraggingStyle ? 'grabbing' : 'grab',
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
@@ -10,7 +10,6 @@ import IconButton from '@mui/material/IconButton';
 import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
 import Stack from '@mui/material/Stack';
-import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import type { ComponentProps } from 'react';
 import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react';
@@ -95,7 +94,7 @@ const BaseMobileReaderProgressBar = ({
                    display: 'flex',
                    justifyItems: 'center',
                    alignItems: 'stretch',
-                    backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                    backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.85),
                    borderRadius: 100,
                    boxShadow: 2,
                },
@@ -254,7 +253,7 @@ const BaseMobileReaderProgressBar = ({
                        onClick={() => ReaderControls.openChapter('previous')}
                        disabled={!previousChapter}
                        sx={{
-                            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.85),
                            boxShadow: 2,
                        }}
                    >
@@ -326,7 +325,10 @@ const BaseMobileReaderProgressBar = ({
                    <IconButton
                        onClick={() => ReaderControls.openChapter('next')}
                        disabled={!nextChapter}
-                        sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
+                        sx={{
+                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.85),
+                            boxShadow: 2,
+                        }}
                    >
                        {getOptionForDirection(
                            <SkipNextIcon
--- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx
+++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx
@@ -12,7 +12,7 @@ import Button from '@mui/material/Button';
 import { Link } from 'react-router-dom';
 import type { ComponentProps } from 'react';
 import { memo, useMemo } from 'react';
-import { alpha, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { useLingui } from '@lingui/react/macro';
 import type { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { ReaderTransitionPageMode, ReadingMode } from '@/features/reader/Reader.types.ts';
@@ -55,7 +55,7 @@ const ChapterInfo = ({
    const contrastText = theme.palette.getContrastText(
        getValueFromObject(theme.palette, READER_BACKGROUND_TO_COLOR[backgroundColor]),
    );
-    const disabledText = alpha(contrastText, 0.5);
+    const disabledText = theme.alpha(contrastText, 0.5);

    if (!name) {
        return null;
--- a/src/features/source/configuration/components/ListPreference.tsx
+++ b/src/features/source/configuration/components/ListPreference.tsx
@@ -63,9 +63,11 @@ function ListDialog(props: IListDialogProps) {
        <Dialog
            sx={{ '& .MuiDialog-paper': { width: '80%', maxHeight: 435 } }}
            maxWidth="xs"
-            TransitionProps={{ onEntering: handleEntering }}
            open={open}
            onClose={handleCancel}
+            slotProps={{
+                transition: { onEntering: handleEntering }
+            }}
        >
            <DialogTitle>{title}</DialogTitle>
            <DialogContent dividers>
--- a/src/features/tracker/components/TrackerSearch.tsx
+++ b/src/features/tracker/components/TrackerSearch.tsx
@@ -179,31 +179,33 @@ export const TrackerSearch = ({
                            }
                        }}
                        onCancel={() => setTmpSearchString('')}
-                        InputProps={{
-                            startAdornment: tracker.id === Tracker.MYANIMELIST && (
-                                <InputAdornment position="start">
-                                    <PopupState variant="popover" popupId="tracker-search-info">
-                                        {(popupState) => (
-                                            <>
-                                                <IconButton {...bindTrigger(popupState)} color="inherit">
-                                                    <InfoIcon />
-                                                </IconButton>
-                                                <Popover
-                                                    {...bindPopover(popupState)}
-                                                    anchorOrigin={{
-                                                        vertical: 'bottom',
-                                                        horizontal: 'left',
-                                                    }}
-                                                >
-                                                    <Typography sx={{ padding: 1, whiteSpace: 'pre-line' }}>
-                                                        {t`Search for a ID via "id:<ID>" (e.g. "id:13")\nLimit search to your lists via "my:<Title>" (e.g. "my:One Piece")`}
-                                                    </Typography>
-                                                </Popover>
-                                            </>
-                                        )}
-                                    </PopupState>
-                                </InputAdornment>
-                            ),
+                        slotProps={{
+                            input: {
+                                startAdornment: tracker.id === Tracker.MYANIMELIST && (
+                                    <InputAdornment position="start">
+                                        <PopupState variant="popover" popupId="tracker-search-info">
+                                            {(popupState) => (
+                                                <>
+                                                    <IconButton {...bindTrigger(popupState)} color="inherit">
+                                                        <InfoIcon />
+                                                    </IconButton>
+                                                    <Popover
+                                                        {...bindPopover(popupState)}
+                                                        anchorOrigin={{
+                                                            vertical: 'bottom',
+                                                            horizontal: 'left',
+                                                        }}
+                                                    >
+                                                        <Typography sx={{ padding: 1, whiteSpace: 'pre-line' }}>
+                                                            {t`Search for a ID via "id:<ID>" (e.g. "id:13")\nLimit search to your lists via "my:<Title>" (e.g. "my:One Piece")`}
+                                                        </Typography>
+                                                    </Popover>
+                                                </>
+                                            )}
+                                        </PopupState>
+                                    </InputAdornment>
+                                ),
+                            },
                        }}
                    />
                </Stack>
--- a/src/features/tracker/components/cards/TrackerActiveCard.tsx
+++ b/src/features/tracker/components/cards/TrackerActiveCard.tsx
@@ -215,7 +215,7 @@ const TrackerActiveHeader = ({
            </Badge>
            <ListItemButton sx={{ flexGrow: 1 }} onClick={openSearch}>
                <CustomTooltip title={trackRecord.title}>
-                    <TypographyMaxLines flexGrow={1} lines={1}>
+                    <TypographyMaxLines sx={{ flexGrow: 1 }} lines={1}>
                        {trackRecord.title}
                    </TypographyMaxLines>
                </CustomTooltip>