feat: replace menu with new design (#4012)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/share-menu/share-export.tsx

@@ -17,26 +17,10 @@ export const ShareExport = () => {
         {t['com.affine.share-menu.ShareViaExport']()}
       </div>
       <div>
-        <ExportToPdfMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
-        <ExportToHtmlMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
-        <ExportToPngMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
-        <ExportToMarkdownMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
+        <ExportToPdfMenuItem />
+        <ExportToHtmlMenuItem />
+        <ExportToPngMenuItem />
+        <ExportToMarkdownMenuItem />
       </div>
       <div className={styles.columnContainerStyle}>
         <div className={styles.descriptionStyle}>

packages/component/src/components/share-menu/share-menu.tsx

@@ -8,12 +8,10 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { Page } from '@blocksuite/store';
 import { Button } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
-import { useAtom } from 'jotai';
-import { useCallback } from 'react';
+import { Menu } from '@toeverything/components/menu';
+import { useRef } from 'react';
 
-import { Menu } from '../../ui/menu/menu';
 import * as styles from './index.css';
-import { enableShareMenuAtom } from './index.jotai';
 import { ShareExport } from './share-export';
 import { SharePage } from './share-page';
 
@@ -35,11 +33,11 @@ export interface ShareMenuProps<
 
 export const ShareMenu = (props: ShareMenuProps) => {
   const { useIsSharedPage } = props;
+  const ref = useRef(null);
   const isSharedPage = useIsSharedPage(
     props.workspace.id,
     props.currentPage.id
   );
-  const [open, setOpen] = useAtom(enableShareMenuAtom);
   const t = useAFFiNEI18N();
   const content = (
     <div className={styles.containerStyle}>
@@ -52,28 +50,12 @@ export const ShareMenu = (props: ShareMenuProps) => {
   );
   return (
     <Menu
-      menuStyles={{
-        padding: '12px',
-        background: 'var(--affine-background-overlay-panel-color)',
-        transform: 'translateX(-10px)',
+      items={content}
+      portalOptions={{
+        container: ref.current,
       }}
-      content={content}
-      visible={open}
-      placement="bottom"
-      trigger={['click']}
-      width={410}
-      disablePortal={true}
-      onClickAway={useCallback(() => {
-        setOpen(false);
-      }, [setOpen])}
     >
-      <Button
-        data-testid="share-menu-button"
-        onClick={useCallback(() => {
-          setOpen(value => !value);
-        }, [setOpen])}
-        type={'plain'}
-      >
+      <Button data-testid="share-menu-button" type="plain" ref={ref}>
         <div
           style={{
             color: isSharedPage

packages/component/src/components/share-menu/share-page.tsx

@@ -1,15 +1,9 @@
-import {
-  Menu,
-  MenuItem,
-  MenuTrigger,
-  RadioButton,
-  RadioButtonGroup,
-  Switch,
-} from '@affine/component';
+import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon, WebIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import { useState } from 'react';
 import { useCallback, useMemo } from 'react';
 
@@ -186,20 +180,8 @@ export const AffineSharePage = (props: ShareMenuProps) => {
               <div className={styles.rowContainerStyle}>
                 <div className={styles.subTitleStyle}>Link expires</div>
                 <div>
-                  <Menu
-                    content={<MenuItem>Never</MenuItem>}
-                    placement="bottom-end"
-                    trigger="click"
-                  >
-                    <MenuTrigger
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '4px 6px 4px 10px',
-                      }}
-                    >
-                      Never
-                    </MenuTrigger>
+                  <Menu items={<MenuItem>Never</MenuItem>}>
+                    <MenuTrigger>Never</MenuTrigger>
                   </Menu>
                 </div>
               </div>