feat(component): mobile menu support (#7892)

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

@@ -0,0 +1,13 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+import type { MenuItemProps } from '../menu.types';
+import { useMenuItem } from '../use-menu-item';
+
+export const DesktopMenuItem = (props: MenuItemProps) => {
+  const { className, children, otherProps } = useMenuItem(props);
+  return (
+    <DropdownMenu.Item className={className} {...otherProps}>
+      {children}
+    </DropdownMenu.Item>
+  );
+};

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

@@ -0,0 +1,39 @@
+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';
+
+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.Content
+          className={clsx(styles.menuContent, className)}
+          sideOffset={5}
+          align="start"
+          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
+          {...otherContentOptions}
+        >
+          {items}
+        </DropdownMenu.Content>
+      </Wrapper>
+    </DropdownMenu.Root>
+  );
+};

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

@@ -0,0 +1,17 @@
+import type { DropdownMenuSeparatorProps } from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+
+import * as styles from '../styles.css';
+
+export const DesktopMenuSeparator = ({
+  className,
+  ...otherProps
+}: DropdownMenuSeparatorProps) => {
+  return (
+    <DropdownMenu.Separator
+      className={clsx(styles.menuSeparator, className)}
+      {...otherProps}
+    />
+  );
+};

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

@@ -0,0 +1,46 @@
+import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import type { MenuSubProps } from '../menu.types';
+import * as styles from '../styles.css';
+import { useMenuItem } from '../use-menu-item';
+
+export const DesktopMenuSub = ({
+  children: propsChildren,
+  items,
+  portalOptions,
+  subOptions,
+  triggerOptions,
+  subContentOptions: {
+    className: subContentClassName = '',
+    ...otherSubContentOptions
+  } = {},
+}: MenuSubProps) => {
+  const { className, children, otherProps } = useMenuItem({
+    ...triggerOptions,
+    children: propsChildren,
+    suffixIcon: <ArrowRightSmallIcon />,
+  });
+
+  return (
+    <DropdownMenu.Sub {...subOptions}>
+      <DropdownMenu.SubTrigger className={className} {...otherProps}>
+        {children}
+      </DropdownMenu.SubTrigger>
+      <DropdownMenu.Portal {...portalOptions}>
+        <DropdownMenu.SubContent
+          sideOffset={12}
+          className={useMemo(
+            () => clsx(styles.menuContent, subContentClassName),
+            [subContentClassName]
+          )}
+          {...otherSubContentOptions}
+        >
+          {items}
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Sub>
+  );
+};