Reactで、2つの一覧の間で項目を移すトランスファーリストの作り方

export type Item = { id: string; label: string };

// 表に出す列の候補。この並び順を「元の順番」として使う
export const columns: Item[] = [
  { id: 'name', label: '名前' },
  { id: 'kana', label: 'ふりがな' },
  { id: 'email', label: 'メール' },
  { id: 'phone', label: '電話番号' },
  { id: 'dept', label: '部署' },
  { id: 'role', label: '役職' },
  { id: 'joined', label: '入社日' },
];

import { useState } from 'react';
import { ListPanel } from './ListPanel';
import type { Item } from './items';

type Side = 'left' | 'right';
type Props = { items: Item[]; titles: Record<Side, string> };

export function TransferList({ items, titles }: Props) {
  // 右にある項目の id だけを持つ。左右の一覧は、元の配列から毎回作る
  const [rightIds, setRightIds] = useState<ReadonlySet<string>>(new Set());
  const [checked, setChecked] = useState<ReadonlySet<string>>(new Set());
  const [query, setQuery] = useState<Record<Side, string>>({ left: '', right: '' });
  const [message, setMessage] = useState('');

  const sideOf = (item: Item): Side => (rightIds.has(item.id) ? 'right' : 'left');
  const all = (side: Side) => items.filter((item) => sideOf(item) === side);
  const visible = (side: Side) => all(side).filter((item) => item.label.includes(query[side]));

  // 移すのは、移す元の一覧で「見えていて」チェックが入っている項目だけ
  const movable = (from: Side) => visible(from).filter((item) => checked.has(item.id));

  function move(from: Side, targets: Item[]) {
    const to: Side = from === 'left' ? 'right' : 'left';
    const nextRight = new Set(rightIds);
    const nextChecked = new Set(checked);
    for (const item of targets) {
      if (to === 'right') nextRight.add(item.id);
      else nextRight.delete(item.id);
      nextChecked.delete(item.id); // 移した項目のチェックは外す
    }
    setRightIds(nextRight);
    setChecked(nextChecked);
    setMessage(`${targets.length}件を「${titles[to]}」へ移しました`);
  }

  function toggle(id: string) {
    const next = new Set(checked);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setChecked(next);
  }

  const panel = (side: Side) => (
    <ListPanel
      title={titles[side]}
      items={visible(side)}
      total={all(side).length}
      checked={checked}
      onToggle={toggle}
      query={query[side]}
      onQuery={(q) => setQuery({ ...query, [side]: q })}
    />
  );

  return (
    <div className="transfer">
      {panel('left')}
      {/* 検証した Chromium では、disabled 属性だと押して無効になったボタンからフォーカスが外れたので aria-disabled にする */}
      <div className="buttons">
        <button
          type="button"
          aria-label={`選んだ項目を「${titles.right}」へ移す`}
          aria-disabled={movable('left').length === 0}
          onClick={() => movable('left').length > 0 && move('left', movable('left'))}
        >
          &gt;
        </button>
        <button
          type="button"
          aria-label={`選んだ項目を「${titles.left}」へ戻す`}
          aria-disabled={movable('right').length === 0}
          onClick={() => movable('right').length > 0 && move('right', movable('right'))}
        >
          &lt;
        </button>
      </div>
      {panel('right')}
      <p role="status" className="status">{message}</p>
    </div>
  );
}

右の「部署」と左の「役職」にチェック
  → 表示しない列[☐ふりがな ☐メール ☐電話番号 ☑役職 ☐入社日] 5件中 1件を選択 | > < | 表示する列[☐名前 ☑部署] 2件中 1件を選択 | 状態: 2件を「表示する列」へ移しました
> を押す
  → 表示しない列[☐ふりがな ☐メール ☐電話番号 ☐入社日] 4件中 0件を選択 | >(無効) < | 表示する列[☐名前 ☑部署 ☐役職] 3件中 1件を選択 | 状態: 1件を「表示する列」へ移しました

import type { Item } from './items';

type Props = {
  title: string;
  items: Item[]; // 絞り込んだあとの、画面に出す項目
  total: number;
  checked: ReadonlySet<string>;
  onToggle: (id: string) => void;
  query: string;
  onQuery: (q: string) => void;
};

