Radix UIを利用してエディターのコンポーネントを実装した話

import {css} from '@emotion/react';
import * as RadixPopover from '@radix-ui/react-popover';
import type {ReactNode} from 'react';

const defaultSideOffset = 4;

type SideType = 'top' | 'right' | 'bottom' | 'left';
type AlignType = 'start' | 'center' | 'end';

type Props = {
  /** popoverを表示させるトリガー */
  readonly trigger: ReactNode;
  /** popoverの中身 */
  readonly children: ReactNode;
  /** popoverを開いた状態にするか否か */
  readonly isOpen?: boolean;
  /** popoverをopenの状態を切り替えす関数 */
  readonly setIsOpen?: (isOpen: boolean) => void;
  /** popoverの外側がクリックされたときのイベント */
  readonly onInteractOutside?: () => void;
  /** popoverを表示させる位置(横軸 | default: top) */
  readonly side?: SideType;
  /** popoverを表示させる位置(縦軸 | default: start) */
  readonly align?: AlignType;
  /** triggerとpopoverのx軸の距離(px) */
  readonly sideOffset?: number;
  /** triggerとpopoverのy軸の距離(px) */
  readonly alignOffset?: number;
  /** popoverを最初からopenの状態にするか */
  readonly isDefaultOpen?: boolean;
};

export function Popover({
  trigger,
  children,
  isOpen,
  setIsOpen,
  onInteractOutside,
  side = 'top',
  align = 'start',
  alignOffset = 0,
  sideOffset = defaultSideOffset,
  isDefaultOpen = false,
  verticalSize = 'medium',
}: Props) {
  return (
    <RadixPopover.Root
      open={isOpen}
      defaultOpen={isDefaultOpen}
      onOpenChange={setIsOpen}
    >
      <RadixPopover.Trigger asChild>{trigger}</RadixPopover.Trigger>
        <RadixPopover.Portal>
          <RadixPopover.Content
            css={[styles.popover, verticalSizeThemes[verticalSize]]}
            side={side}
            align={align}
            alignOffset={alignOffset}
            sideOffset={sideOffset}
            onInteractOutside={onInteractOutside}
          >
            {children}
          </RadixPopover.Content>
        </RadixPopover.Portal>
    </RadixPopover.Root>
  );
}

const styles = {
	...
};

import {Popover} from './components/popover';
import {
  ImageGalleryIcon,
  ImageIcon,
  ImageWithTextIcon,
  LargeImageIcon,
  MediumImageIcon,
} from './icons/image';

export function DocumentPopover() {
	return (
    <Popover
      trigger={
        <button
          type='button'
          css={styles.trigger}
          aria-label='ドキュメントのメニューを開く'
        >
          <MenuIcon aria-hidden='true' />
        </button>
      }
      side='right'
      align='start'
    >
      <ul>
        <li key='downloadFile'>
          <a
            href={filePath(fileName)}
            css={styles.button}
            target='_blank'
            rel='noreferrer'
          >
            <span css={styles.textWrapper}>
              <DownloadIcon />
              <span css={styles.buttonText}>ファイルをダウンロード</span>
            </span>
          </a>
        </li>
      </ul>		
		</Popover>
	);
}