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

apps/core/package.json

@@ -39,7 +39,7 @@
     "@mui/material": "^5.14.7",
     "@radix-ui/react-select": "^1.2.2",
     "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.41",
+    "@toeverything/components": "^0.0.42",
     "async-call-rpc": "^6.3.1",
     "cmdk": "^0.2.0",
     "css-spring": "^4.1.0",

apps/core/src/components/affine/create-workspace-modal/index.tsx

@@ -11,7 +11,7 @@ import type {
 } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -122,7 +122,6 @@ const SetDBLocationContent = ({
   onConfirmLocation,
 }: SetDBLocationContentProps) => {
   const t = useAFFiNEI18N();
-  const ref = useRef(null);
   const defaultDBLocation = useDefaultDBLocation();
   const [opening, setOpening] = useState(false);
 
@@ -164,9 +163,6 @@ const SetDBLocationContent = ({
           content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
             location: defaultDBLocation,
           })}
-          portalOptions={{
-            container: ref.current,
-          }}
         >
           <Button
             data-testid="create-workspace-default-location-button"
@@ -176,7 +172,6 @@ const SetDBLocationContent = ({
             }}
             icon={<HelpIcon />}
             iconPosition="end"
-            ref={ref}
           >
             {t['com.affine.setDBLocation.button.defaultLocation']()}
           </Button>

apps/core/src/components/affine/language-menu/index.tsx

