@crisp-ui-kit/crisp 0.54.11 → 0.55.1

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

@@ -1,7 +1,7 @@
 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 * as React from "react";
-import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, usePrefersReducedMotion, } from "../../core/index.js";
 // crisp/#601 supersession: a deliberate exception to "DS atoms stay
 // generic; product components compose them" (AUTHORING.md) -- the row's
 // own comment affordance is `CommentCountBadge` (product/comments, #625),
@@ -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,17 @@ 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) };
+}
 // stable pastel tone per string value — colour-coded tags/statuses
 const TAG_TONES = [
     "brand",
@@ -377,6 +391,13 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                 return empty;
             return _jsx(RatingStars, { value: n, max: col.maxRating ?? 5 });
         }
+        case "phone": {
+            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);
@@ -530,6 +551,92 @@ 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/#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
@@ -1033,14 +1140,48 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const colAriaIndex = (i) => ariaColIndexBase + i + 1;
     const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
+    // crisp/#782, ported from RecordsTable's own already-shipped logic: the
+    // header checkbox speaks for the rows you can SEE. Rebuilding the whole
+    // set from `rows` (the filtered/visible set) would silently drop any
+    // selection an active filter is hiding -- add/remove only the visible
+    // rows and leave the rest of `selected` alone.
     function toggleAll() {
-        setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
+        const next = new Set(selected);
+        for (const r of rows) {
+            if (allSelected)
+                next.delete(r.id);
+            else
+                next.add(r.id);
+        }
+        setSelected(next);
     }
     function toggleRow(id) {
         const next = new Set(selected);
         next.has(id) ? next.delete(id) : next.add(id);
         setSelected(next);
     }
+    // crisp/#781: Shift+Click on a row checkbox selects the whole contiguous
+    // range from the last plain click (the anchor) to this row -- confirmed
+    // live, the mouse counterpart to #749's Shift+Arrow keyboard gesture,
+    // sharing the same `rowSelectAnchor` state and the same recompute-the-
+    // whole-span shape (not accumulate) so shift-clicking back toward the
+    // anchor shrinks the same way clicking away from it grows. A plain click
+    // both toggles normally AND re-anchors, so the NEXT Shift+Click extends
+    // from wherever the user last plain-clicked, matching Attio.
+    function toggleRowOrExtend(id, shiftKey) {
+        if (shiftKey && rowSelectAnchor != null) {
+            const anchorIdx = rows.findIndex((r) => r.id === rowSelectAnchor);
+            const idx = rows.findIndex((r) => r.id === id);
+            if (anchorIdx >= 0 && idx >= 0) {
+                const lo = Math.min(anchorIdx, idx);
+                const hi = Math.max(anchorIdx, idx);
+                setSelected(new Set(rows.slice(lo, hi + 1).map((r) => r.id)));
+                return;
+            }
+        }
+        setRowSelectAnchor(id);
+        toggleRow(id);
+    }
     function cycleSort(key) {
         // Clicking a header drives a single sort, as before. Multi-sort is supplied
         // by the caller through the `sort` prop (built in a sort popover).
@@ -1247,6 +1388,52 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
+        // crisp/#772: Cmd/Ctrl+ArrowUp jumps the selected cell to the first row,
+        // 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,
+        // 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")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            e.preventDefault();
+            const nr0 = e.key === "ArrowUp" ? 0 : rows.length - 1;
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            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
@@ -1277,12 +1464,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")
@@ -1294,6 +1507,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
@@ -1398,15 +1638,21 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         }
         setEditing(null);
     }
