Reactで、ドラッグしてパネルの幅を変えられるようにする方法

import {
  useEffect,
  useRef,
  useState,
  type KeyboardEvent,
  type PointerEvent,
  type ReactNode,
} from 'react';

const MIN = 160;
const MAX = 480;
const STEP = 16;
const STORAGE_KEY = 'sidebar-width';

const clamp = (width: number) => Math.min(MAX, Math.max(MIN, width));

function readSavedWidth() {
  const saved = Number(localStorage.getItem(STORAGE_KEY));
  return saved > 0 ? clamp(saved) : 240;
}

type Props = {
  title: string;
  sidebar: ReactNode;
  children: ReactNode;
};

export function ResizablePanels({ title, sidebar, children }: Props) {
  const [width, setWidth] = useState(readSavedWidth);
  const [dragging, setDragging] = useState(false);
  // ドラッグを始めたときのマウスの位置と幅。描画には使わないので ref に持つ
  const start = useRef({ x: 0, width: 0 });

  // ドラッグ中は保存せず、手を離したあとに1回だけ保存する
  useEffect(() => {
    if (!dragging) localStorage.setItem(STORAGE_KEY, String(width));
  }, [width, dragging]);

  const handlePointerDown = (e: PointerEvent<HTMLDivElement>) => {
    if (e.button !== 0) return; // 左ボタン（タッチとペンも 0）だけで始める
    e.preventDefault(); // 文字の選択が始まらないようにする
    e.currentTarget.setPointerCapture(e.pointerId);
    start.current = { x: e.clientX, width };
    setDragging(true);
  };

  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
    setWidth(clamp(start.current.width + e.clientX - start.current.x));
  };

  // pointerup でも pointercancel でも、キャプチャが外れるとここに来る
  const handleLostPointerCapture = () => setDragging(false);

  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    const keys: Record<string, number> = {
      ArrowLeft: width - STEP,
      ArrowRight: width + STEP,
      Home: MIN,
      End: MAX,
    };
    if (!(e.key in keys)) return;
    e.preventDefault();
    setWidth(clamp(keys[e.key]));
  };

  return (
    <div className={dragging ? 'panels dragging' : 'panels'}>
      <aside id="sidebar" style={{ width }}>
        <h2 id="sidebar-title">{title}</h2>
        {sidebar}
      </aside>
      <div
        role="separator"
        aria-orientation="vertical"
        aria-labelledby="sidebar-title"
        aria-controls="sidebar"
        aria-valuenow={width}
        aria-valuemin={MIN}
        aria-valuemax={MAX}
        tabIndex={0}
        className="handle"
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onLostPointerCapture={handleLostPointerCapture}
        onKeyDown={handleKeyDown}
      />
      <main>{children}</main>
    </div>
  );
}

.panels {
  display: flex;
  height: 100vh;
}
.panels aside {
  flex: none;
  overflow: auto;
}
.handle {
  flex: none;
  width: 8px;
  cursor: col-resize;
  touch-action: none; /* タッチで動かしたときに、ブラウザのスクロールに取られないようにする */
  background: #d7eef3;
}
.handle:hover,
.handle:focus-visible,
.panels.dragging .handle {
  background: #00c8e8;
}
.panels main {
  flex: 1;
  overflow: auto; /* 長い行があっても main が縮み、はみ出た分は main の中でスクロールする */
}
/* ドラッグ中は、マウスが枠から外れても形を保ち、文字を選ばせない */
.panels.dragging {
  cursor: col-resize;
  user-select: none;
}

<ResizablePanels title="目次" sidebar={<ul>{/* 目次の項目 */}</ul>}>
  <h1>本文</h1>
  {/* 本文 */}
</ResizablePanels>

--- 2. setPointerCapture を呼ばない版 ---
最初の幅: 240
右へ100px（10回に分けて動かす）: 240
右へ100px（1回で動かす）: 240
右へ100px（1pxずつ100回に分けて動かす）: 340
1回で動かした先にある要素: MAIN

--- 1. ResizablePanels で、ゆっくりと速くドラッグする ---
最初の幅: 240 aria-valuenow: 240
右へ100px（10回に分けて動かす）: 340
左へ100px（1回で動かす）: 240
右へ300px（1回で動かす）: 480 aria-valuenow: 480

--- 4. ドラッグ中に文字が選ばれるか（取っ手から本文の上までドラッグ） ---
キャプチャなし・preventDefault なし・user-select なし: 選ばれた文字数=68
キャプチャなし・preventDefault だけ: 選ばれた文字数=0
キャプチャなし・user-select: none だけ: 選ばれた文字数=0
setPointerCapture だけ: 選ばれた文字数=0
ResizablePanels（3つともあり）: 選ばれた文字数=0

--- 8. タッチで動かす（CDP の Input.dispatchTouchEvent で再現） ---
touch-action を指定しない版: touch-action=auto 指を右へ100px動かしたあとの幅=260
  取っ手に届いたイベント: pointerdown×1 → pointermove×2 → pointercancel×1 → lostpointercapture×1
ResizablePanels: touch-action=none 指を右へ100px動かしたあとの幅=340
  取っ手に届いたイベント: pointerdown×1 → pointermove×10 → pointerup×1 → lostpointercapture×1

--- 7. main の overflow を変えた版（長い行がある） ---
overflow: visible: aside=480 main=1144 ページの横幅=1632 画面の幅=1000
overflow: visible と min-width: 0: aside=480 main=512 ページの横幅=1608 画面の幅=1000
ResizablePanels（overflow: auto）: aside=480 main=512 ページの横幅=1000 画面の幅=1000

--- 5. キーボードで動かす ---
Tab でフォーカスした要素: separator
ArrowRight: 幅=256 aria-valuenow=256
ArrowRight: 幅=272 aria-valuenow=272
ArrowLeft: 幅=256 aria-valuenow=256
Home: 幅=160 aria-valuenow=160
ArrowLeft: 幅=160 aria-valuenow=160
End: 幅=480 aria-valuenow=480
ArrowRight: 幅=480 aria-valuenow=480
アクセシビリティツリー: - separator "目次"

--- 6. 幅を保存して、読み込み直しても残る ---
ドラッグ1回（12回動かす）で保存した回数: 1 ["sidebar-width=360"]
読み込み直したあとの幅: 360