From 456a1c204b48d14f75c25e6de9aeba057c3b0a01 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Mon, 12 Dec 2022 21:47:15 +0800
Subject: [PATCH] fix: react warning

---
 packages/app/src/components/header/header.tsx |  1 -
 .../app/src/components/header/page-header.tsx |  2 +-
 packages/app/src/ui/button/styles.ts          | 23 +++++++++++++++++--
 packages/app/src/ui/layout/wrapper.tsx        | 14 ++++++++++-
 packages/app/src/ui/menu/styles.ts            | 11 +++------
 packages/app/src/ui/popper/Popper.tsx         |  1 -
 6 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index f4ecf3671d..b50336c602 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -148,7 +148,6 @@ export const Header = ({ children }: PropsWithChildren<{}>) => {
   const router = useRouter();
   const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
   const isTrash = !!currentPageMeta?.trash;
-  console.log('isTrash', isTrash);
   return (
     <StyledHeaderContainer hasWarning={showWarning}>
       <BrowserWarning
diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx
index 9de86010e1..73c28543d9 100644
--- a/packages/app/src/components/header/page-header.tsx
+++ b/packages/app/src/components/header/page-header.tsx
@@ -52,7 +52,7 @@ export const PageHeader = () => {
           <StyledSearchArrowWrapper>
             <IconButton
               onClick={() => {
-                triggerQuickSearchModal(true);
+                triggerQuickSearchModal();
               }}
             >
               <MiddleIconArrowDownSmallIcon />
diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts
index 99773a7876..4400984446 100644
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -3,7 +3,20 @@ import { CSSProperties } from 'react';
 import { ButtonProps } from '@/ui/button/interface';
 import { getSize, getButtonColors } from './utils';
 
-export const StyledIconButton = styled.button<{
+export const StyledIconButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'borderRadius',
+      'top',
+      'right',
+      'width',
+      'height',
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+    ].includes(prop);
+  },
+})<{
   width: number;
   height: number;
   borderRadius: number;
@@ -55,7 +68,13 @@ export const StyledIconButton = styled.button<{
     };
   }
 );
-export const StyledButton = styled.button<
+export const StyledButton = styled('button', {
+  shouldForwardProp: prop => {
+    return !['hoverBackground', 'hoverColor', 'hoverStyle', 'type'].includes(
+      prop
+    );
+  },
+})<
   Pick<
     ButtonProps,
     | 'size'
diff --git a/packages/app/src/ui/layout/wrapper.tsx b/packages/app/src/ui/layout/wrapper.tsx
index 8096b87dc2..ee61aa4f64 100644
--- a/packages/app/src/ui/layout/wrapper.tsx
+++ b/packages/app/src/ui/layout/wrapper.tsx
@@ -12,7 +12,19 @@ export type WrapperProps = {
 };
 
 // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
-export const Wrapper = styled.div<WrapperProps>(
+export const Wrapper = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'display',
+      'justifyContent',
+      'alignItems',
+      'flexWrap',
+      'flexDirection',
+      'flexShrink',
+      'flexGrow',
+    ].includes(prop);
+  },
+})<WrapperProps>(
   ({
     display = 'flex',
     justifyContent = 'flex-start',
diff --git a/packages/app/src/ui/menu/styles.ts b/packages/app/src/ui/menu/styles.ts
index 4321a17722..d114a9d6d8 100644
--- a/packages/app/src/ui/menu/styles.ts
+++ b/packages/app/src/ui/menu/styles.ts
@@ -24,9 +24,8 @@ export const StyledArrow = styled(MiddleArrowRightIcon)(({ theme }) => {
 });
 
 export const StyledMenuItem = styled.button<{
-  popperVisible?: boolean;
   isDir?: boolean;
-}>(({ theme, popperVisible, isDir = false }) => {
+}>(({ theme, isDir = false }) => {
   return {
     width: '100%',
     borderRadius: '5px',
@@ -36,12 +35,8 @@ export const StyledMenuItem = styled.button<{
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
-    color: popperVisible
-      ? theme.colors.primaryColor
-      : theme.colors.popoverColor,
-    backgroundColor: popperVisible
-      ? theme.colors.hoverBackground
-      : 'transparent',
+    color: theme.colors.popoverColor,
+    backgroundColor: 'transparent',
 
     ':hover': {
       color: theme.colors.primaryColor,
diff --git a/packages/app/src/ui/popper/Popper.tsx b/packages/app/src/ui/popper/Popper.tsx
index 0e93a7f7cc..e71b9f41c3 100644
--- a/packages/app/src/ui/popper/Popper.tsx
+++ b/packages/app/src/ui/popper/Popper.tsx
@@ -117,7 +117,6 @@ export const Popper = ({
           onPointerEnter: onPointerEnterHandler,
           onPointerLeave: onPointerLeaveHandler,
           className: anchorClassName,
-          popperVisible: visible,
         })}
         {content && (
           <BasicStyledPopper