@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -1,9 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, ChevronsUpDown, Plus, Search } from "lucide-react";
+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);
@@ -88,15 +102,78 @@ function renderTyped(col, value, avatarTone) {
     }
 }
 const CHECK_W = 40;
-export function DataTable({ columns, data, selectable = false, selectedIds, onSelectionChange, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, toolbar, className, }) {
+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) => {
@@ -111,7 +188,8 @@ export function DataTable({ columns, data, selectable = false, selectedIds, onSe
     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 = (selectable ? CHECK_W : 0) +
+    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();
@@ -127,20 +205,46 @@ export function DataTable({ columns, data, selectable = false, selectedIds, onSe
         return data.filter((row) => cols.some((c) => asText(cellValue(c, row)).toLowerCase().includes(q)));
     }, [data, columns, query]);
     const rows = React.useMemo(() => {
-        if (!sort)
-            return filtered;
-        const col = colByKey.get(sort.key);
-        if (!col)
+        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;
-        const dir = sort.dir === "asc" ? 1 : -1;
         return [...filtered].sort((a, b) => {
-            const av = cellValue(col, a);
-            const bv = cellValue(col, b);
-            if (typeof av === "number" && typeof bv === "number")
-                return (av - bv) * dir;
-            return asText(av).localeCompare(asText(bv)) * dir;
+            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, sort, colByKey]);
+    }, [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() {
@@ -152,30 +256,106 @@ export function DataTable({ columns, data, selectable = false, selectedIds, onSe
         setSelected(next);
     }
     function cycleSort(key) {
-        if (!sort || sort.key !== 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 (sort.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);
+    const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
     const hasSummary = columns.some((c) => c.summary);
-    // sticky attrs for the leading column(s): selection col + first data column
+    // 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 (selectable && index === -1)
+        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: selectable ? CHECK_W : 0 },
+                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
             };
         return {};
     };
@@ -205,41 +385,88 @@ export function DataTable({ columns, data, selectable = false, selectedIds, onSe
         e.target.releasePointerCapture(e.pointerId);
     }
     function ChevronFor({ colKey }) {
-        if (sort?.key === colKey)
-            return sort.dir === "asc" ? (_jsx(ArrowUp, { className: "datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+        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", { className: datatableRecipe({ className }), children: [(filterable || showCount || toolbar) && (_jsxs("div", { className: "datatable-toolbar", children: [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": "Search table" })] })), showCount && (_jsx("span", { className: "datatable-count", children: rows.length === data.length
-                            ? `${data.length} ${data.length === 1 ? "row" : "rows"}`
-                            : `${rows.length} of ${data.length}` })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    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: [selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                }, 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: [col.sortable ? (_jsx("button", { type: "button", className: "datatable-sort", "data-sorted": sort?.key === col.key ? sort.dir : undefined, 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: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "datatable-empty", children: empty }) }) })) : (rows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, children: [selectable && (_jsx(TableCell, { className: "datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": `Select row ${row.id}`, 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, defaultValue: asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
-                                                    if (e.key === "Enter")
-                                                        commitEdit(row.id, col.key, e.currentTarget.value);
+                                    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")
-                                                        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, onClick: col.editable
-                                            ? (e) => {
-                                                e.stopPropagation();
-                                                setEditing({ id: row.id, key: col.key });
+                                                        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));
                                             }
-                                            : undefined, children: col.render
-                                            ? col.render(value, row)
-                                            : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
-                                })] }, row.id)))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [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] }) }) }))] }))] })] }));
+                                            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

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/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
@@ -9,26 +9,51 @@ const config = defineRecipe({
     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; left: ${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: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; transition: box-shadow .15s; }
+    & .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-left: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 100%; }
+    & .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}; }
-    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .datatable-sort { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
+/* 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-left: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
-    & th[data-align="right"] .datatable-chevron { margin-left: 0; }
+    & .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} 6%, ${c.bgSurface}); }
-    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 3%, ${c.bgSurface}); }
-    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -14px 0 0); box-shadow: 8px 0 12px -8px rgba(28,40,64,0.22); }
+    & 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; }
@@ -36,10 +61,11 @@ const config = defineRecipe({
     & .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} 6%, ${c.bgSurface}); }
-    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
+    & 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; }
@@ -54,7 +80,7 @@ const config = defineRecipe({
     & .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: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; 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 { 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}); }
@@ -63,7 +89,19 @@ const config = defineRecipe({
     & .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}; }`,
+    & .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: [],