export function ListPanel({ title, items, total, checked, onToggle, query, onQuery }: Props) {
  const count = items.filter((item) => checked.has(item.id)).length;
  return (
    <fieldset className="panel">
      <legend>{title}</legend>
      <input
        type="search"
        aria-label={`${title}を絞り込む`}
        placeholder="絞り込み"
        value={query}
        onChange={(e) => onQuery(e.target.value)}
      />
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <label>
              <input
                type="checkbox"
                checked={checked.has(item.id)}
                onChange={() => onToggle(item.id)}
              />
              {item.label}
            </label>
          </li>
        ))}
      </ul>
      <p className="count">
        {total}件中 {count}件を選択
      </p>
    </fieldset>
  );
}

const [lists, setLists] = useState<Record<Side, Item[]>>({ left: items, right: [] });

  function move(from: Side) {
    const to: Side = from === 'left' ? 'right' : 'left';
    const targets = lists[from].filter((item) => checked.has(item.id));
    setLists({
      [from]: lists[from].filter((item) => !checked.has(item.id)),
      [to]: [...lists[to], ...targets], // 移した先の末尾に足す
    } as Record<Side, Item[]>);
    setChecked(new Set());
  }

左の「名前」にチェックして > を押す
  → 表示しない列[☐ふりがな ☐電話番号 ☐役職 ☐入社日] 4件中 0件を選択 | > < | 表示する列[☐メール ☐部署 ☐名前] 3件中 0件を選択
右の「メール」にチェックして < を押す
  → 表示しない列[☐ふりがな ☐電話番号 ☐役職 ☐入社日 ☐メール] 5件中 0件を選択 | > < | 表示する列[☐部署 ☐名前] 2件中 0件を選択

左の「名前」にチェックして > を押す
  → 表示しない列[☐ふりがな ☐電話番号 ☐役職 ☐入社日] 4件中 0件を選択 | >(無効) <(無効) | 表示する列[☐名前 ☐メール ☐部署] 3件中 0件を選択 | 状態: 1件を「表示する列」へ移しました
右の「メール」にチェックして < を押す
  → 表示しない列[☐ふりがな ☐メール ☐電話番号 ☐役職 ☐入社日] 5件中 0件を選択 | >(無効) <(無効) | 表示する列[☐名前 ☐部署] 2件中 0件を選択 | 状態: 1件を「表示しない列」へ移しました

左の「メール」にチェック
  → 表示しない列[☑メール] 7件中 1件を選択 | > < | 表示する列[] 0件中 0件を選択
> を押す
  → 表示しない列[] 5件中 0件を選択 | > < | 表示する列[☐名前 ☐メール] 2件中 0件を選択

> を押す
  → 表示しない列[] 6件中 0件を選択 | >(無効) <(無効) | 表示する列[☐メール] 1件中 0件を選択 | 状態: 1件を「表示する列」へ移しました
左の絞り込みを空にする
  → 表示しない列[☑名前 ☐ふりがな ☐電話番号 ☐部署 ☐役職 ☐入社日] 6件中 1件を選択 | > <(無効) | 表示する列[☐メール] 1件中 0件を選択 | 状態: 1件を「表示する列」へ移しました

### ボタンを disabled 属性で無効にする版：キーボードだけで操作
Enter から 500ms 後のフォーカス: body（どこにもない）
続けて Tab を押したあとのフォーカス: 表示する列を絞り込む

### ボタンを aria-disabled で無効と伝える版：キーボードだけで操作
Enter から 500ms 後のフォーカス: 選んだ項目を「表示する列」へ移す
続けて Tab を押したあとのフォーカス: 選んだ項目を「表示しない列」へ戻す

- button "選んだ項目を「表示する列」へ移す" [disabled]: ">"
- button "選んだ項目を「表示しない列」へ戻す" [disabled]: <
- group "表示する列":
  - text: 表示する列
  - searchbox "表示する列を絞り込む"
  - list:
    - listitem:
      - checkbox "ふりがな"
      - text: ふりがな
  - paragraph: 1件中 0件を選択
- status: 1件を「表示する列」へ移しました