Reactで、detailsとsummaryを使ってアコーディオンを作る方法

// details の中身は、閉じていても描画されたまま
export function KeepInput() {
  return (
    <details>
      <summary>メモを書く</summary>
      <input aria-label="メモ" />
    </details>
  );
}

KeepInput: 閉じて開いたあとの入力欄 "かつお"
ConditionalInput: 閉じて開いたあとの入力欄 ""

// onToggle を書かずに open だけを渡した版
export function OpenWithoutToggle() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button type="button" onClick={() => setOpen(false)}>
        閉じる
      </button>
      <details open={open}>
        <summary>ごはんの時間</summary>
        <p>朝7時と夜7時の2回です。</p>
      </details>
      <output data-testid="state">open: {String(open)}</output>
    </div>
  );
}

最初: DOM 閉 / open: false
summary をクリック: DOM 開 / open: false
「閉じる」をクリック: DOM 開 / open: false

import { useState, type ReactNode } from 'react';

type Item = {
  id: string;
  title: string;
  body: ReactNode;
};

type Props = {
  items: Item[];
  // 同じ name の details は、1つだけ開く
  name?: string;
};

export function Accordion({ items, name }: Props) {
  const [openIds, setOpenIds] = useState<string[]>([]);

  const setOpen = (id: string, open: boolean) => {
    setOpenIds((prev) => {
      if (open) return prev.includes(id) ? prev : [...prev, id];
      return prev.filter((x) => x !== id);
    });
  };

  return (
    <div className="accordion">
      <div className="toolbar">
        {/* name で1つだけ開く場合は、まとめて開けない */}
        {!name && (
          <button type="button" onClick={() => setOpenIds(items.map((item) => item.id))}>
            すべて開く
          </button>
        )}
        <button type="button" onClick={() => setOpenIds([])}>
          すべて閉じる
        </button>
      </div>
      {items.map((item) => (
        <details
          key={item.id}
          name={name}
          open={openIds.includes(item.id)}
          onToggle={(event) => setOpen(item.id, event.currentTarget.open)}
        >
          <summary>{item.title}</summary>
          <div className="body">{item.body}</div>
        </details>
      ))}
      <output data-testid="state">openIds: [{openIds.join(', ')}]</output>
    </div>
  );
}

最初: DOM 閉 閉 閉 / openIds: []
「ごはんの時間」をクリック: DOM 開 閉 閉 / openIds: [food]
    toggle 「ごはんの時間」 closed→open（このときの openIds: []）
「爪切り」をクリック: DOM 開 閉 開 / openIds: [food, nail]
「すべて開く」をクリック: DOM 開 開 開 / openIds: [food, toilet, nail]
    toggle 「トイレの掃除」 closed→open（このときの openIds: [food, toilet, nail]）
「すべて閉じる」をクリック: DOM 閉 閉 閉 / openIds: []
「トイレの掃除」で Enter: DOM 閉 開 閉 / openIds: [toilet]
「トイレの掃除」で Space: DOM 閉 閉 閉 / openIds: []

[Controlled、「爪切り」を開いたあと]
  role: DisclosureTriangle / name: ごはんの時間 / expanded: false
  role: DisclosureTriangle / name: トイレの掃除 / expanded: false
  role: DisclosureTriangle / name: 爪切り / expanded: true

export function Exclusive() {
  return <Accordion items={items} name="cat-care" />;
}

最初: DOM 閉 閉 閉 / openIds: []
「ごはんの時間」をクリック: DOM 開 閉 閉 / openIds: [food]
    toggle 「ごはんの時間」 closed→open（このときの openIds: []）
「爪切り」をクリック: DOM 閉 閉 開 / openIds: [nail]
    toggle 「爪切り」 closed→open（このときの openIds: [food]）
    toggle 「ごはんの時間」 open→closed（このときの openIds: [food, nail]）
「トイレの掃除」をクリック: DOM 閉 開 閉 / openIds: [toilet]
    toggle 「トイレの掃除」 closed→open（このときの openIds: [nail]）
    toggle 「爪切り」 open→closed（このときの openIds: [nail, toilet]）
「トイレの掃除」をもう一度クリック: DOM 閉 閉 閉 / openIds: []
    toggle 「トイレの掃除」 open→closed（このときの openIds: [toilet]）

「すべて開く」をクリック: DOM 閉 閉 開 / openIds: [nail]
    toggle 「ごはんの時間」 closed→closed（このときの openIds: [food, toilet, nail]）
    toggle 「爪切り」 closed→open（このときの openIds: [toilet, nail]）
    toggle 「トイレの掃除」 closed→closed（このときの openIds: [toilet, nail]）

1→2→3 の順に open = true: 閉 閉 開
HTML で3つとも open を書いた場合: 開 閉 閉

[Exclusive、「爪切り」を開いたあと]
  role: DisclosureTriangleGrouped / name: ごはんの時間 / expanded: false
  role: DisclosureTriangleGrouped / name: トイレの掃除 / expanded: false
  role: DisclosureTriangleGrouped / name: 爪切り / expanded: true

:root {
  interpolate-size: allow-keywords;
}
.accordion summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 12px 8px;
  cursor: pointer;
  font-weight: bold;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin: 4px;
  border-right: 2px solid #067a98;
  border-bottom: 2px solid #067a98;
  transform: rotate(45deg);
  transition: transform 200ms;
}
.accordion details[open] > summary::after {
  transform: rotate(-135deg);
}
.accordion details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 300ms,
    content-visibility 300ms allow-discrete;
}
.accordion details[open]::details-content {
  block-size: auto;
}

interpolate-size: allow-keywords: 閉 49px / 0ms 49px / 150ms 104px / 400ms 117px
interpolate-size: numeric-only: 閉 49px / 0ms 49px / 150ms 117px / 400ms 117px