Reactで、右クリックしたときに独自のメニューを出す方法

type Menu = { x: number; y: number; name: string };

export function App() {
  const [files, setFiles] = useState(['報告書.pdf', '写真.png', 'メモ.txt']);
  const [stars, setStars] = useState<string[]>([]);
  const [menu, setMenu] = useState<Menu | null>(null);
  const [log, setLog] = useState('');
  const opener = useRef<HTMLElement | null>(null);

  function openMenu(e: React.MouseEvent<HTMLElement>, name: string) {
    e.preventDefault(); // ブラウザのメニューを出さない
    opener.current = e.currentTarget;
    setMenu({ x: e.clientX, y: e.clientY, name });
  }

  // 閉じたら、開く前の行にフォーカスを戻す
  const closeMenu = useCallback(() => {
    setMenu(null);
    opener.current?.focus();
  }, []);

  return (
    <main>
      <ul className="files">
        {files.map((name) => (
          <li
            key={name}
            tabIndex={0}
            className={menu?.name === name ? 'selected' : undefined}
            onContextMenu={(e) => openMenu(e, name)}
          >
            {stars.includes(name) ? `★ ${name}` : name}
          </li>
        ))}
      </ul>
      <p data-testid="log">{log}</p>
      {menu && (
        <ContextMenu
          x={menu.x}
          y={menu.y}
          onClose={closeMenu}
          items={[
            { label: '開く', onSelect: () => setLog(`「${menu.name}」を開く`) },
            {
              label: 'お気に入り',
              onSelect: () =>
                setStars((prev) =>
                  prev.includes(menu.name) ? prev.filter((s) => s !== menu.name) : [...prev, menu.name],
                ),
            },
            {
              label: '削除',
              onSelect: () => setFiles((prev) => prev.filter((f) => f !== menu.name)),
            },
          ]}
        />
      )}
    </main>
  );
}

  [ページ] contextmenu button=2 clientX=80 clientY=68 target=写真.png defaultPrevented=true
「写真.png」を右クリック: メニュー left=80 top=68 right=230 bottom=190.78125
「開く」をクリック: メニュー なし / 表示 「写真.png」を開く
  [ページ] contextmenu button=2 clientX=80 clientY=26 target=報告書.pdf defaultPrevented=true
「報告書.pdf」で「お気に入り」: 一覧 [★ 報告書.pdf, 写真.png, メモ.txt]
  [ページ] contextmenu button=2 clientX=200 clientY=400 target=★ 報告書.pdf写真.pngメモ.txt「写真.png」を開く defaultPrevented=false
行のないところを右クリック: メニュー なし

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

export type MenuItem = { label: string; onSelect: () => void };

type Props = {
  x: number;
  y: number;
  items: MenuItem[];
  onClose: () => void;
};

const MARGIN = 8;

export function ContextMenu({ x, y, items, onClose }: Props) {
  const ref = useRef<HTMLUListElement>(null);
  const [pos, setPos] = useState({ left: x, top: y });

  // 描く前に大きさを測り、画面からはみ出すなら左や上に開く
  useLayoutEffect(() => {
    const { width, height } = ref.current!.getBoundingClientRect();
    const left = x + width > window.innerWidth - MARGIN ? Math.max(MARGIN, x - width) : x;
    const top = y + height > window.innerHeight - MARGIN ? Math.max(MARGIN, y - height) : y;
    setPos({ left, top });
  }, [x, y]);

  // 開いたら、最初の項目にフォーカスを移す
  useEffect(() => {
    ref.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
  }, [x, y]);

  // （閉じる処理と、キーボードの処理は次の節）

  return createPortal(
    <ul
      ref={ref}
      role="menu"
      className="context-menu"
      style={{ left: pos.left, top: pos.top }}
      onKeyDown={handleKeyDown}
      onContextMenu={(e) => e.preventDefault()}
    >
      {items.map((item) => (
        <li key={item.label} role="none">
          <button
            type="button"
            role="menuitem"
            tabIndex={-1}
            onClick={() => {
              onClose();
              item.onSelect();
            }}
          >
            {item.label}
          </button>
        </li>
      ))}
    </ul>,
    document.body,
  );
}

