@crisp-ui-kit/crisp 0.50.0 → 0.52.0

package/dist/esm/product/recordstable/recordstable.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, Copy, CopyPlus, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Avatar } from "../../components/avatar/index.js";
@@ -224,15 +224,17 @@ function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", labels, }
 }
 function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", labels, }) {
     const value = row[column.key];
-    // `render` fully owns the cell's content — no empty-dash fallback, no
-    // type renderer; it's the only thing drawn here (see the doc comment on
+    // `render` fully owns the cell's content — no empty fallback, no type
+    // renderer; it's the only thing drawn here (see the doc comment on
     // `Column.render`).
     if (column.render)
         return _jsx(_Fragment, { children: column.render(value, row) });
     if (value == null ||
         value === "" ||
         (Array.isArray(value) && !value.length)) {
-        return _jsx("span", { className: "crisp-recordstable-muted", children: "\u2014" });
+        // Attio's own empty cell is genuinely blank -- no placeholder character
+        // at all (#412).
+        return null;
     }
     // `format` keeps the type renderer's chrome below and only replaces the
     // text it displays.
@@ -275,11 +277,40 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
 function StatusCell({ column, row, onChange, }) {
     return (_jsx(Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
 }
+// A sentinel that can't collide with a real record id (crisp never generates
+// one, and a consumer's own ids come from their own data store) -- picking
+// this row calls `onCreateReference`, not `onChange` (#449).
+const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
+/** The 16px avatar Attio's own reference picker draws before every option's
+ * label -- a photo when the option carries one, a generic person glyph
+ * otherwise (measured live, #449: Attio's own fallback is an icon, not
+ * initials -- a different, deliberate choice from the entity cell's own
+ * initials fallback elsewhere in this file). */
+function referenceOptionLabel(o) {
+    return (_jsxs("span", { className: "crisp-recordstable-refoption", children: [_jsx(Avatar, { size: "sm", className: "crisp-recordstable-refoption-avatar", children: o.avatar ? (_jsx("img", { src: o.avatar, alt: "" })) : (_jsx(CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
+}
 function ReferenceCell({ column, row, onChange, labels, }) {
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
-            value: o.value,
-            label: o.label,
-        })) }));
+    const [query, setQuery] = React.useState("");
+    const options = (column.refOptions ?? []).map((o) => ({
+        value: o.value,
+        label: referenceOptionLabel(o),
+        keywords: o.label,
+    }));
+    if (column.onCreateReference) {
+        options.push({
+            value: CREATE_REFERENCE_VALUE,
+            label: (_jsxs("span", { className: "crisp-recordstable-refoption crisp-recordstable-refoption--create", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), `Create ${column.createLabel ?? "record"}`] })),
+            // always reachable regardless of the typed query -- it's an action,
+            // not a record to filter away
+            keywords: query,
+        });
+    }
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, onSearchChange: setQuery, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: (v) => {
+            if (v === CREATE_REFERENCE_VALUE)
+                column.onCreateReference?.(query);
+            else
+                onChange(v);
+        }, options: options }));
 }
 function TagsCell({ column, row, options, onChange, labels, }) {
     const value = row[column.key] ?? [];
@@ -302,12 +333,37 @@ function TagsCell({ column, row, options, onChange, labels, }) {
 // reachable from this module's public surface.
 // imported for use here AND re-exported, because a bare `export ... from` does
 // not bind the names locally
-import { formatCellDate, parseCellDate } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, parseCellDate, } from "../../core/index.js";
 export { formatCellDate, parseCellDate };
+// "1998" for a year-only raw value, "Sep 1998" for year-month, and the full
+// "Sep 4, 1998" only once the raw value actually named a day (#312) --
+// DatePickerField's own default format always prints full precision, since
+// as a general calendar field it has no raw string to read a precision from.
+function formatByPrecision(d, precision) {
+    if (precision === "year")
+        return String(d.getFullYear());
+    return d.toLocaleDateString(undefined, {
+        month: "short",
+        day: precision === "month" ? undefined : "numeric",
+        year: "numeric",
+    });
+}
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
     const value = parseCellDate(raw);
-    return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(formatCellDate(d)) }));
+    const precision = raw ? cellDatePrecision(raw) : "day";
+    return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, 
+        // Out of scope for #394 (which added Clear to DatePickerField itself):
+        // a cell's OWN clear-to-empty affordance is a different, unmeasured
+        // question, and this callback's `string` contract has no "empty" of
+        // its own to report yet. Keeps this cell's exact pre-#394 behavior.
+        clearable: false, 
+        // #417: the trigger displays the value at its stored precision
+        // (year-only stays year-only) rather than always a full date.
+        format: (d) => formatByPrecision(d, precision), onChange: (d) => {
+            if (d)
+                onChange(formatCellDate(d));
+        } }));
 }
 /**
  * The "New <object>" create modal — measured from a create-record dialog:
@@ -335,7 +391,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
                 row[col.key] = { name: raw || labels.untitled };
             }
             else if (!raw) {
-                // leave empty fields unset so the cell renders its "—" placeholder
+                // leave empty fields unset so the cell renders blank (#412)
             }
             else if (col.type === "tags") {
                 row[col.key] = raw
@@ -367,7 +423,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
     return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? _jsx(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [_jsx(DialogBody, { children: columns.map((col, i) => (_jsxs("div", { className: "crisp-dialog-field", children: [_jsx("label", { className: "crisp-dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), _jsx(Input, { id: `create-${col.key}`, ref: i === 0 ? firstRef : undefined, value: values[col.key] ?? "", onChange: (e) => set(col.key, e.currentTarget.value), placeholder: labels.setFieldPlaceholder(col.label), onKeyDown: (e) => {
                                 if (e.key === "Enter" && (e.metaKey || e.ctrlKey))
                                     submit();
-                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "crisp-dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, _jsx("span", { className: "crisp-dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "crisp-dialog-more", children: [_jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore }), labels.createMore] }), _jsxs("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: _jsx(CornerDownLeft, { size: 10, strokeWidth: 2 }) })] })] })] })] }));
 }
 /**
  * A measured-style record grid — fully featured. Toolbar (search / sort status /
@@ -1034,7 +1090,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-recordstable-th-label", children: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-recordstable-th-label", children: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         createPortal(_jsxs("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "crisp-recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);

package/dist/esm/product/recordstable/recordstable.recipe.js

@@ -71,6 +71,14 @@ ${toolbarChromeBody("recordstable")}
     & .crisp-recordstable-td--picker .crisp-multiselect-chips .crisp-recordstable-tag { flex-shrink: 0; max-width: none; }
     & .crisp-recordstable-td--picker .crisp-multiselect-chevron { display: none; }
     & .crisp-recordstable-td--picker .crisp-multiselect-placeholder { color: ${c.fgMuted}; }
+    /* reference picker: a leading 16px avatar per option, plus a trailing
+       "Create X" row when the consumer supplies one (#449) -- measured live
+       against Attio's own picker (16px circular avatar, 16px plain icon for
+       the create row, both sitting in the option's existing 8px gap, no new
+       gap value invented). */
+    & .crisp-recordstable-refoption { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordstable-refoption-avatar { flex-shrink: 0; }
+    & .crisp-recordstable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-recordstable-status { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
     & .crisp-recordstable-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; }
     & .crisp-recordstable-cell { display: flex; align-items: center; gap: ${c.space["2"]}; height: 100%; min-width: 0; }
@@ -129,7 +137,7 @@ ${toolbarChromeBody("recordstable")}
     & .crisp-recordstable-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: ${c.space["8"]} ${c.space["4"]}; }
 
     /* summary footer — per-column aggregation, sticky to the bottom */
