@crisp-ui-kit/crisp 0.55.0 → 0.55.2

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, X, } from "lucide-react";
+import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, Trash2, X, } from "lucide-react";
 import * as React from "react";
 import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, usePrefersReducedMotion, } from "../../core/index.js";
 // crisp/#601 supersession: a deliberate exception to "DS atoms stay
@@ -14,13 +14,16 @@ import { Avatar } from "../avatar/index.js";
 import { Checkbox } from "../checkbox/index.js";
 import { ColumnCalc } from "../columncalc/index.js";
 import { ContextMenu } from "../contextmenu/index.js";
+import { DatePickerField } from "../datepickerfield/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { useRadioGroupKeyboard } from "../radiogroup/index.js";
 import { Select } from "../select/index.js";
 import { Spinner } from "../spinner/index.js";
 import { Switch } from "../switch/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
+import { TimePicker } from "../timepicker/index.js";
 import { Tooltip } from "../tooltip/index.js";
+import { COUNTRIES, countryByIso2, flagEmoji } from "./countries.js";
 import { datatableRecipe } from "./datatable.recipe.js";
 // #534: whether an element's own content is being cut off by its own box --
 // the same fact `.crisp-datatable-th-label`'s CSS ellipsis is silently
@@ -158,6 +161,30 @@ function asText(v) {
         return v.join(", ");
     return String(v);
 }
+// crisp/#765 -- a `type: "phone"`/`editor: "phone"` cell's raw value is
+// "{iso2}|{digits}", not a bare E.164 string: see DataTableColumn's own
+// "phone" doc comment for why the pipe separator earns its keep over a
+// plain "+{dialCode}{digits}" concatenation.
+function parsePhoneValue(v) {
+    const s = typeof v === "string" ? v : "";
+    const i = s.indexOf("|");
+    if (i < 0)
+        return null;
+    return { iso2: s.slice(0, i), digits: s.slice(i + 1) };
+}
+// crisp/#816 -- a `multiValue` phone column's raw value is several
+// `parsePhoneValue`-shaped entries joined with `;`. Empty entries (a blank
+// trailing slot that was never filled) are dropped rather than rendered as
+// a stray chip.
+function parsePhoneValues(v) {
+    const s = typeof v === "string" ? v : "";
+    if (!s)
+        return [];
+    return s
+        .split(";")
+        .map((entry) => parsePhoneValue(entry))
+        .filter((p) => !!p?.digits);
+}
 // stable pastel tone per string value — colour-coded tags/statuses
 const TAG_TONES = [
     "brand",
@@ -377,6 +404,29 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                 return empty;
             return _jsx(RatingStars, { value: n, max: col.maxRating ?? 5 });
         }
+        case "phone": {
+            // crisp/#816, confirmed live -- a `multiValue` phone cell renders
+            // each value as its own real `tel:` link (Attio: a measured link
+            // blue, underlined, no flag/dial-code decoration, `4px` flex gap
+            // between values), unlike the single-value cell above/below (a plain
+            // flag+dial+digits span, never a link). The whole cell hard-clips
+            // when it overflows the column -- confirmed live, Attio does not
+            // ellipsis a multi-value phone cell.
+            if (col.multiValue) {
+                const values = parsePhoneValues(value);
+                if (!values.length)
+                    return empty;
+                return (_jsx("span", { className: "crisp-datatable-phone-multi", children: values.map((p) => {
+                        const country = countryByIso2(p.iso2);
+                        return (_jsxs("a", { className: "crisp-datatable-phone-link", href: `tel:+${country?.dialCode ?? ""}${p.digits}`, onClick: (ev) => ev.stopPropagation(), children: ["+", country?.dialCode ?? "?", p.digits] }, `${p.iso2}|${p.digits}`));
+                    }) }));
+            }
+            const parsed = parsePhoneValue(value);
+            if (!parsed?.digits)
+                return empty;
+            const country = countryByIso2(parsed.iso2);
+            return (_jsxs("span", { className: "crisp-datatable-phone", children: [country && _jsx("span", { "aria-hidden": "true", children: flagEmoji(country.iso2) }), _jsxs("span", { className: "crisp-datatable-phone-dial", children: ["+", country?.dialCode ?? "?"] }), parsed.digits] }));
+        }
         case "url":
         case "email": {
             const text = display || asText(value);
@@ -387,6 +437,16 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                 // link's own navigation must not also fire the row's onRowClick.
                 onClick: (ev) => ev.stopPropagation(), children: text }));
         }
