Upgrade deps

.eslintrc.yml

@@ -10,9 +10,9 @@ plugins:
 
 extends:
   - 'plugin:@typescript-eslint/recommended'
-  - prettier
   - react-app
   - 'plugin:jsx-a11y/recommended'
+  - prettier
 
 env:
   node: true

package.json

@@ -33,12 +33,12 @@
     "@reach/menu-button": "0.18.0",
     "@reach/tooltip": "0.18.0",
     "@reach/visually-hidden": "0.18.0",
-    "@tanstack/react-query": "4.24.2",
+    "@tanstack/react-query": "4.24.4",
-    "chart.js": "4.2.0",
+    "chart.js": "4.2.1",
     "clsx": "^1.2.1",
     "core-js": "3.27.2",
     "date-fns": "2.29.3",
-    "framer-motion": "8.5.4",
+    "framer-motion": "9.0.2",
     "history": "5.3.0",
     "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
@@ -50,11 +50,11 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "^2.0.10",
-    "react-i18next": "12.1.4",
+    "react-i18next": "12.1.5",
     "react-icons": "4.7.1",
     "react-modal": "3.16.1",
-    "react-router": "6.8.0",
+    "react-router": "6.8.1",
-    "react-router-dom": "6.8.0",
+    "react-router-dom": "6.8.1",
     "react-switch": "^7.0.0",
     "react-table": "7.8.0",
     "react-tabs": "6.0.0",
@@ -75,15 +75,15 @@
     "@fontsource/inter": "4.5.15",
     "@types/invariant": "2.2.35",
     "@types/lodash-es": "4.17.6",
-    "@types/react": "18.0.27",
+    "@types/react": "18.0.28",
     "@types/react-dom": "18.0.10",
     "@types/react-modal": "3.13.1",
     "@types/react-window": "1.8.5",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
+    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.49.0",
+    "@typescript-eslint/parser": "5.51.0",
-    "@vitejs/plugin-react": "3.0.1",
+    "@vitejs/plugin-react": "3.1.0",
     "autoprefixer": "10.4.13",
-    "eslint": "8.33.0",
+    "eslint": "8.34.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-config-react-app": "7.0.1",
@@ -96,11 +96,11 @@
     "postcss": "8.4.21",
     "postcss-import": "15.1.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "2.8.3",
+    "prettier": "2.8.4",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "1.57.1",
+    "sass": "1.58.0",
-    "typescript": "4.9.4",
+    "typescript": "4.9.5",
-    "vite": "4.0.4",
+    "vite": "4.1.1",
-    "vite-plugin-pwa": "0.14.1"
+    "vite-plugin-pwa": "0.14.4"
   }
 }

src/components/proxies/ClosePrevConns.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-
+import Button from 'src/components/Button';
-import Button from '../Button';
+import { FlexCenter } from 'src/components/shared/Styled';
-import { FlexCenter } from '../shared/Styled';
 
 const { useRef, useEffect } = React;
 
@@ -18,9 +17,9 @@ export function ClosePrevConns({ onClickPrimaryButton, onClickSecondaryButton }:
   }, []);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.keyCode === 39) {
+    if (e.code === 'ArrowRight') {
       secondaryButtonRef.current.focus();
-    } else if (e.keyCode === 37) {
+    } else if (e.code === 'ArrowLeft') {
       primaryButtonRef.current.focus();
     }
   };

src/components/proxies/Proxy.tsx

@@ -2,10 +2,10 @@ import { TooltipPopup, useTooltip } from '@reach/tooltip';
 import cx from 'clsx';
 import * as React from 'react';
 
+import { connect } from '$src/components/StateProvider';
+import { getDelay, getProxies, NonProxyTypes } from '$src/store/proxies';
 import { ProxyDelayItem, State } from '$src/store/types';
 
-import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies';
-import { connect } from '../StateProvider';
 import s0 from './Proxy.module.scss';
 import { ProxyLatency } from './ProxyLatency';
 

src/components/proxies/ProxyGroup.tsx

@@ -1,16 +1,16 @@
 import { Tooltip } from '@reach/tooltip';
 import * as React from 'react';
 
+import Button from '$src/components/Button';
+import CollapsibleSectionHeader from '$src/components/CollapsibleSectionHeader';
+import { ZapAnimated } from '$src/components/shared/ZapAnimated';
+import { connect, useStoreActions } from '$src/components/StateProvider';
 import { useState2 } from '$src/hooks/basic';
+import { getCollapsibleIsOpen, getHideUnavailableProxies, getProxySortBy } from '$src/store/app';
+import { getProxies, switchProxy } from '$src/store/proxies';
 import { DelayMapping, DispatchFn, ProxiesMapping, State } from '$src/store/types';
 import { ClashAPIConfig } from '$src/types';
 
-import { getCollapsibleIsOpen, getHideUnavailableProxies, getProxySortBy } from '../../store/app';
-import { getProxies, switchProxy } from '../../store/proxies';
-import Button from '../Button';
-import CollapsibleSectionHeader from '../CollapsibleSectionHeader';
-import { ZapAnimated } from '../shared/ZapAnimated';
-import { connect, useStoreActions } from '../StateProvider';
 import { useFilteredAndSorted } from './hooks';
 import s0 from './ProxyGroup.module.scss';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';

src/components/proxies/ProxyProvider.tsx

@@ -16,9 +16,9 @@ import {
 import { getDelay, healthcheckProviderByName } from 'src/store/proxies';
 import { DelayMapping, State } from 'src/store/types';
 
+import { ZapAnimated } from '$src/components/shared/ZapAnimated';
 import { useState2 } from '$src/hooks/basic';
 
-import { ZapAnimated } from '../shared/ZapAnimated';
 import { useFilteredAndSorted } from './hooks';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
 import s from './ProxyProvider.module.scss';

src/components/proxies/hooks.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
-import { DelayMapping, ProxiesMapping, ProxyItem } from 'src/store/types';
-
 import {
   // types
   NonProxyTypes,
   // atom
   proxyFilterText,
-} from '../../store/proxies';
+} from 'src/store/proxies';
+import { DelayMapping, ProxiesMapping, ProxyItem } from 'src/store/types';
 
 const { useMemo } = React;