fix: remove useRef in menu & tooltip (#4369)

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -3,7 +3,6 @@ import { SidebarIcon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
 import { useAtom } from 'jotai';
-import { useRef } from 'react';
 
 import { appSidebarOpenAtom } from '../index.jotai';
 import * as styles from './sidebar-switch.css';
@@ -11,7 +10,6 @@ import * as styles from './sidebar-switch.css';
 export const SidebarSwitch = ({ show }: { show: boolean }) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
-  const ref = useRef(null);
   const tooltipContent = open
     ? t['com.affine.sidebarSwitch.collapse']()
     : t['com.affine.sidebarSwitch.expand']();
@@ -22,9 +20,6 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => {
     <Tooltip
       content={tooltipContent + ' ' + collapseKeyboardShortcuts}
       side={open ? 'bottom' : 'right'}
-      portalOptions={{
-        container: ref.current,
-      }}
     >
       <IconButton
         className={styles.sidebarSwitch}
@@ -35,7 +30,6 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => {
           zIndex: 1,
         }}
         onClick={() => setOpen(open => !open)}
-        ref={ref}
       >
         <SidebarIcon />
       </IconButton>

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -10,7 +10,7 @@ import {
 } from '@blocksuite/icons';
 import { MenuIcon, MenuItem, MenuSub } from '@toeverything/components/menu';
 import { useSetAtom } from 'jotai';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { getContentParser } from './get-content-parser';
 import { transitionStyle } from './index.css';
@@ -248,42 +248,36 @@ export const ExportToMarkdownMenuItem = ({
 
 // fixme: refactor this file, export function may should be passed by 'props', this file is just a ui component
 export const Export = () => {
-  const ref = useRef(null);
   const t = useAFFiNEI18N();
   return (
-    <div ref={ref}>
-      <MenuSub
-        items={
-          <>
-            <ExportToPdfMenuItem
-              className={transitionStyle}
-            ></ExportToPdfMenuItem>
-            <ExportToHtmlMenuItem
-              className={transitionStyle}
-            ></ExportToHtmlMenuItem>
-            <ExportToPngMenuItem
-              className={transitionStyle}
-            ></ExportToPngMenuItem>
-            <ExportToMarkdownMenuItem
-              className={transitionStyle}
-            ></ExportToMarkdownMenuItem>
-          </>
-        }
-        triggerOptions={{
-          className: transitionStyle,
-          preFix: (
-            <MenuIcon>
-              <ExportIcon />
-            </MenuIcon>
-          ),
-          ['data-testid' as string]: 'export-menu',
-        }}
-        portalOptions={{
-          container: ref.current,
-        }}
-      >
-        {t.Export()}
-      </MenuSub>
-    </div>
+    <MenuSub
+      items={
+        <>
+          <ExportToPdfMenuItem
+            className={transitionStyle}
+          ></ExportToPdfMenuItem>
+          <ExportToHtmlMenuItem
+            className={transitionStyle}
+          ></ExportToHtmlMenuItem>
+          <ExportToPngMenuItem
+            className={transitionStyle}
+          ></ExportToPngMenuItem>
+          <ExportToMarkdownMenuItem
+            className={transitionStyle}
+          ></ExportToMarkdownMenuItem>
+        </>
+      }
+      triggerOptions={{
+        className: transitionStyle,
+        preFix: (
+          <MenuIcon>
+            <ExportIcon />
+          </MenuIcon>
+        ),
+        ['data-testid' as string]: 'export-menu',
+      }}
+    >
+      {t.Export()}
+    </MenuSub>
   );
 };

packages/component/src/components/page-list/view/collection-list.tsx

@@ -9,7 +9,7 @@ import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
 import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import type { MouseEvent } from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
@@ -110,7 +110,6 @@ export const CollectionList = ({
   getPageInfo: GetPageInfoById;
   propertiesMeta: PropertiesMeta;
 }) => {
-  const ref = useRef(null);
   const t = useAFFiNEI18N();
   const [collection, setCollection] = useState<Collection>();
   const onChange = useCallback(
@@ -140,12 +139,9 @@ export const CollectionList = ({
     [closeUpdateCollectionModal, setting]
   );
   return (
-    <FlexWrapper alignItems="center" ref={ref}>
+    <FlexWrapper alignItems="center">
       {setting.savedCollections.length > 0 && (
         <Menu
-          portalOptions={{
-            container: ref.current,
-          }}
           items={
             <div style={{ minWidth: 150 }}>
               <MenuItem
@@ -203,9 +199,6 @@ export const CollectionList = ({
             onChange={onChange}
           />
         }
-        portalOptions={{
-          container: ref.current,
-        }}
       >
         <Button
           className={styles.filterMenuTrigger}

packages/component/src/components/setting-components/storage-progess.tsx

@@ -2,7 +2,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
-import { useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 
 import * as styles from './share.css';
 
@@ -26,7 +26,6 @@ export const StorageProgress = ({
   onUpgrade,
 }: StorageProgressProgress) => {
   const t = useAFFiNEI18N();
-  const ref = useRef(null);
   const percent = useMemo(
     () => Math.round((value / upperLimit) * 100),
     [upperLimit, value]
@@ -57,17 +56,12 @@ export const StorageProgress = ({
           </div>
         </div>
 
-        <Tooltip
-          content={t['com.affine.storage.disabled.hint']()}
-          portalOptions={{
-            container: ref.current,
-          }}
-        >
-          <div ref={ref}>
+        <Tooltip content={t['com.affine.storage.disabled.hint']()}>
+          <span tabIndex={0}>
             <Button disabled onClick={onUpgrade}>
               {t['com.affine.storage.upgrade']()}
             </Button>
-          </div>
+          </span>
         </Tooltip>
       </div>
       {percent > 80 ? (