+        case "date":
+        case "datetime": {
+            const text = display || formatCell(col.type, value, col.symbol, locale);
+            if (!text)
+                return empty;
+            // crisp#822 -- a column-level predicate, not `tones` (see its doc
+            // comment): the danger state is computed over the row, not read back
+            // off this formatted string.
+            return col.danger?.(value, row) ? (_jsx("span", { className: "crisp-datatable-danger", children: text })) : (text);
+        }
         default: {
             const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
@@ -530,6 +590,130 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
+// crisp/#765, confirmed live -- Attio's own Phone Number editor: a
+// country-code select (ghost trigger, "MN ▾"), then a static, non-editable
+// "+{dialCode}" prefix, then a borderless digits field -- measured
+// `rgba(0,0,0,0.63)` for the prefix text, matching every other muted-text
+// value already measured elsewhere in this file (14px in both cases).
+// Reuses crisp's own searchable `Select` for the country list -- the same
+// popover chrome every other picker in this file already uses -- rather
+// than inventing new country-picker chrome; the flag/name/dial-code ROW
+// shape wasn't independently re-measured against Attio's own popover this
+// pass (time-boxed), so it's built to the same shape crisp's other search
+// pickers already carry.
+function DataPhoneEditor({ col, value, isPending, onCommit, }) {
+    const parsed = parsePhoneValue(value);
+    const [iso2, setIso2] = React.useState(parsed?.iso2 ?? "US");
+    const [digits, setDigits] = React.useState(parsed?.digits ?? "");
+    const country = countryByIso2(iso2);
+    const countryOptions = COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: `${flagEmoji(c.iso2)} ${c.name} +${c.dialCode}`,
+        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
+    }));
+    const commit = (nextIso2, nextDigits) => onCommit(`${nextIso2}|${nextDigits}`);
+    return (_jsxs("span", { className: "crisp-datatable-phone-editor", children: [_jsx(Select, { variant: "ghost", searchable: true, "aria-label": `Edit ${col.key} country`, value: iso2, disabled: isPending, options: countryOptions, onValueChange: (v) => {
+                    setIso2(v);
+                    commit(v, digits);
+                } }), _jsxs("span", { className: "crisp-datatable-phone-dial", "aria-hidden": "true", children: ["+", country?.dialCode ?? "?"] }), _jsx("input", { className: "crisp-datatable-edit", "aria-label": `Edit ${col.key} number`, value: digits, disabled: isPending, onChange: (e) => setDigits(e.currentTarget.value), onBlur: () => commit(iso2, digits), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        commit(iso2, digits);
+                } })] }));
+}
+// crisp/#816, confirmed live -- Attio's own multi-value Phone Number
+// editor (`col.multiValue`): a stack of already-committed values (a
+// drag grip, the value as a real `tel:` link, and a hover-revealed
+// copy/delete pair -- measured `32px` row, `5px 8px` padding, `8px` gap,
+// `16×16` icons) plus one ALWAYS-blank trailing "country + digits" row in
+// `DataPhoneEditor`'s own shape. The blank row itself is the only
+// affordance for adding another value -- there is no separate "+ Add"
+// button; committing it (Enter/blur with digits) appends and clears back
+// to blank so the next value can be typed immediately. Drag-to-reorder
+// (the grip icon) was measured present but isn't wired here -- reordering
+// a committed array is a distinct interaction from add/remove/copy and is
+// left as a follow-up rather than a partial, non-functional drag handle.
+function DataPhoneMultiEditor({ col, value, isPending, onCommit, }) {
+    const committed = parsePhoneValues(value);
+    const [draftIso2, setDraftIso2] = React.useState("US");
+    const [draftDigits, setDraftDigits] = React.useState("");
+    const countryOptions = COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: `${flagEmoji(c.iso2)} ${c.name} +${c.dialCode}`,
+        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
+    }));
+    const join = (list) => list.map((p) => `${p.iso2}|${p.digits}`).join(";");
+    const removeAt = (i) => onCommit(join(committed.filter((_, idx) => idx !== i)));
+    const commitDraft = () => {
+        if (!draftDigits)
+            return;
+        onCommit(join([...committed, { iso2: draftIso2, digits: draftDigits }]));
+        setDraftDigits("");
+    };
+    return (_jsxs("span", { className: "crisp-datatable-phone-multi-editor", children: [committed.map((p, i) => {
+                const country = countryByIso2(p.iso2);
+                const tel = `+${country?.dialCode ?? "?"}${p.digits}`;
+                return (_jsxs("span", { className: "crisp-datatable-phone-multi-row", children: [_jsx(GripVertical, { size: 16, strokeWidth: 1.75, className: "crisp-datatable-phone-multi-grip", "aria-hidden": "true" }), _jsx("a", { className: "crisp-datatable-phone-link", href: `tel:${tel}`, onClick: (ev) => ev.stopPropagation(), children: tel }), _jsxs("span", { className: "crisp-datatable-phone-multi-actions", children: [_jsx("button", { type: "button", className: "crisp-datatable-phone-multi-action", "aria-label": `Copy ${col.key} value`, onClick: () => navigator.clipboard?.writeText(tel), children: _jsx(Copy, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-datatable-phone-multi-action", "aria-label": `Remove ${col.key} value`, disabled: isPending, onClick: () => removeAt(i), children: _jsx(Trash2, { size: 16, strokeWidth: 1.75 }) })] })] }, `${p.iso2}|${p.digits}`));
+            }), _jsxs("span", { className: "crisp-datatable-phone-editor", children: [_jsx(Select, { variant: "ghost", searchable: true, "aria-label": `Edit ${col.key} country`, value: draftIso2, disabled: isPending, options: countryOptions, onValueChange: setDraftIso2 }), _jsxs("span", { className: "crisp-datatable-phone-dial", "aria-hidden": "true", children: ["+", countryByIso2(draftIso2)?.dialCode ?? "?"] }), _jsx("input", { className: "crisp-datatable-edit", "aria-label": `Edit ${col.key} number (add another)`, value: draftDigits, disabled: isPending, onChange: (e) => setDraftDigits(e.currentTarget.value), onBlur: commitDraft, onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                commitDraft();
+                        } })] })] }));
+}
+// crisp/#762, confirmed live -- Attio's own Timestamp editor is a calendar +
+// time + preset picker, not the native `datetime-local` input `type:
+// "datetime"` gets by default (that stays the DEFAULT, unchanged, for
+// backward compatibility -- this is a new, opt-in `editor: "datetime"`).
+// Composes crisp's own `DatePickerField` (calendar + presets, already the
+// measured shape: Today/Tomorrow/Next week/No date chips under the
+// calendar) with `TimePicker` (hour/minute wheel) side by side. The exact
+// PRESET WORDING/order and the time control's own wheel-vs-text-field
+// shape weren't independently re-verified against Attio's pixels this
+// pass (time-boxed) -- `TimePicker` is crisp's only time-input primitive,
+// reused rather than inventing a new one from scratch.
+function DataDateTimeEditor({ col, value, isPending, onCommit, }) {
+    const initial = value instanceof Date
+        ? value
+        : typeof value === "string" || typeof value === "number"
+            ? new Date(value)
+            : null;
+    const hasInitial = initial != null && !Number.isNaN(initial.getTime());
+    const [date, setDate] = React.useState(hasInitial ? initial : null);
+    const [time, setTime] = React.useState({
+        hour: hasInitial ? initial.getHours() : 0,
+        minute: hasInitial ? initial.getMinutes() : 0,
+    });
+    const commit = (nextDate, nextTime) => {
+        if (!nextDate) {
+            onCommit("");
+            return;
+        }
+        const pad = (n) => String(n).padStart(2, "0");
+        onCommit(`${nextDate.getFullYear()}-${pad(nextDate.getMonth() + 1)}-${pad(nextDate.getDate())}T${pad(nextTime.hour)}:${pad(nextTime.minute)}`);
+    };
+    const preset = (label, days) => ({
+        label,
+        date: () => {
+            const d = new Date();
+            d.setDate(d.getDate() + days);
+            return d;
+        },
+    });
+    return (_jsxs("span", { className: "crisp-datatable-datetime-editor", children: [_jsx(DatePickerField, { "aria-label": `Edit ${col.key} date`, variant: "ghost", 
+                // "No date" chip in Attio's own popover maps to DatePickerField's
+                // existing Clear affordance -- its own default label ("Clear
+                // date") is already overridable via `useCrispMessage` internally,
+                // so no hardcoded copy of this component's own is added here.
+                value: date, presets: [
+                    preset("Today", 0),
+                    preset("Tomorrow", 1),
+                    preset("Next week", 7),
+                ], onValueChange: (d) => {
+                    setDate(d);
+                    commit(d, time);
+                } }), _jsx(TimePicker, { size: "small", value: time, disabled: isPending, onValueChange: (t) => {
+                    setTime(t);
+                    commit(date, t);
+                } })] }));
+}
 export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
@@ -1285,12 +1469,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         // Cmd/Ctrl+ArrowDown to the last -- confirmed live (Attio's own help
         // drawer documents "Jump to top"/"Jump to bottom" on these exact
         // bindings). `!e.shiftKey` guards this from stealing Cmd+Shift+Arrow,
-        // a separate gesture (#773, extend-selection-to-first/last) that falls
-        // through to the Shift+Arrow branch below untouched. Placed before that
-        // branch for the same reason: without the guard, Cmd+Shift+Arrow would
-        // still reach it (that branch doesn't check metaKey/ctrlKey either),
-        // just not do the "jump" part -- the guard here is what keeps the two
-        // gestures from fighting over the same keys.
+        // the separate #773 gesture (extend-selection-to-first/last) handled
+        // in its own branch right below.
         if ((e.metaKey || e.ctrlKey) &&
             !e.shiftKey &&
             (e.key === "ArrowUp" || e.key === "ArrowDown")) {
@@ -1303,6 +1483,34 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             clipboardProxyRef.current?.select();
             return;
         }
+        // crisp/#773: Cmd/Ctrl+Shift+Up/Down extends the row-checkbox selection
+        // all the way to the first/last row in one keystroke -- confirmed live,
+        // the "jump" sibling of #749's one-step Shift+Arrow below, sharing the
+        // same anchor→destination-span recompute (only the destination differs:
+        // 0 / rows.length-1 instead of r±1). Checked ahead of #749's own branch
+        // so the modifier routes here instead of being swallowed as a one-step
+        // Shift+Arrow.
+        if (selectable &&
+            (e.metaKey || e.ctrlKey) &&
+            e.shiftKey &&
+            (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            const nr0 = e.key === "ArrowDown" ? rows.length - 1 : 0;
+            e.preventDefault();
+            const anchorId = rowSelectAnchor ?? selCell.id;
+            const anchorIdx = rows.findIndex((row) => row.id === anchorId);
+            if (anchorIdx < 0)
+                return;
+            setRowSelectAnchor(anchorId);
+            const lo = Math.min(anchorIdx, nr0);
+            const hi = Math.max(anchorIdx, nr0);
+            setSelected(new Set(rows.slice(lo, hi + 1).map((row) => row.id)));
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            return;
+        }
         // crisp/#749: Shift+ArrowUp/Down extends the row-checkbox selection --
         // confirmed live, distinct from Shift+Click's cell-range gesture above
         // (that one is `selAnchor`; this is `rowSelectAnchor`, and the two
@@ -1333,12 +1541,38 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             clipboardProxyRef.current?.select();
             return;
         }
+        // crisp/#770: Shift+Space toggles the current row's own checkbox without
+        // moving the selected cell or touching any other row -- distinct from
+        // #749/#773 above, whose Shift+Arrow gestures move the cursor as they
+        // extend the range.
+        if (selectable && e.shiftKey && e.key === " ") {
+            e.preventDefault();
+            toggleRow(selCell.id);
+            return;
+        }
+        // crisp/#771: Cmd/Ctrl+Enter always opens the row's record page,
+        // regardless of whether the current column is editable -- distinct from
+        // plain Enter below, which opens the cell's own editor first when one
+        // exists.
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            if (onRowClick) {
+                const r0 = rows.findIndex((row) => row.id === selCell.id);
+                if (r0 < 0)
+                    return;
+                e.preventDefault();
+                onRowClick(rows[r0]);
+            }
+            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;
+        // #772/#773 (Cmd/Ctrl±Shift+Up/Down) are both handled in their own
+        // early-return branches above, before `r`/`c` are even computed -- a
+        // plain arrow (no modifier) is the only thing that reaches here.
         if (e.key === "ArrowUp")
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
@@ -1350,6 +1584,33 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             nc = forward ? Math.min(columns.length - 1, c + 1) : Math.max(0, c - 1);
         }
+        // crisp/#769: Tab/Shift+Tab move to the next/previous cell in reading
+        // order, wrapping to the next (or previous) row at a row boundary. This
+        // is pure logical/DOM order, not a visual direction, so unlike Left/Right
+        // above it needs no RTL handling -- native tab order doesn't flip under
+        // RTL either. At the grid's first/last cell there's nowhere left to go:
+        // return without `preventDefault`, so Tab still falls through to the
+        // browser's native focus order instead of getting trapped.
+        else if (e.key === "Tab" && !e.shiftKey) {
+            if (c + 1 < columns.length)
+                nc = c + 1;
+            else if (r + 1 < rows.length) {
+                nr = r + 1;
+                nc = 0;
+            }
+            else
+                return;
+        }
+        else if (e.key === "Tab" && e.shiftKey) {
+            if (c - 1 >= 0)
+                nc = c - 1;
+            else if (r - 1 >= 0) {
+                nr = r - 1;
+                nc = columns.length - 1;
+            }
+            else
+                return;
+        }
         // crisp/#607, G-066/G-068: End jumps to the last row (confirmed live --
         // it also triggers Attio's own lazy-load, which is a data-loading
         // concern outside this component; the #577 scroll-into-view effect
@@ -1429,17 +1690,23 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // value while showing the rejection's message beside the cell (reject).
     // The revert needs no extra code: this component never mutates `data`
     // itself, so once `editing` clears, the cell simply shows `data` again.
-    function commitEdit(id, key, value) {
+    // crisp/#816 -- `keepEditing` lets a multi-value editor stay open across
+    // a commit (adding/removing one value must not close the whole cell, the
+    // way it does for every other, single-value editor). Default false
+    // preserves every existing editor's own close-on-commit behaviour.
+    function commitEdit(id, key, value, keepEditing = false) {
         setEditError(null);
         const result = onEdit?.(id, key, value);
         if (result && typeof result.then === "function") {
             setPending({ id, key });
             result.then(() => {
                 setPending(null);
-                setEditing(null);
+                if (!keepEditing)
+                    setEditing(null);
             }, (err) => {
                 setPending(null);
-                setEditing(null);
+                if (!keepEditing)
+                    setEditing(null);
                 setEditError({
                     id,
                     key,
@@ -1452,7 +1719,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             });
             return;
         }
-        setEditing(null);
+        if (!keepEditing)
+            setEditing(null);
     }
     const reduceMotion = usePrefersReducedMotion();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
@@ -1977,7 +2245,9 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 if (isEditing &&
                                                     (col.editor === "select" ||
                                                         col.editor === "reference" ||
-                                                        col.editor === "actor")) {
+                                                        col.editor === "actor" ||
+                                                        col.editor === "phone" ||
+                                                        col.editor === "datetime")) {
                                                     return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
                                                         // Same as the plain text editor's own cell:
                                                         // opening/using the picker must not also fire
@@ -1989,7 +2259,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                         // portaled popover, so a handler here can't
                                                         // rely on the key event ever bubbling through
                                                         // this element (#453).
-                                                        onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                        onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : col.editor === "phone" && col.multiValue ? (_jsx(DataPhoneMultiEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v, true) })) : col.editor === "phone" ? (_jsx(DataPhoneEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "datetime" ? (_jsx(DataDateTimeEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing) {
                                                     return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 

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

@@ -7,7 +7,15 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "datatable",
     base: `display: flex; flex-direction: column; gap: ${c.space["2.5"]}; font-family: ${c.font.sans};
-    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; min-height: 49px; border-top: 1px solid ${c.borderSubtle}; }
+    /* The toolbar carried no horizontal inset of its own, so its content
+       (search box, sort/filter chips) sat flush at the table's outer edge
+       (x=0) while the header row's own th/td padding (table.recipe.ts,
+       #465) starts every column's text at 12px -- one row down, the SAME
+       grid's own header cell already begins at that inset. c.space["3"]
+       here just matches the row directly below it, measured live against
+       Attio (the sort/filter row's search chip lines up with the first
+       column header's text, not the grid's raw edge). */
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; min-height: 49px; border-top: 1px solid ${c.borderSubtle}; padding: 0 ${c.space["3"]}; }
     & .crisp-datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
     & .crisp-datatable-search svg { position: absolute; inset-inline-start: ${c.space["2"]}; color: ${c.fgMuted}; pointer-events: none; }
     & .crisp-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; }
@@ -266,12 +274,54 @@ const config = defineRecipe({
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${c.fgMuted}; }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no
+       fill/weight change. */
+    & .crisp-datatable-danger { color: ${c.fgDanger}; }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
        link. */
     & .crisp-datatable-link { color: ${c.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
+    /* phone cell type/editor (#765) -- measured live: the dial-code prefix
+       is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text
+       value already measured elsewhere in this file. */
+    & .crisp-datatable-phone { display: inline-flex; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-datatable-phone-dial { color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; }
+    & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
+    & .crisp-datatable-phone-link { color: ${c.bgBrandSolid}; text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The
+       copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; padding: 5px ${c.space["2"]}; }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: ${c.fgMuted}; flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: ${c.space["1"]}; margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
+    /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
+    & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an
        18px pitch (a 2px gap), an empty star at rgba(0,0,0,0.1), a
        committed/filled star at brand600 (--crisp-bg-brand-solid, an exact