@@ -2,7 +2,7 @@ import { LOCALES } from '@affine/i18n';
 import { useI18N } from '@affine/i18n';
 import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import type { ReactElement } from 'react';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 
 // Fixme: keyboard focus should be supported by Menu component
 const LanguageMenuContent = ({
@@ -32,7 +32,6 @@ const LanguageMenuContent = ({
 
 export const LanguageMenu = () => {
   const i18n = useI18N();
-  const ref = useRef(null);
   const currentLanguage = useMemo(
     () => LOCALES.find(item => item.tag === i18n.language),
     [i18n.language]
@@ -53,9 +52,6 @@ export const LanguageMenu = () => {
           />
         ) as ReactElement
       }
-      portalOptions={{
-        container: ref.current,
-      }}
       contentOptions={{
         style: {
           background: 'var(--affine-white)',
@@ -64,7 +60,6 @@ export const LanguageMenu = () => {
       }}
     >
       <MenuTrigger
-        ref={ref}
         data-testid="language-menu-button"
         style={{ textTransform: 'capitalize', fontWeight: 600 }}
         block={true}

apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx

@@ -1,6 +1,6 @@
 import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import dayjs from 'dayjs';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import {
   dateFormatOptions,
@@ -35,7 +35,6 @@ const DateFormatMenuContent = ({
 };
 
 export const DateFormatSetting = () => {
-  const ref = useRef(null);
   const [appearanceSettings, setAppSettings] = useAppSetting();
   const handleSelect = useCallback(
     (option: DateFormats) => {
@@ -52,9 +51,8 @@ export const DateFormatSetting = () => {
           currentOption={appearanceSettings.dateFormat}
         />
       }
-      portalOptions={{ container: ref.current }}
     >
-      <MenuTrigger ref={ref} data-testid="date-format-menu-trigger" block>
+      <MenuTrigger data-testid="date-format-menu-trigger" block>
         {dayjs(new Date()).format(appearanceSettings.dateFormat)}
       </MenuTrigger>
     </Menu>

apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -14,13 +14,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai/react';
-import {
-  type ReactElement,
-  Suspense,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
+import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
 
 import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
@@ -225,7 +219,6 @@ const WorkspaceListItem = ({
   const workspace = useStaticBlockSuiteWorkspace(meta.id);
   const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
   const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
-  const ref = useRef(null);
 
   return (
     <div
@@ -233,7 +226,6 @@ const WorkspaceListItem = ({
       title={workspaceName}
       onClick={onClick}
       data-testid="workspace-list-item"
-      ref={ref}
     >
       <Avatar
         size={14}
@@ -246,13 +238,7 @@ const WorkspaceListItem = ({
       />
       <span className="setting-name">{workspaceName}</span>
       {isCurrent ? (
-        <Tooltip
-          content="Current"
-          side="top"
-          portalOptions={{
-            container: ref.current,
-          }}
-        >
+        <Tooltip content="Current" side="top">
           <div
             className={currentWorkspaceLabel}
             data-testid="current-workspace-label"

apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -212,9 +212,6 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
       <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
         <Menu
           items={EditMenu}
-          portalOptions={{
-            container: ref.current,
-          }}
           contentOptions={{
             align: 'center',
           }}

apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx

@@ -4,7 +4,7 @@ import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtom } from 'jotai';
 import type { CSSProperties } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 
 import { pageSettingFamily } from '../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../shared';
@@ -40,7 +40,6 @@ export const EditorModeSwitch = ({
     meta => meta.id === pageId
   );
   const t = useAFFiNEI18N();
-  const ref = useRef(null);
   assertExists(pageMeta);
   const { trash } = pageMeta;
   useEffect(() => {
@@ -71,17 +70,11 @@ export const EditorModeSwitch = ({
   }, [setSetting, t, trash]);
 
   return (
-    <Tooltip
-      content={<TooltipContent />}
-      portalOptions={{
-        container: ref.current,
-      }}
-    >
+    <Tooltip content={<TooltipContent />}>
       <StyledEditorModeSwitch
         style={style}
         switchLeft={currentMode === 'page'}
         showAlone={trash}
-        ref={ref}
       >
         <PageSwitchItem
           data-testid="switch-page-mode-button"

apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx

@@ -151,7 +151,6 @@ export const Page = ({
   workspace: Workspace;
   allPageMeta: Record<string, PageMeta>;
 }) => {
-  const ref = React.useRef(null);
   const [collapsed, setCollapsed] = React.useState(true);
   const params = useParams();
   const { jumpToPage } = useNavigateHelper();
@@ -176,7 +175,6 @@ export const Page = ({
         active={active}
         collapsed={referencesToRender.length > 0 ? collapsed : undefined}
         onCollapsedChange={setCollapsed}
-        ref={ref}
         postfix={
           <Menu
             items={
@@ -189,9 +187,6 @@ export const Page = ({
                 workspace={workspace}
               />
             }
-            portalOptions={{
-              container: ref.current,
-            }}
           >
             <IconButton
               data-testid="collection-page-options"

apps/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -16,7 +16,6 @@ import {
   type MouseEvent,
   useCallback,
   useMemo,
-  useState,
 } from 'react';
 
 import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
@@ -88,7 +87,6 @@ const WorkspaceStatus = ({
     currentWorkspace.blockSuiteWorkspace
   );
   const setIsHovered = useSetAtom(hoverAtom);
-  const [container, setContainer] = useState<HTMLDivElement | null>(null);
   const content = useMemo(() => {
     if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) {
       return 'Saved locally';
@@ -130,17 +128,11 @@ const WorkspaceStatus = ({
   );
   return (
     <div style={{ display: 'flex' }}>
-      <Tooltip
-        content={content}
-        portalOptions={{
-          container,
-        }}
-      >
+      <Tooltip content={content}>
         <StyledWorkspaceStatus
           onMouseEnter={() => {
             setIsHovered(true);
           }}
-          ref={setContainer}
           onMouseLeave={() => setIsHovered(false)}
           onClick={handleClick}
         >

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 ? (

plugins/copilot/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
-    "@toeverything/components": "^0.0.41",
+    "@toeverything/components": "^0.0.42",
     "idb": "^7.1.1",
     "langchain": "^0.0.138",
     "marked": "^7.0.5",

plugins/hello-world/package.json

@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.33",
-    "@toeverything/components": "^0.0.41"
+    "@toeverything/components": "^0.0.42"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*"

plugins/image-preview/package.json

@@ -17,7 +17,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.33",
-    "@toeverything/components": "^0.0.41",
+    "@toeverything/components": "^0.0.42",
     "@toeverything/theme": "^0.7.15",
     "clsx": "^2.0.0",
     "foxact": "^0.2.20",

plugins/outline/package.json

@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.33",
-    "@toeverything/components": "^0.0.41"
+    "@toeverything/components": "^0.0.42"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*",

yarn.lock

@@ -231,7 +231,7 @@ __metadata:
     "@affine/component": "workspace:*"
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
-    "@toeverything/components": ^0.0.41
+    "@toeverything/components": ^0.0.42
     "@types/marked": ^5.0.1
     idb: ^7.1.1
     jotai: ^2.4.1
@@ -282,7 +282,7 @@ __metadata:
     "@sentry/webpack-plugin": ^2.7.0
     "@svgr/webpack": ^8.1.0
     "@swc/core": ^1.3.81
-    "@toeverything/components": ^0.0.41
+    "@toeverything/components": ^0.0.42
     "@types/lodash-es": ^4.17.9
     "@types/webpack-env": ^1.18.1
     async-call-rpc: ^6.3.1
@@ -458,7 +458,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.33
-    "@toeverything/components": ^0.0.41
+    "@toeverything/components": ^0.0.42
   languageName: unknown
   linkType: soft
 
@@ -484,7 +484,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.33
-    "@toeverything/components": ^0.0.41
+    "@toeverything/components": ^0.0.42
     "@toeverything/theme": ^0.7.15
     clsx: ^2.0.0
     foxact: ^0.2.20
@@ -580,7 +580,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.33
-    "@toeverything/components": ^0.0.41
+    "@toeverything/components": ^0.0.42
     jotai: ^2.4.1
     react: 18.2.0
     react-dom: 18.2.0
@@ -12509,9 +12509,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/components@npm:^0.0.41":
-  version: 0.0.41
-  resolution: "@toeverything/components@npm:0.0.41"
+"@toeverything/components@npm:^0.0.42":
+  version: 0.0.42
+  resolution: "@toeverything/components@npm:0.0.42"
   dependencies:
     "@blocksuite/icons": ^2.1.33
     "@radix-ui/react-dialog": ^1.0.4
@@ -12523,7 +12523,7 @@ __metadata:
     clsx: ^2
     react: ^18
     react-dom: ^18
-  checksum: 15ee1cba8ea7880c9aae9fb18f8f8c44a183b64972e29e852d55e097a74ec994c1b2d22d6708746055e741112decffed1db14c345f5300733969bac69ddecf87
+  checksum: 140097386e9e4130d1ad8e60ebc65ede0d68f041bef7058d06488d228009d3d58e9e1af6af2911b4a22d27efd36996a9f9e195ed49b92ba3c21aedb81ba54d87
   languageName: node
   linkType: hard