fix: resolve deprecated warnings in console

src/components/base/base-search-box.tsx

@@ -1,6 +1,6 @@
 import { Box, SvgIcon, TextField, styled } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState, useMemo } from "react";
 
 import { useTranslation } from "react-i18next";
 import matchCaseIcon from "@/assets/image/component/match_case.svg?react";
@@ -22,7 +22,20 @@ type SearchProps = {
   onSearch: (match: (content: string) => boolean, state: SearchState) => void;
 };
 
-export const BaseSearchBox = styled((props: SearchProps) => {
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    background: theme.palette.mode === "light" ? "#fff" : undefined,
+    paddingRight: "4px",
+  },
+  "& .MuiInputBase-root svg[aria-label='active'] path": {
+    fill: theme.palette.primary.light,
+  },
+  "& .MuiInputBase-root svg[aria-label='inactive'] path": {
+    fill: "#A7A7A7",
+  },
+}));
+
+export const BaseSearchBox = (props: SearchProps) => {
   const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const [matchCase, setMatchCase] = useState(props.matchCase ?? false);
@@ -43,58 +56,58 @@ export const BaseSearchBox = styled((props: SearchProps) => {
     inheritViewBox: true,
   };
 
-  useEffect(() => {
-    if (!inputRef.current) return;
-
-    onChange({
-      target: inputRef.current,
-    } as ChangeEvent<HTMLInputElement>);
-  }, [matchCase, matchWholeWord, useRegularExpression]);
-
-  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    props.onSearch(
-      (content) => doSearch([content], e.target?.value ?? "").length > 0,
-      {
-        text: e.target?.value ?? "",
-        matchCase,
-        matchWholeWord,
-        useRegularExpression,
-      },
-    );
-  };
-
-  const doSearch = (searchList: string[], searchItem: string) => {
-    setErrorMessage("");
-    return searchList.filter((item) => {
+  const createMatcher = useMemo(() => {
+    return (searchText: string) => {
       try {
-        let searchItemCopy = searchItem;
-        if (!matchCase) {
-          item = item.toLowerCase();
-          searchItemCopy = searchItemCopy.toLowerCase();
-        }
-        if (matchWholeWord) {
-          const regex = new RegExp(`\\b${searchItemCopy}\\b`);
+        return (content: string) => {
+          if (!searchText) return true;
+
+          let item = !matchCase ? content.toLowerCase() : content;
+          let searchItem = !matchCase ? searchText.toLowerCase() : searchText;
+
           if (useRegularExpression) {
-            const regexWithOptions = new RegExp(searchItemCopy);
-            return regexWithOptions.test(item) && regex.test(item);
-          } else {
-            return regex.test(item);
+            return new RegExp(searchItem).test(item);
           }
-        } else if (useRegularExpression) {
-          const regex = new RegExp(searchItemCopy);
-          return regex.test(item);
-        } else {
-          return item.includes(searchItemCopy);
-        }
+
+          if (matchWholeWord) {
+            return new RegExp(`\\b${searchItem}\\b`).test(item);
+          }
+
+          return item.includes(searchItem);
+        };
       } catch (err) {
         setErrorMessage(`${err}`);
+        return () => true;
       }
+    };
+  }, [matchCase, matchWholeWord, useRegularExpression]);
+
+  useEffect(() => {
+    if (!inputRef.current) return;
+    const value = inputRef.current.value;
+    setErrorMessage("");
+    props.onSearch(createMatcher(value), {
+      text: value,
+      matchCase,
+      matchWholeWord,
+      useRegularExpression,
+    });
+  }, [matchCase, matchWholeWord, useRegularExpression, createMatcher]);
+
+  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const value = e.target?.value ?? "";
+    setErrorMessage("");
+    props.onSearch(createMatcher(value), {
+      text: value,
+      matchCase,
+      matchWholeWord,
+      useRegularExpression,
     });
   };
 
   return (
     <Tooltip title={errorMessage} placement="bottom-start">
-      <TextField
+      <StyledTextField
         autoComplete="new-password"
         inputRef={inputRef}
         hiddenLabel
@@ -115,9 +128,7 @@ export const BaseSearchBox = styled((props: SearchProps) => {
                     component={matchCaseIcon}
                     {...iconStyle}
                     aria-label={matchCase ? "active" : "inactive"}
-                    onClick={() => {
-                      setMatchCase(!matchCase);
-                    }}
+                    onClick={() => setMatchCase(!matchCase)}
                   />
                 </div>
               </Tooltip>
@@ -127,9 +138,7 @@ export const BaseSearchBox = styled((props: SearchProps) => {
                     component={matchWholeWordIcon}
                     {...iconStyle}
                     aria-label={matchWholeWord ? "active" : "inactive"}
-                    onClick={() => {
-                      setMatchWholeWord(!matchWholeWord);
-                    }}
+                    onClick={() => setMatchWholeWord(!matchWholeWord)}
                   />
                 </div>
               </Tooltip>
@@ -139,28 +148,16 @@ export const BaseSearchBox = styled((props: SearchProps) => {
                     component={useRegularExpressionIcon}
                     aria-label={useRegularExpression ? "active" : "inactive"}
                     {...iconStyle}
-                    onClick={() => {
-                      setUseRegularExpression(!useRegularExpression);
-                    }}
+                    onClick={() =>
+                      setUseRegularExpression(!useRegularExpression)
+                    }
                   />{" "}
                 </div>
               </Tooltip>
             </Box>
           ),
         }}
-        {...props}
       />
     </Tooltip>
   );
-})(({ theme }) => ({
-  "& .MuiInputBase-root": {
-    background: theme.palette.mode === "light" ? "#fff" : undefined,
-    "padding-right": "4px",
-  },
-  "& .MuiInputBase-root svg[aria-label='active'] path": {
-    fill: theme.palette.primary.light,
-  },
-  "& .MuiInputBase-root svg[aria-label='inactive'] path": {
-    fill: "#A7A7A7",
-  },
-}));
+};

src/components/proxy/proxy-render.tsx

@@ -100,7 +100,7 @@ export const ProxyRender = (props: RenderProps) => {
         <ListItemText
           primary={<StyledPrimary>{group.name}</StyledPrimary>}
           secondary={
-            <ListItemTextChild
+            <Box
               sx={{
                 overflow: "hidden",
                 display: "flex",
@@ -108,16 +108,19 @@ export const ProxyRender = (props: RenderProps) => {
                 pt: "2px",
               }}
             >
-              <Box sx={{ marginTop: "2px" }}>
+              <Box component="span" sx={{ marginTop: "2px" }}>
                 <StyledTypeBox>{group.type}</StyledTypeBox>
                 <StyledSubtitle sx={{ color: "text.secondary" }}>
                   {group.now}
                 </StyledSubtitle>
               </Box>
-            </ListItemTextChild>
+            </Box>
           }
-          secondaryTypographyProps={{
-            sx: { display: "flex", alignItems: "center", color: "#ccc" },
+          slotProps={{
+            secondary: {
+              component: "div",
+              sx: { display: "flex", alignItems: "center", color: "#ccc" },
+            },
           }}
         />
         {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
@@ -219,11 +222,7 @@ const StyledSubtitle = styled("span")`
   white-space: nowrap;
 `;
 
-const ListItemTextChild = styled("span")`
-  display: block;
-`;
-
-const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
+const StyledTypeBox = styled(Box)(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.primary.main, 0.5),

src/components/setting/setting-verge.tsx

@@ -182,7 +182,11 @@ const SettingVerge = ({ onError }: Props) => {
         >
           <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
             {routers.map((page: { label: string; path: string }) => {
-              return <MenuItem value={page.path}>{t(page.label)}</MenuItem>;
+              return (
+                <MenuItem key={page.path} value={page.path}>
+                  {t(page.label)}
+                </MenuItem>
+              );
             })}
           </Select>
         </GuardState>