Build a Selectable Cell Grid (drag to select)

import { useEffect, useMemo, useRef, useState } from "react";
import { ROWS, COLS, key, rectKeys, combine, cellAt } from "./src/utils/selection";

export default function App() {
  const [committed, setCommitted] = useState(() => new Set());
  // { anchor, current, mode } while the pointer is down
  const [drag, setDrag] = useState(null);
  const [focus, setFocus] = useState([0, 0]); // roving tabindex position
  // corner that Shift+Arrow extends from
  const [anchor, setAnchor] = useState([0, 0]);
  const gridRef = useRef(null);
  const cellRefs = useRef({});
  const rectRef = useRef(null); // grid box measured at pointerdown

  const shown = useMemo(() => combine(committed, drag), [committed, drag]);

  // Move DOM focus with the roving tabindex, but only once the grid has focus.
  useEffect(() => {
    if (gridRef.current.contains(document.activeElement))
      cellRefs.current[key(...focus)].focus();
  }, [focus]);

  function onPointerDown(e) {
    if (e.button !== 0) return;
    e.preventDefault(); // no text selection; we move focus ourselves
    rectRef.current = gridRef.current.getBoundingClientRect();
    const cell = cellAt(rectRef.current, e.clientX, e.clientY);
    const additive = e.ctrlKey || e.metaKey;
    const mode = !additive
      ? "replace"
      : committed.has(key(...cell))
        ? "subtract"
        : "add";
    // Capture: moves keep arriving here even when the pointer leaves the grid.
    if (gridRef.current.setPointerCapture)
      gridRef.current.setPointerCapture(e.pointerId);
    setDrag({ anchor: cell, current: cell, mode });
    setAnchor(cell);
    setFocus(cell);
    cellRefs.current[key(...cell)].focus();
  }
  function onPointerMove(e) {
    if (!drag) return;
    const cell = cellAt(rectRef.current, e.clientX, e.clientY);
    if (cell[0] !== drag.current[0] || cell[1] !== drag.current[1]) {
      // re-render only when the cell changes
      setDrag({ ...drag, current: cell });
      setFocus(cell);
    }
  }
  function onPointerUp() {
    if (!drag) return;
    setCommitted(shown);
    setDrag(null);
  }

  function onKeyDown(e) {
    if (e.key === "Escape") {
      e.preventDefault();
      if (drag)
        setDrag(null); // cancel the drag in progress
      else setCommitted(new Set());
      return;
    }
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
      e.preventDefault();
      setCommitted(new Set(rectKeys([0, 0], [ROWS - 1, COLS - 1])));
      return;
    }
    if (e.key === " ") {
      e.preventDefault();
      const k = key(...focus);
      const next = new Set(committed);
      next.has(k) ? next.delete(k) : next.add(k);
      setCommitted(next);
      setAnchor(focus);
      return;
    }
    const d = {
      ArrowUp: [-1, 0],
      ArrowDown: [1, 0],
      ArrowLeft: [0, -1],
      ArrowRight: [0, 1],
    }[e.key];
    if (!d) return;
    e.preventDefault();
    const to = [
      Math.min(ROWS - 1, Math.max(0, focus[0] + d[0])),
      Math.min(COLS - 1, Math.max(0, focus[1] + d[1])),
    ];
    setFocus(to);
    if (e.shiftKey) setCommitted(new Set(rectKeys(anchor, to)));
    else setAnchor(to);
  }

  return (
    <main className="app">
      <h1>Seat picker</h1>
      <p className="hint" id="grid-help">
        Drag to select a block. Ctrl or Cmd + drag adds (or removes, if you
        start on a selected seat). Keyboard: arrows move, Shift + arrows extend,
        Space toggles, Ctrl + A all, Escape clears.
      </p>
      <div
        ref={gridRef}
        className={"grid" + (drag ? " dragging" : "")}
        role="grid"
        aria-multiselectable="true"
        aria-label="Seats"
        aria-describedby="grid-help"
        style={{ gridTemplateColumns: "repeat(" + COLS + ", 1fr)" }}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={() => setDrag(null)}
        onKeyDown={onKeyDown}
      >
        {Array.from({ length: ROWS }, (_, r) => (
          <div role="row" key={r} className="row">
            {Array.from({ length: COLS }, (_, c) => {
              const k = key(r, c);
              const on = shown.has(k);
              return (
                <div
                  key={k}
                  ref={(el) => (cellRefs.current[k] = el)}
                  role="gridcell"
                  data-cell={k}
                  aria-selected={on}
                  aria-label={"Row " + (r + 1) + ", seat " + (c + 1)}
                  tabIndex={focus[0] === r && focus[1] === c ? 0 : -1}
                  className={
                    "cell" +
                    (on ? " on" : "") +
                    (drag && on !== committed.has(k) ? " preview" : "")
                  }
                />
              );
            })}
          </div>
        ))}
      </div>
      <p role="status" data-testid="count">
        {shown.size} {shown.size === 1 ? "seat" : "seats"} selected
      </p>
    </main>
  );
}