@twoux/ui 0.0.0-stage → 0.1.0

package/src/components/data-grid.tsx

@@ -0,0 +1,213 @@
+/**
+ * TwoUX composition: an editable grid for enriching many columns (WAI-ARIA grid pattern).
+ * One tab stop; arrows move between cells, Home/End to the row's ends; Enter or F2 edits, Esc cancels,
+ * Enter saves and stays, Tab saves and moves on. Validation per column; the message shows in the status line.
+ * Pinned columns and the header stay in view while scrolling; the totals row counts only the rows shown.
+ * Optional row selection: a checkbox column (Shift+Space toggles the active row) and the bulk action bar above the header.
+ */
+import { Pencil } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Checkbox } from "./checkbox"
+import { type BulkAction, BulkActionBar } from "./data-table"
+
+export type GridColumn = {
+  id: string
+  label: string
+  /** px; pinned columns need one */
+  width: number
+  pin?: boolean
+  editable?: boolean
+  type?: "text" | "number"
+  /** Return a message to block the save. */
+  validate?: (value: string) => string | undefined
+  total?: "sum" | "average"
+}
+export type GridRow = { id: string } & Record<string, string | number>
+
+export function DataGrid({
+  columns,
+  rows,
+  onCellChange,
+  "aria-label": label,
+  selectedRowIds,
+  onSelectedRowIdsChange,
+  bulkActions,
+  noun,
+  className,
+}: {
+  columns: GridColumn[]
+  rows: GridRow[]
+  onCellChange: (rowId: string, columnId: string, value: string | number) => void
+  "aria-label": string
+  /** Selected rows. Pass with onSelectedRowIdsChange to add a checkbox column. */
+  selectedRowIds?: string[]
+  onSelectedRowIdsChange?: (ids: string[]) => void
+  /** Actions for the bulk action bar above the header while rows are selected; extras move into More. */
+  bulkActions?: BulkAction[]
+  /** Plural noun for the selection count: "2 listings selected". */
+  noun?: string
+  className?: string
+}) {
+  const selectable = !!onSelectedRowIdsChange
+  const selected = selectedRowIds ?? []
+  const setSelected = (ids: string[]) => onSelectedRowIdsChange?.(ids)
+  const toggleRow = (id: string) => setSelected(selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id])
+  const allChecked = rows.length > 0 && rows.every((r) => selected.includes(r.id)) ? true : rows.some((r) => selected.includes(r.id)) ? "indeterminate" : false
+  // The checkbox column is pinned at the left edge, so pinned data columns start after it (w-9, 36px).
+  const offset = selectable ? 36 : 0
+  const [pos, setPos] = React.useState({ r: 0, c: 0 })
+  const [editing, setEditing] = React.useState<string | null>(null)
+  const [error, setError] = React.useState<string>("")
+  const [status, setStatus] = React.useState("")
+  const grid = React.useRef<HTMLTableElement>(null)
+  const lefts = columns.reduce<number[]>((acc, c, i) => [...acc, i === 0 ? offset : acc[i - 1] + (columns[i - 1].pin ? columns[i - 1].width : 0)], [])
+  const totalsRow = columns.some((c) => c.total)
+
+  const cellEl = (r: number, c: number) => grid.current?.querySelector<HTMLElement>(`[data-cell="${r}-${c}"]`)
+  React.useEffect(() => { if (editing === null) cellEl(pos.r, pos.c)?.focus({ preventScroll: false }) }, [pos, editing])
+
+  const move = (r: number, c: number) => setPos({ r: Math.max(0, Math.min(rows.length - 1, r)), c: Math.max(0, Math.min(columns.length - 1, c)) })
+  const startEdit = (initial?: string) => {
+    const col = columns[pos.c]
+    if (!col.editable) { setStatus(`${col.label} can't be edited here.`); return }
+    setError("")
+    setEditing(initial ?? String(rows[pos.r][col.id] ?? ""))
+  }
+  const commit = (then: "stay" | "next") => {
+    const col = columns[pos.c], row = rows[pos.r]
+    const v = editing ?? ""
+    const msg = col.validate?.(v)
+    if (msg) { setError(msg); setStatus(`${col.label}: ${msg}`); return false }
+    onCellChange(row.id, col.id, col.type === "number" ? Number(v) : v)
+    setStatus(`Saved ${col.label} for ${row[columns[0].id]}.`)
+    setEditing(null)
+    if (then === "next") move(pos.r, pos.c + 1)
+    return true
+  }
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (editing !== null) {
+      if (e.key === "Escape") { e.preventDefault(); setEditing(null); setError(""); setStatus("Edit cancelled.") }
+      else if (e.key === "Enter") { e.preventDefault(); commit("stay") }
+      else if (e.key === "Tab") { e.preventDefault(); commit("next") }
+      return
+    }
+    const k = e.key
+    if (k === "ArrowRight") { e.preventDefault(); move(pos.r, pos.c + 1) }
+    else if (k === "ArrowLeft") { e.preventDefault(); move(pos.r, pos.c - 1) }
+    else if (k === "ArrowDown") { e.preventDefault(); move(pos.r + 1, pos.c) }
+    else if (k === "ArrowUp") { e.preventDefault(); move(pos.r - 1, pos.c) }
+    else if (k === "Home") { e.preventDefault(); move(e.ctrlKey ? 0 : pos.r, 0) }
+    else if (k === "End") { e.preventDefault(); move(e.ctrlKey ? rows.length - 1 : pos.r, columns.length - 1) }
+    else if (k === " " && e.shiftKey && selectable) { e.preventDefault(); toggleRow(rows[pos.r].id); setStatus(`${selected.includes(rows[pos.r].id) ? "Deselected" : "Selected"} ${rows[pos.r][columns[0].id]}.`) }
+    else if (k === "Enter" || k === "F2") { e.preventDefault(); startEdit() }
+    else if (k.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && columns[pos.c].editable) { e.preventDefault(); startEdit(k) }
+  }
+
+  const fmt = (v: unknown) => (typeof v === "number" ? v.toLocaleString("en-GB") : String(v ?? ""))
+  const total = (c: GridColumn) => {
+    const nums = rows.map((r) => Number(r[c.id])).filter((n) => !Number.isNaN(n))
+    if (!nums.length) return ""
+    const sum = nums.reduce((a, b) => a + b, 0)
+    return c.total === "average" ? (sum / nums.length).toLocaleString("en-GB", { maximumFractionDigits: 1 }) : sum.toLocaleString("en-GB")
+  }
+  const stickyStyle = (i: number) => (columns[i].pin ? ({ "--l": `${lefts[i]}px` } as React.CSSProperties) : undefined)
+  const widthStyle = (i: number) => ({ ...stickyStyle(i), "--w": `${columns[i].width}px` }) as React.CSSProperties
+
+  return (
+    <div className={cn("grid overflow-hidden rounded-sm border border-line bg-surface", className)}>
+      {selectable && bulkActions?.length ? (
+        <BulkActionBar count={selected.length} noun={noun} onClear={() => setSelected([])} actions={bulkActions} />
+      ) : null}
+      <div className="max-h-96 overflow-auto">
+        <table ref={grid} role="grid" aria-label={label} aria-rowcount={rows.length + 1} aria-multiselectable={selectable || undefined} onKeyDown={onKey} className="w-max min-w-full border-separate border-spacing-0 text-base">
+          <thead>
+            <tr>
+              {selectable && (
+                <th scope="col" className="sticky top-0 left-0 z-30 h-9 w-9 min-w-9 border-b border-line bg-surface-2 pl-3">
+                  <Checkbox aria-label="Select all rows" tabIndex={-1} className="translate-y-0.5" checked={allChecked} onCheckedChange={(v) => setSelected(v ? rows.map((r) => r.id) : [])} />
+                </th>
+              )}
+              {columns.map((c, i) => (
+                <th
+                  key={c.id}
+                  scope="col"
+                  style={widthStyle(i)}
+                  className={cn("sticky top-0 z-10 h-9 w-(--w) min-w-(--w) border-b border-line bg-surface-2 px-3 text-left text-sm font-medium whitespace-nowrap text-ink-2", c.pin && "left-(--l) z-20", c.type === "number" && "text-right")}
+                >
+                  <span className="inline-flex items-center gap-1">{c.label}{c.editable && <Pencil className="size-3 text-ink-3" aria-label="(editable)" />}</span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, r) => (
+              <tr key={row.id} aria-selected={selectable ? selected.includes(row.id) : undefined} className="group/row">
+                {selectable && (
+                  <td className={cn("sticky left-0 z-[2] h-9 w-9 min-w-9 border-b border-line pl-3", selected.includes(row.id) ? "bg-primary-soft" : "bg-surface")}>
+                    <Checkbox aria-label={`Select ${row[columns[0].id]}`} tabIndex={-1} className="translate-y-0.5" checked={selected.includes(row.id)} onCheckedChange={() => toggleRow(row.id)} />
+                  </td>
+                )}
+                {columns.map((c, ci) => {
+                  const here = pos.r === r && pos.c === ci
+                  const isEditing = here && editing !== null
+                  return (
+                    <td
+                      key={c.id}
+                      role="gridcell"
+                      data-cell={`${r}-${ci}`}
+                      tabIndex={here && !isEditing ? 0 : -1}
+                      aria-readonly={!c.editable || undefined}
+                      onMouseDown={() => { if (!isEditing) setPos({ r, c: ci }) }}
+                      onDoubleClick={() => startEdit()}
+                      style={widthStyle(ci)}
+                      className={cn(
+                        "h-9 w-(--w) min-w-(--w) border-b border-line px-3 whitespace-nowrap outline-none",
+                        c.pin ? "sticky left-(--l) z-[1]" : "",
+                        selected.includes(row.id) ? "bg-primary-soft" : "bg-surface",
+                        c.type === "number" && "tabular text-right",
+                        c.editable && !isEditing && "hover:bg-hover",
+                        here && (isEditing && error ? "shadow-[inset_0_0_0_2px_var(--color-bad)]" : "shadow-[inset_0_0_0_2px_var(--color-primary)]"), isEditing && "bg-surface"
+                      )}
+                    >
+                      {isEditing ? (
+                        <input
+                          autoFocus
+                          value={editing}
+                          aria-label={`${c.label} for ${row[columns[0].id]}`}
+                          aria-invalid={!!error || undefined}
+                          inputMode={c.type === "number" ? "decimal" : undefined}
+                          onChange={(e) => { setEditing(e.target.value); setError("") }}
+                          onBlur={() => { if (editing !== null && !commit("stay")) setEditing(null) }}
+                          className={cn("h-full w-full bg-transparent outline-none", c.type === "number" && "text-right")}
+                        />
+                      ) : (
+                        <span className="block truncate">{fmt(row[c.id])}</span>
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+          {totalsRow && (
+            <tfoot>
+              <tr>
+                {selectable && <td className="sticky bottom-0 left-0 z-[3] h-9 border-t border-line bg-surface-2" />}
+                {columns.map((c, i) => (
+                  <td key={c.id} style={widthStyle(i)} className={cn("sticky bottom-0 h-9 border-t border-line bg-surface-2 px-3 text-sm font-medium whitespace-nowrap text-ink", c.pin && "left-(--l) z-[2]", c.type === "number" && "tabular text-right")}>
+                    {i === 0 ? `Totals (${rows.length} rows shown)` : c.total ? `${c.total === "average" ? "Avg " : ""}${total(c)}` : ""}
+                  </td>
+                ))}
+              </tr>
+            </tfoot>
+          )}
+        </table>
+      </div>
+      <p aria-live="polite" className={cn("min-h-8 border-t border-line px-3 py-2 text-sm", error ? "text-bad" : "text-ink-3")}>
+        {status || `Arrow keys move between cells. Enter or F2 edits, Esc cancels, Tab saves and moves on.${selectable ? " Shift+Space selects the row." : ""}`}
+      </p>
+    </div>
+  )
+}

package/src/components/data-table.tsx

@@ -0,0 +1,334 @@
+/**
+ * TwoUX compositions for the List table, built on the generated shadcn Table, Button and Badge.
+ * TableSortHead: only the sorted column shows its arrow; aria-sort sits on that header only.
+ * TablePagination: range and total, selection count first, Previous / "1 of 3" / Next.
+ * BulkActionBar: grey band directly above the table while rows are selected (actions, count, Clear selection); up to four actions,
+ *   the rest and any that don't fit in More; Esc clears; filters and header stay in view.
+ * useRowKeyboard: J/K or arrows move row focus, X selects, ⇧J/⇧K extend, Enter opens, Esc clears.
+ */
+import { ArrowUp, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut, DropdownMenuTrigger } from "./dropdown-menu"
+import { TableHead } from "./table"
+
+type Sort = false | "asc" | "desc"
+
+export function TableSortHead({
+  sorted,
+  onSort,
+  align = "left",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TableHead> & { sorted: Sort; onSort: () => void; align?: "left" | "right" }) {
+  return (
+    <TableHead
+      aria-sort={sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined}
+      className={cn("p-0", className)}
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={onSort}
+        className={cn(
+          "group/sort flex h-9 w-full items-center gap-1 rounded-xs px-3 font-medium group-data-[size=dense]/table:h-7 group-data-[size=dense]/table:px-2 text-ink-2 transition-colors duration-(--duration-fast) ease-(--ease-out) hover:text-ink",
+          align === "right" ? "flex-row-reverse text-right" : "text-left",
+          sorted && "text-ink"
+        )}
+      >
+        {children}
+        <ArrowUp
+          aria-hidden="true"
+          className={cn(
+            "size-3 shrink-0 transition-[opacity,rotate] duration-(--duration-fast) ease-(--ease-out)",
+            sorted ? "opacity-100" : "opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60",
+            sorted === "desc" && "rotate-180"
+          )}
+        />
+      </button>
+    </TableHead>
+  )
+}
+
+export function TablePagination({
+  page,
+  pageCount,
+  pageSize,
+  total,
+  selected = 0,
+  noun = "rows",
+  onPageChange,
+  className,
+}: {
+  /** Zero-based page index */
+  page: number
+  pageCount: number
+  pageSize: number
+  total: number
+  selected?: number
+  noun?: string
+  onPageChange: (page: number) => void
+  className?: string
+}) {
+  const from = total === 0 ? 0 : page * pageSize + 1
+  const to = Math.min(total, (page + 1) * pageSize)
+  const fmt = (n: number) => n.toLocaleString("en-GB")
+  return (
+    <nav aria-label="Pagination" data-slot="table-pagination" className={cn("flex h-10 items-center gap-3 border-t border-line px-3 text-sm text-ink-2", className)}>
+      <p className="tabular min-w-0 truncate" aria-live="polite">
+        {selected > 0 && <span className="font-medium text-ink">{fmt(selected)} of {fmt(total)} selected · </span>}
+        Showing {fmt(from)}–{fmt(to)} of {fmt(total)} {noun}
+      </p>
+      <div className="ml-auto flex items-center gap-1">
+        <Button variant="ghost" size="icon-sm" aria-label="Previous page" disabled={page <= 0} onClick={() => onPageChange(page - 1)}>
+          <ChevronLeft />
+        </Button>
+        <span className="tabular px-1">{fmt(page + 1)} of {fmt(Math.max(1, pageCount))}</span>
+        <Button variant="ghost" size="icon-sm" aria-label="Next page" disabled={page >= pageCount - 1} onClick={() => onPageChange(page + 1)}>
+          <ChevronRight />
+        </Button>
+      </div>
+    </nav>
+  )
+}
+
+export type BulkAction = {
+  label: string
+  icon?: React.ReactNode
+  onSelect: () => void
+  /** Shown on the button, or beside the item once it moves into More. Keeps working in both places. */
+  shortcut?: string
+  /** Red text; put destructive actions last. */
+  destructive?: boolean
+  disabled?: boolean
+}
+
+/** Most actions shown as buttons before the rest move into More (selection-bulk-actions). */
+const MAX_VISIBLE = 4
+const GAP = 4
+
+export function BulkActionBar({
+  count,
+  onClear,
+  noun,
+  actions = [],
+  size = "default",
+  className,
+  children,
+}: {
+  count: number
+  onClear: () => void
+  /** Plural noun for the count: "2 listings selected". Without it: "2 selected". */
+  noun?: string
+  /** The bar's actions, in order. Up to four show as buttons; the rest, and any that don't fit, move into More. */
+  actions?: BulkAction[]
+  /** Match the table: "dense" for Table or SheetGrid size="dense". */
+  size?: "default" | "dense"
+  className?: string
+  /** Custom controls that always show before the actions, such as a menu button. */
+  children?: React.ReactNode
+}) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const area = React.useRef<HTMLDivElement>(null)
+  const more = React.useRef<HTMLButtonElement>(null)
+  const [fit, setFit] = React.useState(Math.min(actions.length, MAX_VISIBLE))
+  const btn = size === "dense" ? "xs" : "sm"
+
+  React.useEffect(() => {
+    if (!count) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return
+      if ((e.target as HTMLElement | null)?.closest("[role=dialog], [role=alertdialog], [role=menu]")) return
+      onClear()
+    }
+    document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [count, onClear])
+
+  // Measure every action button (overflowed ones stay laid out, invisible, so they keep their width and shortcut)
+  // and show as many as fit beside More.
+  React.useLayoutEffect(() => {
+    const el = area.current
+    if (!el || !count) return
+    const measure = () => {
+      const widths = Array.from(el.querySelectorAll<HTMLElement>("[data-bulk-action]")).map((b) => b.offsetWidth)
+      const room = el.clientWidth
+      const moreW = (more.current?.offsetWidth ?? 0) + GAP
+      const total = widths.reduce((a, w) => a + w + GAP, 0)
+      let n = widths.length
+      if (n > MAX_VISIBLE || total > room) {
+        n = 0
+        let used = 0
+        while (n < widths.length && n < MAX_VISIBLE && used + widths[n] + GAP + moreW <= room) used += widths[n++] + GAP
+      }
+      setFit(n)
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [count, actions.length, actions.map((a) => a.label).join("|"), btn])
+
+  if (!count) return null
+
+  // Toolbar pattern: one Tab stop, arrows move between buttons
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return
+    const items = Array.from(ref.current?.querySelectorAll<HTMLButtonElement>("button:not(:disabled):not([data-overflow])") ?? [])
+    const i = items.indexOf(document.activeElement as HTMLButtonElement)
+    if (i < 0) return
+    e.preventDefault()
+    items[(i + (e.key === "ArrowRight" ? 1 : -1) + items.length) % items.length]?.focus()
+  }
+
+  const n = count.toLocaleString("en-GB")
+  const label = `${n} ${noun ? `${noun} ` : ""}selected`
+  const overflow = actions.slice(fit)
+  const hide = "invisible absolute top-0 left-0"
+
+  // A band directly above the table (below any filters), in the page flow: the header row stays visible.
+  // The count and Clear selection always stay in view; actions that don't fit move into More.
+  return (
+    <div
+      ref={ref}
+      role="toolbar"
+      aria-label={`Actions for ${label}`}
+      data-slot="bulk-action-bar"
+      data-size={size}
+      onKeyDown={onKeyDown}
+      className={cn(
+        "@container/bulk flex h-10 animate-fade-in items-center gap-3 border-b border-line bg-surface-2 px-3 data-[size=dense]:h-8 data-[size=dense]:px-2",
+        className
+      )}
+    >
+      {children && <div className="flex shrink-0 items-center gap-1">{children}</div>}
+      <div ref={area} className="relative flex h-full min-w-0 flex-1 items-center gap-1 overflow-hidden">
+        {actions.map((a, i) => (
+          <Button
+            key={a.label}
+            data-bulk-action=""
+            data-overflow={i >= fit || undefined}
+            aria-hidden={i >= fit || undefined}
+            tabIndex={i >= fit ? -1 : undefined}
+            variant="ghost"
+            size={btn}
+            shortcut={a.shortcut}
+            disabled={a.disabled}
+            onClick={a.onSelect}
+            className={cn("shrink-0", a.destructive && "text-bad hover:text-bad", i >= fit && hide)}
+          >
+            {a.icon}
+            {a.label}
+          </Button>
+        ))}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              ref={more}
+              variant="ghost"
+              size={btn}
+              aria-label={`More actions, ${overflow.length}`}
+              data-overflow={!overflow.length || undefined}
+              aria-hidden={!overflow.length || undefined}
+              tabIndex={overflow.length ? undefined : -1}
+              className={cn("shrink-0", !overflow.length && hide)}
+            >
+              More
+              <ChevronDown className="text-ink-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {overflow.map((a) => (
+              <DropdownMenuItem key={a.label} variant={a.destructive ? "destructive" : "default"} disabled={a.disabled} onSelect={a.onSelect}>
+                {a.icon}
+                {a.label}
+                {a.shortcut && <DropdownMenuShortcut>{a.shortcut}</DropdownMenuShortcut>}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <span className="tabular text-sm font-medium whitespace-nowrap text-ink" aria-live="polite">
+          {n} {noun && <span className="@max-lg/bulk:hidden">{noun} </span>}selected
+        </span>
+        <span aria-hidden="true" className="text-ink-3">·</span>
+        <Button
+          variant="ghost"
+          size={btn}
+          shortcut="Esc"
+          onClick={onClear}
+          aria-label="Clear selection"
+          className="@max-lg/bulk:[&_[data-slot=kbd]]:hidden"
+        >
+          <span>Clear<span className="@max-lg/bulk:hidden"> selection</span></span>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function useRowKeyboard({
+  count,
+  onToggle,
+  onOpen,
+  onClear,
+  selected = 0,
+  enabled = true,
+}: {
+  count: number
+  /** value is true when extending a selection with ⇧J / ⇧K */
+  onToggle: (index: number, value?: boolean) => void
+  onOpen?: (index: number) => void
+  onClear?: () => void
+  /** How many rows are selected. Esc clears them only when there are some, so otherwise it reaches the side panel or dialog. */
+  selected?: number
+  /** Single-key shortcuts can be turned off in settings. */
+  enabled?: boolean
+}) {
+  const [focused, setFocused] = React.useState(-1)
+  const ref = React.useRef<HTMLTableSectionElement>(null)
+
+  React.useEffect(() => {
+    if (focused >= count) setFocused(count - 1)
+  }, [count, focused])
+
+  React.useEffect(() => {
+    ref.current?.querySelector<HTMLElement>(`[data-row-index="${focused}"]`)?.scrollIntoView({ block: "nearest" })
+  }, [focused])
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!enabled || e.metaKey || e.ctrlKey || e.altKey) return
+    if ((e.target as HTMLElement).closest("input:not([type=checkbox]), textarea, [contenteditable=true]")) return
+    const key = e.key.toLowerCase()
+    const move = (d: number) => setFocused((f) => Math.max(0, Math.min(count - 1, (f < 0 ? (d > 0 ? -1 : count) : f) + d)))
+    if ((key === "j" && !e.shiftKey) || e.key === "ArrowDown") move(1)
+    else if ((key === "k" && !e.shiftKey) || e.key === "ArrowUp") move(-1)
+    else if ((key === "j" || key === "k") && e.shiftKey) {
+      const next = Math.max(0, Math.min(count - 1, focused + (key === "j" ? 1 : -1)))
+      if (focused >= 0) onToggle(focused, true)
+      onToggle(next, true)
+      setFocused(next)
+    }
+    else if (key === "x" && focused >= 0) onToggle(focused)
+    else if (e.key === "Enter" && focused >= 0 && onOpen) onOpen(focused)
+    else if (e.key === "Escape" && onClear && selected > 0) onClear()
+    else return
+    e.preventDefault()
+  }
+
+  return {
+    focused,
+    setFocused,
+    /** Spread on TableBody */
+    bodyProps: { ref, tabIndex: 0, onKeyDown },
+    /** Spread on each TableRow */
+    rowProps: (index: number) => ({
+      "data-row-index": index,
+      "data-focused": focused === index || undefined,
+      onMouseDown: () => setFocused(index),
+    }),
+  }
+}