@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/esm/components/datatable/datatable.js

@@ -0,0 +1,472 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, Check, ChevronsUpDown, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
+import * as React from "react";
+import { Checkbox } from "../checkbox/index.js";
+import { Menu, MenuItem } from "../menu/index.js";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
+import { datatableRecipe } from "./datatable.recipe.js";
+/** A `date` input needs `yyyy-mm-dd`; cells may hold a Date, an ISO string or
+ * a display string. Returns "" when it cannot be parsed, so the field opens
+ * empty rather than showing an invalid value. */
+function toDateInputValue(v) {
+    if (v instanceof Date && !Number.isNaN(v.getTime()))
+        return v.toISOString().slice(0, 10);
+    if (typeof v === "string" || typeof v === "number") {
+        const d = new Date(v);
+        if (!Number.isNaN(d.getTime()))
+            return d.toISOString().slice(0, 10);
+    }
+    return "";
+}
+function cellValue(col, row) {
+    if (col.accessor)
+        return col.accessor(row);
+    return row[col.key];
+}
+function asText(v) {
+    if (v == null)
+        return "";
+    if (typeof v === "object" && "name" in v)
+        return v.name ?? "";
+    if (Array.isArray(v))
+        return v.join(", ");
+    return String(v);
+}
+// stable pastel tone per string value — colour-coded tags/statuses, like Attio
+const TAG_TONES = [
+    "brand",
+    "success",
+    "warning",
+    "danger",
+    "purple",
+    "cyan",
+    "orange",
+];
+function toneFor(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++)
+        h = (h * 31 + t.charCodeAt(i)) >>> 0;
+    return TAG_TONES[h % TAG_TONES.length];
+}
+function initials(name) {
+    const p = name.trim().split(/\s+/);
+    return ((p[0]?.[0] ?? "") + (p[1]?.[0] ?? "")).toUpperCase() || "?";
+}
+const DATE_FMT = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+});
+function formatCell(type, v, symbol) {
+    if (type === "number")
+        return typeof v === "number" ? v.toLocaleString("en-US") : asText(v);
+    if (type === "currency")
+        return typeof v === "number"
+            ? `${symbol ?? "$"}${v.toLocaleString("en-US")}`
+            : asText(v);
+    if (type === "date") {
+        const d = v ? new Date(v) : null;
+        return d && !Number.isNaN(d.getTime()) ? DATE_FMT.format(d) : asText(v);
+    }
+    return asText(v);
+}
+/** Built-in typed-cell renderer (used when a column has no custom `render`). */
+function renderTyped(col, value, avatarTone) {
+    const empty = _jsx("span", { className: "datatable-muted", children: "\u2014" });
+    switch (col.type) {
+        case "entity": {
+            const e = (typeof value === "object" && value ? value : { name: asText(value) });
+            if (!e.name)
+                return empty;
+            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(e.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
+        }
+        case "tags": {
+            const tags = Array.isArray(value) ? value : [];
+            if (!tags.length)
+                return empty;
+            return (_jsx("span", { className: "datatable-tags", children: tags.map((t) => (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+        }
+        case "status": {
+            const s = asText(value);
+            if (!s)
+                return empty;
+            return (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: s }));
+        }
+        default: {
+            const text = formatCell(col.type, value, col.symbol);
+            const isNum = col.type === "number" || col.type === "currency";
+            if (!text)
+                return empty;
+            return isNum ? _jsx("span", { className: "datatable-num", children: text }) : text;
+        }
+    }
+}
+const CHECK_W = 40;
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
+    ? `${total} ${total === 1 ? "row" : "rows"}`
+    : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
+    const [query, setQuery] = React.useState("");
+    const [internalSort, setInternalSort] = React.useState(defaultSort ?? null);
+    // Column list the table actually renders. Seeded from `columns`; the header
+    // menu mutates this copy and reports upward via `onColumnsChange`.
+    const [internalCols, setInternalCols] = React.useState(columnsProp);
+    React.useEffect(() => setInternalCols(columnsProp), [columnsProp]);
+    /** Every column, hidden ones included — what the column manager lists. */
+    const allColumns = internalCols;
+    /** What the grid actually renders. */
+    const columns = React.useMemo(() => internalCols.filter((c) => !c.hidden), [internalCols]);
+    const applyColumns = React.useCallback((next) => {
+        setInternalCols(next);
+        onColumnsChange?.(next);
+    }, [onColumnsChange]);
+    const moveColumn = React.useCallback((key, dir) => {
+        const i = allColumns.findIndex((c) => c.key === key);
+        const j = i + dir;
+        if (i < 0 || j < 0 || j >= allColumns.length)
+            return;
+        const next = [...allColumns];
+        [next[i], next[j]] = [next[j], next[i]];
+        applyColumns(next);
+    }, [allColumns, applyColumns]);
+    const hideColumn = React.useCallback((key) => applyColumns(allColumns.map((c) => (c.key === key ? { ...c, hidden: true } : c))), [allColumns, applyColumns]);
+    const renameColumn = React.useCallback((key, header) => applyColumns(allColumns.map((c) => (c.key === key ? { ...c, header } : c))), [allColumns, applyColumns]);
+    const [renaming, setRenaming] = React.useState(null);
+    const showColumn = React.useCallback((key) => applyColumns(allColumns.map((c) => (c.key === key ? { ...c, hidden: false } : c))), [allColumns, applyColumns]);
+    const [selCell, setSelCell] = React.useState(null);
+    const gridRef = React.useRef(null);
+    const sort = sortProp !== undefined ? sortProp : internalSort;
+    // One shape downstream: [] when unsorted, ordered by precedence otherwise.
+    const sorts = React.useMemo(() => (sort == null ? [] : Array.isArray(sort) ? sort : [sort]), [sort]);
+    const sortDirByKey = React.useMemo(() => new Map(sorts.map((s) => [s.key, s.dir])), [sorts]);
+    const setSort = React.useCallback((next) => {
+        onSortChange?.(next);
+        if (sortProp === undefined)
+            setInternalSort(next);
+    }, [onSortChange, sortProp]);
+    // Row drag-to-reorder is meaningless once a sort or grouping decides row
+    // order — the grip would let the user drag a row the comparator/group
+    // would immediately put it back to. Hide the affordance rather than let it
+    // lie.
+    const showGrip = Boolean(onRowsReorder) && sorts.length === 0 && !groupBy;
+    const GRIP_W = 20;
+    // key of the row currently being dragged, and the row currently hovered as
+    // the drop target — mirrors RecordsTable's `dragCol`/`dragSort` state.
+    const [dragRowId, setDragRowId] = React.useState(null);
+    const [dropRowId, setDropRowId] = React.useState(null);
+    // Drop the dragged row immediately before `toId`. Operates on the full
+    // `data` prop (not the filtered/sorted `rows`) so the callback always gets
+    // the complete array in its new order, and a filtered-out row keeps its
+    // relative position. Splice-then-re-find-index (same shape as
+    // RecordsTable's reorderColumn) so dropping above vs. below the dragged
+    // row's origin both land in the right slot.
+    function reorderRows(fromId, toId) {
+        setDragRowId(null);
+        setDropRowId(null);
+        if (!onRowsReorder || fromId === toId)
+            return;
+        const from = data.findIndex((r) => r.id === fromId);
+        let to = data.findIndex((r) => r.id === toId);
+        if (from < 0 || to < 0)
+            return;
+        const next = [...data];
+        const [moved] = next.splice(from, 1);
+        to = next.findIndex((r) => r.id === toId);
+        next.splice(to, 0, moved);
+        onRowsReorder(next);
+    }
+    const [internalSel, setInternalSel] = React.useState(new Set());
+    const selected = React.useMemo(() => (selectedIds ? new Set(selectedIds) : internalSel), [selectedIds, internalSel]);
+    const setSelected = React.useCallback((next) => {
+        onSelectionChange?.([...next]);
+        if (!selectedIds)
+            setInternalSel(next);
+    }, [onSelectionChange, selectedIds]);
+    const [editing, setEditing] = React.useState(null);
+    const [scrolledX, setScrolledX] = React.useState(false);
+    // column widths (drag-to-resize) + fixed-layout sizing
+    const [widths, setWidths] = React.useState({});
+    const [resizingKey, setResizingKey] = React.useState(null);
+    const resizeRef = React.useRef(null);
+    const colWidth = (col) => widths[col.key] ?? col.width ?? (col.type === "entity" ? 220 : 160);
+    const minWidth = (showGrip ? GRIP_W : 0) +
+        (selectable ? CHECK_W : 0) +
+        columns.reduce((sum, col) => sum + colWidth(col), 0);
+    const colByKey = React.useMemo(() => {
+        const m = new Map();
+        for (const c of columns)
+            m.set(c.key, c);
+        return m;
+    }, [columns]);
+    const filtered = React.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return data;
+        const cols = columns.filter((c) => c.filterable !== false);
+        return data.filter((row) => cols.some((c) => asText(cellValue(c, row)).toLowerCase().includes(q)));
+    }, [data, columns, query]);
+    const rows = React.useMemo(() => {
+        const active = sorts
+            .map((s) => ({ col: colByKey.get(s.key), dir: s.dir === "asc" ? 1 : -1 }))
+            .filter((s) => Boolean(s.col));
+        if (active.length === 0)
+            return filtered;
+        return [...filtered].sort((a, b) => {
+            for (const { col, dir } of active) {
+                const av = cellValue(col, a);
+                const bv = cellValue(col, b);
+                const cmp = typeof av === "number" && typeof bv === "number"
+                    ? av - bv
+                    : asText(av).localeCompare(asText(bv));
+                if (cmp !== 0)
+                    return cmp * dir;
+            }
+            return 0;
+        });
+    }, [filtered, sorts, colByKey]);
+    /**
+     * Rows bucketed under a heading, preserving first-seen group order (Attio
+     * groups a view without reordering within a group). One bucket with a null
+     * group when `groupBy` is absent, so the render path is identical either way.
+     */
+    const groupedRows = React.useMemo(() => {
+        if (!groupBy)
+            return [{ group: null, rows }];
+        const buckets = new Map();
+        for (const row of rows) {
+            const g = groupBy(row);
+            const bucket = buckets.get(g);
+            if (bucket)
+                bucket.push(row);
+            else
+                buckets.set(g, [row]);
+        }
+        return [...buckets].map(([group, groupRows]) => ({
+            group,
+            rows: groupRows,
+        }));
+    }, [rows, groupBy]);
+    const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
+    const someSelected = selected.size > 0 && !allSelected;
+    function toggleAll() {
+        setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
+    }
+    function toggleRow(id) {
+        const next = new Set(selected);
+        next.has(id) ? next.delete(id) : next.add(id);
+        setSelected(next);
+    }
+    function cycleSort(key) {
+        // Clicking a header drives a single sort, as before. Multi-sort is supplied
+        // by the caller through the `sort` prop (Attio builds it in its sort popover).
+        const dir = sortDirByKey.get(key);
+        if (!dir)
+            setSort({ key, dir: "asc" });
+        else if (dir === "asc")
+            setSort({ key, dir: "desc" });
+        else
+            setSort(null);
+    }
+    /**
+     * Which editor a column gets. Mirrors RecordsTable — the Attio-measured
+     * sibling — rather than giving every type the same text box:
+     *   number/currency   numeric, with a decimal keypad on touch
+     *   date              a native date field
+     *   text/entity       a plain text field
+     * `status`, `reference` and `tags` are pickers in RecordsTable, not
+     * double-click editors, so they are not editable here either.
+     */
+    function editorFor(col) {
+        switch (col.type) {
+            case "number":
+            case "currency":
+                return { type: "number", inputMode: "decimal", step: "any" };
+            case "date":
+                return { type: "date" };
+            default:
+                return { type: "text", inputMode: "text" };
+        }
+    }
+    /**
+     * Spreadsheet keyboard model, ported from RecordsTable: arrows move the
+     * selected cell, Enter opens its editor, Escape clears, and Cmd/Ctrl+C
+     * copies the cell's RENDERED text (what the user sees, not the raw value).
+     */
+    function onGridKeyDown(e) {
+        if (!selCell || editing)
+            return;
+        if ((e.metaKey || e.ctrlKey) && (e.key === "c" || e.key === "C")) {
+            const row = rows.find((rw) => rw.id === selCell.id);
+            const col = columns.find((cc) => cc.key === selCell.key);
+            if (row && col)
+                navigator.clipboard?.writeText(formatCell(col.type, cellValue(col, row), col.symbol));
+            e.preventDefault();
+            return;
+        }
+        const r = rows.findIndex((row) => row.id === selCell.id);
+        const c = columns.findIndex((col) => col.key === selCell.key);
+        if (r < 0 || c < 0)
+            return;
+        let nr = r;
+        let nc = c;
+        if (e.key === "ArrowUp")
+            nr = Math.max(0, r - 1);
+        else if (e.key === "ArrowDown")
+            nr = Math.min(rows.length - 1, r + 1);
+        else if (e.key === "ArrowLeft")
+            nc = Math.max(0, c - 1);
+        else if (e.key === "ArrowRight")
+            nc = Math.min(columns.length - 1, c + 1);
+        else if (e.key === "Escape") {
+            setSelCell(null);
+            return;
+        }
+        else if (e.key === "Enter") {
+            if (columns[c]?.editable) {
+                e.preventDefault();
+                setEditing({ id: selCell.id, key: selCell.key });
+            }
+            return;
+        }
+        else
+            return;
+        e.preventDefault();
+        setSelCell({ id: rows[nr].id, key: columns[nc].key });
+    }
+    function commitEdit(id, key, value) {
+        onEdit?.(id, key, value);
+        setEditing(null);
+    }
+    const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
+    const hasSummary = columns.some((c) => c.summary);
+    // sticky attrs for the leading column(s): grip col (index -2) + selection
+    // col (-1) + first data column (0). Each offsets by whatever leading
+    // columns come before it, so the group stays contiguous when scrolled.
+    const stickyCol = (index) => {
+        if (!stickyFirst)
+            return {};
+        if (showGrip && index === -2)
+            return { "data-sticky": "", style: { left: 0 } };
+        if (selectable && index === -1)
+            return {
+                "data-sticky": "",
+                style: { left: showGrip ? GRIP_W : 0 },
+            };
+        if (index === 0)
+            return {
+                "data-sticky": "",
+                "data-sticky-edge": "",
+                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
+            };
+        return {};
+    };
+    const alignFor = (col) => col.align ??
+        (col.type === "number" || col.type === "currency" ? "right" : undefined);
+    function startResize(col, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.setPointerCapture(e.pointerId);
+        resizeRef.current = {
+            key: col.key,
+            startX: e.clientX,
+            startW: colWidth(col),
+        };
+        setResizingKey(col.key);
+    }
+    function moveResize(e) {
+        const r = resizeRef.current;
+        if (!r)
+            return;
+        const w = Math.max(64, r.startW + (e.clientX - r.startX));
+        setWidths((prev) => ({ ...prev, [r.key]: w }));
+    }
+    function endResize(e) {
+        resizeRef.current = null;
+        setResizingKey(null);
+        e.target.releasePointerCapture(e.pointerId);
+    }
+    function ChevronFor({ colKey }) {
+        const dir = sortDirByKey.get(colKey);
+        if (dir)
+            return dir === "asc" ? (_jsx(ArrowUp, { className: "datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+        return (_jsx(ChevronsUpDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+    }
+    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+                    onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
+                    ...(scrolledX ? { "data-scrolled-x": "" } : {}),
+                }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                                    const Icon = col.icon;
+                                    const inner = (_jsxs("span", { className: "datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    return (_jsxs(TableHead, { align: alignFor(col), ...stickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
+                                                // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
+                                                autoFocus: true, className: "datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
+                                                    renameColumn(col.key, e.currentTarget.value);
+                                                    setRenaming(null);
+                                                }, onKeyDown: (e) => {
+                                                    if (e.key === "Enter") {
+                                                        renameColumn(col.key, e.currentTarget.value);
+                                                        setRenaming(null);
+                                                    }
+                                                    else if (e.key === "Escape")
+                                                        setRenaming(null);
+                                                } })) : columnMenu ? (_jsxs(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
+                                                        ? col.header
+                                                        : col.key} column options`, children: inner }), children: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? (_jsx("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => (_jsxs(React.Fragment, { children: [group !== null && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: totalCols, className: "datatable-group", children: [_jsx("span", { className: "datatable-group-label", children: group }), _jsx("span", { className: "datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
+                                        dragRowId &&
+                                        dragRowId !== row.id &&
+                                        dropRowId === row.id
+                                        ? ""
+                                        : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, onDragOver: showGrip && dragRowId
+                                        ? (e) => {
+                                            e.preventDefault();
+                                            if (dropRowId !== row.id)
+                                                setDropRowId(row.id);
+                                        }
+                                        : undefined, onDrop: showGrip && dragRowId
+                                        ? (e) => {
+                                            e.preventDefault();
+                                            reorderRows(dragRowId, row.id);
+                                        }
+                                        : undefined, children: [showGrip && (_jsx(TableCell, { className: "datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: _jsx("button", { type: "button", className: "datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
+                                                    setDragRowId(row.id);
+                                                    e.dataTransfer.effectAllowed = "move";
+                                                }, onDragEnd: () => {
+                                                    setDragRowId(null);
+                                                    setDropRowId(null);
+                                                }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
+                                            const isEditing = editing?.id === row.id && editing?.key === col.key;
+                                            const value = cellValue(col, row);
+                                            const sticky = stickyCol(i);
+                                            if (isEditing) {
+                                                return (_jsx(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: _jsx("input", { className: "datatable-edit", 
+                                                        // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
+                                                        autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, defaultValue: col.type === "date"
+                                                            ? toDateInputValue(value)
+                                                            : asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
+                                                            if (e.key === "Enter")
+                                                                commitEdit(row.id, col.key, e.currentTarget.value);
+                                                            else if (e.key === "Escape")
+                                                                setEditing(null);
+                                                        }, onBlur: (e) => commitEdit(row.id, col.key, e.currentTarget.value) }) }, col.key));
+                                            }
+                                            return (_jsx(TableCell, { align: alignFor(col), ...sticky, className: col.editable ? "datatable-editable" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                                    ? ""
+                                                    : undefined, onClick: (e) => {
+                                                    // the keyboard model's anchor; also opens the
+                                                    // editor when the column allows it
+                                                    setSelCell({ id: row.id, key: col.key });
+                                                    gridRef.current?.focus({ preventScroll: true });
+                                                    if (col.editable) {
+                                                        // Opening the inline editor must not also fire
+                                                        // the row's onRowClick and navigate away. Every
+                                                        // other cell click has to keep bubbling, or
+                                                        // onRowClick never fires at all.
+                                                        e.stopPropagation();
+                                                        setEditing({ id: row.id, key: col.key });
+                                                    }
+                                                }, children: col.render
+                                                    ? col.render(value, row)
+                                                    : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
+                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+}
+DataTable.displayName = "DataTable";

package/dist/esm/components/datatable/datatable.recipe.js

@@ -0,0 +1,110 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// The feature-rich, config-driven data grid (sort / filter / selection /
+// inline edit) built on the composable `Table` primitives. This recipe adds the
+// toolbar, sortable header buttons, selection cells, selected-row tint, and the
+// inline-edit input on top of the base `.table` styling.
+const config = defineRecipe({
+    name: "datatable",
+    base: `display: flex; flex-direction: column; gap: ${c.space["2.5"]}; font-family: ${c.font.sans};
+    & .datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
+    & .datatable-search svg { position: absolute; inset-inline-start: ${c.space["2"]}; color: ${c.fgMuted}; pointer-events: none; }
+    & .datatable-search input { width: 100%; height: 32px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; transition: box-shadow .15s; }
+    & .datatable-search input::placeholder { color: ${c.fgMuted}; }
+    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .datatable-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+/* Attio's header cell has no padding of its own -- the button owns the
+       full cell so the whole header is clickable (its own inset is 12px).
+       Mirrors the summary-row fix. */
+    & th { padding: 0; }
+/* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
+       Menu wraps its trigger in a flex div that sizes to its content, so a
+       long header grew past the column instead of filling it -- with nothing
+       left to squeeze, the label's own ellipsis CSS (below) had no properly
+       -sized box to truncate against, and the th's own overflow hard-clipped
+       it with no "...". Fill the wrapper, scoped to th so Menu's default
+       (correct everywhere else) is untouched. */
+    & th .menu { width: 100%; height: 100%; }
+    & .datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
+    & .datatable-th-inner > svg { flex-shrink: 0; color: ${c.fgMuted}; }
+/* Attio's summary cell has NO padding of its own -- the calculation trigger
+       owns the whole 246x37 area so a click anywhere in the cell opens the
+       menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
+    & tfoot td { padding: 0; }
+/* Group heading row -- Attio groups a view under a subtle label with the
+       bucket's count beside it. */
+& .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .datatable-viewsettings:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
+    & .datatable-group-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+        & .datatable-group { height: ${c.size.menuRow}; padding: 0 ${c.space["3"]}; background: ${c.bgSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .datatable-group-count { margin-inline-start: ${c.space["1.5"]}; color: ${c.fgMuted}; font-variant-numeric: tabular-nums; }
+    & .datatable-th-rename { width: 100%; min-width: 0; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["1"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; outline: none; }
+    & .datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .datatable-sort { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
+    & th[data-align="right"] .datatable-sort { justify-content: flex-end; }
+    & .datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .datatable-chevron { margin-inline-start: 0; }
+    & .datatable-sort:hover .datatable-chevron { opacity: 0.6; }
+    & .datatable-sort[data-sorted] .datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
+    /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
+    & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${c.bgSurface}; }
+    & th[data-sticky] { z-index: 3; }
+    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
+    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
+    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* add-row + summary footer */
+    & .datatable-addcell { padding: 0; border-top: none; }
+    & .datatable-addrow { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border: none; border-top: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; cursor: pointer; transition: background-color .12s; }
+    & .datatable-addrow:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .datatable-addrow svg { flex-shrink: 0; }
+    & .datatable-check { display: flex; align-items: center; justify-content: center; }
+    & .datatable-col-check { width: 40px; padding: 0; text-align: center; }
+    & tbody tr[data-selected] td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
+    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${c.fgPrimary} 4%, color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface})); }
+    & .datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
+    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
+    & .datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+    /* fixed layout so column widths (and resize) are exact — like RecordsTable */
+    & table { table-layout: fixed; }
+    /* column resize grip */
+    & .datatable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .datatable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
+    /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
+    & .datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
+    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
+    & .datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
+    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .datatable-tags { display: flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
+    & .datatable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
+    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    & .datatable-num { font-variant-numeric: tabular-nums; }
+    & .datatable-muted { color: ${c.fgMuted}; }
+    /* row drag-to-reorder -- Attio's Settings > Objects > Attributes measures
+       a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not Attio's own proprietary
+       pointer-events implementation. */
+    & .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
+    & .datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: grab; }
+    & .datatable-grip:active { cursor: grabbing; }
+    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${c.bgBrandSolid}; transition: box-shadow .12s; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const datatableRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/datatable/index.js

@@ -0,0 +1,2 @@
+export { DataTable, } from "./datatable.js";
+export { datatableRecipe } from "./datatable.recipe.js";