Copyable cell

import { CopyableCell } from "@payglocal_ui/flux-ui";

// Reveal-on-hover is the point. Twelve ids with twelve permanent copy buttons
// is twelve pieces of chrome competing with the data; the row the pointer is
// on is the only one whose button is useful.
<CopyableCell value={row.gid} label="Transaction ID" />

// `onClick` makes the id the handle that opens the row. The copy button stops
// propagation, so copying never also opens it.
<CopyableCell value={row.gid} label="Transaction ID" accent onClick={() => open(row)} />

// `display` shortens what is on SCREEN only — the clipboard, the tooltip and
// the accessible name all still carry the full value, so shortening what is
// shown never shortens what the user walks away with.
<CopyableCell value={row.utr} display={truncateMiddle(row.utr)} label="UTR" />

// It relies on the row's own `group` class, which every DataTable <tr> carries.
// Outside a DataTable row, put `className="group"` on an ancestor.