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

packages/frontend/component/src/ui/menu/mobile/context.ts

@@ -0,0 +1,22 @@
+import {
+  createContext,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react';
+
+import type { MenuSubProps } from '../menu.types';
+
+export type SubMenuContent = {
+  items: ReactNode;
+  contentOptions?: MenuSubProps['subContentOptions'];
+};
+
+export const MobileMenuContext = createContext<{
+  subMenus: Array<SubMenuContent>;
+  setSubMenus: Dispatch<SetStateAction<Array<SubMenuContent>>>;
+  setOpen?: (v: boolean) => void;
+}>({
+  subMenus: [],
+  setSubMenus: () => {},
+});

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

@@ -0,0 +1,35 @@
+import { useCallback, useContext } from 'react';
+
+import type { MenuItemProps } from '../menu.types';
+import { useMenuItem } from '../use-menu-item';
+import { MobileMenuContext } from './context';
+
+let preventDefaultFlag = false;
+const preventDefault = () => {
+  preventDefaultFlag = true;
+};
+
+export const MobileMenuItem = (props: MenuItemProps) => {
+  const { setOpen } = useContext(MobileMenuContext);
+  const { className, children, otherProps } = useMenuItem(props);
+  const { onSelect, onClick, ...restProps } = otherProps;
+
+  const onItemClick = useCallback(
+    (e: any) => {
+      onSelect?.(e);
+      onClick?.({ ...e, preventDefault });
+      if (preventDefaultFlag) {
+        preventDefaultFlag = false;
+      } else {
+        setOpen?.(false);
+      }
+    },
+    [onClick, onSelect, setOpen]
+  );
+
+  return (
+    <div onClick={onItemClick} className={className} {...restProps}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,166 @@
+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 { observeResize } from '../../../utils';
+import { Button } from '../../button';
+import { Modal, type ModalProps } from '../../modal';
+import type { MenuProps } from '../menu.types';
+import type { SubMenuContent } from './context';
+import { MobileMenuContext } from './context';
+import * as styles from './styles.css';
+import { MobileMenuSubRaw } from './sub';
+
+export const MobileMenu = ({
+  children,
+  items,
+  noPortal,
+  contentOptions: {
+    className,
+    onPointerDownOutside,
+    // ignore the following props
+    sideOffset: _sideOffset,
+    side: _side,
+    align: _align,
+
+    ...otherContentOptions
+  } = {},
+  rootOptions,
+}: MenuProps) => {
+  const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
+  const [open, setOpen] = useState(false);
+  const [sliderHeight, setSliderHeight] = useState(0);
+  const { setOpen: pSetOpen } = useContext(MobileMenuContext);
+  const finalOpen = rootOptions?.open ?? open;
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const activeIndex = subMenus.length;
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        // a workaround to hack the onPointerDownOutside event
+        onPointerDownOutside?.({} as any);
+        setSubMenus([]);
+      }
+      setOpen(open);
+      rootOptions?.onOpenChange?.(open);
+    },
+    [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);
+  }, []);
+
+  // dynamic height for slider
+  useEffect(() => {
+    if (!finalOpen) return;
+    let observer: () => void;
+    const t = setTimeout(() => {
+      const slider = sliderRef.current;
+      if (!slider) return;
+
+      const active = slider.querySelector(
+        `.${styles.menuContent}[data-index="${activeIndex}"]`
+      );
+      if (!active) return;
+
+      // for the situation that content is loaded asynchronously
+      observer = observeResize(active, entry => {
+        setSliderHeight(entry.borderBoxSize[0].blockSize);
+      });
+    }, 0);
+
+    return () => {
+      clearTimeout(t);
+      observer?.();
+    };
+  }, [activeIndex, finalOpen]);
+
+  /**
+   * For cascading menu usage
+   * ```tsx
+   * <Menu
+   *  items={
+   *    <Menu>Click me</Menu>
+   *  }
+   * >
+   *  Root
+   * </Menu>
+   * ```
+   */
+  if (pSetOpen) {
+    return <MobileMenuSubRaw items={items}>{children}</MobileMenuSubRaw>;
+  }
+
+  return (
+    <>
+      <Slot onClick={onItemClick}>{children}</Slot>
+      <MobileMenuContext.Provider
+        value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
+      >
+        <Wrapper {...wrapperProps}>
+          <div
+            ref={sliderRef}
+            className={styles.slider}
+            style={{
+              transform: `translateX(-${100 * activeIndex}%)`,
+              height: sliderHeight,
+            }}
+          >
+            <div data-index={0} className={styles.menuContent}>
+              {items}
+            </div>
+            {subMenus.map((sub, index) => (
+              <div
+                key={index}
+                data-index={index + 1}
+                className={styles.menuContent}
+              >
+                <Button
+                  variant="plain"
+                  className={styles.backButton}
+                  prefix={<ArrowLeftSmallIcon />}
+                  onClick={() => setSubMenus(prev => prev.slice(0, index))}
+                  prefixStyle={{ width: 20, height: 20 }}
+                >
+                  Back
+                </Button>
+
+                {sub.items}
+              </div>
+            ))}
+          </div>
+        </Wrapper>
+      </MobileMenuContext.Provider>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,79 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+import { modalContent } from '../../modal/styles.css';
+import { bgColor } from '../styles.css';
+
+// To override desktop menu style defined in '../styles.css.ts'
+
+export const mobileMenuModal = style({
+  selectors: {
+    // to make sure it will override the desktop modal style
+    [`&.${modalContent}`]: {
+      backgroundColor: cssVarV2('layer/background/overlayPanel'),
+      boxShadow: cssVar('menuShadow'),
+      userSelect: 'none',
+      borderRadius: 24,
+      minHeight: 0,
+      padding: 0,
+      overflow: 'hidden',
+    },
+  },
+});
+
+export const slider = style({
+  display: 'flex',
+  alignItems: 'start',
+  transition: 'all 0.23s',
+});
+
+export const menuContent = style({
+  boxSizing: 'border-box',
+  fontSize: 17,
+  fontWeight: '400',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 0,
+  width: '100%',
+  flexShrink: 0,
+  padding: '13px 0px 13px 0px',
+});
+
+export const mobileMenuItem = style({
+  padding: '10px 20px',
+  borderRadius: 0,
+  ':hover': {
+    vars: {
+      [bgColor]: 'transparent',
+    },
+  },
+  ':active': {
+    vars: {
+      [bgColor]: cssVar('hoverColor'),
+    },
+  },
+  selectors: {
+    '&.danger:hover': {
+      vars: { [bgColor]: 'transparent' },
+    },
+    '&.danger:active': {
+      vars: { [bgColor]: cssVar('backgroundErrorColor') },
+    },
+    '&.warning:hover': {
+      vars: { [bgColor]: 'transparent' },
+    },
+    '&.warning:active': {
+      vars: { [bgColor]: cssVar('backgroundWarningColor') },
+    },
+  },
+});
+
+export const backButton = style({
+  height: 42,
+  alignSelf: 'start',
+  fontWeight: 600,
+  fontSize: 17,
+  paddingLeft: 0,
+  marginLeft: 20,
+});

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

@@ -0,0 +1,55 @@
+import { ArrowRightSmallPlusIcon } from '@blocksuite/icons/rc';
+import { Slot } from '@radix-ui/react-slot';
+import { type MouseEvent, useCallback, useContext } from 'react';
+
+import type { MenuSubProps } from '../menu.types';
+import { useMenuItem } from '../use-menu-item';
+import { MobileMenuContext } from './context';
+
+export const MobileMenuSub = ({
+  children: propsChildren,
+  items,
+  triggerOptions,
+  subContentOptions: contentOptions = {},
+}: MenuSubProps) => {
+  const {
+    className,
+    children,
+    otherProps: { onClick, ...otherTriggerOptions },
+  } = useMenuItem({
+    ...triggerOptions,
+    children: propsChildren,
+    suffixIcon: <ArrowRightSmallPlusIcon />,
+  });
+
+  return (
+    <MobileMenuSubRaw
+      onClick={onClick}
+      items={items}
+      subContentOptions={contentOptions}
+    >
+      <div className={className} {...otherTriggerOptions}>
+        {children}
+      </div>
+    </MobileMenuSubRaw>
+  );
+};
+
+export const MobileMenuSubRaw = ({
+  onClick,
+  children,
+  items,
+  subContentOptions: contentOptions = {},
+}: MenuSubProps & { onClick?: (e: MouseEvent<HTMLDivElement>) => void }) => {
+  const { setSubMenus } = useContext(MobileMenuContext);
+
+  const onItemClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      onClick?.(e);
+      setSubMenus(prev => [...prev, { items, contentOptions }]);
+    },
+    [contentOptions, items, onClick, setSubMenus]
+  );
+
+  return <Slot onClick={onItemClick}>{children}</Slot>;
+};