Add "shouldForwardProp" util function

src/components/atoms/TypographyMaxLines.tsx

@@ -8,12 +8,15 @@
 
 import styled from '@emotion/styled';
 import Typography, { TypographyProps } from '@mui/material/Typography';
+import { shouldForwardProp } from '@/lib/ui/ShouldForwardProp.ts';
+
+type TypographyMaxLinesProps = {
+    lines?: number;
+};
 
 export const TypographyMaxLines = styled(Typography, {
-    shouldForwardProp: (prop) => prop !== 'lines',
-})<{
-    lines?: number;
-}>(({ lines = 2 }) => ({
+    shouldForwardProp: shouldForwardProp<TypographyMaxLinesProps>(['lines']),
+})<TypographyMaxLinesProps>(({ lines = 2 }) => ({
     lineHeight: '1.5rem',
     maxHeight: '3rem',
     display: '-webkit-box',

src/components/chapter/ChapterList.tsx

@@ -45,10 +45,14 @@ import { Mangas } from '@/lib/data/Mangas';
 import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { shouldForwardProp } from '@/lib/ui/ShouldForwardProp.ts';
 
-const ChapterListHeader = styled(Stack, { shouldForwardProp: (prop) => prop !== 'scrollbarWidth' })<{
+type ChapterListHeaderProps = {
     scrollbarWidth: number;
-}>(({ theme, scrollbarWidth }) => ({
+};
+const ChapterListHeader = styled(Stack, {
+    shouldForwardProp: shouldForwardProp<ChapterListHeaderProps>(['scrollbarWidth']),
+})<ChapterListHeaderProps>(({ theme, scrollbarWidth }) => ({
     padding: theme.spacing(1),
     paddingRight: `calc(${scrollbarWidth}px + ${theme.spacing(1)})`,
     paddingBottom: 0,
@@ -57,16 +61,17 @@ const ChapterListHeader = styled(Stack, { shouldForwardProp: (prop) => prop !==
     },
 }));
 
-const StyledVirtuoso = styled(Virtuoso, { shouldForwardProp: (prop) => prop !== 'topOffset' })<{ topOffset: number }>(
-    ({ theme, topOffset }) => ({
-        listStyle: 'none',
-        padding: 0,
-        [theme.breakpoints.up('md')]: {
-            height: `calc(100vh - ${topOffset}px)`,
-            margin: 0,
-        },
-    }),
-);
+type StyledVirtuosoProps = { topOffset: number };
+const StyledVirtuoso = styled(Virtuoso, {
+    shouldForwardProp: shouldForwardProp<StyledVirtuosoProps>(['topOffset']),
+})<StyledVirtuosoProps>(({ theme, topOffset }) => ({
+    listStyle: 'none',
+    padding: 0,
+    [theme.breakpoints.up('md')]: {
+        height: `calc(100vh - ${topOffset}px)`,
+        margin: 0,
+    },
+}));
 
 export interface IChapterWithMeta extends ChapterWithMetaType<ComponentProps<typeof ChapterCard>['chapter']> {
     selected: boolean | null;

src/components/manga/MangaDetails.tsx

@@ -38,6 +38,7 @@ import { MangaType, SourceType } from '@/lib/graphql/generated/graphql.ts';
 import { useLocalStorage } from '@/util/useStorage.tsx';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
+import { shouldForwardProp } from '@/lib/ui/ShouldForwardProp.ts';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -51,12 +52,13 @@ const DetailsWrapper = styled('div')(({ theme }) => ({
     },
 }));
 
-const TopContentWrapper = styled('div', {
-    shouldForwardProp: (prop) => !['url', 'mangaThumbnailBackdrop'].includes(prop as string),
-})<{
+type TopContentWrapperProps = {
     url: string;
     mangaThumbnailBackdrop: boolean;
-}>(({ theme, url, mangaThumbnailBackdrop }) => ({
+};
+const TopContentWrapper = styled('div', {
+    shouldForwardProp: shouldForwardProp<TopContentWrapperProps>(['url', 'mangaThumbnailBackdrop']),
+})<TopContentWrapperProps>(({ theme, url, mangaThumbnailBackdrop }) => ({
     position: 'relative',
     backgroundImage: mangaThumbnailBackdrop ? `url(${url})` : undefined,
     backgroundRepeat: mangaThumbnailBackdrop ? 'no-repeat' : undefined,

src/components/virtuoso/StyledGroupHeader.tsx

@@ -8,12 +8,14 @@
 
 import { styled } from '@mui/material/styles';
 import Typography, { TypographyProps } from '@mui/material/Typography';
+import { shouldForwardProp } from '@/lib/ui/ShouldForwardProp.ts';
 
-export const StyledGroupHeader = styled(Typography, { shouldForwardProp: (prop) => prop !== 'isFirstItem' })<
-    {
-        isFirstItem: boolean;
-    } & TypographyProps
->(({ theme, isFirstItem }) => ({
+type StyledGroupHeaderProps = {
+    isFirstItem: boolean;
+};
+export const StyledGroupHeader = styled(Typography, {
+    shouldForwardProp: shouldForwardProp<StyledGroupHeaderProps>(['isFirstItem']),
+})<StyledGroupHeaderProps & TypographyProps>(({ theme, isFirstItem }) => ({
     paddingLeft: theme.spacing(3),
     // 16px - 10px (bottom padding of the group items)
     paddingTop: theme.spacing(0.75),

src/lib/ui/ShouldForwardProp.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+type TupleUnion<U extends string | number | symbol, R extends any[] = []> = {
+    [S in U]: Exclude<U, S> extends never ? [...R, S] : TupleUnion<Exclude<U, S>, [...R, S]>;
+}[U];
+
+export const shouldForwardProp =
+    <TCustomProps extends Record<string, unknown>>(customProps: TupleUnion<keyof TCustomProps>) =>
+    (prop: string): boolean =>
+        // @ts-ignore - TS2589: Type instantiation is excessively deep and possibly infinite.
+        // this function should never be used without a strict type, thus, this error can be ignored
+        !customProps.includes(prop);