feat(core): import template (#8000)

packages/frontend/component/src/ui/menu/desktop/root.tsx

@@ -1,39 +1,41 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { Fragment } from 'react';
 
 import type { MenuProps } from '../menu.types';
 import * as styles from '../styles.css';
+import * as desktopStyles from './styles.css';
 
 export const DesktopMenu = ({
   children,
   items,
   portalOptions,
   rootOptions,
-  noPortal,
   contentOptions: {
     className = '',
     style: contentStyle = {},
     ...otherContentOptions
   } = {},
 }: MenuProps) => {
-  const Wrapper = noPortal ? Fragment : DropdownMenu.Portal;
-  const wrapperProps = noPortal ? {} : portalOptions;
   return (
     <DropdownMenu.Root {...rootOptions}>
       <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
 
-      <Wrapper {...wrapperProps}>
+      <DropdownMenu.Portal {...portalOptions}>
         <DropdownMenu.Content
-          className={clsx(styles.menuContent, className)}
+          className={clsx(
+            styles.menuContent,
+            desktopStyles.contentAnimation,
+            className
+          )}
           sideOffset={5}
           align="start"
           style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
           {...otherContentOptions}
+          side="bottom"
         >
           {items}
         </DropdownMenu.Content>
-      </Wrapper>
+      </DropdownMenu.Portal>
     </DropdownMenu.Root>
   );
 };

packages/frontend/component/src/ui/menu/desktop/styles.css.ts

@@ -0,0 +1,34 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const slideDown = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-10px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+const slideUp = keyframes({
+  to: {
+    opacity: 0,
+    transform: 'translateY(-10px)',
+  },
+  from: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+export const contentAnimation = style({
+  animation: `${slideDown} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
+  selectors: {
+    '&[data-state="closed"]': {
+      pointerEvents: 'none',
+      animation: `${slideUp} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
+      animationFillMode: 'forwards',
+    },
+  },
+});

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -1,18 +1,11 @@
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
-import {
-  Fragment,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 import { observeResize } from '../../../utils';
 import { Button } from '../../button';
-import { Modal, type ModalProps } from '../../modal';
+import { Modal } from '../../modal';
 import type { MenuProps } from '../menu.types';
 import type { SubMenuContent } from './context';
 import { MobileMenuContext } from './context';
@@ -22,7 +15,6 @@ import { MobileMenuSubRaw } from './sub';
 export const MobileMenu = ({
   children,
   items,
-  noPortal,
   contentOptions: {
     className,
     onPointerDownOutside,
@@ -56,25 +48,6 @@ export const MobileMenu = ({
     [onPointerDownOutside, rootOptions]
   );
 
-  const Wrapper = noPortal ? Fragment : Modal;
-  const wrapperProps = noPortal
-    ? {}
-    : ({
-        open: finalOpen,
-        onOpenChange,
-        width: '100%',
-        animation: 'slideBottom',
-        withoutCloseButton: true,
-        contentOptions: {
-          className: clsx(className, styles.mobileMenuModal),
-          ...otherContentOptions,
-        },
-        contentWrapperStyle: {
-          alignItems: 'end',
-          paddingBottom: 10,
-        },
-      } satisfies ModalProps);
-
   const onItemClick = useCallback((e: any) => {
     e.preventDefault();
     setOpen(prev => !prev);
@@ -127,7 +100,21 @@ export const MobileMenu = ({
       <MobileMenuContext.Provider
         value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
       >
-        <Wrapper {...wrapperProps}>
+        <Modal
+          open={finalOpen}
+          onOpenChange={onOpenChange}
+          width="100%"
+          animation="slideBottom"
+          withoutCloseButton={true}
+          contentOptions={{
+            className: clsx(className, styles.mobileMenuModal),
+            ...otherContentOptions,
+          }}
+          contentWrapperStyle={{
+            alignItems: 'end',
+            paddingBottom: 10,
+          }}
+        >
           <div
             ref={sliderRef}
             className={styles.slider}
@@ -159,7 +146,7 @@ export const MobileMenu = ({
               </div>
             ))}
           </div>
-        </Wrapper>
+        </Modal>
       </MobileMenuContext.Provider>
     </>
   );

packages/frontend/component/src/ui/modal/modal.tsx

@@ -153,14 +153,19 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
     );
 
     useEffect(() => {
-      const container = createContainer();
-      setContainer(container);
-      return () => {
-        setTimeout(() => {
-          container.remove();
-        }, 1000) as unknown as number;
-      };
-    }, []);
+      if (open) {
+        const container = createContainer();
+        setContainer(container);
+        return () => {
+          setTimeout(() => {
+            container.remove();
+          }, 1000) as unknown as number;
+        };
+      } else {
+        setContainer(null);
+        return;
+      }
+    }, [open]);
 
     const handlePointerDownOutSide = useCallback(
       (e: PointerDownOutsideEvent) => {