.context-menu { position: fixed; z-index: 10; list-style: none; margin: 0; padding: 4px;
  min-width: 140px; background: #fff; border: 1px solid #c9d3d8; border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); }

  [ページ] contextmenu button=2 clientX=365 clientY=68 target=写真.png defaultPrevented=true
右の端（行の右端）を右クリック: メニュー left=215 top=68 right=365 bottom=190.78125
  [ページ] contextmenu button=2 clientX=365 clientY=625 target=メモ.txt defaultPrevented=true
右下の端（行の右端、画面の下の端）を右クリック: メニュー left=215 top=502.21875 right=365 bottom=625

// メニューの外を押す、Esc、スクロール、画面の大きさの変化で閉じる
  useEffect(() => {
    function handlePointerDown(e: PointerEvent) {
      if (!ref.current?.contains(e.target as Node)) onClose();
    }
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === 'Escape') onClose();
    }
    document.addEventListener('pointerdown', handlePointerDown, true);
    document.addEventListener('keydown', handleKeyDown);
    window.addEventListener('scroll', onClose, true);
    window.addEventListener('resize', onClose);
    return () => {
      document.removeEventListener('pointerdown', handlePointerDown, true);
      document.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('scroll', onClose, true);
      window.removeEventListener('resize', onClose);
    };
  }, [onClose]);

$ node test-box.mjs /
開いた直後のメニュー: 1
箱の scrollTop: 100 / ページの scrollY: 0 / 箱をスクロールしたあとのメニュー: 0

$ node test-box.mjs /nocapture/
開いた直後のメニュー: 1
箱の scrollTop: 100 / ページの scrollY: 0 / 箱をスクロールしたあとのメニュー: 1

メニューの外をクリック: メニュー なし / フォーカス body
Esc: メニュー なし / フォーカス li「写真.png」
ホイールでスクロール: メニュー なし / フォーカス li「写真.png」
画面の大きさを変える: メニュー なし / フォーカス li「写真.png」
  [ページ] contextmenu button=2 clientX=155 clientY=129 target=お気に入り defaultPrevented=true
メニューの上で右クリック: メニュー left=80 top=68 right=230 bottom=190.78125 / フォーカス menuitem「お気に入り」

  [ページ] contextmenu button=2 clientX=50 clientY=68 target=写真.png defaultPrevented=true
「写真.png」を右クリック: メニュー left=50 top=68 right=200 bottom=190.78125
  [ページ] contextmenu button=2 clientX=220 clientY=121 target=メモ.txt defaultPrevented=true
続けて「メモ.txt」を右クリック: メニュー left=220 top=121 right=370 bottom=243.78125

  [ページ] contextmenu button=2 clientX=80 clientY=26 target=報告書.pdf defaultPrevented=true
「報告書.pdf」を右クリック: メニュー left=80 top=26 right=230 bottom=148.78125
  [ページ] contextmenu button=2 clientX=300 clientY=68 target=メモ.txt defaultPrevented=true
selected の行: メモ.txt
続けて「メモ.txt」を右クリック: メニュー left=150 top=68 right=300 bottom=190.78125
「開く」をクリック: メニュー なし / 表示 「メモ.txt」を開く

「報告書.pdf」にフォーカス: フォーカス li「★ 報告書.pdf」
「報告書.pdf」の行の位置: left=20 right=370 top=16 bottom=58.59375
  [ページ] contextmenu button=-1 clientX=195 clientY=37 target=★ 報告書.pdf defaultPrevented=true
Shift+F10 を押す: メニュー left=195 top=37 right=345 bottom=159.78125 / フォーカス menuitem「開く」
  [ページ] contextmenu button=-1 clientX=195 clientY=37 target=★ 報告書.pdf defaultPrevented=true
ContextMenu を押す: メニュー left=195 top=37 right=345 bottom=159.78125 / フォーカス menuitem「開く」

// 上下の矢印キー、Home、End で項目を移る（端まで来たら反対の端へ）
  function handleKeyDown(e: React.KeyboardEvent) {
    const els = [...ref.current!.querySelectorAll<HTMLElement>('[role="menuitem"]')];
    const i = els.indexOf(document.activeElement as HTMLElement);
    let next = -1;
    if (e.key === 'ArrowDown') next = (i + 1) % els.length;
    else if (e.key === 'ArrowUp') next = (i - 1 + els.length) % els.length;
    else if (e.key === 'Home') next = 0;
    else if (e.key === 'End') next = els.length - 1;
    // Tab はメニューを閉じて、ページの次の要素へ進ませる
    else if (e.key === 'Tab') onClose();
    if (next >= 0) {
      e.preventDefault();
      els[next].focus();
    }
  }

ArrowDown: フォーカス menuitem「お気に入り」
ArrowDown: フォーカス menuitem「削除」
ArrowDown: フォーカス menuitem「開く」
ArrowUp: フォーカス menuitem「削除」
End: フォーカス menuitem「削除」
Home: フォーカス menuitem「開く」
Tab: メニュー なし / フォーカス li「写真.png」

「お気に入り」で Enter: フォーカス li「報告書.pdf」 / 一覧 [報告書.pdf, 写真.png, メモ.txt]
「写真.png」で「削除」: フォーカス body / 一覧 [報告書.pdf, メモ.txt]