@crisp-ui-kit/crisp 0.55.0 → 0.55.1

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

@@ -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
@@ -1285,12 +1392,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 +1406,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 +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")
@@ -1350,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
@@ -1977,7 +2161,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 +2175,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" ? (_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; }
@@ -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