-    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${c.size.tableRow}; padding: 0; border-top: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
+    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${c.size.tableRow}; padding: 0; border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
     & tfoot .crisp-recordstable-col-check, & tfoot .crisp-recordstable-col-entity { position: sticky; bottom: 0; z-index: 3; }
     & .crisp-recordstable-sum:last-child { border-inline-end: none; }
     & .crisp-recordstable-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${c.space["3"]}; border: none; background: none; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; overflow: hidden; }

package/dist/esm/product/recordstable/recordstable.tag.js

@@ -4,9 +4,14 @@ import { contract as c } from "../../tokens/index.js";
  * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
  * tone's colour.
  *
- * Shared because RecordsTable and RecordPanel render the *same* chip. It used
- * to be pasted into both recipes, and the two copies had already started to
- * drift — adding the measured inset ring meant patching the same rules twice.
+ * Its own module (not pasted into `recordstable.recipe.ts`) because it used
+ * to be shared with `RecordPanel`'s own Details field list too, and the two
+ * copies had already started to drift before that sharing existed — adding
+ * the measured inset ring meant patching the same rules twice. `RecordPanel`
+ * no longer renders a Details list (#448, Attio's own peek doesn't have
+ * one), so `RecordsTable` is this module's only consumer now; kept as its
+ * own file rather than folded back in, since a second consumer showing up
+ * again is exactly how the drift happened the first time.
  */
 export const recordTagCss = `& .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }

package/dist/esm/product/richtext/index.js

@@ -1,2 +1,2 @@
-export { RichTextEditor, } from "./richtext.js";
+export { RICHTEXT_COLOR_TONES, RichTextEditor, } from "./richtext.js";
 export { richtextRecipe } from "./richtext.recipe.js";