Reactで、入れ子になったドロップダウンメニューを作る方法

export type MenuItem = {
  id: string;
  label: string;
  children?: MenuItem[]; // あれば、この項目からサブメニューが開く
};

export const menuItems: MenuItem[] = [
  { id: 'new', label: '新規作成' },
  { id: 'open', label: '開く' },
  {
    id: 'export',
    label: '書き出す',
    children: [
      { id: 'pdf', label: 'PDF' },
      {
        id: 'image',
        label: '画像',
        children: [
          { id: 'png', label: 'PNG' },
          { id: 'jpeg', label: 'JPEG' },
          { id: 'webp', label: 'WebP' },
        ],
      },
      { id: 'text', label: 'テキスト' },
    ],
  },
  {
    id: 'share',
    label: '共有',
    children: [
      { id: 'copy-link', label: 'リンクをコピー' },
      { id: 'mail', label: 'メールで送る' },
    ],
  },
  { id: 'delete', label: '削除' },
];

const [open, setOpen] = useState(false);
  // 開いているサブメニューの親の id を、上の階層から順に持つ。[] ならサブメニューは開いていない
  const [openPath, setOpenPath] = useState<string[]>([]);

const renderMenu = (list: MenuItem[], level: number, parents: MenuItem[]) => {
    const parent = parents.at(-1) ?? null;
    return (
      <ul
        role="menu"
        id={menuId(parent ? parent.id : 'root')}
        aria-labelledby={parent ? itemId(parent.id) : `${baseId}-button`}
        className={level === 0 ? 'menu' : 'menu submenu'}
      >
        {list.map((item) => {
          const expanded = openPath[level] === item.id;
          return (
            <li role="none" key={item.id}>
              <div
                role="menuitem"
                id={itemId(item.id)}
                tabIndex={-1}
                aria-haspopup={item.children ? 'menu' : undefined}
                aria-expanded={item.children ? expanded : undefined}
                aria-controls={item.children && expanded ? menuId(item.id) : undefined}
                onPointerEnter={(e) => handlePointerEnter(level, item, e.currentTarget)}
                onKeyDown={(e) => handleKeyDown(e, level, item, parents)}
                onClick={() => {
                  if (!item.children) return select([...parents, item]);
                  // 親の項目を押したときは、待たずにサブメニューを開く
                  cancelTimer();
                  setOpenPath((path) => [...path.slice(0, level), item.id]);
                }}
              >
                {item.label}
                {item.children && <span aria-hidden="true">▸</span>}
              </div>
              {item.children && expanded && renderMenu(item.children, level + 1, [...parents, item])}
            </li>
          );
        })}
      </ul>
    );
  };

- button "メニュー" [expanded]
- menu "メニュー":
  - menuitem "新規作成"
  - menuitem "開く"
  - menuitem "書き出す" [expanded]
  - menu "書き出す":
    - menuitem "PDF"
    - menuitem "画像"
    - menuitem "テキスト"
  - menuitem "共有"
  - menuitem "削除"

.menu li { position: relative; }
.submenu { top: -5px; left: 100%; margin: 0 0 0 2px; }

// level 階層目の項目 item に、ポインターが乗ったとき
  const handlePointerEnter = (level: number, item: MenuItem, el: HTMLElement) => {
    el.focus();
    cancelTimer();
    // 親の項目ならそのサブメニューを開き、そうでなければ、この階層より下のサブメニューを閉じる
    const update = () =>
      setOpenPath((path) => (item.children ? [...path.slice(0, level), item.id] : path.slice(0, level)));
    if (hoverDelay === 0) update();
    else timerRef.current = window.setTimeout(update, hoverDelay);
  };

hoverDelay=0: 通った項目 [共有 → リンクをコピー → メールで送る] / 最後の位置にある項目: メールで送る / 0.3秒後: 開いているメニュー: [メニュー, 共有] / フォーカス: メールで送る / 選んだ項目：（まだ選んでいません）
hoverDelay=200: 通った項目 [共有 → 画像 → テキスト] / 最後の位置にある項目: テキスト / 0.3秒後: 開いているメニュー: [メニュー, 書き出す] / フォーカス: テキスト / 選んだ項目：（まだ選んでいません）

書き出すに乗って100ms 開いているメニュー: [メニュー] / フォーカス: 書き出す / 選んだ項目：（まだ選んでいません）
書き出すに乗って250ms 開いているメニュー: [メニュー, 書き出す] / フォーカス: 書き出す / 選んだ項目：（まだ選んでいません）

共有を押した直後 開いているメニュー: [メニュー, 共有] / フォーカス: 共有 / 選んだ項目：書き出す > 画像 > PNG

