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',
+    },
+  },
+});