+    const reduceMotion = usePrefersReducedMotion();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
-    // scrolls it into the rendered window, on both axes. Column scroll-into-
-    // view runs regardless of `height` -- the horizontal scroll container (and
-    // its own virtualization) exists either way; row scroll-into-view only
-    // makes sense once `height` gives the grid an internal vertical scroll
-    // position to move. `widths` is read only indirectly, through `colWidth`'s
-    // closure over it -- biome can't see that, but a column resize while a
-    // cell is selected genuinely needs to re-run this to keep it in view, so
-    // the dependency is real even though the lint rule can't prove it.
+    // scrolls it into the rendered window, on both axes. `renderItems`/
+    // `rowOffsets` are computed unconditionally (`height == null` just makes
+    // them a no-op elsewhere, see the comment above `renderItems`), so this
+    // runs on both axes regardless of `height` too (crisp/#780 -- it used to
+    // gate the vertical half on `height != null`, on the reasoning that only
+    // `height` gives the grid an internal scroll position to move; that's
+    // wrong when the grid's own container still scrolls without an explicit
+    // height, e.g. inside a shorter ancestor, matching `RecordsTable`'s own
+    // already-shipped #257 fix, which had no such gate). `widths` is read only
+    // indirectly, through `colWidth`'s closure over it -- biome can't see
+    // that, but a column resize while a cell is selected genuinely needs to
+    // re-run this to keep it in view, so the dependency is real even though
+    // the lint rule can't prove it.
     // biome-ignore lint/correctness/useExhaustiveDependencies: widths is read via colWidth's closure, see comment above
     React.useEffect(() => {
         if (!selCell)
@@ -1414,28 +1660,37 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         const el = scrollRef.current;
         if (!el)
             return;
-        // Sets `viewport` directly from the SAME value just assigned to the
-        // real DOM property, rather than waiting for a follow-up `scroll` event
-        // to round-trip through the `onScroll` handler above -- a real browser
-        // does fire one when `scrollTop`/`scrollLeft` is set programmatically,
-        // but relying on that would make this effect's own visible result (the
+        // `el.scrollTo` rather than a direct `el.scrollTop =`/`el.scrollLeft =`
+        // assignment (crisp/#780, matching RecordsTable's own #208/#257 rule):
+        // property assignment is ALWAYS instant, so it can never honour a
+        // consumer's own `scroll-behavior: smooth` on this container; `scrollTo`
+        // defers to that CSS when no `behavior` is given, and only forces
+        // `"auto"` under `prefers-reduced-motion`, which is the one case that
+        // must win even over a host page's own smooth-scroll opt-in.
+        const scrollTo = (opts) => el.scrollTo({
+            ...opts,
+            ...(reduceMotion ? { behavior: "auto" } : null),
+        });
+        // Sets `viewport` directly from the SAME value just passed to
+        // `scrollTo`, rather than waiting for a follow-up `scroll` event to
+        // round-trip through the `onScroll` handler above -- a real browser
+        // does fire one when the scroll position changes programmatically, but
+        // relying on that would make this effect's own visible result (the
         // newly-selected cell actually rendering) depend on a second render
         // triggered from outside React's own update, which is both slower and
         // one more thing that has to be true for this to work.
-        if (height != null) {
-            const itemIndex = rowIdToItemIndex.get(selCell.id);
-            if (itemIndex != null) {
-                const itemTop = rowOffsets[itemIndex];
-                const itemBottom = itemTop + renderItems[itemIndex].height;
-                if (itemTop < el.scrollTop) {
-                    el.scrollTop = itemTop;
-                    setViewport((v) => ({ ...v, top: itemTop }));
-                }
-                else if (itemBottom > el.scrollTop + el.clientHeight) {
-                    const newTop = itemBottom - el.clientHeight;
-                    el.scrollTop = newTop;
-                    setViewport((v) => ({ ...v, top: newTop }));
-                }
+        const itemIndex = rowIdToItemIndex.get(selCell.id);
+        if (itemIndex != null) {
+            const itemTop = rowOffsets[itemIndex];
+            const itemBottom = itemTop + renderItems[itemIndex].height;
+            if (itemTop < el.scrollTop) {
+                scrollTo({ top: itemTop });
+                setViewport((v) => ({ ...v, top: itemTop }));
+            }
+            else if (itemBottom > el.scrollTop + el.clientHeight) {
+                const newTop = itemBottom - el.clientHeight;
+                scrollTo({ top: newTop });
+                setViewport((v) => ({ ...v, top: newTop }));
             }
         }
         const ci = columns.findIndex((c) => c.key === selCell.key);
@@ -1445,24 +1700,24 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 left += colWidth(columns[i]);
             const right = left + colWidth(columns[ci]);
             if (left < el.scrollLeft) {
-                el.scrollLeft = left;
+                scrollTo({ left });
                 setViewport((v) => ({ ...v, left }));
             }
             else if (right > el.scrollLeft + el.clientWidth) {
                 const newLeft = right - el.clientWidth;
-                el.scrollLeft = newLeft;
+                scrollTo({ left: newLeft });
                 setViewport((v) => ({ ...v, left: newLeft }));
             }
         }
     }, [
         selCell,
-        height,
         columns,
         widths,
         selectable,
         rowIdToItemIndex,
         rowOffsets,
         renderItems,
+        reduceMotion,
     ]);
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
     const hasSummary = columns.some((c) => c.summary || c.calc);
@@ -1836,12 +2091,33 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }, onDragEnd: () => {
                                                         setDragRowId(null);
                                                         setDropRowId(null);
-                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), colSlots.map((slot) => {
+                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), 
+                                                        // preventDefault stops the native check/change
+                                                        // this click would otherwise also fire -- this
+                                                        // handler is the single source of truth so a
+                                                        // Shift+Click's range-select and a plain
+                                                        // click's toggle-and-re-anchor never race each
+                                                        // other (crisp/#781).
+                                                        onClick: (e) => {
+                                                            e.preventDefault();
+                                                            toggleRowOrExtend(row.id, e.shiftKey);
+                                                        }, onChange: () => { } }) }) })), colSlots.map((slot) => {
                                                 if (slot.type === "spacer") {
                                                     return (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`));
                                                 }
                                                 const col = columns[slot.i];
                                                 const i = slot.i;
+                                                // crisp/#779, matching RecordsTable's own #231 fix:
+                                                // column 0 is the row's own identity (its name), not
+                                                // a value it holds -- a screen reader crossing the
+                                                // row should read "Google, Employees, 182,000", not a
+                                                // bare "182,000". Spread onto every TableCell this
+                                                // column can render as (every editor branch, not just
+                                                // the default one), since the row-identity semantics
+                                                // don't depend on which editor is open.
+                                                const rowHeaderProps = i === 0
+                                                    ? { as: "th", scope: "row" }
+                                                    : undefined;
                                                 const isEditing = editing?.id === row.id && editing?.key === col.key;
                                                 const value = cellValue(col, row);
                                                 const sticky = dataStickyCol(i);
@@ -1864,14 +2140,14 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 // right). See the `isEditing` block below for their
                                                 // actual editor.
                                                 if (col.editable && col.editor === "switch") {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 // crisp/#760: `editor: "rating"` is the same always-
                                                 // live shape as `switch` above -- clicking a star IS
                                                 // the commit gesture, confirmed live.
                                                 if (col.editable && col.editor === "rating") {
                                                     const n = typeof value === "number" ? value : Number(value);
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 // crisp/#761: `editor: "checkbox"` is a THIRD always-
                                                 // live boolean shape, distinct from `switch` --
@@ -1880,13 +2156,15 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 // toggle. Reuses crisp's own `Checkbox` (already the
                                                 // measured 16px/r6/brand-fill grid checkbox).
                                                 if (col.editable && col.editor === "checkbox") {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing &&
                                                     (col.editor === "select" ||
                                                         col.editor === "reference" ||
-                                                        col.editor === "actor")) {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                        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
                                                         // the row's onRowClick. Escape is handled by
@@ -1897,10 +2175,10 @@ 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" ? (_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, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
                                                                 // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
                                                                 autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, disabled: isPending, defaultValue: col.type === "date"
                                                                     ? toDateInputValue(value)
@@ -1959,7 +2237,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 const isExpanded = expandedCell?.id === row.id &&
                                                     expandedCell?.key === col.key;
                                                 const cellContent = (_jsxs(_Fragment, { children: [!isExpanded && rendered, errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && (_jsx("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }));
-                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
+                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: col.editable
                                                             ? "crisp-datatable-editable"
                                                             : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                             ? ""

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; }
@@ -272,6 +280,15 @@ const config = defineRecipe({
        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; }
+    /* 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

package/dist/esm/components/resizablepanel/resizablepanel.js

@@ -122,6 +122,15 @@ export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeC
         const finalWidth = rect ? Math.round(rect.width) : width;
         commitSize(finalWidth);
     }
+    // crisp/#795: double-click resets to `defaultSize`, confirmed live on
+    // Attio's own record-page divider (dragged 722px -> 924px, double-click
+    // snapped it back to exactly 722px -- its own default/initial width, not
+    // some other fixed value). Reuses `commitSize`, the same commit path a
+    // drag already uses, so persistence (`storageKey`) picks up the reset the
+    // same way it picks up a drag -- no separate reset-specific write.
+    function onHandleDoubleClick() {
+        commitSize(defaultSize);
+    }
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
     const panelSizeStyle = {
         width,
@@ -130,6 +139,6 @@ export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeC
     };
     return (_jsxs("div", { ref: containerRef, className: resizablepanelRecipe({ className }), ...rest, children: [_jsx("div", { className: "crisp-resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), _jsxs("div", { ref: panelRef, className: "crisp-resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [_jsx("div", { className: "crisp-resizablepanel-inner", children: children }), _jsx("div", { className: handleVariant === "column"
                             ? "crisp-resizablepanel-handle crisp-resizablepanel-handle--column"
-                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && (_jsx("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onDoubleClick: onHandleDoubleClick, children: handleVariant === "column" && (_jsx("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
 }
 ResizablePanel.displayName = "ResizablePanel";

package/dist/esm/components/table/table.js

@@ -28,7 +28,14 @@ export const TableRow = React.forwardRef((props, ref) => _jsx("tr", { ref: ref,
 TableRow.displayName = "TableRow";
 export const TableHead = React.forwardRef(({ align, ...props }, ref) => _jsx("th", { ref: ref, "data-align": align, ...props }));
 TableHead.displayName = "TableHead";
-export const TableCell = React.forwardRef(({ align, ...props }, ref) => _jsx("td", { ref: ref, "data-align": align, ...props }));
+export const TableCell = React.forwardRef(({ align, as, ...props }, ref) => {
+    // Cast to "td", same as RecordsTable's own dynamic-tag precedent --
+    // `props` (which may carry `scope`) would otherwise need to satisfy
+    // both <td> and <th>'s JSX attribute types at once for a bare union
+    // element name.
+    const Cell = (as ?? "td");
+    return _jsx(Cell, { ref: ref, "data-align": align, ...props });
+});
 TableCell.displayName = "TableCell";
 export const TableCaption = React.forwardRef((props, ref) => _jsx("caption", { ref: ref, ...props }));
 TableCaption.displayName = "TableCaption";