// level 階層目の項目 item でキーが押されたとき。parents は、上の階層の親の項目
  const handleKeyDown = (e: KeyboardEvent<HTMLElement>, level: number, item: MenuItem, parents: MenuItem[]) => {
    const el = e.currentTarget;
    const siblings = [...el.closest('[role="menu"]')!.querySelectorAll<HTMLElement>(':scope > li > [role="menuitem"]')];
    const index = siblings.indexOf(el);
    const parent = parents.at(-1);
    switch (e.key) {
      case 'ArrowDown':
        siblings[(index + 1) % siblings.length].focus();
        break;
      case 'ArrowUp':
        siblings[(index - 1 + siblings.length) % siblings.length].focus();
        break;
      case 'Enter':
      case ' ':
      case 'ArrowRight':
        if (!item.children) {
          if (e.key === 'ArrowRight') return;
          select([...parents, item]);
          break;
        }
        // サブメニューを開き、その最初の項目にフォーカスを移す
        cancelTimer();
        flushSync(() => setOpenPath([...openPath.slice(0, level), item.id]));
        focusFirstIn(menuId(item.id));
        break;
      case 'ArrowLeft':
      case 'Escape':
        cancelTimer();
        if (!parent) {
          if (e.key === 'Escape') closeAll(true);
          return;
        }
        // 1つ上の階層へ戻り、開いていたサブメニューの親にフォーカスを移す
        setOpenPath(openPath.slice(0, level - 1));
        document.getElementById(itemId(parent.id))?.focus();
        break;
      case 'Tab':
        closeAll(false);
        return; // 既定の動き（次の要素へ移る）は止めない
      default:
        return;
    }
    e.preventDefault();
  };

ArrowDown  開いているメニュー: [メニュー] / フォーカス: 新規作成 / 選んだ項目：書き出す > 画像 > PNG
ArrowUp    開いているメニュー: [メニュー] / フォーカス: 削除 / 選んだ項目：書き出す > 画像 > PNG
ArrowDown  開いているメニュー: [メニュー] / フォーカス: 新規作成 / 選んだ項目：書き出す > 画像 > PNG
ArrowDown  開いているメニュー: [メニュー] / フォーカス: 開く / 選んだ項目：書き出す > 画像 > PNG
ArrowDown  開いているメニュー: [メニュー] / フォーカス: 書き出す / 選んだ項目：書き出す > 画像 > PNG
ArrowRight 開いているメニュー: [メニュー, 書き出す] / フォーカス: PDF / 選んだ項目：書き出す > 画像 > PNG
ArrowDown  開いているメニュー: [メニュー, 書き出す] / フォーカス: 画像 / 選んだ項目：書き出す > 画像 > PNG
ArrowRight 開いているメニュー: [メニュー, 書き出す, 画像] / フォーカス: PNG / 選んだ項目：書き出す > 画像 > PNG
ArrowLeft  開いているメニュー: [メニュー, 書き出す] / フォーカス: 画像 / 選んだ項目：書き出す > 画像 > PNG
Escape     開いているメニュー: [メニュー] / フォーカス: 書き出す / 選んだ項目：書き出す > 画像 > PNG
Escape     開いているメニュー: [] / フォーカス: メニュー / 選んだ項目：書き出す > 画像 > PNG

Space      開いているメニュー: [] / フォーカス: メニュー / 選んだ項目：共有 > リンクをコピー

Tab        開いているメニュー: [] / フォーカス: メニューの次のボタン / 選んだ項目：共有 > リンクをコピー

return (
    <div className="dropdown" ref={rootRef}>
      <button
        ref={buttonRef}
        id={`${baseId}-button`}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={open ? menuId('root') : undefined}
        onClick={() => (open ? closeAll(false) : openRoot())}
        onKeyDown={(e) => {
          if (!open && e.key === 'ArrowDown') {
            e.preventDefault();
            openRoot();
          }
        }}
      >
        {label}
      </button>
      {open && renderMenu(items, 0, [])}
    </div>
  );

// メニューの外を押したら、全部閉じる
  useEffect(() => {
    if (!open) return;
    const onPointerDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) closeAll(false);
    };
    document.addEventListener('pointerdown', onPointerDown);
    return () => document.removeEventListener('pointerdown', onPointerDown);
  }, [open]);

PNG を押した 開いているメニュー: [] / フォーカス: メニュー / 選んだ項目：書き出す > 画像 > PNG
外を押した 開いているメニュー: [] / フォーカス: body（どこにもない） / 選んだ項目：書き出す > 画像 > PNG

const closeAll = (returnFocus: boolean) => {
    cancelTimer();
    setOpen(false);
    setOpenPath([]);
    if (returnFocus) buttonRef.current?.focus();
  };