Feature/update dependencies (#685)

* Update dependencies

* Add missing "graphql" peer dependency

package.json

@@ -24,24 +24,25 @@
     "*.{ts,tsx,js,jsx}": "eslint --fix --cache"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.6",
+    "@apollo/client": "^3.9.9",
     "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.12",
-    "@mui/icons-material": "^5.15.12",
+    "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.12",
+    "@mui/material": "^5.15.14",
-    "@mui/x-date-pickers": "^6.19.6",
+    "@mui/x-date-pickers": "^7.1.0",
     "@vitejs/plugin-legacy": "^5.3.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "apollo-upload-client": "^17.0.0",
     "dayjs": "^1.11.10",
     "file-selector": "^0.6.0",
+    "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.15.0",
+    "graphql-ws": "^5.16.0",
-    "html-react-parser": "^5.1.8",
+    "html-react-parser": "^5.1.10",
     "i18next": "^23.10.1",
-    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-browser-languagedetector": "^7.2.1",
-    "material-ui-popup-state": "^5.0.10",
+    "material-ui-popup-state": "^5.1.0",
     "p-limit": "^5.0.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
@@ -49,24 +50,24 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
     "react-router-dom": "^6.22.3",
-    "react-virtuoso": "^4.7.2",
+    "react-virtuoso": "^4.7.7",
     "use-query-params": "^2.2.1",
-    "vite": "^5.1.5",
+    "vite": "^5.2.7",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
-    "@graphql-codegen/client-preset": "^4.2.4",
+    "@graphql-codegen/client-preset": "^4.2.5",
     "@graphql-codegen/typescript-apollo-client-helpers": "^3.0.0",
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@types/apollo-upload-client": "^17.0.5",
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.12.2",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.73",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^18.2.21",
+    "@types/react-dom": "^18.2.23",
     "@types/yargs": "^17.0.32",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/parser": "^7.4.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -76,16 +77,16 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-no-relative-import-paths": "^1.5.3",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^3.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "syncyarnlock": "^1.0.19",
-    "terser": "^5.29.2",
+    "terser": "^5.30.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.2",
+    "typescript": "^5.4.3",
     "yargs": "^17.7.2"
   }
 }

src/components/MangaGrid.tsx

@@ -35,7 +35,8 @@ const GridItemContainerWithDimension = (
     const itemsPerRow = Math.ceil(dimensions / itemWidth);
     const columnsPerItem = gridLayout === GridLayout.List ? maxColumns : maxColumns / itemsPerRow;
 
-    return ({ children, ...itemProps }: GridTypeMap['props'] & Partial<GridItemProps>) => (
+    // MUI GridProps and Virtuoso GridItemProps use different types for the "ref" prop which conflict with each other
+    return ({ children, ...itemProps }: GridTypeMap['props'] & Omit<Partial<GridItemProps>, 'ref'>) => (
         <Grid {...itemProps} item xs={columnsPerItem} sx={{ width: '100%', paddingTop: '8px', paddingLeft: '8px' }}>
             {children}
         </Grid>

src/components/atoms/Select.tsx

@@ -6,14 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Select as MuiSelect, SelectVariants } from '@mui/material';
+import { Select as MuiSelect } from '@mui/material';
 
-export const Select = <Value, Variant extends SelectVariants>({
+export const Select = <Value,>({
     children,
     maxSelectionHeightPx = 250,
     ...props
-}: React.ComponentProps<typeof MuiSelect<Value, Variant>> & { maxSelectionHeightPx?: number }) => (
+}: React.ComponentProps<typeof MuiSelect<Value>> & { maxSelectionHeightPx?: number }) => (
-    <MuiSelect<any, any> MenuProps={{ PaperProps: { style: { maxHeight: maxSelectionHeightPx } } }} {...props}>
+    <MuiSelect<Value> MenuProps={{ PaperProps: { style: { maxHeight: maxSelectionHeightPx } } }} {...props}>
         {children}
     </MuiSelect>
 );

src/components/manga/MangaOptionButton.tsx

@@ -12,7 +12,7 @@ import { Button, Tooltip } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { PopupState } from 'material-ui-popup-state/es/hooks';
+import { PopupState } from 'material-ui-popup-state/hooks';
 import { bindTrigger } from 'material-ui-popup-state';
 import { isMobile } from 'react-device-detect';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';